fix other buttons in dialogs

This commit is contained in:
Hailey
2024-10-02 11:35:52 -07:00
parent 1ea82c38ea
commit f558eb6777
4 changed files with 38 additions and 25 deletions
+10 -12
View File
@@ -71,7 +71,7 @@ export const NormalizedRNGHPressable = React.forwardRef<View, PressableProps>(
onFocus: _onFocus, onFocus: _onFocus,
...rest ...rest
}, },
ref, _ref,
) { ) {
const onNormalizedPress = (event: PressableEvent) => { const onNormalizedPress = (event: PressableEvent) => {
if (!onPress) return if (!onPress) return
@@ -104,17 +104,15 @@ export const NormalizedRNGHPressable = React.forwardRef<View, PressableProps>(
} }
return ( return (
<View ref={ref}> <BSPressable
<BSPressable onPress={onNormalizedPress}
onPress={onNormalizedPress} onLongPress={onNormalizedLongPress}
onLongPress={onNormalizedLongPress} onPressIn={onNormalizedPressIn}
onPressIn={onNormalizedPressIn} onPressOut={onNormalizedPressOut}
onPressOut={onNormalizedPressOut} onHoverIn={onNormalizedHoverIn}
onHoverIn={onNormalizedHoverIn} onHoverOut={onNormalizedHoverOut}
onHoverOut={onNormalizedHoverOut} {...rest}
{...rest} />
/>
</View>
) )
}, },
) )
+15 -7
View File
@@ -31,6 +31,7 @@ import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/P
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
import {Loader} from '#/components/Loader' import {Loader} from '#/components/Loader'
import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
import * as Prompt from '#/components/Prompt' import * as Prompt from '#/components/Prompt'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
@@ -169,7 +170,8 @@ function MutedWordsInner() {
<Toggle.Item <Toggle.Item
label={_(msg`Mute this word until you unmute it`)} label={_(msg`Mute this word until you unmute it`)}
name="forever" name="forever"
style={[a.flex_1]}> style={[a.flex_1]}
PressableComponent={NormalizedRNGHPressable}>
<TargetToggle> <TargetToggle>
<View <View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -184,7 +186,8 @@ function MutedWordsInner() {
<Toggle.Item <Toggle.Item
label={_(msg`Mute this word for 24 hours`)} label={_(msg`Mute this word for 24 hours`)}
name="24_hours" name="24_hours"
style={[a.flex_1]}> style={[a.flex_1]}
PressableComponent={NormalizedRNGHPressable}>
<TargetToggle> <TargetToggle>
<View <View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -208,7 +211,8 @@ function MutedWordsInner() {
<Toggle.Item <Toggle.Item
label={_(msg`Mute this word for 7 days`)} label={_(msg`Mute this word for 7 days`)}
name="7_days" name="7_days"
style={[a.flex_1]}> style={[a.flex_1]}
PressableComponent={NormalizedRNGHPressable}>
<TargetToggle> <TargetToggle>
<View <View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -223,7 +227,8 @@ function MutedWordsInner() {
<Toggle.Item <Toggle.Item
label={_(msg`Mute this word for 30 days`)} label={_(msg`Mute this word for 30 days`)}
name="30_days" name="30_days"
style={[a.flex_1]}> style={[a.flex_1]}
PressableComponent={NormalizedRNGHPressable}>
<TargetToggle> <TargetToggle>
<View <View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -257,7 +262,8 @@ function MutedWordsInner() {
<Toggle.Item <Toggle.Item
label={_(msg`Mute this word in post text and tags`)} label={_(msg`Mute this word in post text and tags`)}
name="content" name="content"
style={[a.flex_1]}> style={[a.flex_1]}
PressableComponent={NormalizedRNGHPressable}>
<TargetToggle> <TargetToggle>
<View <View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -273,7 +279,8 @@ function MutedWordsInner() {
<Toggle.Item <Toggle.Item
label={_(msg`Mute this word in tags only`)} label={_(msg`Mute this word in tags only`)}
name="tag" name="tag"
style={[a.flex_1]}> style={[a.flex_1]}
PressableComponent={NormalizedRNGHPressable}>
<TargetToggle> <TargetToggle>
<View <View
style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -303,7 +310,8 @@ function MutedWordsInner() {
name="exclude_following" name="exclude_following"
style={[a.flex_row, a.justify_between]} style={[a.flex_row, a.justify_between]}
value={excludeFollowing} value={excludeFollowing}
onChange={setExcludeFollowing}> onChange={setExcludeFollowing}
PressableComponent={NormalizedRNGHPressable}>
<TargetToggle> <TargetToggle>
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Toggle.Checkbox /> <Toggle.Checkbox />
+6 -4
View File
@@ -1,9 +1,9 @@
import React from 'react' import React from 'react'
import {Pressable, View, ViewStyle} from 'react-native' import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
import Animated, {LinearTransition} from 'react-native-reanimated' import Animated, {LinearTransition} from 'react-native-reanimated'
import {HITSLOP_10} from '#/lib/constants'
import {isNative} from '#/platform/detection' import {isNative} from '#/platform/detection'
import {HITSLOP_10} from 'lib/constants'
import { import {
atoms as a, atoms as a,
flatten, flatten,
@@ -68,6 +68,7 @@ export type ItemProps = ViewStyleProp & {
onChange?: (selected: boolean) => void onChange?: (selected: boolean) => void
isInvalid?: boolean isInvalid?: boolean
children: ((props: ItemState) => React.ReactNode) | React.ReactNode children: ((props: ItemState) => React.ReactNode) | React.ReactNode
PressableComponent?: React.ComponentType<PressableProps>
} }
export function useItemContext() { export function useItemContext() {
@@ -159,6 +160,7 @@ export function Item({
style, style,
type = 'checkbox', type = 'checkbox',
label, label,
PressableComponent = Pressable,
...rest ...rest
}: ItemProps) { }: ItemProps) {
const { const {
@@ -206,7 +208,7 @@ export function Item({
return ( return (
<ItemContext.Provider value={state}> <ItemContext.Provider value={state}>
<Pressable <PressableComponent
accessibilityHint={undefined} // optional accessibilityHint={undefined} // optional
hitSlop={HITSLOP_10} hitSlop={HITSLOP_10}
{...rest} {...rest}
@@ -231,7 +233,7 @@ export function Item({
onBlur={onBlur} onBlur={onBlur}
style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}> style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
{typeof children === 'function' ? children(state) : children} {typeof children === 'function' ? children(state) : children}
</Pressable> </PressableComponent>
</ItemContext.Provider> </ItemContext.Provider>
) )
} }
+7 -2
View File
@@ -13,6 +13,7 @@ import * as TextField from '#/components/forms/TextField'
import * as ToggleButton from '#/components/forms/ToggleButton' import * as ToggleButton from '#/components/forms/ToggleButton'
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
import {InlineLinkText} from '#/components/Link' import {InlineLinkText} from '#/components/Link'
import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
import {P, Text} from '#/components/Typography' import {P, Text} from '#/components/Typography'
export function ServerInputDialog({ export function ServerInputDialog({
@@ -83,7 +84,10 @@ export function ServerInputDialog({
label="Preferences" label="Preferences"
values={fixedOption} values={fixedOption}
onChange={setFixedOption}> onChange={setFixedOption}>
<ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}> <ToggleButton.Button
name={BSKY_SERVICE}
label={_(msg`Bluesky`)}
PressableComponent={NormalizedRNGHPressable}>
<ToggleButton.ButtonText> <ToggleButton.ButtonText>
{_(msg`Bluesky`)} {_(msg`Bluesky`)}
</ToggleButton.ButtonText> </ToggleButton.ButtonText>
@@ -91,7 +95,8 @@ export function ServerInputDialog({
<ToggleButton.Button <ToggleButton.Button
testID="customSelectBtn" testID="customSelectBtn"
name="custom" name="custom"
label={_(msg`Custom`)}> label={_(msg`Custom`)}
PressableComponent={NormalizedRNGHPressable}>
<ToggleButton.ButtonText> <ToggleButton.ButtonText>
{_(msg`Custom`)} {_(msg`Custom`)}
</ToggleButton.ButtonText> </ToggleButton.ButtonText>