diff options
Diffstat (limited to 'app/components/text-field/text-field.story.tsx')
-rw-r--r-- | app/components/text-field/text-field.story.tsx | 168 |
1 files changed, 0 insertions, 168 deletions
diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx deleted file mode 100644 index 20c73a4..0000000 --- a/app/components/text-field/text-field.story.tsx +++ /dev/null @@ -1,168 +0,0 @@ -/* eslint-disable react-native/no-inline-styles */ -/* eslint-disable react-native/no-color-literals */ - -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Text, TextField } from '../' -import { State } from 'react-powerplug' -import { ViewStyle, TextStyle, Alert } from 'react-native' - -declare let module - -const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }] - -const inputStyleArray: TextStyle[] = [ - { - backgroundColor: 'rebeccapurple', - color: 'white', - padding: 40, - }, - { - borderWidth: 10, - borderRadius: 4, - borderColor: '#7fff00', - }, -] -let alertWhenFocused = true - -storiesOf('TextField', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Labelling', () => ( - <Story> - <UseCase - text="Normal text" - usage="Use placeholder and label to set the text." - > - <State initial={{ value: '' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Name" - placeholder="omg your name" - /> - )} - </State> - </UseCase> - - <UseCase - text="i18n text" - usage="Use placeholderTx and labelTx for i18n lookups" - > - <State initial={{ value: '' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - placeholderTx="storybook.placeholder" - labelTx="storybook.field" - /> - )} - </State> - </UseCase> - </Story> - )) - .add('Style Overrides', () => ( - <Story> - <UseCase - noPad - text="Container Styles" - usage="Useful for applying margins when laying out a form to remove padding if the form brings its own." - > - <State initial={{ value: 'Inigo' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="First Name" - style={{ paddingTop: 0, paddingHorizontal: 40 }} - /> - )} - </State> - <State initial={{ value: 'Montoya' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Last Name" - style={{ paddingBottom: 0 }} - /> - )} - </State> - </UseCase> - <UseCase - text="Input Styles" - usage="Useful for 1-off exceptions. Try to steer towards presets for this kind of thing." - > - <State initial={{ value: 'fancy colour' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Name" - inputStyle={{ - backgroundColor: 'rebeccapurple', - color: 'white', - padding: 40, - borderWidth: 10, - borderRadius: 4, - borderColor: 'hotpink', - }} - /> - )} - </State> - <Text text="* attention designers: i am so sorry" preset="secondary" /> - </UseCase> - - <UseCase - text="Style array" - usage="Useful for 1-off exceptions, but using style arrays." - > - <State initial={{ value: 'fancy colour' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Name" - style={styleArray} - inputStyle={inputStyleArray} - /> - )} - </State> - <Text text="* attention designers: i am so sorry" preset="secondary" /> - </UseCase> - </Story> - )) - .add('Ref Forwarding', () => ( - <Story> - <UseCase text="Ref Forwarding" usage=""> - <State initial={{ value: 'fancy colour' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Name" - inputStyle={{ - backgroundColor: 'rebeccapurple', - color: 'white', - padding: 40, - borderWidth: 10, - borderRadius: 4, - borderColor: 'hotpink', - }} - forwardedRef={(ref) => ref} - onFocus={() => { - if (alertWhenFocused) { - // Prevent text field focus from being repeatedly triggering alert - alertWhenFocused = false - Alert.alert('Text field focuesed with forwarded ref!') - } - }} - /> - )} - </State> - <Text text="* attention designers: i am so sorry" preset="secondary" /> - </UseCase> - </Story> - )) |