progress

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.3",
     "@haileyok/bluesky-video": "0.1.10",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
@@ -171,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",

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 (
-    <BottomSheetScrollView
-      keyboardShouldPersistTaps="handled"
-      style={[
-        a.flex_1, // main diff is this
-        a.p_xl,
-        a.h_full,
-        {
-          paddingTop: 40,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
-        },
-        style,
-      ]}
-      contentContainerStyle={a.pb_4xl}
-      ref={ref}>
-      {children}
-      <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-    </BottomSheetScrollView>
-  )
-})
+export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
+  function ScrollableInner({children, style}, ref) {
+    const insets = useSafeAreaInsets()
+    return (
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        style={[a.p_xl, style]}
+        contentContainerStyle={a.pb_4xl}
+        ref={ref}>
+        {children}
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+      </ScrollView>
+    )
+  },
+)
 
 export const InnerFlatList = React.forwardRef<
   BottomSheetFlatListMethods,

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<BlueskyBottomSheetView>
 }
 
-export function Root({
-  children,
-  control,
-}: React.PropsWithChildren<{
-  control?: Dialog.DialogOuterProps['control']
-}>) {
-  const defaultControl = Dialog.useDialogControl()
-  const context = React.useMemo<ContextType>(
-    () => ({
-      control: control || defaultControl,
-    }),
-    [control, defaultControl],
-  )
+const Context = React.createContext({} as IContext)
+const useContext = () => React.useContext(Context)
 
-  return <Context.Provider value={context}>{children}</Context.Provider>
+export function Root({children}: React.PropsWithChildren<{}>) {
+  const dialogRef = React.useRef<BlueskyBottomSheetView>(null)
+  const value = React.useMemo(() => {
+    return {dialogRef}
+  }, [dialogRef])
+  return <Context.Provider value={value}>{children}</Context.Provider>
 }
 
 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<ViewStyle>
 }>) {
-  const context = React.useContext(Context)
+  const t = useTheme()
+  const {dialogRef} = useContext()
 
   return (
-    <Dialog.Outer control={context.control}>
-      <Dialog.Handle />
-
-      {/* Re-wrap with context since Dialogs are portal-ed to root */}
-      <Context.Provider value={context}>
-        <Dialog.ScrollableInner label="Menu TODO">
-          <View style={[a.gap_lg]}>
-            {children}
-            {isNative && showCancel && <Cancel />}
+    <Portal>
+      <Context.Provider value={{dialogRef}}>
+        <BlueskyBottomSheetView ref={dialogRef} cornerRadius={30}>
+          <View style={[a.px_xl, a.pb_3xl, t.atoms.bg]}>
+            <View style={[a.gap_lg]}>
+              {children}
+              {isNative && showCancel && <Cancel />}
+            </View>
           </View>
-          <View style={{height: a.gap_lg.gap}} />
-        </Dialog.ScrollableInner>
+        </BlueskyBottomSheetView>
       </Context.Provider>
-    </Dialog.Outer>
+    </Portal>
   )
 }
 
 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 (
     <Pressable
-      {...rest}
       accessibilityHint=""
       accessibilityLabel={label}
       onPress={e => {
+        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 (
     <Button
@@ -230,7 +218,7 @@ function Cancel() {
       size="small"
       variant="ghost"
       color="secondary"
-      onPress={() => control.close()}>
+      onPress={() => dialogRef.current?.dismiss()}>
       <ButtonText>
         <Trans>Cancel</Trans>
       </ButtonText>

src/components/Menu/types.ts

@@ -1,9 +1,8 @@
 import React from 'react'
-import {
-  AccessibilityProps,
-  GestureResponderEvent,
-  PressableProps,
-} from 'react-native'
+import {AccessibilityProps} from 'react-native'
+import {PressableProps} from 'react-native-gesture-handler'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {BlueskyBottomSheetView} from '@haileyok/bluesky-bottom-sheet'
 
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -40,7 +39,7 @@ export type TriggerProps = {
 export type TriggerChildProps =
   | {
       isNative: true
-      control: Dialog.DialogOuterProps['control']
+      dialogRef: React.RefObject<BlueskyBottomSheetView>
       state: {
         /**
          * Web only, `false` on native
@@ -90,7 +89,7 @@ export type ItemProps = React.PropsWithChildren<
   Omit<PressableProps, 'style'> &
     ViewStyleProp & {
       label: string
-      onPress: (e: GestureResponderEvent) => void
+      onPress: (e: PressableEvent) => void
     }
 >
 

yarn.lock

@@ -4120,6 +4120,11 @@
   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.3":
+  version "0.1.1-alpha.3"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.3.tgz#161c9ed76a94e0e83f09911bdf8cb58475f3f516"
+  integrity sha512-l/PSKNETYMr9HMCSNnk6Ym//iQXZJOpG+/GWrUnn08JnpxPkNxIcm0UDnN99PxhFzyRSn2OLdjrAMjWwFKbBrQ==
+
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.10.tgz#2756e8c83a78caeb6b120a175578eac1eb6889a9"
@@ -18063,15 +18068,14 @@ react-native-drawer-layout@^4.0.0-alpha.3:
   dependencies:
     use-latest-callback "^0.1.9"
 
-react-native-gesture-handler@~2.16.2:
-  version "2.16.2"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d"
-  integrity sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==
+react-native-gesture-handler@^2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.0.tgz#2d9ec4e9bd22619ebe36269dda3ecb1173928276"
+  integrity sha512-rFKqgHRfxQ7uSAivk8vxCiW4SB3G0U7jnv7kZD4Y90K5kp6YrU8Q3tWhxe3Rx55BIvSd3mBe9ZWbWVJ0FsSHPA==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
     hoist-non-react-statics "^3.3.0"
     invariant "^2.2.4"
-    lodash "^4.17.21"
     prop-types "^15.7.2"
 
 react-native-get-random-values@^1.6.0: