/
new-input.js
124 lines (115 loc) · 2.99 KB
/
new-input.js
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
// @flow
import * as React from 'react'
import PlainInput, {type PropsWithInput, type KeyboardType} from './plain-input'
import Box, {Box2} from './box'
import Icon, {type IconType, castPlatformStyles} from './icon'
import {getStyle as getTextStyle, type TextType} from './text'
import {
type StylesCrossPlatform,
collapseStyles,
globalColors,
globalMargins,
platformStyles,
styleSheetCreate,
} from '../styles'
export type _Props = {
containerStyle?: StylesCrossPlatform,
decoration?: React.Node,
error?: boolean,
forwardedRef: React.Ref<typeof PlainInput>,
hideBorder?: boolean,
icon?: IconType,
}
type DefaultProps = {
flexable: boolean,
keyboardType: KeyboardType,
textType: TextType,
}
type Props = PropsWithInput<_Props>
type State = {
focused: boolean,
}
class ReflessNewInput extends React.Component<DefaultProps & Props, State> {
static defaultProps = {
flexable: true,
keyboardType: 'default',
textType: 'BodySemibold',
}
state: State = {
focused: false,
}
_onFocus = () => {
this.setState({focused: true})
this.props.onFocus && this.props.onFocus()
}
_onBlur = () => {
this.setState({focused: false})
this.props.onBlur && this.props.onBlur()
}
render() {
const textStyle = getTextStyle(this.props.textType)
const {containerStyle, decoration, error, forwardedRef, hideBorder, icon, ...plainInputProps} = this.props
return (
<Box2
direction="horizontal"
style={collapseStyles([
styles.container,
this.state.focused && styles.focused,
this.props.error && styles.error,
this.props.hideBorder && styles.hideBorder,
this.props.containerStyle,
])}
>
{!!this.props.icon && (
<Box style={styles.icon}>
<Icon
color={globalColors.black_20}
type={this.props.icon}
fontSize={textStyle.fontSize}
style={castPlatformStyles(styles.displayFlex)}
/>
</Box>
)}
<PlainInput
{...plainInputProps}
onFocus={this._onFocus}
onBlur={this._onBlur}
ref={this.props.forwardedRef}
/>
{this.props.decoration}
</Box2>
)
}
}
// $FlowIssue doesn't know about forwardRef (https://github.com/facebook/flow/issues/6103)
const NewInput = React.forwardRef((props, ref) => <ReflessNewInput {...props} forwardedRef={ref} />)
const styles = styleSheetCreate({
container: platformStyles({
common: {
alignItems: 'center',
margin: 0,
borderColor: globalColors.black_10,
borderRadius: 4,
borderStyle: 'solid',
borderWidth: 1,
padding: globalMargins.xtiny,
},
isElectron: {width: '100%'},
}),
focused: {
borderColor: globalColors.blue,
},
error: {
borderColor: globalColors.red,
},
hideBorder: {
borderWidth: 0,
},
displayFlex: {
display: 'flex',
},
icon: {
marginRight: globalMargins.xtiny,
},
})
export default NewInput