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()}>