update modal stories

Emurgo · Jul 24, 2021 · 3dfe98a · 3dfe98a
1 parent 8de859d
commit 3dfe98a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 37 deletions.
diff --git a/src/components/Common/DangerousActionModal.stories.js b/src/components/Common/DangerousActionModal.stories.js
@@ -1,23 +1,27 @@
 // @flow
 
-import React, {useState} from 'react'
-
+import React from 'react'
 import {Text} from '../UiKit'
 import {storiesOf} from '@storybook/react-native'
 
+import {withModalProps} from '../../../storybook/decorators'
 import DangerousActionModal from './DangerousActionModal'
 
-const Modal = () => {
-  const [visible, setIsVisible] = useState(true)
-  return (
+storiesOf('DangerousActionModal', module)
+  .addDecorator(withModalProps)
+  .add('Default', ({visible, onPress, onRequestClose}) => (
     <DangerousActionModal
       visible={visible}
-      onRequestClose={() => setIsVisible(false)}
+      onRequestClose={onRequestClose}
       showCloseIcon
       title="Attention"
       primaryButton={{
         label: 'Cancel',
-        onPress: () => setIsVisible(false),
+        onPress: () => onPress('primary'),
+      }}
+      secondaryButton={{
+        label: 'Cancel',
+        onPress: () => onPress('secondary'),
       }}
       alertBox={{
         content: [
@@ -34,7 +38,4 @@ const Modal = () => {
         qui officia deserunt mollit anim id est laborum.
       </Text>
     </DangerousActionModal>
-  )
-}
-
-storiesOf('DangerousAction', module).add('As modal', () => <Modal />)
+  ))
diff --git a/src/components/Ledger/LedgerTransportSwitchModal.stories.js b/src/components/Ledger/LedgerTransportSwitchModal.stories.js
@@ -2,17 +2,18 @@
 
 import React from 'react'
 import {storiesOf} from '@storybook/react-native'
-import {action} from '@storybook/addon-actions'
-import StorybookModalWrapper from '../Common/StorybookModalWrapper'
 
+import {withModalProps} from '../../../storybook/decorators'
 import LedgerTransportSwitchModal from './LedgerTransportSwitchModal'
 
-const StatefulModal = StorybookModalWrapper(LedgerTransportSwitchModal)
-
-storiesOf('Ledger Transport Switch Modal', module).add('default', () => (
-  <StatefulModal
-    onPress={() => action('clicked')()}
-    onSelectUSB={() => action('USB selected')()}
-    onSelectBLE={() => action('BLE selected')()}
-  />
-))
+storiesOf('Ledger Transport Switch Modal', module)
+  .addDecorator(withModalProps)
+  .add('default', ({visible, onRequestClose, onPress}) => (
+    <LedgerTransportSwitchModal
+      visible={visible}
+      showCloseIcon
+      onRequestClose={onRequestClose}
+      onSelectUSB={onPress('USB selected')}
+      onSelectBLE={onPress('BLE selected')}
+    />
+  ))
diff --git a/src/components/WalletInit/CreateWallet/MnemonicExplanationModal.stories.js b/src/components/WalletInit/CreateWallet/MnemonicExplanationModal.stories.js
@@ -1,23 +1,14 @@
 // @flow
 
 import React from 'react'
-import {compose} from 'redux'
-import {withStateHandlers} from 'recompose'
 
 import {storiesOf} from '@storybook/react-native'
 
 import MnemonicExplanationModal from './MnemonicExplanationModal'
+import {withModalProps} from '../../../../storybook/decorators'
 
-const ModalWrapper = compose(
-  withStateHandlers(
-    {
-      visible: true,
-    },
-    {
-      onRequestClose: () => () => ({visible: false}),
-      onConfirm: () => () => ({visible: false}),
-    },
-  ),
-)(MnemonicExplanationModal)
-
-storiesOf('MnemonicExplanationModal', module).add('Default', () => <ModalWrapper />)
+storiesOf('MnemonicExplanationModal', module)
+  .addDecorator(withModalProps)
+  .add('Default', ({visible, onPress, onRequestClose}) => (
+    <MnemonicExplanationModal visible={visible} onConfirm={onPress('onConfirm')} onRequestClose={onRequestClose} />
+  ))