acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[Sheets] [Pt. 7] Part seven rework, much simplier! (#5582)

Browse Source
This commit is contained in:
Hailey
2024-10-02 21:11:27 -07:00
committed by GitHub
parent 0ed5d48e02
commit ecf7215a34
15 changed files with 341 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BottomSheetButton.tsx
+12
View File
@@ -0,0 +1,12 @@
import React from 'react'
import {Button, ButtonProps} from '#/components/Button'
import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
export function BottomSheetButton({children, ...rest}: ButtonProps) {
return (
<Button {...rest} Component={NormalizedRNGHPressable}>
{children}
</Button>
)
}
src/components/BottomSheetLink.tsx
+92
View File
@@ -0,0 +1,92 @@
import React from 'react'
import {StackActions, useNavigation} from '@react-navigation/native'
import {NavigationProp} from '#/lib/routes/types'
import {flatten, useTheme} from '#/alf'
import {useDialogContext} from '#/components/Dialog'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {InlineLinkProps, useLink} from '#/components/Link'
import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
import {Text} from '#/components/Typography'
import {router} from '#/routes'
export function BottomSheetInlineLinkText({
children,
to,
action = 'push',
disableMismatchWarning,
style,
onPress: outerOnPress,
label,
shareOnLongPress,
disableUnderline,
...rest
}: InlineLinkProps) {
const t = useTheme()
const stringChildren = typeof children === 'string'
const navigation = useNavigation<NavigationProp>()
const dialog = useDialogContext()
const {href, isExternal, onLongPress} = useLink({
to,
displayText: stringChildren ? children : '',
action,
disableMismatchWarning,
onPress: outerOnPress,
shareOnLongPress,
})
const {
state: pressed,
onIn: onPressIn,
onOut: onPressOut,
} = useInteractionState()
const onPress = () => {
if (isExternal) {
return
}
dialog.close()
if (action === 'push') {
navigation.dispatch(StackActions.push(...router.matchPath(href)))
} else if (action === 'replace') {
navigation.dispatch(StackActions.replace(...router.matchPath(href)))
} else if (action === 'navigate') {
// @ts-ignore
navigation.navigate(...router.matchPath(href))
} else {
throw Error('Unsupported navigator action.')
}
}
const flattenedStyle = flatten(style) || {}
// eslint-disable-next-line bsky-internal/avoid-unwrapped-text
return (
<NormalizedRNGHPressable
onPress={onPress}
onLongPress={onLongPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
role="link"
accessibilityLabel={label}
accessibilityHint=""
style={{flexDirection: 'row'}}>
<Text
{...rest}
style={[
{color: t.palette.primary_500},
pressed &&
!disableUnderline && {
textDecorationLine: 'underline',
textDecorationColor:
flattenedStyle.color ?? t.palette.primary_500,
},
flattenedStyle,
]}>
{children}
</Text>
</NormalizedRNGHPressable>
)
}
src/components/BottomSheetLink.web.tsx
+3
View File
@@ -0,0 +1,3 @@
import {Link as BottomSheetLink} from './Link'
export {BottomSheetLink}
src/components/Button.tsx
+18 -2
View File
@@ -15,7 +15,9 @@ import {
import {LinearGradient} from 'expo-linear-gradient'
import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
import {useDialogContext} from '#/components/Dialog'
import {Props as SVGIconProps} from '#/components/icons/common'
import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
import {Text} from '#/components/Typography'
export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
@@ -87,6 +89,7 @@ export type ButtonProps = Pick<
style?: StyleProp<ViewStyle>
hoverStyle?: StyleProp<ViewStyle>
children: NonTextElements | ((context: ButtonContext) => NonTextElements)
Component?: React.ComponentType<PressableProps>
}
export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
@@ -114,10 +117,22 @@ export const Button = React.forwardRef<View, ButtonProps>(
disabled = false,
style,
hoverStyle: hoverStyleProp,
Component,
...rest
},
ref,
) => {
// This will pick the correct default pressable to use. If we are inside a dialog, we need to use the RNGH
// pressable so that it is usable inside the dialog.
const {insideDialog} = useDialogContext()
if (!Component) {
if (insideDialog) {
Component = NormalizedRNGHPressable
} else {
Component = Pressable
}
}
const t = useTheme()
const [state, setState] = React.useState({
pressed: false,
@@ -449,10 +464,11 @@ export const Button = React.forwardRef<View, ButtonProps>(
const flattenedBaseStyles = flatten([baseStyles, style])
return (
<Pressable
<Component
role="button"
accessibilityHint={undefined} // optional
{...rest}
// @ts-expect-error ref type
ref={ref}
aria-label={label}
aria-pressed={state.pressed}
@@ -500,7 +516,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
<Context.Provider value={context}>
{typeof children === 'function' ? children(context) : children}
</Context.Provider>
</Pressable>
</Component>
)
},
)
src/components/Dialog/context.ts
+1
View File
@@ -9,6 +9,7 @@ import {
export const Context = React.createContext<DialogContextProps>({
close: () => {},
insideDialog: false,
})
export function useDialogContext() {
src/components/Dialog/index.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export function Outer({
[open, close],
)
const context = React.useMemo(() => ({close}), [close])
const context = React.useMemo(() => ({close, insideDialog: true}), [close])
return (
<Portal>
src/components/Dialog/types.ts
+1
View File
@@ -37,6 +37,7 @@ export type DialogControlProps = DialogControlRefProps & {
export type DialogContextProps = {
close: DialogControlProps['close']
insideDialog: boolean
}
export type DialogControlOpenOptions = {
src/components/Link.tsx
+43 -3
View File
@@ -23,6 +23,7 @@ import {shouldClickOpenNewTab} from '#/platform/urls'
import {useModalControls} from '#/state/modals'
import {useOpenLink} from '#/state/preferences/in-app-browser'
import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {Button, ButtonProps} from '#/components/Button'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {Text, TextProps} from '#/components/Typography'
@@ -103,17 +104,17 @@ export function useLink({
linkRequiresWarning(href, displayText),
)
if (requiresWarning) {
if (isWeb) {
e.preventDefault()
}
if (requiresWarning) {
openModal({
name: 'link-warning',
text: displayText,
href: href,
})
} else {
e.preventDefault()
if (isExternal) {
openLink(href)
} else {
@@ -241,6 +242,45 @@ export function Link({
)
}
export function BottomSheetLink({
children,
to,
action = 'push',
onPress: outerOnPress,
download,
...rest
}: LinkProps) {
const {href, isExternal, onPress} = useLink({
to,
displayText: typeof children === 'string' ? children : '',
action,
onPress: outerOnPress,
})
return (
<BottomSheetButton
{...rest}
style={[a.justify_start, flatten(rest.style)]}
role="link"
accessibilityRole="link"
href={href}
onPress={download ? undefined : onPress}
{...web({
hrefAttrs: {
target: download ? undefined : isExternal ? 'blank' : undefined,
rel: isExternal ? 'noopener noreferrer' : undefined,
download,
},
dataSet: {
// no underline, only `InlineLink` has underlines
noUnderline: '1',
},
})}>
{children}
</BottomSheetButton>
)
}
export type InlineLinkProps = React.PropsWithChildren<
BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
> &
src/components/Menu/index.tsx
+3 -3
View File
@@ -1,6 +1,5 @@
import React from 'react'
import {StyleProp, View, ViewStyle} from 'react-native'
import {BlueskyBottomSheetPressable as Pressable} from '@haileyok/bluesky-bottom-sheet'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import flattenReactChildren from 'react-keyed-flatten-children'
@@ -19,6 +18,7 @@ import {
ItemTextProps,
TriggerProps,
} from '#/components/Menu/types'
import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
import {Text} from '#/components/Typography'
export {
@@ -117,7 +117,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
} = useInteractionState()
return (
<Pressable
<NormalizedRNGHPressable
{...rest}
accessibilityHint=""
accessibilityLabel={label}
@@ -151,7 +151,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
<ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
{children}
</ItemContext.Provider>
</Pressable>
</NormalizedRNGHPressable>
)
}
src/components/Menu/types.ts
+2 -4
View File
@@ -4,8 +4,6 @@ import {
GestureResponderEvent,
PressableProps,
} from 'react-native'
import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
import {BueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
import {TextStyleProp, ViewStyleProp} from '#/alf'
import * as Dialog from '#/components/Dialog'
@@ -89,10 +87,10 @@ export type TriggerChildProps =
}
export type ItemProps = React.PropsWithChildren<
Omit<BueskyBottomSheetPressableProps, 'style'> &
Omit<PressableProps, 'style'> &
ViewStyleProp & {
label: string
onPress: (e: PressableEvent | GestureResponderEvent) => void
onPress: (e: GestureResponderEvent) => void
}
>
src/components/NormalizedRNGHPressable.tsx
+128
View File
@@ -0,0 +1,128 @@
import React from 'react'
import {
GestureResponderEvent,
MeasureOnSuccessCallback,
NativeMouseEvent,
NativeSyntheticEvent,
PressableProps,
} from 'react-native'
import {Pressable as BSPressable} from 'react-native-gesture-handler'
import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
function pressableEventToGestureResponderEvent(
event: PressableEvent,
target: NormalizedRNGHPressable,
): GestureResponderEvent {
return {
nativeEvent: {
...event.nativeEvent,
touches: [],
changedTouches: [],
identifier: event.nativeEvent.identifier.toString(),
target: event.nativeEvent.target.toString(),
},
// @ts-expect-error
target: target,
// @ts-expect-error
currentTarget: target,
preventDefault() {},
stopPropagation() {},
cancelable: false,
defaultPrevented: false,
eventPhase: 0,
isTrusted: false,
bubbles: false,
timeStamp: event.nativeEvent.timestamp,
isDefaultPrevented(): boolean {
return false
},
isPropagationStopped(): boolean {
return false
},
persist() {},
type: 'press',
}
}
function pressableEventToMouseEvent(
event: PressableEvent,
target: NormalizedRNGHPressable,
): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
return {
...event.nativeEvent,
// @ts-expect-error
target: target,
// @ts-expect-error
currentTarget: target,
preventDefault() {},
stopPropagation() {},
cancelable: false,
defaultPrevented: false,
eventPhase: 0,
isTrusted: false,
bubbles: false,
timeStamp: event.nativeEvent.timestamp,
}
}
export class NormalizedRNGHPressable extends React.Component<PressableProps> {
static displayName = 'Pressable'
measure = (_: MeasureOnSuccessCallback) => {}
measureLayout = (_: number) => {}
measureInWindow = (
_: (x: number, y: number, width: number, height: number) => void,
) => {}
setNativeProps = (_: PressableProps) => {}
focus = () => {}
blur = () => {}
onPress = (event: PressableEvent) => {
if (!this.props.onPress) return
this.props.onPress(pressableEventToGestureResponderEvent(event, this))
}
onLongPress = (event: PressableEvent) => {
if (!this.props.onLongPress) return
this.props.onLongPress(pressableEventToGestureResponderEvent(event, this))
}
onPressIn = (event: PressableEvent) => {
if (!this.props.onPressIn) return
this.props.onPressIn(pressableEventToGestureResponderEvent(event, this))
}
onPressOut = (event: PressableEvent) => {
if (!this.props.onPressOut) return
this.props.onPressOut(pressableEventToGestureResponderEvent(event, this))
}
onHoverIn = (event: PressableEvent) => {
if (!this.props.onHoverIn) return
this.props.onHoverIn(pressableEventToMouseEvent(event, this))
}
onHoverOut = (event: PressableEvent) => {
if (!this.props.onHoverOut) return
this.props.onHoverOut(pressableEventToMouseEvent(event, this))
}
render() {
return (
<BSPressable
{...this.props}
onPress={this.onPress}
onLongPress={this.onLongPress}
onPressIn={this.onPressIn}
onPressOut={this.onPressOut}
onHoverIn={this.onHoverIn}
onHoverOut={this.onHoverOut}
/>
)
}
}
src/components/NormalizedRNGHPressable.web.tsx
+3
View File
@@ -0,0 +1,3 @@
import {Pressable as NormalizedRNGHPressable} from 'react-native'
export {NormalizedRNGHPressable}
src/components/ReportDialog/SelectLabelerView.tsx
+4 -4
View File
@@ -4,10 +4,10 @@ import {AppBskyLabelerDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
import {getLabelingServiceTitle} from '#/lib/moderation'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, useButtonContext} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {useButtonContext} from '#/components/Button'
import {Divider} from '#/components/Divider'
import * as LabelingServiceCard from '#/components/LabelingServiceCard'
import {Text} from '#/components/Typography'
@@ -39,12 +39,12 @@ export function SelectLabelerView({
<View style={[a.gap_sm]}>
{props.labelers.map(labeler => {
return (
<Button
<BottomSheetButton
key={labeler.creator.did}
label={_(msg`Send report to ${labeler.creator.displayName}`)}
onPress={() => props.onSelectLabeler(labeler.creator.did)}>
<LabelerButton labeler={labeler} />
</Button>
</BottomSheetButton>
)
})}
</View>
src/components/ReportDialog/SelectReportOptionView.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {ReportOption, useReportOptions} from '#/lib/moderation/useReportOptions'
import {Link} from '#/components/Link'
import {BottomSheetLink} from '#/components/Link'
import {DMCA_LINK} from '#/components/ReportDialog/const'
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
@@ -129,7 +129,7 @@ export function SelectReportOptionView({
]}>
<Trans>Need to report a copyright violation?</Trans>
</Text>
<Link
<BottomSheetLink
to={DMCA_LINK}
label={_(msg`View details for reporting a copyright violation`)}
size="small"
@@ -139,7 +139,7 @@ export function SelectReportOptionView({
<Trans>View details</Trans>
</ButtonText>
<ButtonIcon position="right" icon={SquareArrowTopRight} />
</Link>
</BottomSheetLink>
</View>
)}
</View>
src/components/moderation/LabelsOnMeDialog.tsx
+27 -23
View File
@@ -13,7 +13,9 @@ import {logger} from '#/logger'
import {useAgent, useSession} from '#/state/session'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
import {ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {InlineLinkText} from '#/components/Link'
import {Text} from '#/components/Typography'
@@ -139,7 +141,7 @@ function Label({
</View>
{!isSelfLabel && (
<View>
<Button
<BottomSheetButton
variant="solid"
color="secondary"
size="small"
@@ -148,7 +150,7 @@ function Label({
<ButtonText>
<Trans>Appeal</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
)}
</View>
@@ -156,23 +158,25 @@ function Label({
<Divider />
<View style={[a.px_md, a.py_sm, t.atoms.bg_contrast_25]}>
<Text style={[t.atoms.text_contrast_medium]}>
{isSelfLabel ? (
{isSelfLabel ? (
<Text style={[t.atoms.text_contrast_medium]}>
<Trans>This label was applied by you.</Trans>
) : (
<Trans>
Source:{' '}
<InlineLinkText
label={sourceName}
to={makeProfileLink(
labeler ? labeler.creator : {did: label.src, handle: ''},
)}
onPress={() => control.close()}>
{sourceName}
</InlineLinkText>
</Trans>
)}
</Text>
</Text>
) : (
<View style={{flexDirection: 'row'}}>
<Text style={[t.atoms.text_contrast_medium]}>
<Trans>Source: </Trans>{' '}
</Text>
<BottomSheetInlineLinkText
label={sourceName}
to={makeProfileLink(
labeler ? labeler.creator : {did: label.src, handle: ''},
)}
onPress={() => control.close()}>
{sourceName}
</BottomSheetInlineLinkText>
</View>
)}
</View>
</View>
)
@@ -275,7 +279,7 @@ function AppealForm({
? [a.flex_row, a.justify_between]
: [{flexDirection: 'column-reverse'}, a.gap_sm]
}>
<Button
<BottomSheetButton
testID="backBtn"
variant="solid"
color="secondary"
@@ -283,8 +287,8 @@ function AppealForm({
onPress={onPressBack}
label={_(msg`Back`)}>
<ButtonText>{_(msg`Back`)}</ButtonText>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
testID="submitBtn"
variant="solid"
color="primary"
@@ -293,7 +297,7 @@ function AppealForm({
label={_(msg`Submit`)}>
<ButtonText>{_(msg`Submit`)}</ButtonText>
{isPending && <ButtonIcon icon={Loader} />}
</Button>
</BottomSheetButton>
</View>
</>
)