bluewallet/react-native-ios-context-menu
bluewallet/react-native-ios-context-menu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝 Docs: Update README - ContextMenuViewExample09

Browse Source
This commit is contained in:
Dominic Go 2022-07-04 17:19:08 +08:00
parent 53979ef2d6
commit ffa688ffe3
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
README.md
View File

@ -939,7 +939,7 @@ TBA
| 1️⃣ — The `ContextMenuView.menuConfig` prop accepts an optional `MenuConfig` object. <br/>This object will be used to create and configure the context menu. |
| 2️⃣ — You can set the context menu title via passing a string value to the `MenuConfig.menuTitle` property.<br><br>📝 **Note**: You can pass an empty string if you don't want a context menu title to appear. |
| 3️⃣ — To populate the context menu with items, you can pass a `MenuActionConfig` object in the `MenuConfig.menuItems` property.<br><br>📝 **Note A**: The `MenuConfig.menuItems` property can accept an array of a `MenuElementConfig` union type.<br><br>To be more specific, the `menuItems` property can accept an array containing any of the following object types: `MenuConfig` object, `MenuActionConfig`, and `DeferredMenuElementConfig`.<br/><br/>📝 **Note B**: If you pass in a `MenuActionConfig` object in the `MenuConfig.menuItems` property, it means that you want to create a context menu action.<br/><br>📝 **Note C**: If you pass in a `MenuConfig` object in the `MenuConfig.menuItems` property, it means that you want to create a submenu.<br/><br/>📝 **Note D**: If you pass in a `DeferredMenuElementConfig` object in the `MenuConfig.menuItems` property, it means that you want to create a deferred menu item (i.e. a menu item that has a loading indicator). |
| 4️⃣ — A `MenuActionConfig` object represents an action item in the context menu (e.g. copy, paste, delete, etc).<br><br>As such, if you pass in a `MenuActionConfig` object to `MenuConfig.menuItems`, it means that you want to create a context menu action.<br/><br/>📝 **Note A**: The `MenuActionConfig.actionKey` property serves as a unique identifier for your menu action. If you have multiple menu actions, the `actionKey` will help you differentiate them.<br/><br/>📝 **Note B**: You will receive the value you passed in `MenuActionConfig.actionKey` in the `ContextMenuView.onPressMenuItem` event (i.e. via the `nativeEvent` object).<br><br>In other words, the `actionKey` allows you to identify which menu action item was selected/pressed.<br/><br/>📝 **Note C**: Make sure that the `actionKey` is unique for each instance of the `ContextMenuView` component. |
| 4️⃣ — A `MenuActionConfig` object represents an action item in the context menu (e.g. copy, paste, delete, etc).<br><br>As such, if you pass in a `MenuActionConfig` object to `MenuConfig.menuItems`, it means that you want to create a context menu action.<br/><br/>📝 **Note A**: The `MenuActionConfig.actionKey` property serves as a unique identifier for your menu action. If you have multiple menu actions, the `actionKey` will help you differentiate them.<br/><br/>📝 **Note B**: You will receive the value you passed in `MenuActionConfig.actionKey` in the `ContextMenuView.onPressMenuItem` event (i.e. via the `nativeEvent` object).<br><br>In other words, the `actionKey` allows you to identify which menu action item was selected/pressed. For a more detailed example regarding the `onPressMenuItem` event, see: [`ContextMenuView` Example 09](#ContextMenuView-Example-09).<br/><br/>📝 **Note C**: Make sure that the `actionKey` is unique for each instance of the `ContextMenuView` component. |
| 5️⃣ — You can use the `ContextMenuView.onPressMenuItem` event prop to get notified whenever a menu action item has been selected.<br><br>The function you pass to the `onPressMenuItem` prop will receive a `OnPressMenuItemEventObject` object.<br/><br/>📝 **Note A**: Details about the selected menu action item can be accessed via the `OnPressMenuItemEventObject.nativeEvent` object.<br><br>E.g. `OnPressMenuItemEventObject.nativeEvent.actionKey`.<br/><br/>📝 **Note B**: If `ContextMenuView.shouldWaitForMenuToHide`<br/>`BeforeFiringOnPressMenuItem` prop is set to `true` (which it is by default), then this event will fire after `onMenuDidHide` is triggered. |
<br>
@ -1454,6 +1454,14 @@ export function ContextMenuViewExample08(props) {
### `ContextMenuView` Example 09
**Summary**: An example for the `onPressMenuItem` event prop.
| Notes |
| ------------------------------------------------------------ |
| The `onPressMenuItem` event prop allows you to know which menu item was pressed via the `nativeEvent.actionKey` property in the event object.<br><br>📝 **Note A**: The entire menu action config (i.e. `MenuActionConfig`) object of the selected item can be accessed via the `nativeEvent` object (e.g. `nativeEvent.actionTitle`, `nativeEvent.menuState`, etc).<br><br>📝 **Note B**: For the full type declaration for all the events, see: [`MenuEvents.ts`](./src/types/MenuEvents.ts). |
<br>
[🔗 Full Example](example/src/examples/ContextMenuViewExample09.tsx)
```jsx
@ -1468,32 +1476,19 @@ export function ContextMenuViewExample09(props) {
menuItems: [{
actionKey : 'save',
actionTitle: 'Save',
icon: {
type: 'IMAGE_SYSTEM',
imageValue: {
systemName: 'square.and.arrow.down',
},
}
// ...
}, {
actionKey : 'like',
actionTitle: 'Like',
icon: {
type: 'IMAGE_SYSTEM',
imageValue: {
systemName: 'hand.thumbsup',
},
}
// ...
}, {
actionKey : 'play',
actionTitle: 'Play',
icon: {
type: 'IMAGE_SYSTEM',
imageValue: {
systemName: 'play',
},
}
// ...
}],
}}
// Use `actionKey` to identify which menu action was
// pressed....
onPressMenuItem={({nativeEvent}) => {
switch (nativeEvent.actionKey) {
case 'save':