From c6a8587dc4dd4223f033916df7f23108dc79d603 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 1 Oct 2024 13:54:58 -0700 Subject: [PATCH] progress --- package.json | 4 +- src/components/Dialog/index.tsx | 44 +++++++---------- src/components/Menu/index.tsx | 84 ++++++++++++++------------------- src/components/Menu/types.ts | 13 +++-- yarn.lock | 17 ++++--- 5 files changed, 68 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index cda7b10ff7..ab8bd8ec2f 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-native-fontawesome": "^0.3.2", - "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.2", + "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.3", "@haileyok/bluesky-video": "0.1.10", "@lingui/react": "^4.5.0", "@mattermost/react-native-paste-input": "^0.7.1", @@ -172,7 +172,7 @@ "react-native-compressor": "^1.8.24", "react-native-date-picker": "^4.4.2", "react-native-drawer-layout": "^4.0.0-alpha.3", - "react-native-gesture-handler": "~2.16.2", + "react-native-gesture-handler": "^2.20.0", "react-native-get-random-values": "~1.11.0", "react-native-image-crop-picker": "0.41.2", "react-native-ios-context-menu": "^1.15.3", diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index d5d92048ad..1f9330e320 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -13,8 +13,6 @@ import BottomSheet, { BottomSheetBackdropProps, BottomSheetFlatList, BottomSheetFlatListMethods, - BottomSheetScrollView, - BottomSheetScrollViewMethods, BottomSheetTextInput, BottomSheetView, useBottomSheet, @@ -24,6 +22,7 @@ import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bot import {logger} from '#/logger' import {useDialogStateControlContext} from '#/state/dialogs' +import {ScrollView} from '#/view/com/util/Views' import {atoms as a, flatten, useTheme} from '#/alf' import {Context} from '#/components/Dialog/context' import { @@ -240,32 +239,21 @@ export function Inner({children, style}: DialogInnerProps) { ) } -export const ScrollableInner = React.forwardRef< - BottomSheetScrollViewMethods, - DialogInnerProps ->(function ScrollableInner({children, style}, ref) { - const insets = useSafeAreaInsets() - return ( - - {children} - - - ) -}) +export const ScrollableInner = React.forwardRef( + function ScrollableInner({children, style}, ref) { + const insets = useSafeAreaInsets() + return ( + + {children} + + + ) + }, +) export const InnerFlatList = React.forwardRef< BottomSheetFlatListMethods, diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index a0a21a50f9..05ef68a1a6 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,23 +1,23 @@ import React from 'react' -import {Pressable, StyleProp, View, ViewStyle} from 'react-native' +import {StyleProp, View, ViewStyle} from 'react-native' +import {BlueskyBottomSheetView, Pressable} from '@haileyok/bluesky-bottom-sheet' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import flattenReactChildren from 'react-keyed-flatten-children' -import {isNative} from 'platform/detection' +import {isNative} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' -import * as Dialog from '#/components/Dialog' import {useInteractionState} from '#/components/hooks/useInteractionState' -import {Context, ItemContext} from '#/components/Menu/context' +import {ItemContext} from '#/components/Menu/context' import { - ContextType, GroupProps, ItemIconProps, ItemProps, ItemTextProps, TriggerProps, } from '#/components/Menu/types' +import {Portal} from '#/components/Portal' import {Text} from '#/components/Typography' export { @@ -25,29 +25,23 @@ export { useDialogControl as useMenuControl, } from '#/components/Dialog' -export function useMemoControlContext() { - return React.useContext(Context) +interface IContext { + dialogRef: React.RefObject } -export function Root({ - children, - control, -}: React.PropsWithChildren<{ - control?: Dialog.DialogOuterProps['control'] -}>) { - const defaultControl = Dialog.useDialogControl() - const context = React.useMemo( - () => ({ - control: control || defaultControl, - }), - [control, defaultControl], - ) +const Context = React.createContext({} as IContext) +const useContext = () => React.useContext(Context) - return {children} +export function Root({children}: React.PropsWithChildren<{}>) { + const dialogRef = React.useRef(null) + const value = React.useMemo(() => { + return {dialogRef} + }, [dialogRef]) + return {children} } export function Trigger({children, label}: TriggerProps) { - const {control} = React.useContext(Context) + const {dialogRef} = useContext() const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() const { state: pressed, @@ -57,14 +51,14 @@ export function Trigger({children, label}: TriggerProps) { return children({ isNative: true, - control, + dialogRef, state: { hovered: false, focused, pressed, }, props: { - onPress: control.open, + onPress: () => dialogRef.current?.present(), onFocus, onBlur, onPressIn, @@ -81,30 +75,29 @@ export function Outer({ showCancel?: boolean style?: StyleProp }>) { - const context = React.useContext(Context) + const t = useTheme() + const {dialogRef} = useContext() return ( - - - - {/* Re-wrap with context since Dialogs are portal-ed to root */} - - - - {children} - {isNative && showCancel && } + + + + + + {children} + {isNative && showCancel && } + - - + - + ) } export function Item({children, label, style, onPress, ...rest}: ItemProps) { const t = useTheme() - const {control} = React.useContext(Context) - const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() + const {dialogRef} = useContext() + const {state: focused} = useInteractionState() const { state: pressed, onIn: onPressIn, @@ -113,18 +106,13 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) { return ( { + console.log('hi') onPress(e) - - if (!e.defaultPrevented) { - control?.close() - } + dialogRef?.current?.dismiss() }} - onFocus={onFocus} - onBlur={onBlur} onPressIn={e => { onPressIn() rest.onPressIn?.(e) @@ -222,7 +210,7 @@ export function Group({children, style}: GroupProps) { function Cancel() { const {_} = useLingui() - const {control} = React.useContext(Context) + const {dialogRef} = useContext() return (