From 0404056bbff6404c818116f14585e3310ac12e2b Mon Sep 17 00:00:00 2001 From: Dominic Go <18517029+dominicstop@users.noreply.github.com> Date: Sat, 8 Jan 2022 07:19:38 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20README=20WIP:=20Examples?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 95 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 60 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 4eb6703..dbfccff 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,9 @@ | `1.4` | iOS 10 to iOS 15
Xcode 13+ | | `1.3` and Below | iOS 10 to 14
Xcode 12+ | -📝 **Note**: Supports projects targeting iOS 10 but will use the action sheet fallback when running on iOS 12 and older.
+📝 **Note**: Supports projects targeting iOS 10 but will use the action sheet fallback when running on iOS 12 and older. + +

## A. Introduction @@ -574,22 +576,27 @@ TBA A basic context menu that has 3 menu action items (e.g. "Action #1", "Action #2", and "Action #3"). +
+ * The `ContextMenuView.menuConfig` prop accepts an optional `MenuConfig` object. - * You can set the context menu title via the `MenuConfig.menuTitle` property. - * To populate the context menu with items, you can pass a `MenuActionConfig` object to the `MenuConfig.menuItems` property. - * A `MenuActionConfig` object represents an action item in the context menu (e.g. copy, paste, delete, etc). - * The `MenuActionConfig.actionKey` property serves as a unique identifier for your menu action. - * You will receive the value you passed in `MenuActionConfig.actionKey` in the `ContextMenuView.onPressMenuItem` event (i.e. via the `nativeEvent` object). - * In other words, the `actionKey` allows you to identify which menu action item was selected/pressed. - * 📝 **Note**: Make sure that the `actionKey` is unique for each instance of the `ContextMenuView` component. +* You can set the context menu title via the `MenuConfig.menuTitle` property. +* To populate the context menu with items, you can pass a `MenuActionConfig` object to the `MenuConfig.menuItems` property. - +
-* You can use the `ContextMenuView.onPressMenuItem` event prop to get notified whenever a menu action item has been selected. - * The function you pass to the `onPressMenuItem` prop receives a `OnPressMenuItemEventObject` object. - * Details about the selected menu action item can be accessed via the `OnPressMenuItemEventObject.nativeEvent` object. - * E.g. `OnPressMenuItemEventObject.nativeEvent.actionKey`. +* A `MenuActionConfig` object represents an action item in the context menu (e.g. copy, paste, delete, etc). +* The `MenuActionConfig.actionKey` property serves as a unique identifier for your menu action. +* You will receive the value you passed in `MenuActionConfig.actionKey` in the `ContextMenuView.onPressMenuItem` event (i.e. via the `nativeEvent` object). +* In other words, the `actionKey` allows you to identify which menu action item was selected/pressed. + * 📝 **Note**: Make sure that the `actionKey` is unique for each instance of the `ContextMenuView` component. + +
+ +* You can use the `ContextMenuView.onPressMenuItem` event prop to get notified whenever a menu action item has been selected. +* The function you pass to the `onPressMenuItem` prop receives a `OnPressMenuItemEventObject` object. +* Details about the selected menu action item can be accessed via the `OnPressMenuItemEventObject.nativeEvent` object. + * E.g. `OnPressMenuItemEventObject.nativeEvent.actionKey`.
@@ -636,29 +643,31 @@ export function ContextMenuViewExample01(props) { ### `ContextMenuView` Example 02 -A basic context menu that has 3 menu action items, each with a different "SF Symbols" icon. +A basic context menu that has 3 menu action items, each with a different "SF Symbols" icon. This examples shows how to add a system icon in the context menu action. + +
* A `MenuActionConfig` object can be configured to show an icon via the `MenuActionConfig.icon` property. - * The `icon` property accepts a `ImageItemConfig` object. - * A `ImageItemConfig` object is used to describe images/assets (e.g. SF Symbols icons, images, xcasset images, programmatic images, etc). +* The `icon` property accepts a `ImageItemConfig` object. +* A `ImageItemConfig` object is used to describe images/assets (e.g. SF Symbols icons, images, xcasset images, programmatic images, etc). - +
- * In this example, we want to use a "SF Symbols" icon for the menu action. +* In this example, we want to use a "SF Symbols" icon for the menu action. - * In order to do this, the `ImageItemConfig.type` property must be set to `"IMAGE_SYSTEM"`. +* In order to do this, the `ImageItemConfig.type` property must be set to `"IMAGE_SYSTEM"`. - * Passing in a value of `"IMAGE_SYSTEM"` to the `type` property means that we want to create a "SF Symbols" system icon. - * Using a "SF Symbols" icon requires iOS 13+. +* Passing in a value of `"IMAGE_SYSTEM"` to the `type` property means that we want to create a "SF Symbols" system icon. +* Using a "SF Symbols" icon requires iOS 13+. - +
- * In order to configure what kind of "SF Symbols" icon we want to use for the menu action, we need to pass in a `ImageSystemConfig` object to the `ImageItemConfig.imageValue` property. +* In order to configure what kind of "SF Symbols" icon we want to use for the menu action, we need to pass in a `ImageSystemConfig` object to the `ImageItemConfig.imageValue` property. - * We set what kind of icon to use via passing a string value to the `ImageSystemConfig.systemName` property. - * The string value passed to the `systemName` property must be a valid SF Symbols name. - * To view the list of SF Symbols icons (along with their corresponding icon names), you'll need to download the SF Symbols Mac app from [this page](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/). +* We set what kind of icon to use via passing a string value to the `ImageSystemConfig.systemName` property. +* The string value passed to the `systemName` property must be a valid SF Symbols name. +* To view the list of SF Symbols icons (along with their corresponding icon names), you'll need to download the SF Symbols Mac app from [this page](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/).
@@ -803,16 +812,32 @@ export function ContextMenuViewExample03(props) { This example context menu showcases the `MenuActionConfig.menuAttributes` property. -* The `MenuActionConfig.menuAttributes` property accepts an array of string (i.e. an array of `MenuAttributes` items), +
-* This submenu has 3 actions: - * The first menu action is a "disabled" action. It has it's `menuAttributes` set to `[disabled]`. - * The action title text and icon becomes grey out. - * The second menu action is a destructive action. It has it's `menuAttributes` set to `[destructive]`. - * The action title text and icon becomes red. - * The third menu action is a "hidden" action. It has it's `menuAttributes` set to `[hidden]`. - * The menu action is not visible in the menu's list of actions. This is useful for temporarily hiding a menu action item. - * The fourth menu action is a "disabled" + "destructive" action. Visually, it looks very similar to the `disabled` action. +* The `MenuActionConfig.menuAttributes` property accepts an array of string (i.e. an array of `MenuAttributes` items). + +
+ +* In this example, the context menu has 3 actions, each with a different menu attribute assigned to it. +* The first menu action is a "disabled" action. It has it's `menuAttributes` set to `[disabled]`. + * The action title text and icon becomes grey out. + +
+ +* The second menu action is a destructive action. It has it's `menuAttributes` set to `[destructive]`. + * The action title text and icon becomes red. + +
+ +* The third menu action is a "hidden" action. It has it's `menuAttributes` set to `[hidden]`. + * The menu action is not visible in the menu's list of actions. This is useful for temporarily hiding a menu action item. + +
+ +* The fourth menu action is a "disabled" + "destructive" action. + * Visually, it looks very similar to the `disabled` action. + +
[🔗 Full Example](example/src/examples/ContextMenuViewExample04.tsx)