Skip to content

Commit 2ae35ee

Browse files
dominicstopdominicstop
committed
📝 Updated README: Documentation WIP
1 parent cc74656 commit 2ae35ee

File tree

1 file changed

+74
-8
lines changed

1 file changed

+74
-8
lines changed

‎README.md‎

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
# react-native-ios-context-menu
2+
3+
![Build Example iOS Project](https://github.com/dominicstop/react-native-ios-context-menu/workflows/Build%20Example%20iOS%20Project/badge.svg)
4+
25
A react native component to use [`UIMenu`](https://developer.apple.com/documentation/uikit/uimenu) on iOS 13 and later.
36
* Support for creating menu actions and submenu's (nested and in-line menu's)
47
* Support for customizing the menu icons (i.e. support for SF Symbols and asset icons, icon tint, etc.)
@@ -159,14 +162,14 @@ Here is an overview of all the documentation and examples for the `ContextMenuVi
159162

160163
| Description | Section Link |
161164
|--------------------------------------------------------------|--------------------------------------------------------------|
162-
| General examples for `ContextMenuView`. | [Example 1](#411-contextmenuview-simple-example-1) (bare min. example)<br> [Example 9](#419-contextmenuview-simple-example-9) (events) |
163-
| Examples for configuring the menu icons. | [Example 2](#412-contextmenuview-simple-example-2) (SF Symbol icon)<br> [Example 16](#4116-contextmenuview-simple-example-16) (asset icon)<br> [Example 17](#4117-contextmenuview-simple-example-17) (icon tint) |
164-
| Examples for the different menu configurations. | [Example 3](#413-contextmenuview-simple-example-3) (submenu's)<br> [Example 5](#415-contextmenuview-simple-example-5) (inline menu i.e. menu sections)<br> [Example 6](#416-contextmenuview-simple-example-6) (destructive atrribute)<br> [Example 7](#417-contextmenuview-simple-example-7) (inline + destructive atrribute)<br> [Example 10](#4110-contextmenuview-simple-example-10) (updating the menu) |
165-
| Examples for the different menu action configurations. | [Example 4](#414-contextmenuview-simple-example-4) (attributes: disabled, destructive, etc.)<br> [Example 8](#418-contextmenuview-simple-example-8) (menu state)<br> [Example 13](#4113-contextmenuview-simple-example-13) (subtitles) |
166-
| Examples for creating custom `ContextMenuView` previews. | [Example 11](https://github.com/dominicstop/react-native-ios-context-menu#4111-contextmenuview-simple-example-11) (simple preview)<br> [Example 12](#4112-contextmenuview-simple-example-12) (preview size)<br> [Example 14](#4114-contextmenuview-simple-example-14) (`commitStyle`)<br> [Example 15](#4115-contextmenuview-simple-example-15) (target preview) |
167-
| `MenuConfig` object and related enums/objects. This object is used in the component's `menuConfig` prop. | [`MenuConfig`](#332-menuconfig-object) object<br> [`IconConfig`](#333-iconconfig-object) object<br> [`MenuOptions`](#322-menuoptions-enum) enum |
168-
| `MenuAction` and related enums/objects. This object is used in a `MenuConfig` object (i.e. the `MenuConfig.menuItems` property). | [`MenuAction`](#331-menuaction-object) object<br> [`IconConfig`](#333-iconconfig-object) object<br> [`MenuState`](#324-menustate-enum) enum<br> [`MenuAttributes`](#323-menuatrributes-enum) enum |
169-
| `PreviewConfig` object and related enums. This object is used in the component's `previewConfig` prop. | [`PreviewConfig`](#334-previewconfig-object) object<br> `PreviewType` enum<br> [`PreviewSize`](#326-previewsize-enum) enum<br> [`CommitStyle`](#327-commitstyle-enum) enum |
165+
| General examples for `ContextMenuView`. | [Example 1](#411-contextmenuview-simple-example-1) (bare min. example),<br> [Example 9](#419-contextmenuview-simple-example-9) (events). |
166+
| Examples for configuring the menu icons. | [Example 2](#412-contextmenuview-simple-example-2) (SF Symbol icon),<br> [Example 16](#4116-contextmenuview-simple-example-16) (asset icon),<br> [Example 17](#4117-contextmenuview-simple-example-17) (icon tint), <br> [Example 18](#4118-contextmenuview-simple-example-18) (require icon). |
167+
| Examples for the different menu configurations. | [Example 3](#413-contextmenuview-simple-example-3) (submenu's),<br> [Example 5](#415-contextmenuview-simple-example-5) (inline menu i.e. menu sections),<br> [Example 6](#416-contextmenuview-simple-example-6) (destructive atrribute),<br> [Example 7](#417-contextmenuview-simple-example-7) (inline + destructive atrribute),<br> [Example 10](#4110-contextmenuview-simple-example-10) (updating the menu). |
168+
| Examples for the different menu action configurations. | [Example 4](#414-contextmenuview-simple-example-4) (attributes: disabled, destructive, etc.),<br> [Example 8](#418-contextmenuview-simple-example-8) (menu state),<br> [Example 13](#4113-contextmenuview-simple-example-13) (subtitles) |
169+
| Examples for creating custom `ContextMenuView` previews. | [Example 11](https://github.com/dominicstop/react-native-ios-context-menu#4111-contextmenuview-simple-example-11) (simple preview),<br> [Example 12](#4112-contextmenuview-simple-example-12) (preview size),<br> [Example 14](#4114-contextmenuview-simple-example-14) (`commitStyle`),<br> [Example 15](#4115-contextmenuview-simple-example-15) (target preview). |
170+
| `MenuConfig` object and related enums/objects. This object is used in the component's `menuConfig` prop. | [`MenuConfig`](#332-menuconfig-object) object,<br> [`IconConfig`](#333-iconconfig-object) object,<br> [`MenuOptions`](#322-menuoptions-enum) enum. |
171+
| `MenuAction` and related enums/objects. This object is used in a `MenuConfig` object (i.e. the `MenuConfig.menuItems` property). | [`MenuAction`](#331-menuaction-object) object,<br> [`IconConfig`](#333-iconconfig-object) object,<br> [`MenuState`](#324-menustate-enum) enum,<br> [`MenuAttributes`](#323-menuatrributes-enum) enum. |
172+
| `PreviewConfig` object and related enums. This object is used in the component's `previewConfig` prop. | [`PreviewConfig`](#334-previewconfig-object) object,<br> `PreviewType` enum,<br> [`PreviewSize`](#326-previewsize-enum) enum,<br> [`CommitStyle`](#327-commitstyle-enum) enum. |
170173

171174
</details>
172175

@@ -1418,6 +1421,69 @@ A example context menu configured to have menu actions with custom colors.
14181421

14191422
<br><br>
14201423

1424+
#### 4.1.18 `ContextMenuView` [Simple Example #18](https://github.com/dominicstop/react-native-ios-context-menu/blob/master/example/src/components/ContextMenuView/ContextMenuViewSimpleExample18.js)
1425+
A example context menu configured to have menu actions that uses a `REQUIRE` icon.
1426+
* Import the image component from react-native: `import { Image } from 'react-native';`
1427+
* The image component has a function called `Image.resolveAssetSource(souce)`. This function accepts a number returned from the `require()` function.
1428+
* In the `MenuConfig` or `MenuAction` object's optional `icon` property, set the`IconConfig.iconType` property to `REQUIRE`, and then set the `IconConfig.iconValue` property to the object returned by the `Image.resolveAssetSource()` function.
1429+
* In other words, when we want to use a `REQUIRE` icon, i.e. an icon that is resolved via `require('directory/image.png')`, then the `iconValue` property accepts a `AssetSource` object. You can get an `AssetSource` object via the built-in`Image.resolveAssetSource` function.
1430+
1431+
<br>
1432+
1433+
```jsx
1434+
1435+
const iconA = Image.resolveAssetSource(
1436+
require('../../assets/emoji-pleading-face.png')
1437+
);
1438+
1439+
const iconB = Image.resolveAssetSource(
1440+
require('../../assets/emoji-smiling-face-with-hearts.png')
1441+
);
1442+
1443+
const iconC = Image.resolveAssetSource(
1444+
require('../../assets/emoji-sparkling-heart.png')
1445+
);
1446+
1447+
export function ContextMenuViewSimpleExample18(props) {
1448+
return(
1449+
<ContextMenuView
1450+
menuConfig={{
1451+
menuTitle: 'ContextMenuViewSimpleExample18',
1452+
menuItems: [{
1453+
actionKey : 'key-01' ,
1454+
actionTitle: 'Action #1',
1455+
discoverabilityTitle: 'Use "REQUIRE" icon',
1456+
icon: {
1457+
iconType : 'REQUIRE',
1458+
iconValue: iconA,
1459+
}
1460+
}, {
1461+
actionKey : 'key-02' ,
1462+
actionTitle: 'Action #2',
1463+
discoverabilityTitle: 'Use "REQUIRE" icon',
1464+
icon: {
1465+
iconType : 'REQUIRE',
1466+
iconValue: iconB,
1467+
}
1468+
}, {
1469+
actionKey : 'key-03' ,
1470+
actionTitle: 'Action #3',
1471+
discoverabilityTitle: 'Use "REQUIRE" icon',
1472+
icon: {
1473+
iconType : 'REQUIRE',
1474+
iconValue: iconC,
1475+
}
1476+
}],
1477+
}}
1478+
/>
1479+
);
1480+
};
1481+
```
1482+
1483+
![Simple Example 18](./assets/example-screenshots/ContextMenuView-SimpleExample18.png)
1484+
1485+
<br><br>
1486+
14211487

14221488
### 4.2 `ContextMenuButton` Examples
14231489
Most of the examples in the `ContextMenuView` section also applies here. The props in `ContextMenuView` (like the `menuConfig` and `useActionSheetFallback` props) as well as most of the events behave the same.

0 commit comments

Comments
 (0)