From 518b852e8bd9c50a6c5c7e84cddecb5c94ebb5b6 Mon Sep 17 00:00:00 2001 From: MG12 Date: Sat, 12 Dec 2015 20:34:00 +0800 Subject: add new options about disabled time --- src/TimePicker.jsx | 20 +++++++++++++------- src/module/Combobox.jsx | 31 ++++++++++++++++++++++--------- src/module/Header.jsx | 18 +++++++++++++++++- src/module/Panel.jsx | 34 ++++++++++++++++++++++++---------- src/module/Select.jsx | 10 +++++++--- 5 files changed, 83 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 3e331f1..fb855e2 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -34,9 +34,10 @@ const Picker = React.createClass({ style: PropTypes.object, className: PropTypes.string, showSecond: PropTypes.bool, - hourOptions: PropTypes.array, - minuteOptions: PropTypes.array, - secondOptions: PropTypes.array, + disabledHours: PropTypes.array, + disabledMinutes: PropTypes.array, + disabledSeconds: PropTypes.array, + hideDisabledOptions: PropTypes.bool, onChange: PropTypes.func, onOpen: PropTypes.func, onClose: PropTypes.func, @@ -54,6 +55,10 @@ const Picker = React.createClass({ allowEmpty: true, showHour: true, showSecond: true, + disabledHours: null, + disabledMinutes: null, + disabledSeconds: null, + hideDisabledOptions: false, placement: 'bottomLeft', onChange: noop, onOpen: noop, @@ -145,7 +150,7 @@ const Picker = React.createClass({ }, getPanelElement() { - const { prefixCls, defaultValue, locale, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props; + const { prefixCls, defaultValue, locale, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props; let calendarLocale; if (value) { calendarLocale = value.locale; @@ -170,9 +175,10 @@ const Picker = React.createClass({ allowEmpty={allowEmpty} formatter={this.getFormatter()} placeholder={placeholder} - hourOptions={hourOptions} - minuteOptions={minuteOptions} - secondOptions={secondOptions} + disabledHours={disabledHours} + disabledMinutes={disabledMinutes} + disabledSeconds={disabledSeconds} + hideDisabledOptions={hideDisabledOptions} /> ); }, diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx index a017ec9..27a8226 100644 --- a/src/module/Combobox.jsx +++ b/src/module/Combobox.jsx @@ -2,11 +2,21 @@ import React, {PropTypes} from 'react'; import Select from './Select'; import GregorianCalendar from 'gregorian-calendar'; -const formatOption = (option) => { +const formatOption = (option, disabledOptions) => { + let value = `${option}`; if (option < 10) { - return `0${option}`; + value = `0${option}`; } - return `${option}`; + + let disabled = false; + if (disabledOptions.indexOf(option) >= 0) { + disabled = true; + } + + return { + value, + disabled, + }; }; const Combobox = React.createClass({ @@ -21,6 +31,9 @@ const Combobox = React.createClass({ hourOptions: PropTypes.array, minuteOptions: PropTypes.array, secondOptions: PropTypes.array, + disabledHours: PropTypes.array, + disabledMinutes: PropTypes.array, + disabledSeconds: PropTypes.array, onCurrentSelectPanelChange: PropTypes.func, }, @@ -47,14 +60,14 @@ const Combobox = React.createClass({ }, getHourSelect(hour) { - const { prefixCls, hourOptions, showHour } = this.props; + const { prefixCls, hourOptions, disabledHours, showHour } = this.props; if (!showHour) { return null; } return ( formatOption(option))} + options={minuteOptions.map(option => formatOption(option, disabledMinutes))} selectedIndex={minuteOptions.indexOf(minute)} type="minute" onSelect={this.onItemChange} @@ -78,14 +91,14 @@ const Combobox = React.createClass({ }, getSecondSelect(second) { - const { prefixCls, secondOptions, showSecond } = this.props; + const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props; if (!showSecond) { return null; } return ( formatOption(option, disabledHours))} + options={hourOptions.map(option => formatOption(option, disabledOptions))} selectedIndex={hourOptions.indexOf(hour)} type="hour" onSelect={this.onItemChange} @@ -77,11 +79,13 @@ const Combobox = React.createClass({ }, getMinuteSelect(minute) { - const { prefixCls, minuteOptions, disabledMinutes } = this.props; + const { prefixCls, minuteOptions, disabledMinutes, value } = this.props; + const disabledOptions = disabledMinutes(value.getHourOfDay()); + return ( formatOption(option, disabledSeconds))} + options={secondOptions.map(option => formatOption(option, disabledOptions))} selectedIndex={secondOptions.indexOf(second)} type="second" onSelect={this.onItemChange} diff --git a/src/module/Header.jsx b/src/module/Header.jsx index fec02af..9a048dc 100644 --- a/src/module/Header.jsx +++ b/src/module/Header.jsx @@ -13,9 +13,9 @@ const Header = React.createClass({ hourOptions: PropTypes.array, minuteOptions: PropTypes.array, secondOptions: PropTypes.array, - disabledHours: PropTypes.array, - disabledMinutes: PropTypes.array, - disabledSeconds: PropTypes.array, + disabledHours: PropTypes.func, + disabledMinutes: PropTypes.func, + disabledSeconds: PropTypes.func, onChange: PropTypes.func, onClear: PropTypes.func, onEsc: PropTypes.func, @@ -87,10 +87,13 @@ const Header = React.createClass({ } // if time value is disabled, response warning. + const disabledHourOptions = disabledHours(); + const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); + const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); if ( - (disabledHours && disabledHours.indexOf(value.getHourOfDay()) >= 0) || - (disabledMinutes && disabledMinutes.indexOf(value.getMinutes()) >= 0) || - (disabledSeconds && disabledSeconds.indexOf(value.getSeconds()) >= 0) + (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) || + (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) || + (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0) ) { this.setState({ invalid: true, diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 12d23f7..94d3842 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx @@ -24,9 +24,9 @@ const Panel = React.createClass({ placeholder: PropTypes.string, gregorianCalendarLocale: PropTypes.object, formatter: PropTypes.object, - disabledHours: PropTypes.array, - disabledMinutes: PropTypes.array, - disabledSeconds: PropTypes.array, + disabledHours: PropTypes.func, + disabledMinutes: PropTypes.func, + disabledSeconds: PropTypes.func, hideDisabledOptions: PropTypes.bool, onChange: PropTypes.func, onEsc: PropTypes.func, @@ -40,10 +40,6 @@ const Panel = React.createClass({ getDefaultProps() { return { - disabledHours: null, - disabledMinutes: null, - disabledSeconds: null, - hideDisabledOptions: false, onChange: noop, onClear: noop, }; @@ -81,9 +77,12 @@ const Panel = React.createClass({ render() { const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; const value = this.state.value; - const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions); - const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions); - const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions); + const disabledHourOptions = disabledHours(); + const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); + const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); + const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions); + const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions); + const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); return (
-- cgit v1.2.3