diff options
author | Kirill Rogovoy <[email protected]> | 2021-07-19 20:06:08 +0300 |
---|---|---|
committer | Kirill Rogovoy <[email protected]> | 2021-07-19 20:06:08 +0300 |
commit | f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (patch) | |
tree | 575c0ff2cbb846252bd2e494c81c396846aab2f6 /app/components/text-field | |
parent | 67ad38d0a7cd319623e9f41c0c381ed5c5f6f973 (diff) |
Apply Prettier
Diffstat (limited to 'app/components/text-field')
-rw-r--r-- | app/components/text-field/text-field.story.tsx | 69 | ||||
-rw-r--r-- | app/components/text-field/text-field.tsx | 23 |
2 files changed, 55 insertions, 37 deletions
diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx index 74a4da0..20c73a4 100644 --- a/app/components/text-field/text-field.story.tsx +++ b/app/components/text-field/text-field.story.tsx @@ -1,12 +1,12 @@ /* 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" +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 @@ -14,24 +14,27 @@ const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }] const inputStyleArray: TextStyle[] = [ { - backgroundColor: "rebeccapurple", - color: "white", + backgroundColor: 'rebeccapurple', + color: 'white', padding: 40, }, { borderWidth: 10, borderRadius: 4, - borderColor: "#7fff00", + borderColor: '#7fff00', }, ] let alertWhenFocused = true -storiesOf("TextField", module) +storiesOf('TextField', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Labelling", () => ( + .add('Labelling', () => ( <Story> - <UseCase text="Normal text" usage="Use placeholder and label to set the text."> - <State initial={{ value: "" }}> + <UseCase + text="Normal text" + usage="Use placeholder and label to set the text." + > + <State initial={{ value: '' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -43,8 +46,11 @@ storiesOf("TextField", module) </State> </UseCase> - <UseCase text="i18n text" usage="Use placeholderTx and labelTx for i18n lookups"> - <State initial={{ value: "" }}> + <UseCase + text="i18n text" + usage="Use placeholderTx and labelTx for i18n lookups" + > + <State initial={{ value: '' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -57,14 +63,14 @@ storiesOf("TextField", module) </UseCase> </Story> )) - .add("Style Overrides", () => ( + .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 initial={{ value: 'Inigo' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -74,7 +80,7 @@ storiesOf("TextField", module) /> )} </State> - <State initial={{ value: "Montoya" }}> + <State initial={{ value: 'Montoya' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -89,19 +95,19 @@ storiesOf("TextField", module) 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 initial={{ value: 'fancy colour' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} value={state.value} label="Name" inputStyle={{ - backgroundColor: "rebeccapurple", - color: "white", + backgroundColor: 'rebeccapurple', + color: 'white', padding: 40, borderWidth: 10, borderRadius: 4, - borderColor: "hotpink", + borderColor: 'hotpink', }} /> )} @@ -109,8 +115,11 @@ storiesOf("TextField", module) <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" }}> + <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 })} @@ -125,29 +134,29 @@ storiesOf("TextField", module) </UseCase> </Story> )) - .add("Ref Forwarding", () => ( + .add('Ref Forwarding', () => ( <Story> <UseCase text="Ref Forwarding" usage=""> - <State initial={{ value: "fancy colour" }}> + <State initial={{ value: 'fancy colour' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} value={state.value} label="Name" inputStyle={{ - backgroundColor: "rebeccapurple", - color: "white", + backgroundColor: 'rebeccapurple', + color: 'white', padding: 40, borderWidth: 10, borderRadius: 4, - borderColor: "hotpink", + 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!") + Alert.alert('Text field focuesed with forwarded ref!') } }} /> diff --git a/app/components/text-field/text-field.tsx b/app/components/text-field/text-field.tsx index eea1a70..4da1591 100644 --- a/app/components/text-field/text-field.tsx +++ b/app/components/text-field/text-field.tsx @@ -1,8 +1,15 @@ -import React from "react" -import { StyleProp, TextInput, TextInputProps, TextStyle, View, ViewStyle } from "react-native" -import { color, spacing, typography } from "../../theme" -import { translate, TxKeyPath } from "../../i18n" -import { Text } from "../text/text" +import React from 'react' +import { + StyleProp, + TextInput, + TextInputProps, + TextStyle, + View, + ViewStyle, +} from 'react-native' +import { color, spacing, typography } from '../../theme' +import { translate, TxKeyPath } from '../../i18n' +import { Text } from '../text/text' // the base styling for the container const CONTAINER: ViewStyle = { @@ -71,7 +78,7 @@ export function TextField(props: TextFieldProps) { placeholder, labelTx, label, - preset = "default", + preset = 'default', style: styleOverride, inputStyle: inputStyleOverride, forwardedRef, @@ -80,7 +87,9 @@ export function TextField(props: TextFieldProps) { const containerStyles = [CONTAINER, PRESETS[preset], styleOverride] const inputStyles = [INPUT, inputStyleOverride] - const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder + const actualPlaceholder = placeholderTx + ? translate(placeholderTx) + : placeholder return ( <View style={containerStyles}> |