feat: Image items on iOS; onOpenChange

examples/expo/package.json

@@ -23,7 +23,7 @@
     "react-dom": "16.13.1",
     "react-native": "0.64.2",
     "react-native-gesture-handler": "~1.10.2",
-    "react-native-ios-context-menu": "^1.3.0",
+    "react-native-ios-context-menu": "^1.12.0",
     "react-native-reanimated": "2.2.2",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.4.0",

examples/expo/src/App.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View, Text, Platform } from 'react-native'
+import { StyleSheet, View, Text, Platform, Image } from 'react-native'
 
 import * as ContextMenu from 'zeego/context-menu'
 import * as DropdownMenu from 'zeego/dropdown-menu'
@@ -8,6 +8,8 @@ const select = (val: unknown) => () => alert(val)
 
 const itemHeight = 25
 
+const source = Image.resolveAssetSource(require('./camera-outline.png'))
+
 const contentStyle = {
   minWidth: 220,
   backgroundColor: 'white',
@@ -45,7 +47,11 @@ const dropdownStyles = StyleSheet.create({
     paddingRight: 5,
     paddingLeft: itemHeight,
     height: itemHeight,
-    transformOrigin: 'var(--radix-dropdown-menu-item-transform-origin)',
+    ...Platform.select({
+      web: {
+        transformOrigin: 'var(--radix-dropdown-menu-item-transform-origin)',
+      },
+    }),
   },
   itemWithSubtitle: {
     height: itemHeight * 2,
@@ -341,18 +347,31 @@ const ContextMenuExample = () => {
         <ContextMenu.Preview>
           {() => (
             <View
-              style={{ height: 300, width: 300, backgroundColor: 'pink' }}
+              style={{ height: 300, width: 300, backgroundColor: 'black' }}
             />
           )}
         </ContextMenu.Preview>
 
+        <ContextMenu.Item
+          style={[dropdownStyles.item, dropdownStyles.itemWithSubtitle]}
+          onSelect={select(1)}
+          key="fernando"
+        >
+          <ContextMenu.ItemTitle>@FernandoTheRojo</ContextMenu.ItemTitle>
+          <ContextMenu.ItemSubtitle>Creator of Zeego</ContextMenu.ItemSubtitle>
+
+          <ContextMenu.ItemImage source={require('./fernando.jpg')} />
+        </ContextMenu.Item>
+
         <ContextMenu.Item
           style={[dropdownStyles.item, dropdownStyles.itemWithSubtitle]}
           onSelect={select(1)}
           key="first"
         >
           <ContextMenu.ItemTitle>Action #1</ContextMenu.ItemTitle>
-          <ContextMenu.ItemSubtitle>Description!</ContextMenu.ItemSubtitle>
+          <ContextMenu.ItemSubtitle>Hey!</ContextMenu.ItemSubtitle>
+
+          <ContextMenu.ItemImage source={require('./camera-outline.png')} />
         </ContextMenu.Item>
         <ContextMenu.Item
           style={dropdownStyles.item}
@@ -442,6 +461,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     justifyContent: 'center',
     alignItems: 'center',
+    borderRadius: 8,
   },
   text: {
     color: '#fff',

packages/zeego/package.json

@@ -22,7 +22,9 @@
     "!**/__fixtures__",
     "!**/__mocks__",
     "!examples",
-    "index.d.ts"
+    "index.d.ts",
+    "context-menu",
+    "dropdown-menu"
   ],
   "scripts": {
     "test": "jest",
@@ -78,7 +80,7 @@
     "@react-native-menu/menu": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-ios-context-menu": "*",
+    "react-native-ios-context-menu": "^1.12.0",
     "@radix-ui/react-context-menu": "*"
   },
   "jest": {

packages/zeego/src/dropdown-menu/dropdown-menu.web.tsx

@@ -17,8 +17,12 @@ import React, { forwardRef } from 'react'
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
-const Root = ({ children }: MenuRootProps) => {
-  return <DropdownMenu.Root>{children}</DropdownMenu.Root>
+const Root = ({ children, onOpenChange }: MenuRootProps) => {
+  return (
+    <DropdownMenu.Root onOpenChange={onOpenChange}>
+      {children}
+    </DropdownMenu.Root>
+  )
 }
 Root.displayName = MenuDisplayName.Root
 

packages/zeego/src/menu/create-ios-menu/index.ios.tsx

@@ -22,11 +22,12 @@ import {
   pickChildren,
   isInstanceOfComponent,
 } from '../children'
+import { Image } from 'react-native'
 import { filterNull } from '../filter-null'
 import {
   ContextMenuButton,
   ContextMenuView,
-  IconConfig,
+  MenuActionConfig,
 } from 'react-native-ios-context-menu'
 import { menuify } from '../display-names'
 
@@ -161,7 +162,7 @@ If you want to use a custom component as your <Content />, you can use the menui
     menuItems: (MenuItem | MenuConfig)[]
     menuAttributes?: MenuAttributes
     menuOptions?: MenuOptions
-    icon?: IconConfig
+    icon?: MenuActionConfig['icon']
   }
 
   type MenuItem = {
@@ -170,7 +171,7 @@ If you want to use a custom component as your <Content />, you can use the menui
     discoverabilityTitle?: string
     menuAttributes?: MenuAttributes
     menuOptions?: MenuOptions
-    icon?: IconConfig
+    icon?: MenuActionConfig['icon']
     menuState?: 'on' | 'off' | 'mixed'
   }
 
@@ -243,19 +244,20 @@ If you want to use a custom component as your <Content />, you can use the menui
           if (imageChild) {
             const { iosIconName } = imageChild.props
             if (iosIconName) {
+              // @deprecated  remove icon config for newer versions
               icon = {
                 iconType: 'SYSTEM',
                 iconValue: iosIconName,
               }
-            } else {
-              // require('react-native/Libraries/Network/RCTNetworking')
-              // const { Image } =
-              //   require('react-native') as typeof import('react-native')
-              // const iconValue = Image.resolveAssetSource(source)
-              // icon = {
-              //   iconType: 'REQUIRE',
-              //   iconValue,
-              // }
+            } else if (imageChild.props.source) {
+              const imageValue = Image.resolveAssetSource(
+                imageChild.props.source
+              )
+
+              icon = {
+                type: 'IMAGE_REQUIRE',
+                imageValue,
+              }
             }
           }
         }
@@ -406,6 +408,17 @@ If you want to use a custom component as your <Content />, you can use the menui
 
     const previewProps = preview?.props as ContextMenuPreviewProps | undefined
 
+    const onMenuDidHide =
+      props.onOpenChange &&
+      (() => {
+        props.onOpenChange?.(false)
+      })
+    const onMenuDidShow =
+      props.onOpenChange &&
+      (() => {
+        props.onOpenChange?.(true)
+      })
+
     return (
       <Component
         onPressMenuItem={({ nativeEvent }) => {
@@ -453,6 +466,8 @@ If you want to use a custom component as your <Content />, you can use the menui
               }
             : undefined
         }
+        onMenuDidHide={onMenuDidHide}
+        onMenuDidShow={onMenuDidShow}
       >
         {trigger.targetChildren?.[0]}
       </Component>

packages/zeego/src/menu/types.ts

@@ -8,6 +8,7 @@ type TextStyle = React.ComponentProps<typeof Text>['style']
 export type MenuRootProps = {
   children: React.ReactNode
   style?: ViewStyle
+  onOpenChange?: (isOpen: boolean) => void
 }
 export type MenuTriggerProps = {
   children: React.ReactElement

yarn.lock

@@ -2227,6 +2227,11 @@
   resolved "https://registry.yarnpkg.com/@commitlint/types/-/types-11.0.0.tgz#719cf05fcc1abb6533610a2e0f5dd1e61eac14fe"
   integrity sha512-VoNqai1vR5anRF5Tuh/+SWDFk7xi7oMwHrHrbm1BprYXjB2RJsWLhUrStMssDxEl5lW/z3EUdg8RvH/IUBccSQ==
 
+"@dominicstop/ts-event-emitter@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@dominicstop/ts-event-emitter/-/ts-event-emitter-1.1.0.tgz#1f3d3fa878a1ccab686931280757954719cf88e4"
+  integrity sha512-CcxmJIvUb1vsFheuGGVSQf4KdPZC44XolpUT34+vlal+LyQoBUOn31pjFET5M9ctOxEpt8xa0M3/2M7uUiAoJw==
+
 "@egjs/hammerjs@^2.0.17":
   version "2.0.17"
   resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
@@ -18152,10 +18157,12 @@ react-native-gesture-handler@~1.10.2:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-ios-context-menu@^1.3.0:
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/react-native-ios-context-menu/-/react-native-ios-context-menu-1.7.6.tgz#f59d05fbd000c2030c620940ffb062dad16807cb"
-  integrity sha512-bYtHWM5Gtc1/Gn1jrTXN3btFi2aHYvcChCJARNmgS5lpwxFbEKyCzCH2VFN7Cv0/WoEdU5eO1EM6NxBjz45ANA==
+react-native-ios-context-menu@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/react-native-ios-context-menu/-/react-native-ios-context-menu-1.12.0.tgz#6aba0f681fb7fdab2690d57ce2850532b0b040f9"
+  integrity sha512-9rqenxOP/mwk2gZMPZcbDh7kLC0barbusC/EJgYVaOsk0MR5wy6LvpWS5dsNLqzJg5jsnbq18SNZM+xvV9Mpvw==
+  dependencies:
+    "@dominicstop/ts-event-emitter" "^1.1.0"
 
 [email protected]:
   version "2.2.2"