X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FHeader.jsx;h=f6dd24157ae34e04fb43d66ff8e34475d4ae48c0;hb=0e4fd1626e460bd52a82de3f12f84d88f652dd7e;hp=4196ea949a19b805b7e835b5a9fae2753a1720c2;hpb=4984ed85e54f442998a335db70618d6184fa397e;p=github%2Ffretlink%2Ftime-picker.git

diff --git a/src/Header.jsx b/src/Header.jsx
index 4196ea9..f6dd241 100644
--- 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,17 @@ const Header = React.createClass({
     allowEmpty: PropTypes.bool,
     defaultOpenValue: PropTypes.object,
     currentSelectPanel: PropTypes.string,
-  },
+    onKeyDown: PropTypes.func,
+  };
 
-  getInitialState() {
-    const { value, format } = this.props;
-    return {
+  constructor(props) {
+    super(props);
+    const { value, format } = props;
+    this.state = {
       str: value && value.format(format) || '',
       invalid: false,
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     const { value, format } = nextProps;
@@ -37,9 +40,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 +120,21 @@ const Header = React.createClass({
     this.setState({
       invalid: false,
     });
-  },
+  }
 
-  onKeyDown(e) {
+  onKeyDown = (e) => {
+    const { onEsc, onKeyDown } = this.props;
     if (e.keyCode === 27) {
-      this.props.onEsc();
+      onEsc();
     }
-  },
 
-  onClear() {
+    onKeyDown(e);
+  }
+
+  onClear = () => {
     this.setState({ str: '' });
     this.props.onClear();
-  },
+  }
 
   getClearButton() {
     const { prefixCls, allowEmpty } = this.props;
@@ -141,25 +147,27 @@ 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;
     const { invalid, str } = this.state;
     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
-    return (<input
-      className={`${prefixCls}-input  ${invalidClass}`}
-      ref="input"
-      onKeyDown={this.onKeyDown}
-      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}
+      />
+    );
+  }
 
   render() {
     const { prefixCls } = this.props;
@@ -169,7 +177,7 @@ const Header = React.createClass({
         {this.getClearButton()}
       </div>
     );
-  },
-});
+  }
+}
 
 export default Header;