react-native-ios-context-menu/example/src/examples/ContextMenuViewExample03.tsx
Dominic Go 6c11234246 💫 Example - Updated Example Components
Summary: Added handlers to the `onPressMenuItem` event props.
2022-01-02 00:59:16 +08:00

74 lines
2.0 KiB
TypeScript

import * as React from 'react';
import { Alert } from 'react-native';
import { ContextMenuView } from 'react-native-ios-context-menu';
import type { ContextMenuExampleProps } from './SharedExampleTypes';
import { ContextMenuCard } from '../components/ContextMenuCard';
export function ContextMenuViewExample03(props: ContextMenuExampleProps) {
return (
<ContextMenuView
style={props.style}
menuConfig={{
menuTitle: 'ContextMenuViewExample03',
menuItems: [{
actionKey : 'key-01',
actionTitle: 'Action #1',
icon: {
type: 'IMAGE_SYSTEM',
imageValue: {
systemName: 'folder',
},
}
}, {
menuTitle: 'Submenu...',
menuItems: [{
actionKey : 'key-01-01',
actionTitle: 'Submenu Action #1',
icon: {
type: 'IMAGE_SYSTEM',
imageValue: {
systemName: 'star',
},
}
}, {
actionKey : 'key-01-02',
actionTitle: 'Submenu Action #2',
icon: {
type: 'IMAGE_SYSTEM',
imageValue: {
systemName: 'star.lefthalf.fill',
},
}
}, {
actionKey : 'key-01-03',
actionTitle: 'Submenu Action #3',
icon: {
type: 'IMAGE_SYSTEM',
imageValue: {
systemName: 'star.fill',
},
}
}]
}],
}}
onPressMenuItem={({nativeEvent}) => {
Alert.alert(
'onPressMenuItem Event',
`actionKey: ${nativeEvent.actionKey} - actionTitle: ${nativeEvent.actionTitle}`
);
}}
>
<ContextMenuCard
index={props.index}
title={'ContextMenuViewExample03'}
subtitle={'submenu'}
description={[
`Context menu with 1 action, and 1 submenu that has 3 submenu actions.`
]}
/>
</ContextMenuView>
);
};