Something went wrong. Try again.
fork of witchsky forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
3.9 kB · 160 lines
TSX
at prod
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161import {createContext, useContext, useMemo} from 'react'import {type GestureResponderEvent, type Insets, type View} from 'react-native'
import {useHaptics} from '#/lib/haptics'import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'import {atoms as a, useTheme} from '#/alf'import {Button, type ButtonProps} from '#/components/Button'import {type Props as SVGIconProps} from '#/components/icons/common'import {Text, type TextProps} from '#/components/Typography'
export const DEFAULT_HITSLOP = {top: 5, bottom: 10, left: 10, right: 10}
const PostControlContext = createContext<{ big?: boolean active?: boolean color?: {color: string}}>({})PostControlContext.displayName = 'PostControlContext'
// Base button style, which the the other ones extendexport function PostControlButton({ ref, onPress, onLongPress, children, big, active, activeColor, ...props}: Omit<ButtonProps, 'hitSlop'> & { ref?: React.Ref<React.ComponentRef<typeof View>> active?: boolean big?: boolean color?: string activeColor?: string hitSlop?: Insets}) { const t = useTheme() const haptics = useHaptics()
const enableSquareButtons = useEnableSquareButtons()
const ctx = useMemo( () => ({ big, active, color: { color: activeColor && active ? activeColor : t.palette.contrast_500, }, }), [big, active, activeColor, t.palette.contrast_500], )
const style = useMemo( () => [ a.flex_row, a.align_center, a.gap_xs, a.bg_transparent, {padding: 5}, ], [], )
const handlePress = useMemo(() => { if (onPress) { return (evt: GestureResponderEvent) => { if ( (evt.nativeEvent as unknown as MouseEvent).shiftKey && onLongPress ) { onLongPress(evt) return } haptics.tap() onPress(evt) } } // RN Web needs onPress defined for touch tracking when only long-pressing. if (onLongPress) { return () => {} } return undefined }, [onPress, onLongPress, haptics])
const handleLongPress = useMemo(() => { if (!onLongPress) return return (evt: GestureResponderEvent) => { haptics.longPress() onLongPress(evt) } }, [onLongPress, haptics])
return ( <Button ref={ref} onPress={handlePress} onLongPress={handleLongPress} style={style} hoverStyle={t.atoms.bg_contrast_25} shape={enableSquareButtons ? 'square' : 'round'} variant="ghost" color="secondary" {...props} {...(onLongPress ? {dataSet: {keyboardDropdown: 'true'}} : {})} hitSlop={{ ...DEFAULT_HITSLOP, ...(props.hitSlop || {}), }}> {typeof children === 'function' ? ( args => ( <PostControlContext.Provider value={ctx}> {children(args)} </PostControlContext.Provider> ) ) : ( <PostControlContext.Provider value={ctx}> {children} </PostControlContext.Provider> )} </Button> )}
export function PostControlButtonIcon({ icon: Comp, style, ...rest}: SVGIconProps & { icon: React.ComponentType<SVGIconProps>}) { const {big, color} = useContext(PostControlContext)
return ( <Comp style={[color, a.pointer_events_none, style]} {...rest} width={big ? 22 : 18} /> )}
export function PostControlButtonText({style, ...props}: TextProps) { const {big, active, color} = useContext(PostControlContext)
return ( <Text style={[ color, a.user_select_none, big ? a.text_md : a.text_sm, active && a.font_semi_bold, // prevent layout shift on android {includeFontPadding: false, textAlignVertical: 'center'}, style, ]} {...props} /> )}