1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
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 = {
paddingVertical: spacing[3],
}
// the base styling for the TextInput
const INPUT: TextStyle = {
fontFamily: typography.primary,
color: color.text,
minHeight: 44,
fontSize: 18,
backgroundColor: color.palette.white,
}
// currently we have no presets, but that changes quickly when you build your app.
const PRESETS: { [name: string]: ViewStyle } = {
default: {},
}
export interface TextFieldProps extends TextInputProps {
/**
* The placeholder i18n key.
*/
placeholderTx?: TxKeyPath
/**
* The Placeholder text if no placeholderTx is provided.
*/
placeholder?: string
/**
* The label i18n key.
*/
labelTx?: TxKeyPath
/**
* The label text if no labelTx is provided.
*/
label?: string
/**
* Optional container style overrides useful for margins & padding.
*/
style?: StyleProp<ViewStyle>
/**
* Optional style overrides for the input.
*/
inputStyle?: StyleProp<TextStyle>
/**
* Various look & feels.
*/
preset?: keyof typeof PRESETS
forwardedRef?: any
}
/**
* A component which has a label and an input together.
*/
export function TextField(props: TextFieldProps) {
const {
placeholderTx,
placeholder,
labelTx,
label,
preset = 'default',
style: styleOverride,
inputStyle: inputStyleOverride,
forwardedRef,
...rest
} = props
const containerStyles = [CONTAINER, PRESETS[preset], styleOverride]
const inputStyles = [INPUT, inputStyleOverride]
const actualPlaceholder = placeholderTx
? translate(placeholderTx)
: placeholder
return (
<View style={containerStyles}>
<Text preset="fieldLabel" tx={labelTx} text={label} />
<TextInput
placeholder={actualPlaceholder}
placeholderTextColor={color.palette.lighterGrey}
underlineColorAndroid={color.transparent}
{...rest}
style={inputStyles}
ref={forwardedRef}
/>
</View>
)
}
|
