diff options
Diffstat (limited to 'src/TimePicker.jsx')
-rw-r--r-- | src/TimePicker.jsx | 109 |
1 files changed, 55 insertions, 54 deletions
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 7065333..1a3516e 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx | |||
@@ -1,4 +1,5 @@ | |||
1 | import React, { PropTypes } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
2 | import Trigger from 'rc-trigger'; | 3 | import Trigger from 'rc-trigger'; |
3 | import Panel from './Panel'; | 4 | import Panel from './Panel'; |
4 | import placements from './placements'; | 5 | import placements from './placements'; |
@@ -11,8 +12,8 @@ function refFn(field, component) { | |||
11 | this[field] = component; | 12 | this[field] = component; |
12 | } | 13 | } |
13 | 14 | ||
14 | const Picker = React.createClass({ | 15 | class Picker extends Component { |
15 | propTypes: { | 16 | static propTypes = { |
16 | prefixCls: PropTypes.string, | 17 | prefixCls: PropTypes.string, |
17 | clearText: PropTypes.string, | 18 | clearText: PropTypes.string, |
18 | value: PropTypes.object, | 19 | value: PropTypes.object, |
@@ -44,43 +45,42 @@ const Picker = React.createClass({ | |||
44 | name: PropTypes.string, | 45 | name: PropTypes.string, |
45 | autoComplete: PropTypes.string, | 46 | autoComplete: PropTypes.string, |
46 | use12Hours: PropTypes.bool, | 47 | use12Hours: PropTypes.bool, |
47 | }, | 48 | }; |
48 | 49 | ||
49 | getDefaultProps() { | 50 | static defaultProps = { |
50 | return { | 51 | clearText: 'clear', |
51 | clearText: 'clear', | 52 | prefixCls: 'rc-time-picker', |
52 | prefixCls: 'rc-time-picker', | 53 | defaultOpen: false, |
53 | defaultOpen: false, | 54 | style: {}, |
54 | style: {}, | 55 | className: '', |
55 | className: '', | 56 | align: {}, |
56 | align: {}, | 57 | defaultOpenValue: moment(), |
57 | defaultOpenValue: moment(), | 58 | allowEmpty: true, |
58 | allowEmpty: true, | 59 | showHour: true, |
59 | showHour: true, | 60 | showMinute: true, |
60 | showMinute: true, | 61 | showSecond: true, |
61 | showSecond: true, | 62 | disabledHours: noop, |
62 | disabledHours: noop, | 63 | disabledMinutes: noop, |
63 | disabledMinutes: noop, | 64 | disabledSeconds: noop, |
64 | disabledSeconds: noop, | 65 | hideDisabledOptions: false, |
65 | hideDisabledOptions: false, | 66 | placement: 'bottomLeft', |
66 | placement: 'bottomLeft', | 67 | onChange: noop, |
67 | onChange: noop, | 68 | onOpen: noop, |
68 | onOpen: noop, | 69 | onClose: noop, |
69 | onClose: noop, | 70 | addon: noop, |
70 | addon: noop, | 71 | use12Hours: false, |
71 | use12Hours: false, | 72 | }; |
72 | }; | 73 | |
73 | }, | 74 | constructor(props) { |
74 | 75 | super(props); | |
75 | getInitialState() { | ||
76 | this.saveInputRef = refFn.bind(this, 'picker'); | 76 | this.saveInputRef = refFn.bind(this, 'picker'); |
77 | this.savePanelRef = refFn.bind(this, 'panelInstance'); | 77 | this.savePanelRef = refFn.bind(this, 'panelInstance'); |
78 | const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props; | 78 | const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props; |
79 | return { | 79 | this.state = { |
80 | open, | 80 | open, |
81 | value, | 81 | value, |
82 | }; | 82 | }; |
83 | }, | 83 | } |
84 | 84 | ||
85 | componentWillReceiveProps(nextProps) { | 85 | componentWillReceiveProps(nextProps) { |
86 | const { value, open } = nextProps; | 86 | const { value, open } = nextProps; |
@@ -92,31 +92,31 @@ const Picker = React.createClass({ | |||
92 | if (open !== undefined) { | 92 | if (open !== undefined) { |
93 | this.setState({ open }); | 93 | this.setState({ open }); |
94 | } | 94 | } |
95 | }, | 95 | } |
96 | 96 | ||
97 | onPanelChange(value) { | 97 | onPanelChange = (value) => { |
98 | this.setValue(value); | 98 | this.setValue(value); |
99 | }, | 99 | } |
100 | 100 | ||
101 | onPanelClear() { | 101 | onPanelClear = () => { |
102 | this.setValue(null); | 102 | this.setValue(null); |
103 | this.setOpen(false); | 103 | this.setOpen(false); |
104 | }, | 104 | } |
105 | 105 | ||
106 | onVisibleChange(open) { | 106 | onVisibleChange = (open) => { |
107 | this.setOpen(open); | 107 | this.setOpen(open); |
108 | }, | 108 | } |
109 | 109 | ||
110 | onEsc() { | 110 | onEsc = () => { |
111 | this.setOpen(false); | 111 | this.setOpen(false); |
112 | this.focus(); | 112 | this.focus(); |
113 | }, | 113 | } |
114 | 114 | ||
115 | onKeyDown(e) { | 115 | onKeyDown = (e) => { |
116 | if (e.keyCode === 40) { | 116 | if (e.keyCode === 40) { |
117 | this.setOpen(true); | 117 | this.setOpen(true); |
118 | } | 118 | } |
119 | }, | 119 | } |
120 | 120 | ||
121 | setValue(value) { | 121 | setValue(value) { |
122 | if (!('value' in this.props)) { | 122 | if (!('value' in this.props)) { |
@@ -125,7 +125,7 @@ const Picker = React.createClass({ | |||
125 | }); | 125 | }); |
126 | } | 126 | } |
127 | this.props.onChange(value); | 127 | this.props.onChange(value); |
128 | }, | 128 | } |
129 | 129 | ||
130 | getFormat() { | 130 | getFormat() { |
131 | const { format, showHour, showMinute, showSecond, use12Hours } = this.props; | 131 | const { format, showHour, showMinute, showSecond, use12Hours } = this.props; |
@@ -148,7 +148,7 @@ const Picker = React.createClass({ | |||
148 | showMinute ? 'mm' : '', | 148 | showMinute ? 'mm' : '', |
149 | showSecond ? 'ss' : '', | 149 | showSecond ? 'ss' : '', |
150 | ].filter(item => !!item).join(':'); | 150 | ].filter(item => !!item).join(':'); |
151 | }, | 151 | } |
152 | 152 | ||
153 | getPanelElement() { | 153 | getPanelElement() { |
154 | const { | 154 | const { |
@@ -181,7 +181,7 @@ const Picker = React.createClass({ | |||
181 | addon={addon} | 181 | addon={addon} |
182 | /> | 182 | /> |
183 | ); | 183 | ); |
184 | }, | 184 | } |
185 | 185 | ||
186 | setOpen(open) { | 186 | setOpen(open) { |
187 | const { onOpen, onClose } = this.props; | 187 | const { onOpen, onClose } = this.props; |
@@ -195,21 +195,22 @@ const Picker = React.createClass({ | |||
195 | onClose({ open }); | 195 | onClose({ open }); |
196 | } | 196 | } |
197 | } | 197 | } |
198 | }, | 198 | } |
199 | 199 | ||
200 | focus() { | 200 | focus() { |
201 | this.picker.focus(); | 201 | this.picker.focus(); |
202 | }, | 202 | } |
203 | 203 | ||
204 | render() { | 204 | render() { |
205 | const { | 205 | const { |
206 | prefixCls, placeholder, placement, align, | 206 | prefixCls, placeholder, placement, align, |
207 | disabled, transitionName, style, className, showHour, | 207 | disabled, transitionName, style, className, showHour, |
208 | showMinute, showSecond, getPopupContainer, name, autoComplete, | 208 | showMinute, showSecond, getPopupContainer, name, autoComplete, |
209 | use12Hours, | ||
209 | } = this.props; | 210 | } = this.props; |
210 | const { open, value } = this.state; | 211 | const { open, value } = this.state; |
211 | let popupClassName; | 212 | let popupClassName; |
212 | if (!showHour || !showMinute || !showSecond) { | 213 | if ((!showHour || !showMinute || !showSecond) && !use12Hours) { |
213 | popupClassName = `${prefixCls}-panel-narrow`; | 214 | popupClassName = `${prefixCls}-panel-narrow`; |
214 | } | 215 | } |
215 | return ( | 216 | return ( |
@@ -243,7 +244,7 @@ const Picker = React.createClass({ | |||
243 | </span> | 244 | </span> |
244 | </Trigger> | 245 | </Trigger> |
245 | ); | 246 | ); |
246 | }, | 247 | } |
247 | }); | 248 | } |
248 | 249 | ||
249 | export default Picker; | 250 | export default Picker; |