Lift disabledHours to Panel

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

diff --git a/src/Panel.jsx b/src/Panel.jsx
index 957c021853900ba8f416ae682d721fdef74b2e1f..648944d5182ed067e7f795c55727b3c0f8b96b25 100644 (file)
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -8,9 +8,9 @@ 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);
     }
@@ -27,6 +27,7 @@ class Panel extends Component {
     value: PropTypes.object,
     placeholder: PropTypes.string,
     format: PropTypes.string,
+    inputReadOnly: PropTypes.bool,
     disabledHours: PropTypes.func,
     disabledMinutes: PropTypes.func,
     disabledSeconds: PropTypes.func,
@@ -39,6 +40,9 @@ class Panel extends Component {
     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,
@@ -55,6 +59,7 @@ class Panel extends Component {
     use12Hours: false,
     addon: noop,
     onKeyDown: noop,
+    inputReadOnly: false,
   };
 
   constructor(props) {
@@ -88,22 +93,47 @@ class Panel extends Component {
     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, className, placeholder, disabledHours, disabledMinutes,
+      prefixCls, className, placeholder, disabledMinutes,
       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
-      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen, onKeyDown,
+      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={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>
@@ -119,7 +149,7 @@ class Panel extends Component {
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
-          disabledHours={disabledHours}
+          disabledHours={this.disabledHours}
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onChange={this.onChange}
@@ -127,6 +157,7 @@ class Panel extends Component {
           allowEmpty={allowEmpty}
           focusOnOpen={focusOnOpen}
           onKeyDown={onKeyDown}
+          inputReadOnly={inputReadOnly}
         />
         <Combobox
           prefixCls={prefixCls}
@@ -140,11 +171,12 @@ class Panel extends Component {
           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>