X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FPanel.jsx;h=648944d5182ed067e7f795c55727b3c0f8b96b25;hb=0414a01666ca1a4b8f6ed25fff0150f4b1eb6d6f;hp=8a6c872e7e73784aeeace67fe3d4bca09384b57b;hpb=18b5785f0f551f8b97d40a1eb31d80d8cc5db562;p=github%2Ffretlink%2Ftime-picker.git diff --git a/src/Panel.jsx b/src/Panel.jsx index 8a6c872..648944d 100644 --- 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,7 +40,11 @@ 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, }; @@ -54,6 +59,7 @@ class Panel extends Component { use12Hours: false, addon: noop, onKeyDown: noop, + inputReadOnly: false, }; constructor(props) { @@ -87,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, 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 (
@@ -118,13 +149,15 @@ class Panel extends Component { hourOptions={hourOptions} minuteOptions={minuteOptions} secondOptions={secondOptions} - disabledHours={disabledHours} + disabledHours={this.disabledHours} disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} onChange={this.onChange} onClear={onClear} allowEmpty={allowEmpty} + focusOnOpen={focusOnOpen} onKeyDown={onKeyDown} + inputReadOnly={inputReadOnly} /> {addon(this)}