Lift disabledHours to Panel

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

diff --git a/src/Panel.jsx b/src/Panel.jsx
index a5464c4a563c6058c237de005b52e349ed56ab58..648944d5182ed067e7f795c55727b3c0f8b96b25 100644 (file)
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -1,14 +1,16 @@
-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';
+import classNames from 'classnames';
 
 function noop() {
 }
 
-function generateOptions(length, disabledOptions, hideDisabledOptions) {
+function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) {
   const arr = [];
-  for (let value = 0; value < length; value++) {
+  for (let value = 0; value < length; value += step) {
     if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
       arr.push(value);
     }
@@ -16,14 +18,16 @@ 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,
     defaultOpenValue: PropTypes.object,
     value: PropTypes.object,
     placeholder: PropTypes.string,
     format: PropTypes.string,
+    inputReadOnly: PropTypes.bool,
     disabledHours: PropTypes.func,
     disabledMinutes: PropTypes.func,
     disabledSeconds: PropTypes.func,
@@ -32,28 +36,39 @@ 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,
+    hourStep: PropTypes.number,
+    minuteStep: PropTypes.number,
+    secondStep: PropTypes.number,
+    addon: PropTypes.func,
+    focusOnOpen: PropTypes.bool,
+    onKeyDown: PropTypes.func,
+  };
 
-  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,
+    onKeyDown: noop,
+    inputReadOnly: false,
+  };
 
-  getInitialState() {
-    return {
-      value: this.props.value,
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
       selectionRange: [],
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     const value = nextProps.value;
@@ -62,40 +77,66 @@ 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();
+  }
+
+  disabledHours = () => {
+    const { use12Hours, disabledHours } = this.props;
+    let disabledOptions = disabledHours();
+    if (use12Hours && Array.isArray(disabledOptions)) {
+      if (this.isAM()) {
+        disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h));
+      } else {
+        disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12));
+      }
+    }
+    return disabledOptions;
+  }
+
+  isAM() {
+    const value = (this.state.value || this.props.defaultOpenValue);
+    return value.hour() >= 0 && value.hour() < 12;
+  }
 
   render() {
     const {
-      prefixCls, placeholder, disabledHours, disabledMinutes,
-      disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond,
-      format, defaultOpenValue, clearText, onEsc,
+      prefixCls, className, placeholder, disabledMinutes,
+      disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
+      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
+      focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly,
     } = this.props;
     const {
       value, currentSelectPanel,
     } = this.state;
-    const disabledHourOptions = disabledHours();
+    const disabledHourOptions = this.disabledHours();
     const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null);
     const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
       value ? value.minute() : null);
-    const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
-    const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
-    const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
+    const hourOptions = generateOptions(
+      24, disabledHourOptions, hideDisabledOptions, hourStep
+    );
+    const minuteOptions = generateOptions(
+      60, disabledMinuteOptions, hideDisabledOptions, minuteStep
+    );
+    const secondOptions = generateOptions(
+      60, disabledSecondOptions, hideDisabledOptions, secondStep
+    );
 
     return (
-      <div className={`${prefixCls}-inner`}>
+      <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>
         <Header
           clearText={clearText}
           prefixCls={prefixCls}
@@ -108,12 +149,15 @@ const Panel = React.createClass({
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
-          disabledHours={disabledHours}
+          disabledHours={this.disabledHours}
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onChange={this.onChange}
-          onClear={this.onClear}
+          onClear={onClear}
           allowEmpty={allowEmpty}
+          focusOnOpen={focusOnOpen}
+          onKeyDown={onKeyDown}
+          inputReadOnly={inputReadOnly}
         />
         <Combobox
           prefixCls={prefixCls}
@@ -122,18 +166,22 @@ const Panel = React.createClass({
           format={format}
           onChange={this.onChange}
           showHour={showHour}
+          showMinute={showMinute}
           showSecond={showSecond}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
-          disabledHours={disabledHours}
+          disabledHours={this.disabledHours}
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
+          use12Hours={use12Hours}
+          isAM={this.isAM()}
         />
+        {addon(this)}
       </div>
     );
-  },
-});
+  }
+}
 
 export default Panel;