diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 67603ed2d8..8762fcb25d 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,24 +1,13 @@ import React, {useImperativeHandle} from 'react' -import { - Dimensions, - Keyboard, - Pressable, - StyleProp, - View, - ViewStyle, -} from 'react-native' -import Animated, {useAnimatedStyle} from 'react-native-reanimated' +import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' import BottomSheet, { - BottomSheetBackdropProps, BottomSheetFlatList, BottomSheetFlatListMethods, BottomSheetScrollView, BottomSheetScrollViewMethods, BottomSheetTextInput, BottomSheetView, - useBottomSheet, - WINDOW_HEIGHT, } from '@discord/bottom-sheet/src' import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types' @@ -41,71 +30,20 @@ export * from '#/components/Dialog/utils' // @ts-ignore export const Input = createInput(BottomSheetTextInput) -function Backdrop(props: BottomSheetBackdropProps) { - const t = useTheme() - const bottomSheet = useBottomSheet() - - const animatedStyle = useAnimatedStyle(() => { - const opacity = - (Math.abs(WINDOW_HEIGHT - props.animatedPosition.value) - 50) / 1000 - - return { - opacity: Math.min(Math.max(opacity, 0), 0.55), - } - }) - - const onPress = React.useCallback(() => { - bottomSheet.close() - }, [bottomSheet]) - - return ( - - - - ) -} - export function Outer({ children, control, onClose, - nativeOptions, + nativeOptions: _nativeOptions, // @TODO DIALOG REFACTOR testID, }: React.PropsWithChildren) { const t = useTheme() const sheet = React.useRef(null) - const sheetOptions = nativeOptions?.sheet || {} - const hasSnapPoints = !!sheetOptions.snapPoints const insets = useSafeAreaInsets() const closeCallbacks = React.useRef<(() => void)[]>([]) const {setDialogIsOpen} = useDialogStateControlContext() - - /* - * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet` - */ - const [openIndex, setOpenIndex] = React.useState(-1) - - /* - * `openIndex` is the index of the snap point to open the bottom sheet to. If >0, the bottom sheet is open. - */ - const isOpen = openIndex > -1 + // @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) { @@ -119,25 +57,21 @@ export function Outer({ closeCallbacks.current = [] }, []) - const open = React.useCallback( - ({index} = {}) => { - // Run any leftover callbacks that might have been queued up before calling `.open()` - callQueuedCallbacks() - - setDialogIsOpen(control.id, true) - // can be set to any index of `snapPoints`, but `0` is the first i.e. "open" - setOpenIndex(index || 0) - sheet.current?.snapToIndex(index || 0) - }, - [setDialogIsOpen, control.id, callQueuedCallbacks], - ) + 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 + }, [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() + // sheet.current?.close() // @TODO DIALOG REFACTOR }, []) // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to @@ -146,8 +80,6 @@ export function Outer({ // This removes the dialog from our list of stored dialogs. Not super necessary on iOS, but on Android this // tells us that we need to toggle the accessibility overlay setting setDialogIsOpen(control.id, false) - setOpenIndex(-1) - callQueuedCallbacks() onClose?.() }, [callQueuedCallbacks, control.id, onClose, setDialogIsOpen]) @@ -180,18 +112,13 @@ export function Outer({ testID={testID} onTouchMove={() => Keyboard.dismiss()}>