diff --git a/package.json b/package.json index 4ab196b6aa..7b972e662f 100644 --- a/package.json +++ b/package.json @@ -68,6 +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.7", "@haileyok/bluesky-video": "0.1.10", "@lingui/react": "^4.5.0", "@mattermost/react-native-paste-input": "^0.7.1", diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 2a59ac7f67..4cb431462b 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,18 +1,18 @@ import React, {useImperativeHandle} from 'react' -import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native' +import {StyleProp, View, ViewStyle} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import BottomSheet, { +import { BottomSheetFlatList, BottomSheetFlatListMethods, - BottomSheetScrollView, - BottomSheetScrollViewMethods, BottomSheetTextInput, BottomSheetView, } from '@discord/bottom-sheet/src' import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types' +import {BlueskyBottomSheetView} from '@haileyok/bluesky-bottom-sheet' 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 { @@ -37,12 +37,11 @@ export function Outer({ testID, }: React.PropsWithChildren) { const t = useTheme() - const sheet = React.useRef(null) + const ref = React.useRef(null) const insets = useSafeAreaInsets() const closeCallbacks = React.useRef<(() => void)[]>([]) const {setDialogIsOpen} = useDialogStateControlContext() // @TODO DIALOG REFACTOR - can i get rid of this? seems pointless tbh - const [isOpen, setIsOpen] = React.useState(false) const callQueuedCallbacks = React.useCallback(() => { for (const cb of closeCallbacks.current) { @@ -59,18 +58,16 @@ export function Outer({ const open = React.useCallback(() => { // Run any leftover callbacks that might have been queued up before calling `.open()` callQueuedCallbacks() - setIsOpen(true) setDialogIsOpen(control.id, true) - // sheet.current?.open() // @TODO DIALOG REFACTOR + ref.current?.present() }, [setDialogIsOpen, control.id, callQueuedCallbacks]) // This is the function that we call when we want to dismiss the dialog. const close = React.useCallback(cb => { - setIsOpen(false) if (typeof cb === 'function') { closeCallbacks.current.push(cb) } - // sheet.current?.close() // @TODO DIALOG REFACTOR + ref.current?.dismiss() }, []) // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to @@ -102,39 +99,25 @@ export function Outer({ const context = React.useMemo(() => ({close}), [close]) return ( - isOpen && ( - - Keyboard.dismiss()}> - - - - {children} - - - - - ) + + + { + if (e.nativeEvent.state === 'closed') { + onCloseAnimationComplete() + } + }} + cornerRadius={20}> + + {children} + + + + ) } @@ -158,32 +141,17 @@ 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/yarn.lock b/yarn.lock index e3dc084342..2512608e7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4120,10 +4120,10 @@ resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861" integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ== -"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.4": - version "0.1.1-alpha.4" - resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.4.tgz#19717e57e63d70e79b8bd86984903c448deb83bc" - integrity sha512-bEZRbErsI6OJCgmFolbr9Ta5LxNvyaltzRPFOVtwsykIwL8tqNJeNlmfxP8EdJa5lSu2kK1MauQcygmCIouzwg== +"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.7": + version "0.1.1-alpha.7" + resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.7.tgz#a5845cd2ac386b78716db5940b65b3e78b392042" + integrity sha512-Ps2nsNmfjqUmP/LPAM94/2dWZerwZEjnvSUfi/ipFNHlNp/McIYIObxDaPJaZ0ZLxUcRXxdhmC3UonK25sJKSw== "@haileyok/bluesky-video@0.1.10": version "0.1.10"