]> git.immae.eu Git - github/fretlink/time-picker.git/blobdiff - src/module/Panel.jsx
update test case and fix bugs
[github/fretlink/time-picker.git] / src / module / Panel.jsx
index b91c6febf5b2c8f66101e2fb17f8972fc5c67abb..12d23f718db7d9aa75c9dfb7bc55173635e01a76 100644 (file)
@@ -6,10 +6,14 @@ import Combobox from './Combobox';
 function noop() {
 }
 
-function generateOptions(length) {
-  return Array.apply(null, {length: length}).map((item, index) => {
-    return index;
-  });
+function generateOptions(length, disabledOptions, hideDisabledOptions) {
+  const arr = [];
+  for (let value = 0; value < length; value++) {
+    if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
+      arr.push(value);
+    }
+  }
+  return arr;
 }
 
 const Panel = React.createClass({
@@ -20,9 +24,10 @@ const Panel = React.createClass({
     placeholder: PropTypes.string,
     gregorianCalendarLocale: PropTypes.object,
     formatter: PropTypes.object,
-    hourOptions: PropTypes.array,
-    minuteOptions: PropTypes.array,
-    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.array,
+    disabledMinutes: PropTypes.array,
+    disabledSeconds: PropTypes.array,
+    hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
     onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
@@ -35,9 +40,10 @@ const Panel = React.createClass({
 
   getDefaultProps() {
     return {
-      hourOptions: generateOptions(24),
-      minuteOptions: generateOptions(60),
-      secondOptions: generateOptions(60),
+      disabledHours: null,
+      disabledMinutes: null,
+      disabledSeconds: null,
+      hideDisabledOptions: false,
       onChange: noop,
       onClear: noop,
     };
@@ -46,6 +52,7 @@ const Panel = React.createClass({
   getInitialState() {
     return {
       value: this.props.value,
+      selectionRange: [],
     };
   },
 
@@ -67,9 +74,17 @@ const Panel = React.createClass({
     this.props.onClear();
   },
 
+  onCurrentSelectPanelChange(currentSelectPanel) {
+    this.setState({ currentSelectPanel });
+  },
+
   render() {
-    const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
+    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);
+
     return (
       <div className={`${prefixCls}-inner`}>
         <Header
@@ -77,12 +92,16 @@ const Panel = React.createClass({
           gregorianCalendarLocale={gregorianCalendarLocale}
           locale={locale}
           value={value}
+          currentSelectPanel={this.state.currentSelectPanel}
           onEsc={this.props.onEsc}
           formatter={formatter}
           placeholder={placeholder}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
           onChange={this.onChange}
           onClear={this.onClear}
           allowEmpty={allowEmpty}
@@ -98,6 +117,10 @@ const Panel = React.createClass({
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
         />
       </div>
     );