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 --- HISTORY.md | 14 ++++++++++---- README.md | 40 ++++++++++++++++++++-------------------- assets/index/Select.less | 10 +++++++++- examples/pick-time.js | 18 +++++++++++++++++- package.json | 2 +- src/TimePicker.jsx | 20 +++++++++++++------- src/module/Combobox.jsx | 31 ++++++++++++++++++++++--------- src/module/Header.jsx | 18 +++++++++++++++++- src/module/Panel.jsx | 34 ++++++++++++++++++++++++---------- src/module/Select.jsx | 10 +++++++--- 10 files changed, 140 insertions(+), 57 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index ebc3b9e..48c386a 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,16 +2,22 @@ --- +1.0.0-alpha7 / 2015-12-12 +------------------ + +`new` add options `disabledHours`, `disabledMinutes`, `disabledSeconds` and `hideDisabledOptions`. +`remove` remove options `hourOptions`, `minuteOptions` and `secondOptions`. + 1.0.0-alpha2 / 2015-12-03 ------------------ -`fix` IE8 compatible. +`fixed` IE8 compatible. `new` add test users. 0.7.1 / 2015-11-20 ------------------ -`fix` change value to null when clear input content to remove the react warning. +`fixed` change value to null when clear input content to remove the react warning. 0.7.0 / 2015-11-20 ------------------ @@ -21,7 +27,7 @@ 0.5.6 / 2015-11-19 ------------------ -`fix` use another method to change time and fix the bug about value.getTime(). +`fixed` use another method to change time and fix the bug about value.getTime(). 0.5.4 / 2015-11-19 ------------------ @@ -54,7 +60,7 @@ 0.3.3 / 2015-11-17 ------------------ -`fix` fix some bugs. +`fixed` fix some bugs. 0.3.0 / 2015-11-17 ------------------ diff --git a/README.md b/README.md index 60e5ab0..98f913a 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,6 @@ Usage ``` import TimePicker from 'rc-time-picker'; -import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(, container); ``` @@ -49,25 +48,26 @@ API ### TimePicker -| Name | Type | Default | Description | -|----------------|----------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------| -| prefixCls | String | | prefixCls of this component | -| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | -| disabled | Boolean | false | whether picker is disabled | -| open | Boolean | false | current open state of picker. controlled prop | -| defaultValue | GregorianCalendar | null | default initial value | -| value | GregorianCalendar | null | current value | -| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale | -| placeholder | String | '' | time input's placeholder | -| showHour | Boolean | whether show hour | | -| showSecond | Boolean | whether show second | | -| formatter | String|GregorianCalendarFormatter | | | -| hourOptions | Array | hour options | | -| minuteOptions | Array | minute options | | -| secondOptions | Array | second options | | -| onChange | Function | null | called when select a different value | -| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | -| transitionName | String | '' | | +| Name | Type | Default | Description | +|-------------------------|-----------------------------------|-----------------------------------------------|--------------------------------------------------------------------------------------------| +| prefixCls | String | | prefixCls of this component | +| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | +| disabled | Boolean | false | whether picker is disabled | +| open | Boolean | false | current open state of picker. controlled prop | +| defaultValue | GregorianCalendar | null | default initial value | +| value | GregorianCalendar | null | current value | +| gregorianCalendarLocale | GregorianCalendar locale object | null | if value and defaultValue not set, you should set this to your locale | +| placeholder | String | '' | time input's placeholder | +| showHour | Boolean | whether show hour | | +| showSecond | Boolean | whether show second | | +| formatter | String|GregorianCalendarFormatter | | | +| disabledHours | Array | disabled hour options | | +| disabledMinutes | Array | disabled minute options | | +| disabledSeconds | Array | disabled second options | | +| hideDisabledOptions | Boolean | whether hide disabled options | | +| onChange | Function | null | called when select a different value | +| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | +| transitionName | String | '' | | License ------- diff --git a/assets/index/Select.less b/assets/index/Select.less index 3e94c11..13b5b18 100644 --- a/assets/index/Select.less +++ b/assets/index/Select.less @@ -48,8 +48,16 @@ } } - &-option-selected { + li&-option-selected { background: #edfaff; color: #2db7f5; } + + li&-option-disabled { + color: #bfbfbf; + &:hover { + background: transparent; + cursor: not-allowed; + } + } } diff --git a/examples/pick-time.js b/examples/pick-time.js index dd5a2ce..074e72c 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js @@ -24,11 +24,27 @@ function onChange(value) { console.log(value && formatter.format(value)); } +const options = { + disabledHours() { + return [0, 2, 21]; + }, + disabledMinutes(h) { + return h === 22 ? [0, 3, 31] : []; + }, + disabledSeconds(h, m) { + return []; + }, +}; + ReactDom.render( , + onChange={onChange} + disabledHours={[0, 2, 21]} + disabledMinutes={[0, 2, 21]} + disabledSeconds={[]} + hideDisabledOptions={true} />, document.getElementById('__react-content') ); diff --git a/package.json b/package.json index fa91d86..8bc0ae2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "1.0.0-alpha6", + "version": "1.0.0-alpha7", "description": "React TimePicker", "keywords": [ "react", 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 (