From 497f032ac4ecaca6e077a67f5099dfdbd9953a3b Mon Sep 17 00:00:00 2001 From: Dominic Go <18517029+dominicstop@users.noreply.github.com> Date: Thu, 25 Nov 2021 17:43:38 +0800 Subject: [PATCH] =?UTF-8?q?=E2=AD=90=EF=B8=8F=20Example=20-=20Add=20`Conte?= =?UTF-8?q?xtMenuViewExample12`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/src/App.tsx | 2 + .../src/examples/ContextMenuViewExample12.tsx | 90 +++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 example/src/examples/ContextMenuViewExample12.tsx diff --git a/example/src/App.tsx b/example/src/App.tsx index 5a4cc9a..20491d5 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -14,6 +14,7 @@ import { ContextMenuViewExample08 } from './examples/ContextMenuViewExample08'; import { ContextMenuViewExample09 } from './examples/ContextMenuViewExample09'; import { ContextMenuViewExample10 } from './examples/ContextMenuViewExample10'; import { ContextMenuViewExample11 } from './examples/ContextMenuViewExample11'; +import { ContextMenuViewExample12 } from './examples/ContextMenuViewExample12'; type ExampleListItem = { @@ -33,6 +34,7 @@ const EXAMPLE_COMPONENTS = [ ContextMenuViewExample09, ContextMenuViewExample10, ContextMenuViewExample11, + ContextMenuViewExample12, ]; const EXAMPLE_ITEMS: ExampleListItem[] = EXAMPLE_COMPONENTS.map((item, index) => ({ diff --git a/example/src/examples/ContextMenuViewExample12.tsx b/example/src/examples/ContextMenuViewExample12.tsx new file mode 100644 index 0000000..f1bf64b --- /dev/null +++ b/example/src/examples/ContextMenuViewExample12.tsx @@ -0,0 +1,90 @@ +/* eslint-disable react-native/no-inline-styles */ +import * as React from 'react'; +import { Text, View } from 'react-native'; + +import { ContextMenuView } from 'react-native-ios-context-menu'; + +import type { ContextMenuExampleProps } from './SharedExampleTypes'; +import { ContextMenuCard } from '../components/ContextMenuCard'; + + +export function ContextMenuViewExample12(props: ContextMenuExampleProps) { + const [timer, setTimer] = React.useState(0); + const increment = React.useRef(null); + + const handleStart = () => { + increment.current = setInterval(() => { + setTimer((prevTimer) => prevTimer + 1); + }, 1000); + }; + + const handleStop = () => { + clearInterval(increment.current); + }; + + const handleReset = () => { + clearInterval(increment.current); + setTimer(0); + }; + + return ( + 0) && { + actionKey : 'reset', + actionTitle : `Reset Counter`, + menuAttributes: ['destructive'], + icon: { + iconType : 'SYSTEM', + iconValue: 'trash', + } + }], + }} + previewConfig={{ + previewType: 'CUSTOM', + backgroundColor: 'white' + }} + renderPreview={() => ( + + + {`Counter: ${timer}`} + + + {(timer % 2 === 0)? 'EVEN' : 'The number is: ODD'} + + + )} + onMenuDidShow={() => handleStart()} + onMenuDidHide={() => handleStop()} + onPressMenuItem={({nativeEvent}) => { + switch (nativeEvent.actionKey) { + case 'add': + setTimer((prevTimer) => prevTimer + 100); + break; + + case 'reset': + handleReset(); + break; + }; + }} + > + + + ); +}; \ No newline at end of file