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 (