add focusOnOpen option (#61)

[github/fretlink/time-picker.git] / src / Panel.jsx

diff --git a/src/Panel.jsx b/src/Panel.jsx
index 9066b033bd4c1a1d68800fa542d2cdf06217cc76..deeba5207f6a023337a4c2e8d6827b0e3ef2fc0b 100644 (file)
--- 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,
@@ -34,28 +35,33 @@ const Panel = React.createClass({
     onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
     showHour: PropTypes.bool,
+    showMinute: PropTypes.bool,
     showSecond: PropTypes.bool,
     onClear: PropTypes.func,
-  },
+    use12Hours: PropTypes.bool,
+    addon: PropTypes.func,
+    focusOnOpen: PropTypes.bool,
+  };
 
-  getDefaultProps() {
-    return {
-      prefixCls: 'rc-time-picker-panel',
-      onChange: noop,
-      onClear: noop,
-      disabledHours: noop,
-      disabledMinutes: noop,
-      disabledSeconds: noop,
-      defaultOpenValue: moment(),
-    };
-  },
+  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;
@@ -64,26 +70,27 @@ 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 });
-  },
+  }
+
+  // https://github.com/ant-design/ant-design/issues/5829
+  close() {
+    this.props.onEsc();
+  }
 
   render() {
     const {
       prefixCls, className, placeholder, disabledHours, disabledMinutes,
-      disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond,
-      format, defaultOpenValue, clearText, onEsc,
+      disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
+      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen,
     } = this.props;
     const {
       value, currentSelectPanel,
@@ -114,8 +121,9 @@ const Panel = React.createClass({
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onChange={this.onChange}
-          onClear={this.onClear}
+          onClear={onClear}
           allowEmpty={allowEmpty}
+          focusOnOpen={focusOnOpen}
         />
         <Combobox
           prefixCls={prefixCls}
@@ -124,6 +132,7 @@ const Panel = React.createClass({
           format={format}
           onChange={this.onChange}
           showHour={showHour}
+          showMinute={showMinute}
           showSecond={showSecond}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
@@ -132,10 +141,12 @@ const Panel = React.createClass({
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
+          use12Hours={use12Hours}
         />
+        {addon(this)}
       </div>
     );
-  },
-});
+  }
+}
 
 export default Panel;