progress

2024-10-01 13:54:58 -07:00
parent 4e11666dc3
commit c6a8587dc4
5 changed files with 68 additions and 94 deletions
@@ -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",
@@ -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,
@@ -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>
@@ -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
    }
 >

@@ -4120,10 +4120,10 @@
  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.2":
-  version "0.1.1-alpha.2"
-  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.2.tgz#58884bd07750e943684f9148b16e2020affc1400"
-  integrity sha512-lkNYnUxEJSRSnOUUowhKsny2buFjonOS96iOhgEm/2Hubci7LdYrYmRi8CaaDr20LhSU3c4hGgF1fSmBYW0Kjg==
+"@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"
@@ -18068,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: