fix example, start context menu

nandorojo · Jun 15, 2022 · 0dffded · 0dffded
1 parent 3c025af
commit 0dffded
Show file tree

Hide file tree

Showing 7 changed files with 3,524 additions and 3,303 deletions.
diff --git a/examples/expo/alias.js b/examples/expo/alias.js
@@ -1,15 +1,24 @@
-const fs = require('fs');
-const path = require('path');
+// const fs = require('fs')
+const path = require('path')
 
-const packages = path.resolve(__dirname, '../..', 'packages');
+// const packages = path.resolve(__dirname, '../..', 'packages')
 
-const alias = {};
+// const alias = {}
 
-fs.readdirSync(packages).map((name) => {
-  const pak = require(path.join(packages, name, 'package.json'));
-  alias[pak.name] = path.resolve(packages, name, pak.source);
-});
+// fs.readdirSync(packages).map((name) => {
+//   const pak = require(path.join(packages, name, 'package.json'))
+//   alias[pak.name] = path.resolve(packages, name, pak.source)
+// })
+
+const packagePath = '../../packages/zeego/'
 
 module.exports = {
-  alias,
-};
+  alias: {
+    'zeego/dropdown-menu': path.resolve(
+      __dirname,
+      packagePath,
+      'dropdown-menu'
+    ),
+    'zeego/context-menu': path.resolve(__dirname, packagePath, 'context-menu'),
+  },
+}
diff --git a/examples/expo/metro.config.js b/examples/expo/metro.config.js
@@ -1,16 +1,16 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require('expo/metro-config');
-const path = require('path');
+const { getDefaultConfig } = require('expo/metro-config')
+const path = require('path')
 
-const projectRoot = __dirname;
-const workspaceRoot = path.resolve(__dirname, '../..');
+const projectRoot = __dirname
+const workspaceRoot = path.resolve(__dirname, '../..')
 
-const config = getDefaultConfig(__dirname);
+const config = getDefaultConfig(__dirname)
 
-config.watchFolders = [workspaceRoot];
+config.watchFolders = [workspaceRoot, projectRoot]
 config.resolver.nodeModulesPath = [
   path.resolve(projectRoot, 'node_modules'),
   path.resolve(workspaceRoot, 'node_modules'),
-];
+]
 
-module.exports = config;
+module.exports = config
diff --git a/examples/expo/package.json b/examples/expo/package.json
@@ -12,6 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@radix-ui/react-context-menu": "^0.1.6",
     "@react-native-menu/menu": "^0.5.2",
     "add": "^2.0.6",
     "expo": "^43.0.0",

diff --git a/examples/expo/yarn.lock b/examples/expo/yarn.lock
diff --git a/packages/zeego/package.json b/packages/zeego/package.json
@@ -1,11 +1,11 @@
 {
   "name": "zeego",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Logical UI primitives, made for screens.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "react-native": "src/",
-  "source": "src/index.tsx",
+  "source": "src/",
   "types": "./index.d.ts",
   "files": [
     "src",
@@ -52,7 +52,9 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
+    "@radix-ui/react-context-menu": "^0.1.6",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@react-native-menu/menu": "*",
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^26.0.0",
     "@types/react": "^17.0.1",
@@ -73,10 +75,11 @@
     "typescript": "^4.4"
   },
   "peerDependencies": {
+    "@react-native-menu/menu": "*",
     "react": "*",
     "react-native": "*",
     "react-native-ios-context-menu": "*",
-    "@react-native-menu/menu": "*"
+    "@radix-ui/react-context-menu": "*"
   },
   "jest": {
     "preset": "react-native",

diff --git a/packages/zeego/src/menu/create-ios-menu/index.ios.tsx b/packages/zeego/src/menu/create-ios-menu/index.ios.tsx
@@ -24,7 +24,7 @@ import { filterNull } from '../filter-null'
 import {
   ContextMenuButton,
   ContextMenuView,
-  // @ts-expect-error
+  IconConfig,
 } from 'react-native-ios-context-menu'
 import { menuify } from '../display-names'
 
@@ -76,9 +76,6 @@ If you want to use a custom component as your <Content />, you can use the menui
   }, 'ItemIcon')
 
   const ItemImage = menuify((props: MenuItemImageProps) => {
-    // if (!props.source) {
-    //   console.error('[zeego] <ItemImage /> missing source prop.')
-    // }
     if (!props.iosIconName) {
       console.warn(
         '[zeego] <ItemImage /> will not use your custom image on iOS. You should use the iosIconName prop to render an icon on iOS too.'
@@ -151,26 +148,16 @@ If you want to use a custom component as your <Content />, you can use the menui
     menuItems: (MenuItem | MenuConfig)[]
     menuAttributes?: MenuAttributes
     menuOptions?: MenuOptions
-    icon?: MenuItemIcon
+    icon?: IconConfig
   }
 
-  type MenuItemIcon =
-    | {
-        iconType: 'SYSTEM'
-        iconValue: string
-      }
-    | {
-        iconType: 'REQUIRE'
-        iconValue: unknown
-      }
-
   type MenuItem = {
     actionKey: string
     actionTitle: string
     discoverabilityTitle?: string
     menuAttributes?: MenuAttributes
     menuOptions?: MenuOptions
-    icon?: MenuItemIcon
+    icon?: IconConfig
     menuState?: 'on' | 'off' | 'mixed'
   }
 
@@ -386,19 +373,6 @@ If you want to use a custom component as your <Content />, you can use the menui
       })
     }
 
-    // let menuItems: (MenuItem | MenuConfig)[] = []
-
-    // Children.forEach(flattenChildren(props.children), (_child) => {
-    //   const child = _child as ReactElement
-    //   if (isInstanceOfComponent(child, Content)) {
-    //     menuItems.push(
-    //       ...mapItemsChildren(
-    //         (child as ReactElement<MenuContentProps>).props.children
-    //       ).filter(filterNull)
-    //     )
-    //   }
-    // })
-
     const menuItems = mapItemsChildren(content?.props.children).filter(
       filterNull
     )
@@ -415,27 +389,13 @@ If you want to use a custom component as your <Content />, you can use the menui
 
     return (
       <Component
-        onPressMenuItem={({
-          nativeEvent,
-        }: {
-          nativeEvent: {
-            target?: number
-            actionKey: string
-            actionTitle: string
-            menuAttributes?: []
-            icon: {
-              iconType: string
-              iconValue: string
-            } | null
-          }
-        }) => {
+        onPressMenuItem={({ nativeEvent }) => {
           if (callbacks[nativeEvent.actionKey]) {
             callbacks[nativeEvent.actionKey]()
           }
         }}
         isMenuPrimaryAction={Menu === 'DropdownMenu'}
         style={[{ flexGrow: 0 }, props.style]}
-        wrapNativeComponent={false}
         menuConfig={{
           menuTitle,
           menuItems: menuItems,