progress

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