diff options
Diffstat (limited to 'src/TimePicker.jsx')
-rw-r--r-- | src/TimePicker.jsx | 40 |
1 files changed, 25 insertions, 15 deletions
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index da0c57b..7d2395d 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx | |||
@@ -29,9 +29,10 @@ const Picker = React.createClass({ | |||
29 | placeholder: PropTypes.string, | 29 | placeholder: PropTypes.string, |
30 | format: PropTypes.string, | 30 | format: PropTypes.string, |
31 | showHour: PropTypes.bool, | 31 | showHour: PropTypes.bool, |
32 | showMinute: PropTypes.bool, | ||
33 | showSecond: PropTypes.bool, | ||
32 | style: PropTypes.object, | 34 | style: PropTypes.object, |
33 | className: PropTypes.string, | 35 | className: PropTypes.string, |
34 | showSecond: PropTypes.bool, | ||
35 | disabledHours: PropTypes.func, | 36 | disabledHours: PropTypes.func, |
36 | disabledMinutes: PropTypes.func, | 37 | disabledMinutes: PropTypes.func, |
37 | disabledSeconds: PropTypes.func, | 38 | disabledSeconds: PropTypes.func, |
@@ -39,6 +40,8 @@ const Picker = React.createClass({ | |||
39 | onChange: PropTypes.func, | 40 | onChange: PropTypes.func, |
40 | onOpen: PropTypes.func, | 41 | onOpen: PropTypes.func, |
41 | onClose: PropTypes.func, | 42 | onClose: PropTypes.func, |
43 | addon: PropTypes.func, | ||
44 | name: PropTypes.string, | ||
42 | autoComplete: PropTypes.string, | 45 | autoComplete: PropTypes.string, |
43 | }, | 46 | }, |
44 | 47 | ||
@@ -53,6 +56,7 @@ const Picker = React.createClass({ | |||
53 | defaultOpenValue: moment(), | 56 | defaultOpenValue: moment(), |
54 | allowEmpty: true, | 57 | allowEmpty: true, |
55 | showHour: true, | 58 | showHour: true, |
59 | showMinute: true, | ||
56 | showSecond: true, | 60 | showSecond: true, |
57 | disabledHours: noop, | 61 | disabledHours: noop, |
58 | disabledMinutes: noop, | 62 | disabledMinutes: noop, |
@@ -62,11 +66,12 @@ const Picker = React.createClass({ | |||
62 | onChange: noop, | 66 | onChange: noop, |
63 | onOpen: noop, | 67 | onOpen: noop, |
64 | onClose: noop, | 68 | onClose: noop, |
65 | autoComplete: 'yes', | 69 | addon: noop, |
66 | }; | 70 | }; |
67 | }, | 71 | }, |
68 | 72 | ||
69 | getInitialState() { | 73 | getInitialState() { |
74 | this.saveInputRef = refFn.bind(this, 'picker'); | ||
70 | this.savePanelRef = refFn.bind(this, 'panelInstance'); | 75 | this.savePanelRef = refFn.bind(this, 'panelInstance'); |
71 | const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props; | 76 | const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props; |
72 | return { | 77 | return { |
@@ -102,7 +107,7 @@ const Picker = React.createClass({ | |||
102 | 107 | ||
103 | onEsc() { | 108 | onEsc() { |
104 | this.setOpen(false); | 109 | this.setOpen(false); |
105 | this.refs.picker.focus(); | 110 | this.picker.focus(); |
106 | }, | 111 | }, |
107 | 112 | ||
108 | onKeyDown(e) { | 113 | onKeyDown(e) { |
@@ -121,24 +126,23 @@ const Picker = React.createClass({ | |||
121 | }, | 126 | }, |
122 | 127 | ||
123 | getFormat() { | 128 | getFormat() { |
124 | const format = this.props.format; | 129 | const { format, showHour, showMinute, showSecond } = this.props; |
125 | if (format) { | 130 | if (format) { |
126 | return format; | 131 | return format; |
127 | } | 132 | } |
128 | if (!this.props.showSecond) { | 133 | return [ |
129 | return 'HH:mm'; | 134 | showHour ? 'HH' : '', |
130 | } | 135 | showMinute ? 'mm' : '', |
131 | if (!this.props.showHour) { | 136 | showSecond ? 'ss' : '', |
132 | return 'mm:ss'; | 137 | ].filter(item => !!item).join(':'); |
133 | } | ||
134 | return 'HH:mm:ss'; | ||
135 | }, | 138 | }, |
136 | 139 | ||
137 | getPanelElement() { | 140 | getPanelElement() { |
138 | const { | 141 | const { |
139 | prefixCls, placeholder, disabledHours, | 142 | prefixCls, placeholder, disabledHours, |
140 | disabledMinutes, disabledSeconds, hideDisabledOptions, | 143 | disabledMinutes, disabledSeconds, hideDisabledOptions, |
141 | allowEmpty, showHour, showSecond, defaultOpenValue, clearText, | 144 | allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, |
145 | addon, | ||
142 | } = this.props; | 146 | } = this.props; |
143 | return ( | 147 | return ( |
144 | <Panel | 148 | <Panel |
@@ -150,8 +154,9 @@ const Picker = React.createClass({ | |||
150 | onClear={this.onPanelClear} | 154 | onClear={this.onPanelClear} |
151 | defaultOpenValue={defaultOpenValue} | 155 | defaultOpenValue={defaultOpenValue} |
152 | showHour={showHour} | 156 | showHour={showHour} |
153 | onEsc={this.onEsc} | 157 | showMinute={showMinute} |
154 | showSecond={showSecond} | 158 | showSecond={showSecond} |
159 | onEsc={this.onEsc} | ||
155 | allowEmpty={allowEmpty} | 160 | allowEmpty={allowEmpty} |
156 | format={this.getFormat()} | 161 | format={this.getFormat()} |
157 | placeholder={placeholder} | 162 | placeholder={placeholder} |
@@ -159,6 +164,7 @@ const Picker = React.createClass({ | |||
159 | disabledMinutes={disabledMinutes} | 164 | disabledMinutes={disabledMinutes} |
160 | disabledSeconds={disabledSeconds} | 165 | disabledSeconds={disabledSeconds} |
161 | hideDisabledOptions={hideDisabledOptions} | 166 | hideDisabledOptions={hideDisabledOptions} |
167 | addon={addon} | ||
162 | /> | 168 | /> |
163 | ); | 169 | ); |
164 | }, | 170 | }, |
@@ -184,11 +190,12 @@ const Picker = React.createClass({ | |||
184 | const { | 190 | const { |
185 | prefixCls, placeholder, placement, align, | 191 | prefixCls, placeholder, placement, align, |
186 | disabled, transitionName, style, className, showHour, | 192 | disabled, transitionName, style, className, showHour, |
193 | showMinute, showSecond, getPopupContainer, name, | ||
187 | showSecond, getPopupContainer, autoComplete, | 194 | showSecond, getPopupContainer, autoComplete, |
188 | } = this.props; | 195 | } = this.props; |
189 | const { open, value } = this.state; | 196 | const { open, value } = this.state; |
190 | let popupClassName; | 197 | let popupClassName; |
191 | if (!showHour || !showSecond) { | 198 | if (!showHour || !showMinute || !showSecond) { |
192 | popupClassName = `${prefixCls}-panel-narrow`; | 199 | popupClassName = `${prefixCls}-panel-narrow`; |
193 | } | 200 | } |
194 | return ( | 201 | return ( |
@@ -209,7 +216,10 @@ const Picker = React.createClass({ | |||
209 | <span className={`${prefixCls} ${className}`} style={style}> | 216 | <span className={`${prefixCls} ${className}`} style={style}> |
210 | <input | 217 | <input |
211 | className={`${prefixCls}-input`} | 218 | className={`${prefixCls}-input`} |
212 | ref="picker" type="text" placeholder={placeholder} | 219 | ref={this.saveInputRef} |
220 | type="text" | ||
221 | placeholder={placeholder} | ||
222 | name={name} | ||
213 | readOnly | 223 | readOnly |
214 | onKeyDown={this.onKeyDown} | 224 | onKeyDown={this.onKeyDown} |
215 | disabled={disabled} value={value && value.format(this.getFormat()) || ''} | 225 | disabled={disabled} value={value && value.format(this.getFormat()) || ''} |