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