select input value range when enter different select panel

5 files changed, 65 insertions, 6 deletions

diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx
index 3dfd321..a017ec9 100644
--- a/src/module/Combobox.jsx
+++ b/src/module/Combobox.jsx
@@ -21,6 +21,7 @@ const Combobox = React.createClass({
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
+    onCurrentSelectPanelChange: PropTypes.func,
   },
 
   onItemChange(type, itemValue) {
@@ -41,6 +42,10 @@ const Combobox = React.createClass({
     onChange(value);
   },
 
+  onEnterSelectPanel(range) {
+    this.props.onCurrentSelectPanelChange(range);
+  },
+
   getHourSelect(hour) {
     const { prefixCls, hourOptions, showHour } = this.props;
     if (!showHour) {
@@ -53,6 +58,7 @@ const Combobox = React.createClass({
         selectedIndex={hourOptions.indexOf(hour)}
         type="hour"
         onSelect={this.onItemChange}
+        onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
       />
     );
   },
@@ -66,11 +72,12 @@ const Combobox = React.createClass({
         selectedIndex={minuteOptions.indexOf(minute)}
         type="minute"
         onSelect={this.onItemChange}
+        onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
       />
     );
   },
 
-  getSectionSelect(second) {
+  getSecondSelect(second) {
     const { prefixCls, secondOptions, showSecond } = this.props;
     if (!showSecond) {
       return null;
@@ -82,6 +89,7 @@ const Combobox = React.createClass({
         selectedIndex={secondOptions.indexOf(second)}
         type="second"
         onSelect={this.onItemChange}
+        onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
       />
     );
   },
@@ -103,7 +111,7 @@ const Combobox = React.createClass({
       <div className={`${prefixCls}-combobox`}>
         {this.getHourSelect(value.getHourOfDay())}
         {this.getMinuteSelect(value.getMinutes())}
-        {this.getSectionSelect(value.getSeconds())}
+        {this.getSecondSelect(value.getSeconds())}
       </div>
     );
   },
diff --git a/src/module/Header.jsx b/src/module/Header.jsx
index 962328c..ef88948 100644
--- a/src/module/Header.jsx
+++ b/src/module/Header.jsx
@@ -1,4 +1,5 @@
 import React, {PropTypes} from 'react';
+import createSelection from '../util/selection';
 
 const Header = React.createClass({
   propTypes: {
@@ -16,6 +17,7 @@ const Header = React.createClass({
     onClear: PropTypes.func,
     onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
+    currentSelectPanel: PropTypes.string,
   },
 
   getInitialState() {
@@ -27,9 +29,7 @@ const Header = React.createClass({
   },
 
   componentDidMount() {
-    this.timer = setTimeout(() => {
-      this.refs.input.focus();
-    }, 0);
+    this.timer = setTimeout(this.selectRange, 0);
   },
 
   componentWillReceiveProps(nextProps) {
@@ -40,6 +40,10 @@ const Header = React.createClass({
     });
   },
 
+  componentDidUpdate() {
+    this.timer = setTimeout(this.selectRange, 0);
+  },
+
   componentWillUnmount() {
     clearTimeout(this.timer);
   },
@@ -139,6 +143,27 @@ const Header = React.createClass({
                    placeholder={placeholder} onChange={this.onInputChange}/>);
   },
 
+  selectRange() {
+    this.refs.input.focus();
+    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() {
     const { prefixCls } = this.props;
     return (
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
index 2c2f554..63823ee 100644
--- a/src/module/Panel.jsx
+++ b/src/module/Panel.jsx
@@ -48,6 +48,7 @@ const Panel = React.createClass({
   getInitialState() {
     return {
       value: this.props.value,
+      selectionRange: [],
     };
   },
 
@@ -69,6 +70,10 @@ 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 value = this.state.value;
@@ -79,6 +84,7 @@ const Panel = React.createClass({
           gregorianCalendarLocale={gregorianCalendarLocale}
           locale={locale}
           value={value}
+          currentSelectPanel={this.state.currentSelectPanel}
           onEsc={this.props.onEsc}
           formatter={formatter}
           placeholder={placeholder}
@@ -100,6 +106,7 @@ const Panel = React.createClass({
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
+          onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
         />
       </div>
     );
diff --git a/src/module/Select.jsx b/src/module/Select.jsx
index b24f20c..3659692 100644
--- a/src/module/Select.jsx
+++ b/src/module/Select.jsx
@@ -30,6 +30,7 @@ const Select = React.createClass({
     selectedIndex: PropTypes.number,
     type: PropTypes.string,
     onSelect: PropTypes.func,
+    onMouseEnter: PropTypes.func,
   },
 
   componentDidMount() {
@@ -79,7 +80,8 @@ const Select = React.createClass({
     const { prefixCls } = this.props;
 
     return (
-      <div className={`${prefixCls}-select`}>
+      <div className={`${prefixCls}-select`}
+           onMouseEnter={this.props.onMouseEnter}>
         <ul ref="list">{this.getOptions()}</ul>
       </div>
     );
diff --git a/src/util/selection.js b/src/util/selection.js
new file mode 100644
index 0000000..395901e
--- /dev/null
+++ b/src/util/selection.js
@@ -0,0 +1,17 @@
+export default function createSelection(field, start, end) {
+  if (field.createTextRange) {
+    const selRange = field.createTextRange();
+    selRange.collapse(true);
+    selRange.moveStart('character', start);
+    selRange.moveEnd('character', end);
+    selRange.select();
+    field.focus();
+  } else if (field.setSelectionRange) {
+    field.focus();
+    field.setSelectionRange(start, end);
+  } else if (typeof field.selectionStart !== 'undefined') {
+    field.selectionStart = start;
+    field.selectionEnd = end;
+    field.focus();
+  }
+}