select text when focusing time input

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

diff --git a/src/Header.jsx b/src/Header.jsx
index 2ef982776cbe71343e2478e79080ebe3b83debfc..6bed557af2b54b1115ed920313b90e1c18a7a359 100644 (file)
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -1,8 +1,9 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 
-const Header = React.createClass({
-  propTypes: {
+class Header extends Component {
+  static propTypes = {
     format: PropTypes.string,
     prefixCls: PropTypes.string,
     disabledDate: PropTypes.func,
@@ -21,15 +22,28 @@ const Header = React.createClass({
     allowEmpty: PropTypes.bool,
     defaultOpenValue: PropTypes.object,
     currentSelectPanel: PropTypes.string,
-  },
+    focusOnOpen: PropTypes.bool,
+  };
 
-  getInitialState() {
-    const { value, format } = this.props;
-    return {
+  constructor(props) {
+    super(props);
+    const { value, format } = props;
+    this.state = {
       str: value && value.format(format) || '',
       invalid: false,
     };
-  },
+  }
+
+  componentDidMount() {
+    if (this.props.focusOnOpen) {
+      // Wait one frame for the panel to be positioned before focusing
+      const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout);
+      requestAnimationFrame(() => {
+        this.refs.input.focus();
+        this.refs.input.select();
+      });
+    }
+  }
 
   componentWillReceiveProps(nextProps) {
     const { value, format } = nextProps;
@@ -37,9 +51,9 @@ const Header = React.createClass({
       str: value && value.format(format) || '',
       invalid: false,
     });
-  },
+  }
 
-  onInputChange(event) {
+  onInputChange = (event) => {
     const str = event.target.value;
     this.setState({
       str,
@@ -117,18 +131,18 @@ const Header = React.createClass({
     this.setState({
       invalid: false,
     });
-  },
+  }
 
-  onKeyDown(e) {
+  onKeyDown = (e) => {
     if (e.keyCode === 27) {
       this.props.onEsc();
     }
-  },
+  }
 
-  onClear() {
+  onClear = () => {
     this.setState({ str: '' });
     this.props.onClear();
-  },
+  }
 
   getClearButton() {
     const { prefixCls, allowEmpty } = this.props;
@@ -141,11 +155,11 @@ const Header = React.createClass({
       title={this.props.clearText}
       onMouseDown={this.onClear}
     />);
-  },
+  }
 
   getProtoValue() {
     return this.props.value || this.props.defaultOpenValue;
-  },
+  }
 
   getInput() {
     const { prefixCls, placeholder } = this.props;
@@ -161,7 +175,7 @@ const Header = React.createClass({
         onChange={this.onInputChange}
       />
     );
-  },
+  }
 
   render() {
     const { prefixCls } = this.props;
@@ -171,7 +185,7 @@ const Header = React.createClass({
         {this.getClearButton()}
       </div>
     );
-  },
-});
+  }
+}
 
 export default Header;