1.Debounce autoTrim to allow spaces in the middle of input.

2.Fix lint.
3.Migrate to ES6 module.

.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "plugins": [
     "react"
   ],

demo/InputFormFieldDemo.jsx

@@ -6,11 +6,11 @@
  * All rights reserved.
  */
 
-const Form = require('uxcore-form/build/Form');
-const Validators = require('uxcore-validator');
-const React = require('react');
+import Form from 'uxcore-form/build/Form';
 
-const InputFormField = require('../src');
+import Validators from 'uxcore-validator';
+import React from 'react';
+import InputFormField from '../src';
 
 const { LeftAddon, RightAddon, Count } = InputFormField;
 
@@ -19,7 +19,6 @@ const handleKeyDown = (e) => {
 };
 
 class Demo extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -60,4 +59,4 @@ class Demo extends React.Component {
   }
 }
 
-module.exports = Demo;
+export default Demo;

demo/index.jsx

@@ -0,0 +1,13 @@
+/**
+ * InputFormField Component Demo for uxcore
+ * @author eternalsky
+ *
+ * Copyright 2015-2016, Uxcore Team, Alinw.
+ * All rights reserved.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './InputFormFieldDemo';
+
+ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo'));

src/InputFormField.jsx

@@ -6,29 +6,43 @@
  * All rights reserved.
  */
 
-const React = require('react');
-const FormField = require('uxcore-form-field');
-const Constants = require('uxcore-const');
-const classnames = require('classnames');
-const assign = require('object-assign');
+import React from 'react';
 
-const util = require('./util');
-const FormCount = require('./addons/FormCount');
-const LeftAddon = require('./addons/LeftAddon');
-const RightAddon = require('./addons/RightAddon');
+import FormField from 'uxcore-form-field';
+import Constants from 'uxcore-const';
+import classnames from 'classnames';
+import assign from 'object-assign';
+import util from './util';
+import FormCount from './addons/FormCount';
+import LeftAddon from './addons/LeftAddon';
+import RightAddon from './addons/RightAddon';
 
 
 /**
  * extend FormField, rewrite renderField method
  */
 class InputFormField extends FormField {
+  componentWillUnmount() {
+    this.clearTimer();
+  }
+
+  clearTimer() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
 
   handleChange(e) {
     const me = this;
     const { autoTrim } = me.props;
     let value = e.currentTarget.value;
     if (autoTrim) {
-      value = util.trim(value);
+      me.clearTimer();
+      me.timer = setTimeout(() => {
+        value = util.trim(value);
+        me.handleDataChange(me.deFormatValue(value));
+      }, 500);
     }
     me.handleDataChange(me.deFormatValue(value));
   }
@@ -213,4 +227,4 @@ InputFormField.defaultProps = assign({}, FormField.defaultProps, {
   inputType: 'text',
 });
 InputFormField.displayName = 'InputFormField';
-module.exports = InputFormField;
+export default InputFormField;

src/addons/FormCount.jsx

@@ -1,30 +1,35 @@
-const classnames = require('classnames');
-const React = require('react');
+import classnames from 'classnames';
+import React from 'react';
 
-const FormCount = props => <div
-  className={classnames(props.prefixCls, {
-    [`${props.prefixCls}-overflow`]: parseInt(props.length, 10) > parseInt(props.total, 10),
-  })}
->
-  <span
-    className={classnames({
-      [`${props.prefixCls}-actual`]: true,
-      [`${props.prefixCls}-actual-overflow`]: parseInt(props.length, 10) > parseInt(props.total, 10),
+const FormCount = props => (
+  <div
+    className={classnames(props.prefixCls, {
+      [`${props.prefixCls}-overflow`]: parseInt(props.length, 10) > parseInt(props.total, 10),
     })}
-  >{props.length}</span>
-  <span className={`${props.prefixCls}-slash`}>/</span>
-  <span className={`${props.prefixCls}-max`}>{props.total}</span>
-</div>;
+  >
+    <span
+      className={classnames({
+        [`${props.prefixCls}-actual`]: true,
+        [`${props.prefixCls}-actual-overflow`]: parseInt(props.length, 10) > parseInt(props.total, 10),
+      })}
+    >{props.length}</span>
+    <span className={`${props.prefixCls}-slash`}>/</span>
+    <span className={`${props.prefixCls}-max`}>{props.total}</span>
+  </div>
+);
 
 FormCount.defaultProps = {
   prefixCls: 'kuma-uxform-count',
 };
+
+/* eslint-disable react/require-default-props */
 FormCount.propTypes = {
   prefixCls: React.PropTypes.string,
   length: React.PropTypes.number,
   total: React.PropTypes.number,
 };
+/* eslint-enable react/require-default-props */
 
 FormCount.displayName = 'FormCount';
 
-module.exports = FormCount;
+export default FormCount;

src/addons/LeftAddon.jsx

@@ -1,5 +1,5 @@
-const classnames = require('classnames');
-const React = require('react');
+import classnames from 'classnames';
+import React from 'react';
 
 const LeftAddon = props => (
   <div
@@ -14,11 +14,15 @@ const LeftAddon = props => (
 );
 
 LeftAddon.defaultProps = {};
+
+/* eslint-disable react/require-default-props */
 LeftAddon.propTypes = {
   focus: React.PropTypes.bool,
   hover: React.PropTypes.bool,
   children: React.PropTypes.any,
 };
+/* eslint-enable react/require-default-props */
+
 LeftAddon.displayName = 'LeftAddon';
 
-module.exports = LeftAddon;
+export default LeftAddon;

src/addons/RightAddon.jsx

@@ -1,4 +1,4 @@
-const React = require('react');
+import React from 'react';
 
 const RightAddon = props => (
   <div className="kuma-uxform-right-icon ">
@@ -7,9 +7,13 @@ const RightAddon = props => (
 );
 
 RightAddon.defaultProps = {};
+
+/* eslint-disable react/require-default-props */
 RightAddon.propTypes = {
   children: React.PropTypes.any,
 };
+/* eslint-enable react/require-default-props */
+
 RightAddon.displayName = 'RightAddon';
 
-module.exports = RightAddon;
+export default RightAddon;

src/index.js

@@ -6,4 +6,4 @@
  * All rights reserved.
  */
 
-module.exports = require('./InputFormField');
+export default from './InputFormField';

src/util.js

@@ -19,7 +19,7 @@ const getIEVer = () => {
 
 const trim = str => str.replace(/(^\s+|\s+$)/g, '');
 
-module.exports = {
+export default {
   getIEVer,
   trim,
 };

tests/InputFormField.spec.jsx

@@ -10,6 +10,7 @@ const { LeftAddon, RightAddon, Count } = InputFormField;
 sinon.spy(InputFormField.prototype, 'handleFocus');
 sinon.spy(InputFormField.prototype, 'handleBlur');
 sinon.spy(InputFormField.prototype, 'handleKeyDown');
+const clearTimerSpy = sinon.spy(InputFormField.prototype, 'clearTimer');
 
 describe('util', () => {
   it('getIEVer', () => {
@@ -24,15 +25,31 @@ describe('util', () => {
 describe('InputFormField', () => {
   let instance;
 
-  it('autoTrim', () => {
+  it('autoTrim', (done) => {
     instance = mount(
       <InputFormField autoTrim standalone />,
     );
-    instance.find('.kuma-input').node.value = 'test ';
+    instance.find('.kuma-input').node.value = ' a b ';
     instance.find('.kuma-input').simulate('change');
-    expect(instance.find('.kuma-input').node.value).to.be('test');
+    setTimeout(() => {
+      expect(instance.find('.kuma-input').node.value).to.be(' a b ');
+    }, 400);
+    setTimeout(() => {
+      expect(instance.find('.kuma-input').node.value).to.be('a b');
+      done();
+    }, 600);
   });
 
+  it('clear autoTrim timer on unmount', () => {
+    instance = mount(
+      <InputFormField autoTrim standalone />,
+    );
+    instance.find('.kuma-input').node.value = 'a';
+    instance.find('.kuma-input').simulate('change');
+    clearTimerSpy.reset();
+    instance.unmount();
+    expect(clearTimerSpy.calledOnce).to.be(true);
+  });
 
   it('jsxdisabled', () => {
     instance = mount(