fix react createClass and PropTypes warningfix-react-15.5-warning

12 files changed, 175 insertions, 194 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';
 import moment from 'moment';
 import TimePicker from 'rc-time-picker';
 
-const App = React.createClass({
-  render() {
-    return (
-      <div>
-        <TimePicker defaultValue={moment()} showHour={false} />
-        <TimePicker defaultValue={moment()} showMinute={false} />
-        <TimePicker defaultValue={moment()} showSecond={false} />
-
-        <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
-        <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
-        <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
-      </div>
-    );
-  },
-});
-
 ReactDom.render(
-  <App />,
-  document.getElementById('__react-content')
-);
+  <div>
+    <TimePicker defaultValue={moment()} showHour={false} />
+    <TimePicker defaultValue={moment()} showMinute={false} />
+    <TimePicker defaultValue={moment()} showSecond={false} />
+
+    <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
+    <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
+    <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
+  </div>
+, 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';
 import ReactDom from 'react-dom';
 import TimePicker from 'rc-time-picker';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      open: false,
-    };
-  },
-  setOpen({ open }) {
+class App extends React.Component {
+  state = {
+    open: false,
+  };
+  setOpen = ({ open }) => {
     this.setState({ open });
-  },
-  toggleOpen() {
+  }
+  toggleOpen = () => {
     this.setState({
       open: !this.state.open,
     });
-  },
+  }
   render() {
     return (
       <div>
@@ -27,8 +25,8 @@ const App = React.createClass({
         <TimePicker open={this.state.open} onOpen={this.setOpen} onClose={this.setOpen} />
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(
   <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';
 import moment from 'moment';
 import TimePicker from 'rc-time-picker';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      value: moment(),
-    };
-  },
-  handleValueChange(value) {
+class App extends React.Component {
+  state = {
+    value: moment(),
+  };
+  handleValueChange = (value) => {
     console.log(value && value.format('HH:mm:ss'));
     this.setState({ value });
-  },
-  clear() {
+  }
+  clear = () => {
     this.setState({
       value: undefined,
     });
-  },
+  }
   render() {
     return (
       <div>
@@ -36,8 +34,8 @@ const App = React.createClass({
         <button onClick={this.clear}>clear</button>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDom.render(
   <App />,
diff --git a/package.json b/package.json
index 10b1df2..da78772 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
     "rc-tools": "5.x",
     "rc-util": "^4.0.2",
     "react": "15.x",
-    "react-addons-test-utils": "15.x",
     "react-dom": "15.x"
   },
   "pre-commit": [
@@ -61,6 +60,7 @@
     "babel-runtime": "6.x",
     "classnames": "2.x",
     "moment": "2.x",
+    "prop-types": "^15.5.8",
     "rc-trigger": "1.x"
   }
 }
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 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Select from './Select';
 
 const formatOption = (option, disabledOptions) => {
@@ -18,8 +19,8 @@ const formatOption = (option, disabledOptions) => {
   };
 };
 
-const Combobox = React.createClass({
-  propTypes: {
+class Combobox extends Component {
+  static propTypes = {
     format: PropTypes.string,
     defaultOpenValue: PropTypes.object,
     prefixCls: PropTypes.string,
@@ -36,9 +37,9 @@ const Combobox = React.createClass({
     disabledSeconds: PropTypes.func,
     onCurrentSelectPanelChange: PropTypes.func,
     use12Hours: PropTypes.bool,
-  },
+  };
 
-  onItemChange(type, itemValue) {
+  onItemChange = (type, itemValue) => {
     const { onChange, defaultOpenValue, use12Hours } = this.props;
     const value = (this.props.value || defaultOpenValue).clone();
 
@@ -71,11 +72,11 @@ const Combobox = React.createClass({
       value.second(+itemValue);
     }
     onChange(value);
-  },
+  }
 
-  onEnterSelectPanel(range) {
+  onEnterSelectPanel = (range) => {
     this.props.onCurrentSelectPanelChange(range);
-  },
+  }
 
   getHourSelect(hour) {
     const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
@@ -103,7 +104,7 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
       />
     );
-  },
+  }
 
   getMinuteSelect(minute) {
     const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
@@ -123,7 +124,7 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
       />
     );
-  },
+  }
 
   getSecondSelect(second) {
     const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
@@ -143,7 +144,7 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
       />
     );
-  },
+  }
 
   getAMPMSelect() {
     const { prefixCls, use12Hours, format } = this.props;
@@ -167,12 +168,12 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
       />
     );
-  },
+  }
 
   isAM() {
     const value = (this.props.value || this.props.defaultOpenValue);
     return value.hour() >= 0 && value.hour() < 12;
-  },
+  }
 
   render() {
     const { prefixCls, defaultOpenValue } = this.props;
@@ -185,7 +186,7 @@ const Combobox = React.createClass({
         {this.getAMPMSelect(value.hour())}
       </div>
     );
-  },
-});
+  }
+}
 
 export 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 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 
-const Header = React.createClass({
-  propTypes: {
+class Header extends Component {
+  static propTypes = {
     format: PropTypes.string,
     prefixCls: PropTypes.string,
     disabledDate: PropTypes.func,
@@ -21,15 +22,16 @@ const Header = React.createClass({
     allowEmpty: PropTypes.bool,
     defaultOpenValue: PropTypes.object,
     currentSelectPanel: PropTypes.string,
-  },
+  };
 
-  getInitialState() {
-    const { value, format } = this.props;
-    return {
+  constructor(props) {
+    super(props);
+    const { value, format } = props;
+    this.state = {
       str: value && value.format(format) || '',
       invalid: false,
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     const { value, format } = nextProps;
@@ -37,9 +39,9 @@ const Header = React.createClass({
       str: value && value.format(format) || '',
       invalid: false,
     });
-  },
+  }
 
-  onInputChange(event) {
+  onInputChange = (event) => {
     const str = event.target.value;
     this.setState({
       str,
@@ -117,18 +119,18 @@ const Header = React.createClass({
     this.setState({
       invalid: false,
     });
-  },
+  }
 
-  onKeyDown(e) {
+  onKeyDown = (e) => {
     if (e.keyCode === 27) {
       this.props.onEsc();
     }
-  },
+  }
 
-  onClear() {
+  onClear = () => {
     this.setState({ str: '' });
     this.props.onClear();
-  },
+  }
 
   getClearButton() {
     const { prefixCls, allowEmpty } = this.props;
@@ -141,11 +143,11 @@ const Header = React.createClass({
       title={this.props.clearText}
       onMouseDown={this.onClear}
     />);
-  },
+  }
 
   getProtoValue() {
     return this.props.value || this.props.defaultOpenValue;
-  },
+  }
 
   getInput() {
     const { prefixCls, placeholder } = this.props;
@@ -161,7 +163,7 @@ const Header = React.createClass({
         onChange={this.onInputChange}
       />
     );
-  },
+  }
 
   render() {
     const { prefixCls } = this.props;
@@ -171,7 +173,7 @@ const Header = React.createClass({
         {this.getClearButton()}
       </div>
     );
-  },
-});
+  }
+}
 
 export 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 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Header from './Header';
 import Combobox from './Combobox';
 import moment from 'moment';
@@ -17,8 +18,8 @@ function generateOptions(length, disabledOptions, hideDisabledOptions) {
   return arr;
 }
 
-const Panel = React.createClass({
-  propTypes: {
+class Panel extends Component {
+  static propTypes = {
     clearText: PropTypes.string,
     prefixCls: PropTypes.string,
     className: PropTypes.string,
@@ -39,28 +40,27 @@ const Panel = React.createClass({
     onClear: PropTypes.func,
     use12Hours: PropTypes.bool,
     addon: PropTypes.func,
-  },
+  };
 
-  getDefaultProps() {
-    return {
-      prefixCls: 'rc-time-picker-panel',
-      onChange: noop,
-      onClear: noop,
-      disabledHours: noop,
-      disabledMinutes: noop,
-      disabledSeconds: noop,
-      defaultOpenValue: moment(),
-      use12Hours: false,
-      addon: noop,
-    };
-  },
+  static defaultProps = {
+    prefixCls: 'rc-time-picker-panel',
+    onChange: noop,
+    onClear: noop,
+    disabledHours: noop,
+    disabledMinutes: noop,
+    disabledSeconds: noop,
+    defaultOpenValue: moment(),
+    use12Hours: false,
+    addon: noop,
+  };
 
-  getInitialState() {
-    return {
-      value: this.props.value,
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
       selectionRange: [],
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     const value = nextProps.value;
@@ -69,30 +69,22 @@ const Panel = React.createClass({
         value,
       });
     }
-  },
+  }
 
-  onChange(newValue) {
+  onChange = (newValue) => {
     this.setState({ value: newValue });
     this.props.onChange(newValue);
-  },
-
-  onClear() {
-    this.props.onClear();
-  },
+  }
 
-  onCurrentSelectPanelChange(currentSelectPanel) {
+  onCurrentSelectPanelChange = (currentSelectPanel) => {
     this.setState({ currentSelectPanel });
-  },
-
-  close() {
-    this.props.onEsc();
-  },
+  }
 
   render() {
     const {
       prefixCls, className, placeholder, disabledHours, disabledMinutes,
       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
-      format, defaultOpenValue, clearText, onEsc, addon, use12Hours,
+      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
     } = this.props;
     const {
       value, currentSelectPanel,
@@ -123,7 +115,7 @@ const Panel = React.createClass({
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onChange={this.onChange}
-          onClear={this.onClear}
+          onClear={onClear}
           allowEmpty={allowEmpty}
         />
         <Combobox
@@ -147,7 +139,7 @@ const Panel = React.createClass({
         {addon(this)}
       </div>
     );
-  },
-});
+  }
+}
 
 export 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 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ReactDom from 'react-dom';
 import classnames from 'classnames';
 
@@ -22,38 +23,36 @@ const scrollTo = (element, to, duration) => {
   });
 };
 
-const Select = React.createClass({
-  propTypes: {
+class Select extends Component {
+  static propTypes = {
     prefixCls: PropTypes.string,
     options: PropTypes.array,
     selectedIndex: PropTypes.number,
     type: PropTypes.string,
     onSelect: PropTypes.func,
     onMouseEnter: PropTypes.func,
-  },
+  };
 
-  getInitialState() {
-    return {
-      active: false,
-    };
-  },
+  state = {
+    active: false,
+  };
 
   componentDidMount() {
     // jump to selected option
     this.scrollToSelected(0);
-  },
+  }
 
   componentDidUpdate(prevProps) {
     // smooth scroll to selected option
     if (prevProps.selectedIndex !== this.props.selectedIndex) {
       this.scrollToSelected(120);
     }
-  },
+  }
 
-  onSelect(value) {
+  onSelect = (value) => {
     const { onSelect, type } = this.props;
     onSelect(type, value);
-  },
+  }
 
   getOptions() {
     const { options, selectedIndex, prefixCls } = this.props;
@@ -75,7 +74,7 @@ const Select = React.createClass({
         {item.value}
       </li>);
     });
-  },
+  }
 
   scrollToSelected(duration) {
     // move to selected item
@@ -91,16 +90,16 @@ const Select = React.createClass({
     const topOption = list.children[index];
     const to = topOption.offsetTop;
     scrollTo(select, to, duration);
-  },
+  }
 
-  handleMouseEnter(e) {
+  handleMouseEnter = (e) => {
     this.setState({ active: true });
     this.props.onMouseEnter(e);
-  },
+  }
 
-  handleMouseLeave() {
+  handleMouseLeave = () => {
     this.setState({ active: false });
-  },
+  }
 
   render() {
     if (this.props.options.length === 0) {
@@ -122,7 +121,7 @@ const Select = React.createClass({
         <ul ref="list">{this.getOptions()}</ul>
       </div>
     );
-  },
-});
+  }
+}
 
 export default Select;
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index d94ed94..1a3516e 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Trigger from 'rc-trigger';
 import Panel from './Panel';
 import placements from './placements';
@@ -11,8 +12,8 @@ function refFn(field, component) {
   this[field] = component;
 }
 
-const Picker = React.createClass({
-  propTypes: {
+class Picker extends Component {
+  static propTypes = {
     prefixCls: PropTypes.string,
     clearText: PropTypes.string,
     value: PropTypes.object,
@@ -44,43 +45,42 @@ const Picker = React.createClass({
     name: PropTypes.string,
     autoComplete: PropTypes.string,
     use12Hours: PropTypes.bool,
-  },
-
-  getDefaultProps() {
-    return {
-      clearText: 'clear',
-      prefixCls: 'rc-time-picker',
-      defaultOpen: false,
-      style: {},
-      className: '',
-      align: {},
-      defaultOpenValue: moment(),
-      allowEmpty: true,
-      showHour: true,
-      showMinute: true,
-      showSecond: true,
-      disabledHours: noop,
-      disabledMinutes: noop,
-      disabledSeconds: noop,
-      hideDisabledOptions: false,
-      placement: 'bottomLeft',
-      onChange: noop,
-      onOpen: noop,
-      onClose: noop,
-      addon: noop,
-      use12Hours: false,
-    };
-  },
-
-  getInitialState() {
+  };
+
+  static defaultProps = {
+    clearText: 'clear',
+    prefixCls: 'rc-time-picker',
+    defaultOpen: false,
+    style: {},
+    className: '',
+    align: {},
+    defaultOpenValue: moment(),
+    allowEmpty: true,
+    showHour: true,
+    showMinute: true,
+    showSecond: true,
+    disabledHours: noop,
+    disabledMinutes: noop,
+    disabledSeconds: noop,
+    hideDisabledOptions: false,
+    placement: 'bottomLeft',
+    onChange: noop,
+    onOpen: noop,
+    onClose: noop,
+    addon: noop,
+    use12Hours: false,
+  };
+
+  constructor(props) {
+    super(props);
     this.saveInputRef = refFn.bind(this, 'picker');
     this.savePanelRef = refFn.bind(this, 'panelInstance');
-    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
-    return {
+    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props;
+    this.state = {
       open,
       value,
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     const { value, open } = nextProps;
@@ -92,31 +92,31 @@ const Picker = React.createClass({
     if (open !== undefined) {
       this.setState({ open });
     }
-  },
+  }
 
-  onPanelChange(value) {
+  onPanelChange = (value) => {
     this.setValue(value);
-  },
+  }
 
-  onPanelClear() {
+  onPanelClear = () => {
     this.setValue(null);
     this.setOpen(false);
-  },
+  }
 
-  onVisibleChange(open) {
+  onVisibleChange = (open) => {
     this.setOpen(open);
-  },
+  }
 
-  onEsc() {
+  onEsc = () => {
     this.setOpen(false);
     this.focus();
-  },
+  }
 
-  onKeyDown(e) {
+  onKeyDown = (e) => {
     if (e.keyCode === 40) {
       this.setOpen(true);
     }
-  },
+  }
 
   setValue(value) {
     if (!('value' in this.props)) {
@@ -125,7 +125,7 @@ const Picker = React.createClass({
       });
     }
     this.props.onChange(value);
-  },
+  }
 
   getFormat() {
     const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
@@ -148,7 +148,7 @@ const Picker = React.createClass({
       showMinute ? 'mm' : '',
       showSecond ? 'ss' : '',
     ].filter(item => !!item).join(':');
-  },
+  }
 
   getPanelElement() {
     const {
@@ -181,7 +181,7 @@ const Picker = React.createClass({
         addon={addon}
       />
     );
-  },
+  }
 
   setOpen(open) {
     const { onOpen, onClose } = this.props;
@@ -195,11 +195,11 @@ const Picker = React.createClass({
         onClose({ open });
       }
     }
-  },
+  }
 
   focus() {
     this.picker.focus();
-  },
+  }
 
   render() {
     const {
@@ -244,7 +244,7 @@ const Picker = React.createClass({
         </span>
       </Trigger>
     );
-  },
-});
+  }
+}
 
 export 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';
 import React from 'react';
 import TimePicker from '../src/TimePicker';
 
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 const Simulate = TestUtils.Simulate;
 import expect from 'expect.js';
 import 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 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import TimePicker from '../src/TimePicker';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 const Simulate = TestUtils.Simulate;
 import expect from 'expect.js';
 import 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';
 import React from 'react';
 import TimePicker from '../src/TimePicker';
 
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 const Simulate = TestUtils.Simulate;
 import expect from 'expect.js';
 import async from 'async';