diff options
Diffstat (limited to 'src/view/com/util')
-rw-r--r-- | src/view/com/util/PressableWithHover.tsx | 45 | ||||
-rw-r--r-- | src/view/com/util/Selector.tsx | 11 | ||||
-rw-r--r-- | src/view/com/util/moderation/ContentHider.tsx | 2 |
3 files changed, 49 insertions, 9 deletions
diff --git a/src/view/com/util/PressableWithHover.tsx b/src/view/com/util/PressableWithHover.tsx new file mode 100644 index 000000000..09ccb6a2d --- /dev/null +++ b/src/view/com/util/PressableWithHover.tsx @@ -0,0 +1,45 @@ +import React, { + useState, + useCallback, + PropsWithChildren, + forwardRef, + Ref, +} from 'react' +import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native' +import {addStyle} from 'lib/styles' + +interface PressableWithHover extends PressableProps { + hoverStyle: StyleProp<ViewStyle> +} + +export const PressableWithHover = forwardRef( + ( + { + children, + style, + hoverStyle, + ...props + }: PropsWithChildren<PressableWithHover>, + ref: Ref<any>, + ) => { + const [isHovering, setIsHovering] = useState(false) + + const onHoverIn = useCallback(() => setIsHovering(true), [setIsHovering]) + const onHoverOut = useCallback(() => setIsHovering(false), [setIsHovering]) + style = + typeof style !== 'function' && isHovering + ? addStyle(style, hoverStyle) + : style + + return ( + <Pressable + {...props} + style={style} + onHoverIn={onHoverIn} + onHoverOut={onHoverOut} + ref={ref}> + {children} + </Pressable> + ) + }, +) diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx index 03db13bd1..872b78184 100644 --- a/src/view/com/util/Selector.tsx +++ b/src/view/com/util/Selector.tsx @@ -1,10 +1,5 @@ import React, {createRef, useState, useMemo, useRef} from 'react' -import { - Animated, - StyleSheet, - TouchableWithoutFeedback, - View, -} from 'react-native' +import {Animated, Pressable, StyleSheet, View} from 'react-native' import {Text} from './text/Text' import {usePalette} from 'lib/hooks/usePalette' @@ -99,7 +94,7 @@ export function Selector({ {items.map((item, i) => { const selected = i === selectedIndex return ( - <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}> + <Pressable key={item} onPress={() => onPressItem(i)}> <View style={styles.item} ref={itemRefs[i]}> <Text style={ @@ -110,7 +105,7 @@ export function Selector({ {item} </Text> </View> - </TouchableWithoutFeedback> + </Pressable> ) })} </View> diff --git a/src/view/com/util/moderation/ContentHider.tsx b/src/view/com/util/moderation/ContentHider.tsx index c1512171d..42a97cd34 100644 --- a/src/view/com/util/moderation/ContentHider.tsx +++ b/src/view/com/util/moderation/ContentHider.tsx @@ -40,7 +40,7 @@ export function ContentHider({ } if (labelPref.pref === 'hide') { - return <></> + return null } return ( |