Don't show macOS themed buttons as pressed when the cursor isn't over them

This commit is contained in:
Samuel Elliott 2022-06-12 16:58:13 +01:00
parent b3c9fd8d8b
commit aa08c81a2a
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6

View File

@ -15,17 +15,26 @@ function ButtonMac(props: {
const window_focused = useContext(WindowFocusedContext);
const accent_colour = useAccentColour();
const [hovered, setMouseOver] = useState(false);
const onMouseOver = useCallback(() => setMouseOver(true), []);
const onMouseOut = useCallback(() => setMouseOver(false), []);
const [pressed, setPressIn] = useState(false);
const onPressIn = useCallback(() => setPressIn(true), []);
const onPressOut = useCallback(() => setPressIn(false), []);
const active = window_focused && (props.primary || pressed);
const pressed_appearance = window_focused && pressed && hovered;
const active = window_focused && (props.primary || pressed_appearance);
return <Pressable
style={[
styles.button,
active ? {backgroundColor: props.color ?? accent_colour} : null,
]}
// @ts-expect-error react-native-web
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onPress={props.onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
@ -33,7 +42,7 @@ function ButtonMac(props: {
<View style={[
styles.inner,
active ? styles.innerActive : null,
active && pressed ? styles.innerPressed : null,
active && pressed_appearance ? styles.innerPressed : null,
]}>
<Text style={styles.text}>{props.title}</Text>
</View>
@ -91,6 +100,7 @@ function ButtonWindows(props: {
const [pressed, setPressIn] = useState(false);
const onPressIn = useCallback(() => setPressIn(true), []);
const onPressOut = useCallback(() => setPressIn(false), []);
const active = window_focused && (props.primary || pressed);
return <Pressable