bump

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

diff --git a/src/module/Header.jsx b/src/module/Header.jsx
index 92a0089243be5ea167a7c5c9e282c7f58e62228a..a926e9860edc256f7d15c2bc1dcd46a3de6ff645 100644 (file)
--- a/src/module/Header.jsx
+++ b/src/module/Header.jsx
@@ -1,10 +1,11 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
+import createSelection from '../util/selection';
 
 const Header = React.createClass({
   propTypes: {
     formatter: PropTypes.object,
     prefixCls: PropTypes.string,
-    gregorianTimePickerLocale: PropTypes.object,
+    gregorianCalendarLocale: PropTypes.object,
     locale: PropTypes.object,
     disabledDate: PropTypes.func,
     placeholder: PropTypes.string,
@@ -12,9 +13,14 @@ const Header = React.createClass({
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
     onChange: PropTypes.func,
     onClear: PropTypes.func,
-    showClear: PropTypes.bool,
+    onEsc: PropTypes.func,
+    allowEmpty: PropTypes.bool,
+    currentSelectPanel: PropTypes.string,
   },
 
   getInitialState() {
@@ -25,6 +31,10 @@ const Header = React.createClass({
     };
   },
 
+  componentDidMount() {
+    this.timer = setTimeout(this.selectRange, 0);
+  },
+
   componentWillReceiveProps(nextProps) {
     const value = nextProps.value;
     this.setState({
@@ -33,19 +43,27 @@ const Header = React.createClass({
     });
   },
 
+  componentDidUpdate() {
+    this.timer = setTimeout(this.selectRange, 0);
+  },
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  },
+
   onInputChange(event) {
     const str = event.target.value;
     this.setState({
       str,
     });
     let value = null;
-    const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
+    const { formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty } = this.props;
 
     if (str) {
       const originalValue = this.props.value;
       try {
         value = formatter.parse(str, {
-          locale: gregorianTimePickerLocale,
+          locale: gregorianCalendarLocale,
           obeyCount: true,
         });
       } catch (ex) {
@@ -56,10 +74,26 @@ const Header = React.createClass({
       }
 
       if (value) {
+        // if time value not allowed, response warning.
+        if (
+          hourOptions.indexOf(value.getHourOfDay()) < 0 ||
+          minuteOptions.indexOf(value.getMinutes()) < 0 ||
+          secondOptions.indexOf(value.getSeconds()) < 0
+        ) {
+          this.setState({
+            invalid: true,
+          });
+          return;
+        }
+
+        // if time value is disabled, response warning.
+        const disabledHourOptions = disabledHours();
+        const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
+        const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
         if (
-          hourOptions.indexOf(value.fields[4]) < 0 ||
-          minuteOptions.indexOf(value.fields[5]) < 0 ||
-          secondOptions.indexOf(value.fields[6]) < 0
+          (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) ||
+          (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) ||
+          (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0)
         ) {
           this.setState({
             invalid: true,
@@ -69,11 +103,16 @@ const Header = React.createClass({
 
         if (originalValue && value) {
           if (
-            originalValue.fields[4] !== value.fields[4] ||
-            originalValue.fields[5] !== value.fields[5] ||
-            originalValue.fields[6] !== value.fields[6]
+            originalValue.getHourOfDay() !== value.getHourOfDay() ||
+            originalValue.getMinutes() !== value.getMinutes() ||
+            originalValue.getSeconds() !== value.getSeconds()
           ) {
-            onChange(value);
+            // keep other fields for rc-calendar
+            const changedValue = originalValue.clone();
+            changedValue.setHourOfDay(value.getHourOfDay());
+            changedValue.setMinutes(value.getMinutes());
+            changedValue.setSeconds(value.getSeconds());
+            onChange(changedValue);
           }
         } else if (originalValue !== value) {
           onChange(value);
@@ -84,8 +123,13 @@ const Header = React.createClass({
         });
         return;
       }
-    } else {
+    } else if (allowEmpty) {
       onChange(null);
+    } else {
+      this.setState({
+        invalid: true,
+      });
+      return;
     }
 
     this.setState({
@@ -93,24 +137,57 @@ const Header = React.createClass({
     });
   },
 
+  onKeyDown(e) {
+    if (e.keyCode === 27) {
+      this.props.onEsc();
+    }
+  },
+
   onClear() {
-    this.setState({str: ''});
+    this.setState({ str: '' });
     this.props.onClear();
   },
 
   getClearButton() {
-    const { locale, prefixCls, showClear } = this.props;
-    if (!showClear) {
+    const { locale, prefixCls, allowEmpty } = this.props;
+    if (!allowEmpty) {
       return null;
     }
-    return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear} />;
+    return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>;
   },
 
   getInput() {
     const { prefixCls, placeholder } = this.props;
     const { invalid, str } = this.state;
     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
-    return <input className={`${prefixCls}-input  ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />;
+    return (<input
+      className={`${prefixCls}-input  ${invalidClass}`}
+      ref="input"
+      onKeyDown={this.onKeyDown}
+      value={str}
+      placeholder={placeholder} onChange={this.onInputChange}
+    />);
+  },
+
+  selectRange() {
+    this.refs.input.select();
+    if (this.props.currentSelectPanel && this.refs.input.value) {
+      let selectionRangeStart = 0;
+      let selectionRangeEnd = 0;
+      if (this.props.currentSelectPanel === 'hour') {
+        selectionRangeStart = 0;
+        selectionRangeEnd = this.refs.input.value.indexOf(':');
+      } else if (this.props.currentSelectPanel === 'minute') {
+        selectionRangeStart = this.refs.input.value.indexOf(':') + 1;
+        selectionRangeEnd = this.refs.input.value.lastIndexOf(':');
+      } else if (this.props.currentSelectPanel === 'second') {
+        selectionRangeStart = this.refs.input.value.lastIndexOf(':') + 1;
+        selectionRangeEnd = this.refs.input.value.length;
+      }
+      if (selectionRangeEnd - selectionRangeStart === 2) {
+        createSelection(this.refs.input, selectionRangeStart, selectionRangeEnd);
+      }
+    }
   },
 
   render() {