Hailey
111 lines
2.4 KiB
TypeScript
111 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
import {AccessibilityProps, ViewStyle} from 'react-native'
|
|
import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
|
|
import {
|
|
BlueskyBottomSheetPressable,
|
|
BlueskyBottomSheetPressableProps,
|
|
} from '@haileyok/bluesky-bottom-sheet'
|
|
|
|
import {atoms as a} from '#/alf'
|
|
import {
|
|
ButtonContext,
|
|
useSharedButtonStyles,
|
|
VariantProps,
|
|
} from '#/components/Button'
|
|
|
|
export function BottomSheetButton({
|
|
children,
|
|
label,
|
|
color,
|
|
variant,
|
|
shape = 'default',
|
|
size,
|
|
disabled,
|
|
style,
|
|
...rest
|
|
}: BlueskyBottomSheetPressableProps &
|
|
AccessibilityProps &
|
|
VariantProps & {
|
|
/**
|
|
* For a11y, try to make this descriptive and clear
|
|
*/
|
|
label: string
|
|
}) {
|
|
const [state, setState] = React.useState({
|
|
pressed: false,
|
|
hovered: false,
|
|
focused: false,
|
|
})
|
|
|
|
const onPressInOuter = rest.onPressIn
|
|
const onPressIn = React.useCallback(
|
|
(e: PressableEvent) => {
|
|
setState(s => ({
|
|
...s,
|
|
pressed: true,
|
|
}))
|
|
onPressInOuter?.(e)
|
|
},
|
|
[setState, onPressInOuter],
|
|
)
|
|
const onPressOutOuter = rest.onPressOut
|
|
const onPressOut = React.useCallback(
|
|
(e: PressableEvent) => {
|
|
setState(s => ({
|
|
...s,
|
|
pressed: false,
|
|
}))
|
|
onPressOutOuter?.(e)
|
|
},
|
|
[setState, onPressOutOuter],
|
|
)
|
|
|
|
const {baseStyles, hoverStyles} = useSharedButtonStyles({
|
|
/**
|
|
* For a11y, try to make this descriptive and clear
|
|
*/
|
|
color,
|
|
variant,
|
|
shape,
|
|
size,
|
|
disabled,
|
|
})
|
|
|
|
const context = React.useMemo<ButtonContext>(
|
|
() => ({
|
|
...state,
|
|
variant,
|
|
color,
|
|
size,
|
|
disabled: disabled || false,
|
|
}),
|
|
[state, variant, color, size, disabled],
|
|
)
|
|
|
|
return (
|
|
<BlueskyBottomSheetPressable
|
|
style={[
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.justify_center,
|
|
baseStyles,
|
|
style as ViewStyle,
|
|
...(state.hovered || state.pressed ? [hoverStyles] : []),
|
|
]}
|
|
aria-label={label}
|
|
aria-pressed={state.pressed}
|
|
accessibilityLabel={label}
|
|
accessibilityHint={undefined}
|
|
accessibilityState={{
|
|
disabled: disabled || false,
|
|
}}
|
|
onPressIn={onPressIn}
|
|
onPressOut={onPressOut}
|
|
{...rest}>
|
|
<ButtonContext.Provider value={context}>
|
|
{typeof children === 'function' ? children(context) : children}
|
|
</ButtonContext.Provider>
|
|
</BlueskyBottomSheetPressable>
|
|
)
|
|
}
|