From 03ecbe579928f489bd2e58ddd7b51de741b75c48 Mon Sep 17 00:00:00 2001 From: Dominic Go <18517029+dominicstop@users.noreply.github.com> Date: Tue, 11 Jan 2022 21:07:08 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20README=20WIP:=20Documentation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e62bad2..ec30094 100644 --- a/README.md +++ b/README.md @@ -261,13 +261,13 @@ const styles = StyleSheet.create({ | Prop Name and Type | Description | | :----------------------------------------------------------- | :----------------------------------------------------------- | | ⚛️ `ViewProps` | This component supports all the standard props from a `` component. | -| 🔤 `menuConfig`

⚛️ [`MenuConfig`](PLACE_HOLDER_LINK) | Configures the context menu, along with what menu actions to show.

This prop accepts a `MenuConfig` object. This object is used to configure various aspects of the context menu:
• `MenuConfig.menuTitle`: the context menu title (required),
• `MenuConfig.menuItems` the actions to show (along with their title, icons, subtitle, etc) — Accepts either an array of `MenuActionConfig` or `MenuConfig` objects.,
• `MenuConfig.menuOptions`: the attributes of the context menu (e.g. destructive) — Accepts an array of `UIMenuOptions` string items,
• and any nested menus or submenus to show (see "**Note A**").

📝 **Note A**: Passing a `MenuConfig` object inside of the `MenuConfig.menuItems` property will result in a nested context menu or submenu. In this scenario, the `MenuConfig.menuOptions` and `MenuConfig.icon` can be used to configure the appearance of the submenu. For usage examples regarding nested menus, see [Example 06](contextmenuview-example06)

📝 **Note B**: Passing a value of `null` (or `undefined`) to this prop will not disable the context menu. Use the `isContextMenuEnabled` prop instead to disable the context menu.
📝 **Note C**: If the context menu is currently visible, changing/updating the `MenuConfig` value passed to this prop will cause the context menu to change in real-time. This behavior is only supported on iOS 14+.

📌 Some example links to get you started:
• For basic usage examples regarding `MenuConfig`, see: [Example 1](#contextmenuview-example-06),
• For examples on creating + configuring the menu action items (i.e. `MenuActionConfig`), see: [Example 2](#contextmenuview-example-02),
• For menu action attributes + menu state, and action subtitles, see: [Example 4](#contextmenuview-example-04), [Example 8](#contextmenuview-example-08), and [Example 13](#contextmenuview-example-13),
• For examples regarding the usage of icons (i.e. `ImageItemConfig`), see: [Example 16](#contextmenuview-example-16), [Example 17](#contextmenuview-example-17), and [Example 18](#contextmenuview-example-18). | +| 🔤 `menuConfig`

⚛️ [`MenuConfig`](PLACE_HOLDER_LINK) | Configures the context menu, along with what menu actions to show.

This prop accepts a `MenuConfig` object. This object is used to configure various aspects of the context menu:
• `MenuConfig.menuTitle`: the context menu title (required),
• `MenuConfig.menuItems` the actions to show (along with their title, icons, subtitle, etc) — Accepts either an array of `MenuActionConfig` or `MenuConfig` objects.,
• `MenuConfig.menuOptions`: the attributes of the context menu (e.g. destructive) — Accepts an array of `UIMenuOptions` string items,
• and any nested menus or submenus to show (see "**Note A**").

📝 **Note A**: Passing a `MenuConfig` object inside of the `MenuConfig.menuItems` property will result in a nested context menu or submenu. In this scenario, the `MenuConfig.menuOptions` and `MenuConfig.icon` can be used to configure the appearance of the submenu. For usage examples regarding nested menus, see [Example 06](contextmenuview-example06)

📝 **Note B**: Passing a value of `null` (or `undefined`) to this prop will not disable the context menu. Use the `isContextMenuEnabled` prop instead to disable the context menu.
📝 **Note C**: You can put `MenuConfig` in state if you want to dynamically change the menu configuration. If the context menu is currently visible, changing/updating the `MenuConfig` value passed to this prop will cause the context menu to change in real-time. This behavior is only supported on iOS 14+.

📌 Some example links to get you started:
• For basic usage examples regarding `MenuConfig`, see: [Example 1](#contextmenuview-example-06),
• For examples on creating + configuring the menu action items (i.e. `MenuActionConfig`), see: [Example 2](#contextmenuview-example-02),
• For menu action attributes + menu state, and action subtitles, see: [Example 4](#contextmenuview-example-04), [Example 8](#contextmenuview-example-08), and [Example 13](#contextmenuview-example-13),
• For examples regarding the usage of icons (i.e. `ImageItemConfig`), see: [Example 16](#contextmenuview-example-16), [Example 17](#contextmenuview-example-17), and [Example 18](#contextmenuview-example-18). | | 🔤 `previewConfig`

⚛️ [`MenuPreviewConfig`](PLACE_HOLDER_LINK) | Configures the context menu's preview.

If no configuration is provided then it will default to using the context menu component itself as the preview.

📝 **Note**: If you do not want to show a preview (i.e. only show the context menu itself), consider using a [`ContextMenuButton`](PLACE_HOLDER_LINK) component instead.

📌 Some example links to get you started:
• For examples regarding the configuration of the context menu preview (e.g. custom previews), see: [Example 11](#contextmenuview-example-11), [Example 12](#contextmenuview-example-12), [Example 14](#contextmenuview-example-14), and [Example 15](#contextmenuview-example-15). | | 🔤 `shouldUseDiscoverability`
`TitleAsFallbackValueForSubtitle`

⚛️ `boolean`

✳️ **Default**: `true` | On iOS 15+, the value passed to the `MenuActionConfig.discoverabilityTitle` property is no longer displayed as a subtitle under the menu action.

Instead you need to set a different a different property called `MenuActionConfig.subtitle`.

The `discoverabilityTitle` property is now used for the "discoverability heads-up display" (e.g when an app supports keyboard shortcuts, holding down the command key presents a list of shortcuts; the `discoverabilityTitle` is then used as the title for the shortcut).

If this prop is set to true, it will then uses the value passed on to the `discoverabilityTitle` value as the subtitle for the menu action, preserving the old behavior. In other words, this prop exists for backwards-compatibility reasons.

📝 **Note**: This prop is set to `true` by default; set this to `false` if you don't want this automatic behaviour to happen. | -| 🔤 `isContextMenuEnabled`

⚛️ `boolean`

✳️ **Default**: `true` | | -| 🔤 `lazyPreview`

⚛️ `boolean`

✳️ **Default**: `true` | TBA | -| 🔤 `useActionSheetFallback`

⚛️ `boolean`

✳️ **Default**: `true` | TBA | -| 🔤 `renderPreview`

⚛️ [`abc`](PLACE_HOLDER_LINK) | TBA | +| 🔤 `isContextMenuEnabled`

⚛️ `boolean`

✳️ **Default**: `true` | Enables or disables the context menu. Useful if you want to temporarily disable the context menu. | +| 🔤 `lazyPreview`

⚛️ `boolean`

✳️ **Default**: `true` | If set to `true` (which it is by default), the custom context menu preview (i.e. the component returned from the `ContextMenuView.renderPreview` prop) will only be mounted/rendered when the context menu interaction begins (i.e. when the context menu is about to be shown).

Set this to `false` if you want the preview content to be always mounted. | +| 🔤 `useActionSheetFallback`

⚛️ `boolean`

✳️ **Default**: `true` | Context menus are only supported on iOS 13+ (i.e. context menus are not supported on iOS 12, and below).

On iOS 12 and below, a long press on a `ContextMenuView` will show a [`ActionSheetIOS`](https://reactnative.dev/docs/actionsheetios#docsNav) menu based on the current `menuConfig` prop.

If you want to disable this behavior, set this prop to false.

📝 **Note**: Default value is `false` on iOS 13+, and `true` on iOS 12 and below. | +| 🔤 `renderPreview`

⚛️ [`abc`](PLACE_HOLDER_LINK) | This prop is a "render" prop, i.e. it accepts a function that returns a react component.

The returned component will displayed in the context menu preview. |