aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--examples/format.js29
-rw-r--r--examples/open.js22
-rw-r--r--examples/value-and-defaultValue.js22
-rw-r--r--package.json4
-rw-r--r--src/Combobox.jsx31
-rw-r--r--src/Header.jsx42
-rw-r--r--src/Panel.jsx68
-rw-r--r--src/Select.jsx41
-rw-r--r--src/TimePicker.jsx109
-rw-r--r--tests/Header.spec.jsx2
-rw-r--r--tests/Select.spec.jsx2
-rw-r--r--tests/TimePicker.spec.jsx2
12 files changed, 178 insertions, 196 deletions
diff --git a/examples/format.js b/examples/format.js
index c9a9539..e9a2614 100644
--- a/examples/format.js
+++ b/examples/format.js
@@ -4,23 +4,14 @@ import ReactDom from 'react-dom';
4import moment from 'moment'; 4import moment from 'moment';
5import TimePicker from 'rc-time-picker'; 5import TimePicker from 'rc-time-picker';
6 6
7const App = React.createClass({
8 render() {
9 return (
10 <div>
11 <TimePicker defaultValue={moment()} showHour={false} />
12 <TimePicker defaultValue={moment()} showMinute={false} />
13 <TimePicker defaultValue={moment()} showSecond={false} />
14
15 <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
16 <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
17 <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
18 </div>
19 );
20 },
21});
22
23ReactDom.render( 7ReactDom.render(
24 <App />, 8 <div>
25 document.getElementById('__react-content') 9 <TimePicker defaultValue={moment()} showHour={false} />
26); 10 <TimePicker defaultValue={moment()} showMinute={false} />
11 <TimePicker defaultValue={moment()} showSecond={false} />
12
13 <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
14 <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
15 <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
16 </div>
17, document.getElementById('__react-content'));
diff --git a/examples/open.js b/examples/open.js
index 100bf35..8e4f5de 100644
--- a/examples/open.js
+++ b/examples/open.js
@@ -6,20 +6,18 @@ import React from 'react';
6import ReactDom from 'react-dom'; 6import ReactDom from 'react-dom';
7import TimePicker from 'rc-time-picker'; 7import TimePicker from 'rc-time-picker';
8 8
9const App = React.createClass({ 9class App extends React.Component {
10 getInitialState() { 10 state = {
11 return { 11 open: false,
12 open: false, 12 };
13 }; 13 setOpen = ({ open }) => {
14 },
15 setOpen({ open }) {
16 this.setState({ open }); 14 this.setState({ open });
17 }, 15 }
18 toggleOpen() { 16 toggleOpen = () => {
19 this.setState({ 17 this.setState({
20 open: !this.state.open, 18 open: !this.state.open,
21 }); 19 });
22 }, 20 }
23 render() { 21 render() {
24 return ( 22 return (
25 <div> 23 <div>
@@ -27,8 +25,8 @@ const App = React.createClass({
27 <TimePicker open={this.state.open} onOpen={this.setOpen} onClose={this.setOpen} /> 25 <TimePicker open={this.state.open} onOpen={this.setOpen} onClose={this.setOpen} />
28 </div> 26 </div>
29 ); 27 );
30 }, 28 }
31}); 29}
32 30
33ReactDom.render( 31ReactDom.render(
34 <App />, 32 <App />,
diff --git a/examples/value-and-defaultValue.js b/examples/value-and-defaultValue.js
index 0e1aa14..1e1baf8 100644
--- a/examples/value-and-defaultValue.js
+++ b/examples/value-and-defaultValue.js
@@ -7,21 +7,19 @@ import ReactDom from 'react-dom';
7import moment from 'moment'; 7import moment from 'moment';
8import TimePicker from 'rc-time-picker'; 8import TimePicker from 'rc-time-picker';
9 9
10const App = React.createClass({ 10class App extends React.Component {
11 getInitialState() { 11 state = {
12 return { 12 value: moment(),
13 value: moment(), 13 };
14 }; 14 handleValueChange = (value) => {
15 },
16 handleValueChange(value) {
17 console.log(value && value.format('HH:mm:ss')); 15 console.log(value && value.format('HH:mm:ss'));
18 this.setState({ value }); 16 this.setState({ value });
19 }, 17 }
20 clear() { 18 clear = () => {
21 this.setState({ 19 this.setState({
22 value: undefined, 20 value: undefined,
23 }); 21 });
24 }, 22 }
25 render() { 23 render() {
26 return ( 24 return (
27 <div> 25 <div>
@@ -36,8 +34,8 @@ const App = React.createClass({
36 <button onClick={this.clear}>clear</button> 34 <button onClick={this.clear}>clear</button>
37 </div> 35 </div>
38 ); 36 );
39 }, 37 }
40}); 38}
41 39
42ReactDom.render( 40ReactDom.render(
43 <App />, 41 <App />,
diff --git a/package.json b/package.json
index 6f7ad13..da78772 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
1{ 1{
2 "name": "rc-time-picker", 2 "name": "rc-time-picker",
3 "version": "2.3.2", 3 "version": "2.3.3",
4 "description": "React TimePicker", 4 "description": "React TimePicker",
5 "keywords": [ 5 "keywords": [
6 "react", 6 "react",
@@ -51,7 +51,6 @@
51 "rc-tools": "5.x", 51 "rc-tools": "5.x",
52 "rc-util": "^4.0.2", 52 "rc-util": "^4.0.2",
53 "react": "15.x", 53 "react": "15.x",
54 "react-addons-test-utils": "15.x",
55 "react-dom": "15.x" 54 "react-dom": "15.x"
56 }, 55 },
57 "pre-commit": [ 56 "pre-commit": [
@@ -61,6 +60,7 @@
61 "babel-runtime": "6.x", 60 "babel-runtime": "6.x",
62 "classnames": "2.x", 61 "classnames": "2.x",
63 "moment": "2.x", 62 "moment": "2.x",
63 "prop-types": "^15.5.8",
64 "rc-trigger": "1.x" 64 "rc-trigger": "1.x"
65 } 65 }
66} 66}
diff --git a/src/Combobox.jsx b/src/Combobox.jsx
index 477c5ee..1eed4d2 100644
--- a/src/Combobox.jsx
+++ b/src/Combobox.jsx
@@ -1,4 +1,5 @@
1import React, { PropTypes } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
2import Select from './Select'; 3import Select from './Select';
3 4
4const formatOption = (option, disabledOptions) => { 5const formatOption = (option, disabledOptions) => {
@@ -18,8 +19,8 @@ const formatOption = (option, disabledOptions) => {
18 }; 19 };
19}; 20};
20 21
21const Combobox = React.createClass({ 22class Combobox extends Component {
22 propTypes: { 23 static propTypes = {
23 format: PropTypes.string, 24 format: PropTypes.string,
24 defaultOpenValue: PropTypes.object, 25 defaultOpenValue: PropTypes.object,
25 prefixCls: PropTypes.string, 26 prefixCls: PropTypes.string,
@@ -36,9 +37,9 @@ const Combobox = React.createClass({
36 disabledSeconds: PropTypes.func, 37 disabledSeconds: PropTypes.func,
37 onCurrentSelectPanelChange: PropTypes.func, 38 onCurrentSelectPanelChange: PropTypes.func,
38 use12Hours: PropTypes.bool, 39 use12Hours: PropTypes.bool,
39 }, 40 };
40 41
41 onItemChange(type, itemValue) { 42 onItemChange = (type, itemValue) => {
42 const { onChange, defaultOpenValue, use12Hours } = this.props; 43 const { onChange, defaultOpenValue, use12Hours } = this.props;
43 const value = (this.props.value || defaultOpenValue).clone(); 44 const value = (this.props.value || defaultOpenValue).clone();
44 45
@@ -71,11 +72,11 @@ const Combobox = React.createClass({
71 value.second(+itemValue); 72 value.second(+itemValue);
72 } 73 }
73 onChange(value); 74 onChange(value);
74 }, 75 }
75 76
76 onEnterSelectPanel(range) { 77 onEnterSelectPanel = (range) => {
77 this.props.onCurrentSelectPanelChange(range); 78 this.props.onCurrentSelectPanelChange(range);
78 }, 79 }
79 80
80 getHourSelect(hour) { 81 getHourSelect(hour) {
81 const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props; 82 const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
@@ -103,7 +104,7 @@ const Combobox = React.createClass({
103 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} 104 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
104 /> 105 />
105 ); 106 );
106 }, 107 }
107 108
108 getMinuteSelect(minute) { 109 getMinuteSelect(minute) {
109 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props; 110 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
@@ -123,7 +124,7 @@ const Combobox = React.createClass({
123 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} 124 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
124 /> 125 />
125 ); 126 );
126 }, 127 }
127 128
128 getSecondSelect(second) { 129 getSecondSelect(second) {
129 const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; 130 const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
@@ -143,7 +144,7 @@ const Combobox = React.createClass({
143 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} 144 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
144 /> 145 />
145 ); 146 );
146 }, 147 }
147 148
148 getAMPMSelect() { 149 getAMPMSelect() {
149 const { prefixCls, use12Hours, format } = this.props; 150 const { prefixCls, use12Hours, format } = this.props;
@@ -167,12 +168,12 @@ const Combobox = React.createClass({
167 onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')} 168 onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
168 /> 169 />
169 ); 170 );
170 }, 171 }
171 172
172 isAM() { 173 isAM() {
173 const value = (this.props.value || this.props.defaultOpenValue); 174 const value = (this.props.value || this.props.defaultOpenValue);
174 return value.hour() >= 0 && value.hour() < 12; 175 return value.hour() >= 0 && value.hour() < 12;
175 }, 176 }
176 177
177 render() { 178 render() {
178 const { prefixCls, defaultOpenValue } = this.props; 179 const { prefixCls, defaultOpenValue } = this.props;
@@ -185,7 +186,7 @@ const Combobox = React.createClass({
185 {this.getAMPMSelect(value.hour())} 186 {this.getAMPMSelect(value.hour())}
186 </div> 187 </div>
187 ); 188 );
188 }, 189 }
189}); 190}
190 191
191export default Combobox; 192export default Combobox;
diff --git a/src/Header.jsx b/src/Header.jsx
index 2ef9827..91e8549 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -1,8 +1,9 @@
1import React, { PropTypes } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
2import moment from 'moment'; 3import moment from 'moment';
3 4
4const Header = React.createClass({ 5class Header extends Component {
5 propTypes: { 6 static propTypes = {
6 format: PropTypes.string, 7 format: PropTypes.string,
7 prefixCls: PropTypes.string, 8 prefixCls: PropTypes.string,
8 disabledDate: PropTypes.func, 9 disabledDate: PropTypes.func,
@@ -21,15 +22,16 @@ const Header = React.createClass({
21 allowEmpty: PropTypes.bool, 22 allowEmpty: PropTypes.bool,
22 defaultOpenValue: PropTypes.object, 23 defaultOpenValue: PropTypes.object,
23 currentSelectPanel: PropTypes.string, 24 currentSelectPanel: PropTypes.string,
24 }, 25 };
25 26
26 getInitialState() { 27 constructor(props) {
27 const { value, format } = this.props; 28 super(props);
28 return { 29 const { value, format } = props;
30 this.state = {
29 str: value && value.format(format) || '', 31 str: value && value.format(format) || '',
30 invalid: false, 32 invalid: false,
31 }; 33 };
32 }, 34 }
33 35
34 componentWillReceiveProps(nextProps) { 36 componentWillReceiveProps(nextProps) {
35 const { value, format } = nextProps; 37 const { value, format } = nextProps;
@@ -37,9 +39,9 @@ const Header = React.createClass({
37 str: value && value.format(format) || '', 39 str: value && value.format(format) || '',
38 invalid: false, 40 invalid: false,
39 }); 41 });
40 }, 42 }
41 43
42 onInputChange(event) { 44 onInputChange = (event) => {
43 const str = event.target.value; 45 const str = event.target.value;
44 this.setState({ 46 this.setState({
45 str, 47 str,
@@ -117,18 +119,18 @@ const Header = React.createClass({
117 this.setState({ 119 this.setState({
118 invalid: false, 120 invalid: false,
119 }); 121 });
120 }, 122 }
121 123
122 onKeyDown(e) { 124 onKeyDown = (e) => {
123 if (e.keyCode === 27) { 125 if (e.keyCode === 27) {
124 this.props.onEsc(); 126 this.props.onEsc();
125 } 127 }
126 }, 128 }
127 129
128 onClear() { 130 onClear = () => {
129 this.setState({ str: '' }); 131 this.setState({ str: '' });
130 this.props.onClear(); 132 this.props.onClear();
131 }, 133 }
132 134
133 getClearButton() { 135 getClearButton() {
134 const { prefixCls, allowEmpty } = this.props; 136 const { prefixCls, allowEmpty } = this.props;
@@ -141,11 +143,11 @@ const Header = React.createClass({
141 title={this.props.clearText} 143 title={this.props.clearText}
142 onMouseDown={this.onClear} 144 onMouseDown={this.onClear}
143 />); 145 />);
144 }, 146 }
145 147
146 getProtoValue() { 148 getProtoValue() {
147 return this.props.value || this.props.defaultOpenValue; 149 return this.props.value || this.props.defaultOpenValue;
148 }, 150 }
149 151
150 getInput() { 152 getInput() {
151 const { prefixCls, placeholder } = this.props; 153 const { prefixCls, placeholder } = this.props;
@@ -161,7 +163,7 @@ const Header = React.createClass({
161 onChange={this.onInputChange} 163 onChange={this.onInputChange}
162 /> 164 />
163 ); 165 );
164 }, 166 }
165 167
166 render() { 168 render() {
167 const { prefixCls } = this.props; 169 const { prefixCls } = this.props;
@@ -171,7 +173,7 @@ const Header = React.createClass({
171 {this.getClearButton()} 173 {this.getClearButton()}
172 </div> 174 </div>
173 ); 175 );
174 }, 176 }
175}); 177}
176 178
177export default Header; 179export default Header;
diff --git a/src/Panel.jsx b/src/Panel.jsx
index df128ff..65832ea 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -1,4 +1,5 @@
1import React, { PropTypes } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
2import Header from './Header'; 3import Header from './Header';
3import Combobox from './Combobox'; 4import Combobox from './Combobox';
4import moment from 'moment'; 5import moment from 'moment';
@@ -17,8 +18,8 @@ function generateOptions(length, disabledOptions, hideDisabledOptions) {
17 return arr; 18 return arr;
18} 19}
19 20
20const Panel = React.createClass({ 21class Panel extends Component {
21 propTypes: { 22 static propTypes = {
22 clearText: PropTypes.string, 23 clearText: PropTypes.string,
23 prefixCls: PropTypes.string, 24 prefixCls: PropTypes.string,
24 className: PropTypes.string, 25 className: PropTypes.string,
@@ -39,28 +40,27 @@ const Panel = React.createClass({
39 onClear: PropTypes.func, 40 onClear: PropTypes.func,
40 use12Hours: PropTypes.bool, 41 use12Hours: PropTypes.bool,
41 addon: PropTypes.func, 42 addon: PropTypes.func,
42 }, 43 };
43 44
44 getDefaultProps() { 45 static defaultProps = {
45 return { 46 prefixCls: 'rc-time-picker-panel',
46 prefixCls: 'rc-time-picker-panel', 47 onChange: noop,
47 onChange: noop, 48 onClear: noop,
48 onClear: noop, 49 disabledHours: noop,
49 disabledHours: noop, 50 disabledMinutes: noop,
50 disabledMinutes: noop, 51 disabledSeconds: noop,
51 disabledSeconds: noop, 52 defaultOpenValue: moment(),
52 defaultOpenValue: moment(), 53 use12Hours: false,
53 use12Hours: false, 54 addon: noop,
54 addon: noop, 55 };
55 };
56 },
57 56
58 getInitialState() { 57 constructor(props) {
59 return { 58 super(props);
60 value: this.props.value, 59 this.state = {
60 value: props.value,
61 selectionRange: [], 61 selectionRange: [],
62 }; 62 };
63 }, 63 }
64 64
65 componentWillReceiveProps(nextProps) { 65 componentWillReceiveProps(nextProps) {
66 const value = nextProps.value; 66 const value = nextProps.value;
@@ -69,30 +69,22 @@ const Panel = React.createClass({
69 value, 69 value,
70 }); 70 });
71 } 71 }
72 }, 72 }
73 73
74 onChange(newValue) { 74 onChange = (newValue) => {
75 this.setState({ value: newValue }); 75 this.setState({ value: newValue });
76 this.props.onChange(newValue); 76 this.props.onChange(newValue);
77 }, 77 }
78
79 onClear() {
80 this.props.onClear();
81 },
82 78
83 onCurrentSelectPanelChange(currentSelectPanel) { 79 onCurrentSelectPanelChange = (currentSelectPanel) => {
84 this.setState({ currentSelectPanel }); 80 this.setState({ currentSelectPanel });
85 }, 81 }
86
87 close() {
88 this.props.onEsc();
89 },
90 82
91 render() { 83 render() {
92 const { 84 const {
93 prefixCls, className, placeholder, disabledHours, disabledMinutes, 85 prefixCls, className, placeholder, disabledHours, disabledMinutes,
94 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, 86 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
95 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, 87 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
96 } = this.props; 88 } = this.props;
97 const { 89 const {
98 value, currentSelectPanel, 90 value, currentSelectPanel,
@@ -123,7 +115,7 @@ const Panel = React.createClass({
123 disabledMinutes={disabledMinutes} 115 disabledMinutes={disabledMinutes}
124 disabledSeconds={disabledSeconds} 116 disabledSeconds={disabledSeconds}
125 onChange={this.onChange} 117 onChange={this.onChange}
126 onClear={this.onClear} 118 onClear={onClear}
127 allowEmpty={allowEmpty} 119 allowEmpty={allowEmpty}
128 /> 120 />
129 <Combobox 121 <Combobox
@@ -147,7 +139,7 @@ const Panel = React.createClass({
147 {addon(this)} 139 {addon(this)}
148 </div> 140 </div>
149 ); 141 );
150 }, 142 }
151}); 143}
152 144
153export default Panel; 145export default Panel;
diff --git a/src/Select.jsx b/src/Select.jsx
index deb155d..49fed5b 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -1,4 +1,5 @@
1import React, { PropTypes } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
2import ReactDom from 'react-dom'; 3import ReactDom from 'react-dom';
3import classnames from 'classnames'; 4import classnames from 'classnames';
4 5
@@ -22,38 +23,36 @@ const scrollTo = (element, to, duration) => {
22 }); 23 });
23}; 24};
24 25
25const Select = React.createClass({ 26class Select extends Component {
26 propTypes: { 27 static propTypes = {
27 prefixCls: PropTypes.string, 28 prefixCls: PropTypes.string,
28 options: PropTypes.array, 29 options: PropTypes.array,
29 selectedIndex: PropTypes.number, 30 selectedIndex: PropTypes.number,
30 type: PropTypes.string, 31 type: PropTypes.string,
31 onSelect: PropTypes.func, 32 onSelect: PropTypes.func,
32 onMouseEnter: PropTypes.func, 33 onMouseEnter: PropTypes.func,
33 }, 34 };
34 35
35 getInitialState() { 36 state = {
36 return { 37 active: false,
37 active: false, 38 };
38 };
39 },
40 39
41 componentDidMount() { 40 componentDidMount() {
42 // jump to selected option 41 // jump to selected option
43 this.scrollToSelected(0); 42 this.scrollToSelected(0);
44 }, 43 }
45 44
46 componentDidUpdate(prevProps) { 45 componentDidUpdate(prevProps) {
47 // smooth scroll to selected option 46 // smooth scroll to selected option
48 if (prevProps.selectedIndex !== this.props.selectedIndex) { 47 if (prevProps.selectedIndex !== this.props.selectedIndex) {
49 this.scrollToSelected(120); 48 this.scrollToSelected(120);
50 } 49 }
51 }, 50 }
52 51
53 onSelect(value) { 52 onSelect = (value) => {
54 const { onSelect, type } = this.props; 53 const { onSelect, type } = this.props;
55 onSelect(type, value); 54 onSelect(type, value);
56 }, 55 }
57 56
58 getOptions() { 57 getOptions() {
59 const { options, selectedIndex, prefixCls } = this.props; 58 const { options, selectedIndex, prefixCls } = this.props;
@@ -75,7 +74,7 @@ const Select = React.createClass({
75 {item.value} 74 {item.value}
76 </li>); 75 </li>);
77 }); 76 });
78 }, 77 }
79 78
80 scrollToSelected(duration) { 79 scrollToSelected(duration) {
81 // move to selected item 80 // move to selected item
@@ -91,16 +90,16 @@ const Select = React.createClass({
91 const topOption = list.children[index]; 90 const topOption = list.children[index];
92 const to = topOption.offsetTop; 91 const to = topOption.offsetTop;
93 scrollTo(select, to, duration); 92 scrollTo(select, to, duration);
94 }, 93 }
95 94
96 handleMouseEnter(e) { 95 handleMouseEnter = (e) => {
97 this.setState({ active: true }); 96 this.setState({ active: true });
98 this.props.onMouseEnter(e); 97 this.props.onMouseEnter(e);
99 }, 98 }
100 99
101 handleMouseLeave() { 100 handleMouseLeave = () => {
102 this.setState({ active: false }); 101 this.setState({ active: false });
103 }, 102 }
104 103
105 render() { 104 render() {
106 if (this.props.options.length === 0) { 105 if (this.props.options.length === 0) {
@@ -122,7 +121,7 @@ const Select = React.createClass({
122 <ul ref="list">{this.getOptions()}</ul> 121 <ul ref="list">{this.getOptions()}</ul>
123 </div> 122 </div>
124 ); 123 );
125 }, 124 }
126}); 125}
127 126
128export default Select; 127export default Select;
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 @@
1import React, { PropTypes } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
2import Trigger from 'rc-trigger'; 3import Trigger from 'rc-trigger';
3import Panel from './Panel'; 4import Panel from './Panel';
4import placements from './placements'; 5import placements from './placements';
@@ -11,8 +12,8 @@ function refFn(field, component) {
11 this[field] = component; 12 this[field] = component;
12} 13}
13 14
14const Picker = React.createClass({ 15class 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
249export default Picker; 250export default Picker;
diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx
index 682852d..5ab0ba0 100644
--- a/tests/Header.spec.jsx
+++ b/tests/Header.spec.jsx
@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom';
2import React from 'react'; 2import React from 'react';
3import TimePicker from '../src/TimePicker'; 3import TimePicker from '../src/TimePicker';
4 4
5import TestUtils from 'react-addons-test-utils'; 5import TestUtils from 'react-dom/test-utils';
6const Simulate = TestUtils.Simulate; 6const Simulate = TestUtils.Simulate;
7import expect from 'expect.js'; 7import expect from 'expect.js';
8import async from 'async'; 8import async from 'async';
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index 2d30098..b2c111d 100644
--- a/tests/Select.spec.jsx
+++ b/tests/Select.spec.jsx
@@ -1,7 +1,7 @@
1import ReactDOM from 'react-dom'; 1import ReactDOM from 'react-dom';
2import React from 'react'; 2import React from 'react';
3import TimePicker from '../src/TimePicker'; 3import TimePicker from '../src/TimePicker';
4import TestUtils from 'react-addons-test-utils'; 4import TestUtils from 'react-dom/test-utils';
5const Simulate = TestUtils.Simulate; 5const Simulate = TestUtils.Simulate;
6import expect from 'expect.js'; 6import expect from 'expect.js';
7import async from 'async'; 7import async from 'async';
diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx
index 6f9ac2d..0dd6c10 100644
--- a/tests/TimePicker.spec.jsx
+++ b/tests/TimePicker.spec.jsx
@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom';
2import React from 'react'; 2import React from 'react';
3import TimePicker from '../src/TimePicker'; 3import TimePicker from '../src/TimePicker';
4 4
5import TestUtils from 'react-addons-test-utils'; 5import TestUtils from 'react-dom/test-utils';
6const Simulate = TestUtils.Simulate; 6const Simulate = TestUtils.Simulate;
7import expect from 'expect.js'; 7import expect from 'expect.js';
8import async from 'async'; 8import async from 'async';