summaryrefslogtreecommitdiff
path: root/app/components/text-field
diff options
context:
space:
mode:
Diffstat (limited to 'app/components/text-field')
-rw-r--r--app/components/text-field/text-field.story.tsx69
-rw-r--r--app/components/text-field/text-field.tsx23
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}>