-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathInput.js
More file actions
117 lines (90 loc) · 2.3 KB
/
Input.js
File metadata and controls
117 lines (90 loc) · 2.3 KB
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
'use strict'
import React from 'react'
import classnames from 'classnames'
import Regs from './utils/regs'
import getGrid from './higherorder/grid'
import { requireCss } from './themes'
requireCss('input')
requireCss('form-control')
@getGrid
class Input extends React.Component {
static displayName = 'Input'
static propTypes = {
className: React.PropTypes.string,
id: React.PropTypes.string,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
onFocus: React.PropTypes.func,
placeholder: React.PropTypes.string,
readOnly: React.PropTypes.bool,
rows: React.PropTypes.number,
style: React.PropTypes.object,
type: React.PropTypes.string,
value: React.PropTypes.any
}
componentWillReceiveProps (nextProps) {
if (nextProps.value !== this.props.value) {
this.setValue(nextProps.value)
}
}
state = {
value: this.props.value
}
getValue () {
return this.refs.input.value
}
setValue (value) {
this.setState({ value })
}
handleChange (event) {
if (this.props.readOnly) {
return
}
let value = event.target.value
if (value && (this.props.type === 'integer' || this.props.type === 'number')) {
if (!Regs[this.props.type].test(value)) {
value = this.state.value || ''
}
}
this.setState({ value: value })
setTimeout(() => {
if (this.props.onChange) {
this.props.onChange(value)
}
}, 0)
}
render () {
const props = {
className: classnames(
this.props.className,
'rct-form-control',
this.getGrid()
),
onChange: this.handleChange.bind(this),
type: this.props.type === 'password' ? 'password' : 'text',
value: this.state.value
}
if (this.props.type === 'textarea') {
return (<textarea ref="input" {...this.props} {...props} rows={this.props.rows} />)
} else {
return (<input ref="input" {...this.props} {...props} />)
}
}
}
export default Input
import FormControl from './FormControl'
FormControl.register(
['text', 'email', 'alpha', 'alphanum', 'password', 'url', 'textarea'],
function (props) {
return <Input {...props} />
},
Input
)
FormControl.register(
['integer', 'number'],
function (props) {
return <Input {...props} />
},
Input,
'number'
)