diff options
author | Kirill Rogovoy <[email protected]> | 2021-07-20 21:24:52 +0300 |
---|---|---|
committer | Kirill Rogovoy <[email protected]> | 2021-07-20 21:24:52 +0300 |
commit | 5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb (patch) | |
tree | 273dfc086444533d86d580961c92ba8d14781a67 /app/components/switch/switch.story.tsx | |
parent | f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff) |
WIP
Diffstat (limited to 'app/components/switch/switch.story.tsx')
-rw-r--r-- | app/components/switch/switch.story.tsx | 119 |
1 files changed, 0 insertions, 119 deletions
diff --git a/app/components/switch/switch.story.tsx b/app/components/switch/switch.story.tsx deleted file mode 100644 index bbd29ee..0000000 --- a/app/components/switch/switch.story.tsx +++ /dev/null @@ -1,119 +0,0 @@ -/* eslint-disable react-native/no-inline-styles */ -/* eslint-disable react-native/no-color-literals */ - -import * as React from 'react' -import { View, ViewStyle } from 'react-native' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Toggle } from 'react-powerplug' -import { Switch } from './switch' - -declare let module - -const styleArray: ViewStyle[] = [{ borderColor: '#686868' }] - -const trackOffStyle: ViewStyle[] = [ - { backgroundColor: '#686868' }, - { - height: 80, - borderRadius: 0, - }, -] -const trackOnStyle: ViewStyle[] = [ - { - backgroundColor: '#b1008e', - borderColor: '#686868', - }, - { - height: 80, - borderRadius: 0, - }, -] -const thumbOffStyle: ViewStyle[] = [ - { - backgroundColor: '#b1008e', - borderColor: '#686868', - }, - { - height: 80, - borderRadius: 0, - }, -] -const thumbOnStyle: ViewStyle[] = [ - { backgroundColor: '#f0c' }, - { - height: 80, - borderRadius: 0, - borderColor: '#686868', - }, -] - -storiesOf('Switch', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Behaviour', () => ( - <Story> - <UseCase - text="The Toggle Switch" - usage="Use the switch to represent on/off states." - > - <Toggle initial={false}> - {({ on, toggle }) => <Switch value={on} onToggle={toggle} />} - </Toggle> - </UseCase> - <UseCase text="value = true" usage="This is permanently on."> - <Switch value={true} /> - </UseCase> - <UseCase text="value = false" usage="This is permanantly off."> - <Switch value={false} /> - </UseCase> - </Story> - )) - .add('Styling', () => ( - <Story> - <UseCase text="Custom Styling" usage="Promise me this won't happen."> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Switch - trackOnStyle={{ - backgroundColor: 'green', - borderColor: 'black', - }} - trackOffStyle={{ - backgroundColor: 'red', - borderColor: 'maroon', - }} - thumbOnStyle={{ backgroundColor: 'cyan' }} - thumbOffStyle={{ backgroundColor: 'pink' }} - value={on} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - - <UseCase text="Style array" usage="This either."> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Switch - style={styleArray} - trackOffStyle={trackOffStyle} - trackOnStyle={trackOnStyle} - thumbOffStyle={thumbOffStyle} - thumbOnStyle={thumbOnStyle} - // trackOnStyle={{ backgroundColor: "green", borderColor: "black" }} - // trackOffStyle={{ backgroundColor: "red", borderColor: "maroon" }} - // thumbOnStyle={{ backgroundColor: "cyan" }} - // thumbOffStyle={{ backgroundColor: "pink" }} - - value={on} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - </Story> - )) |