[Sheets] [Pt. 4] Convert Pressable in Menu (WIP) (#5562)

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.7",
+    "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.8",
     "@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",

src/components/Dialog/index.tsx

@@ -89,20 +89,12 @@ export function Outer({
     [open, close],
   )
 
-  // @TODO DIALOG REFACTOR - what is this? rm i think?
-  // React.useEffect(() => {
-  //   return () => {
-  //     setDialogIsOpen(control.id, false)
-  //   }
-  // }, [control.id, setDialogIsOpen])
-
   const context = React.useMemo(() => ({close}), [close])
 
   return (
     <Portal>
       <Context.Provider value={context}>
         <BlueskyBottomSheetView
-          // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
           ref={ref}
           topInset={30}
           bottomInset={insets.bottom}

src/components/Menu/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {BlueskyBottomSheetPressable as Pressable} from '@haileyok/bluesky-bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -102,7 +103,11 @@ export function Outer({
 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 {
+    state: focused,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
   const {
     state: pressed,
     onIn: onPressIn,
@@ -115,14 +120,9 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       accessibilityHint=""
       accessibilityLabel={label}
       onPress={e => {
+        control?.close()
         onPress(e)
-
-        if (!e.defaultPrevented) {
-          control?.close()
-        }
       }}
-      onFocus={onFocus}
-      onBlur={onBlur}
       onPressIn={e => {
         onPressIn()
         rest.onPressIn?.(e)
@@ -131,6 +131,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         onPressOut()
         rest.onPressOut?.(e)
       }}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
       style={[
         a.flex_row,
         a.align_center,

src/components/Menu/types.ts

@@ -4,6 +4,8 @@ import {
   GestureResponderEvent,
   PressableProps,
 } from 'react-native'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {BueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -87,10 +89,10 @@ export type TriggerChildProps =
     }
 
 export type ItemProps = React.PropsWithChildren<
-  Omit<PressableProps, 'style'> &
+  Omit<BueskyBottomSheetPressableProps, 'style'> &
     ViewStyleProp & {
       label: string
-      onPress: (e: GestureResponderEvent) => void
+      onPress: (e: PressableEvent | GestureResponderEvent) => void
     }
 >
 

yarn.lock

@@ -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.7":
-  version "0.1.1-alpha.7"
-  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.7.tgz#a5845cd2ac386b78716db5940b65b3e78b392042"
-  integrity sha512-Ps2nsNmfjqUmP/LPAM94/2dWZerwZEjnvSUfi/ipFNHlNp/McIYIObxDaPJaZ0ZLxUcRXxdhmC3UonK25sJKSw==
+"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.8":
+  version "0.1.1-alpha.8"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.8.tgz#c5fd503cdd5556a686a1f5c0974b1527fceda900"
+  integrity sha512-305MSNscniLZpxd80QO4OCuMXkm+U/v/YW/x0fVQtBilVTikOOPIkiYge+kCUdryFPD3LU/GdrsQZL+y8qAiMQ==
 
 "@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: