diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
commit | e5021187e96b78b53203bd95d08d6818aea47d17 (patch) | |
tree | 37ec45d00eb963db53cd4bb4f04a770414b351cc /app/components/text-field/text-field.story.tsx |
New Ignite 7.0.6 app
Diffstat (limited to 'app/components/text-field/text-field.story.tsx')
-rw-r--r-- | app/components/text-field/text-field.story.tsx | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx new file mode 100644 index 0000000..74a4da0 --- /dev/null +++ b/app/components/text-field/text-field.story.tsx @@ -0,0 +1,159 @@ +/* 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> + )) |