remove Inputs state

Author: Lobos

src/Datepicker/Datetime.js

@@ -13,9 +13,8 @@ import { ANGLE_LEFT, ANGLE_RIGHT, ANGLE_LEFT_DOUBLE, ANGLE_RIGHT_DOUBLE } from '
 import Transition from '../Transition';
 import PropTypes from '../utils/proptypes';
 
-import Styles from '../styles/_datepicker.scss';
-import InputStyles from '../styles/_input.scss';
-import FormStyles from '../styles/_form.scss';
+import _datepickers from '../styles/_datepicker.scss';
+import _inputs from '../styles/_input.scss';
 
 import { getLang, setLang } from '../lang';
 setLang('datetime');
@@ -201,7 +200,7 @@ class Datetime extends Component {
     const { current, timeStage } = this.state;
 
     return (
-      <div className={Styles.timeContainer}>
+      <div className={_datepickers.timeContainer}>
         <Clock current={current} active={!!timeStage}
           stage={timeStage}
           onClose={this.props.type === TIME ? undefined : this.timeStageChange}
@@ -268,7 +267,7 @@ class Datetime extends Component {
     }
 
     let buttons = [];
-    const className = Styles.year;
+    const className = _datepickers.year;
 
     buttons.push(
       <a className={className} key={'prev'}
@@ -299,7 +298,7 @@ class Datetime extends Component {
       return (
         <a type="button"
           onClick={this.monthChange.bind(this, i)}
-          key={i} className={Styles.month}>{m}</a>
+          key={i} className={_datepickers.month}>{m}</a>
       );
     }, this);
   }
@@ -339,11 +338,11 @@ class Datetime extends Component {
       }
 
       let className = classnames(
-        Styles.day,
-        d.getMonth() !== month && Styles.gray,
-        disabled && Styles.disabled,
-        (isToday && today.getDate() === d.getDate() && today.getMonth() === d.getMonth()) && Styles.today,
-        (isCurrent && value.getDate() === d.getDate() && value.getMonth() === d.getMonth()) && Styles.active
+        _datepickers.day,
+        d.getMonth() !== month && _datepickers.gray,
+        disabled && _datepickers.disabled,
+        (isToday && today.getDate() === d.getDate() && today.getMonth() === d.getMonth()) && _datepickers.today,
+        (isCurrent && value.getDate() === d.getDate() && value.getMonth() === d.getMonth()) && _datepickers.active
       );
 
       return (
@@ -372,7 +371,7 @@ class Datetime extends Component {
     let display = stage === 'day' ? 'inline-block' : 'none';
 
     return (
-      <div style={this.props.style} className={Styles.header}>
+      <div style={this.props.style} className={_datepickers.header}>
         <i style={{float: 'left', display}} onClick={this.pre.bind(this, 'month')}>
           {ANGLE_LEFT_DOUBLE}
         </i>
@@ -399,15 +398,15 @@ class Datetime extends Component {
     switch (this.state.stage) {
       case 'day':
         let weeks = getLang('datetime.weekday').map(function (w, i) {
-          return <div key={i} className={Styles.week}>{w}</div>;
+          return <div key={i} className={_datepickers.week}>{w}</div>;
         });
-        return <div className={Styles.dayInner}>{weeks}{this.renderDays()}</div>;
+        return <div className={_datepickers.dayInner}>{weeks}{this.renderDays()}</div>;
       case 'month':
-        return <div className={Styles.monthInner}>{this.renderMonths()}</div>;
+        return <div className={_datepickers.monthInner}>{this.renderMonths()}</div>;
       case 'year':
-        return <div className={Styles.yearInner}>{this.renderYears()}</div>;
+        return <div className={_datepickers.yearInner}>{this.renderYears()}</div>;
       case 'clock':
-        return <div className={Styles.inner}></div>;
+        return <div className={_datepickers.inner}></div>;
     }
     return null;
   }
@@ -418,25 +417,25 @@ class Datetime extends Component {
 
     let className = classnames(
       this.props.className,
-      Styles.datepicker,
-      type !== DATETIME && Styles.short,
-      readOnly ? InputStyles.disabled : (open && Styles.open),
-      type === TIME && Styles.timepicker,
-      dropup && Styles.dropup
+      _datepickers.datepicker,
+      type !== DATETIME && _datepickers.short,
+      readOnly ? _inputs.disabled : (open && _datepickers.open),
+      type === TIME && _datepickers.timepicker,
+      dropup && _datepickers.dropup
     );
 
     let text = value ? this.formatValue(value) : '';
 
     return (
       <div ref="datetime" onClick={this.handleOpen} className={className}>
-        <div className={classnames(Styles.control, InputStyles.input, hasError && FormStyles.dangerInput)}>
+        <div className={classnames(_datepickers.control, _inputs.input, hasError && _inputs.dangerInput)}>
           {
             text ? <span>{text}</span>
-              : <span className={InputStyles.placeholder}>{placeholder}&nbsp;</span>
+              : <span className={_inputs.placeholder}>{placeholder}&nbsp;</span>
           }
         </div>
         <Transition ref="datepicker" duration={333} tf="ease-out" act={open ? 'enter' : 'leave'}>
-          <div className={Styles.picker}>
+          <div className={_datepickers.picker}>
             {this.renderHeader()}
             {this.renderInner()}
             {(stage === 'day' || stage === 'clock') && type !== DATE && this.renderTime()}

src/Input.js

@@ -5,90 +5,45 @@ import classnames from 'classnames';
 import Regs from './utils/regs';
 import { getGrid } from './utils/grids';
 import { register } from './higherOrders/FormItem';
+import { triggerAble } from './higherOrders/Trigger';
 import PropTypes from './utils/proptypes';
+import { compose } from './utils/compose';
 
-import Styles from './styles/_input.scss';
+import _inputs from './styles/_input.scss';
 
 class Input extends Component {
   constructor (props) {
     super(props);
-    this.state = {
-      value: props.value
-    };
-
-    this.imeLock = false;
 
     this.handleChange = this.handleChange.bind(this);
-    this.handleTrigger = this.handleTrigger.bind(this);
-    this.handleCompositionStart = this.handleCompositionStart.bind(this);
-    this.handleCompositionEnd = this.handleCompositionEnd.bind(this);
-  }
-
-  componentWillReceiveProps (nextProps) {
-    let value = nextProps.value;
-    if (value !== this.props.value && value !== this.state.value) {
-      this.setState({ value });
-    }
   }
 
   handleChange (event) {
-    const { readOnly, type, trigger } = this.props;
-
-    if (readOnly) {
-      return;
-    }
+    const { type } = this.props;
 
     let value = event.target.value;
-
     if (value && (type === 'integer' || type === 'number')) {
-      if (!Regs[type].test(value)) {
-        value = this.state.value || '';
-      }
+      if (!Regs[type].test(value)) return;
     }
 
-    this.setState({ value });
-
-    if (trigger === 'change' && !this.imeLock) {
-      this.props.onChange(value);
-    }
-  }
-
-  handleTrigger (event) {
-    let value = event.target.value;
-    this.props.onChange(value, event);
-  }
-
-  handleCompositionStart () {
-    this.imeLock = true;
-  }
-
-  handleCompositionEnd () {
-    this.imeLock = false;
+    this.props.onChange(value);
   }
 
   render () {
-    const { className, grid, type, size, readOnly, trigger, ...other } = this.props;
+    const { className, grid, type, size, readOnly, ...other } = this.props;
     const props = {
       className: classnames(
         className,
-        Styles.input,
-        Styles[size],
-        readOnly && Styles.disabled,
+        _inputs.input,
+        _inputs[size],
+        readOnly && _inputs.disabled,
         getGrid(grid)
       ),
       readOnly,
-      onChange: this.handleChange,
-      onCompositionStart: this.handleCompositionStart,
-      onCompositionEnd: this.handleCompositionEnd,
-      type: type === 'password' ? 'password' : 'text',
-      value: this.state.value
+      onChange: readOnly ? undefined : this.handleChange,
+      type: type === 'password' ? 'password' : 'text'
     };
 
-    if (trigger !== 'change') {
-      let handle = 'on' + trigger.charAt(0).toUpperCase() + trigger.slice(1);
-      props[handle] = this.handleTrigger;
-    }
-
     return (<input {...other} {...props} />);
   }
 }
@@ -98,15 +53,12 @@ Input.propTypes = {
   defaultValue: PropTypes.string,
   grid: PropTypes.grid,
   id: PropTypes.string,
-  onBlur: PropTypes.func,
   onChange: PropTypes.func,
-  onFocus: PropTypes.func,
   placeholder: PropTypes.string,
   readOnly: PropTypes.bool,
   rows: PropTypes.number,
   size: PropTypes.oneOf(['small', 'large', 'middle']),
   style: PropTypes.object,
-  trigger: PropTypes.string,
   type: PropTypes.string,
   value: PropTypes.any
 };
@@ -117,8 +69,7 @@ Input.defaultProps = {
   value: ''
 };
 
-export default register(
-  ['text', 'email', 'alpha', 'alphanum', 'password', 'url', 'integer', 'number'],
-  {},
-  Input
-);
+export default compose(
+  register(['text', 'email', 'alpha', 'alphanum', 'password', 'url', 'integer', 'number'], {}),
+  triggerAble
+)(Input);

src/Textarea.js

@@ -5,98 +5,67 @@ import classnames from 'classnames';
 import { objectAssign } from './utils/objects';
 import { getGrid } from './utils/grids';
 import { register } from './higherOrders/FormItem';
-import { computedStyle, getLineHeight } from './utils/dom';
+import { triggerAble } from './higherOrders/Trigger';
+import { cloneShadow } from './utils/dom';
 import PropTypes from './utils/proptypes';
+import { compose } from './utils/compose';
 
-import Styles from './styles/_input.scss';
+import _inputs from './styles/_input.scss';
 
 class Textarea extends Component {
   constructor (props) {
     super(props);
-    this.state = {
-      rows: props.rows
-    };
-
-    this.imeLock = false;
-
     this.handleChange = this.handleChange.bind(this);
-    this.bindElement = this.bindElement.bind(this);
-    this.handleCompositionStart = this.handleCompositionStart.bind(this);
-    this.handleCompositionEnd = this.handleCompositionEnd.bind(this);
   }
 
   componentDidMount () {
-    let el = this.element;
-
     if (this.props.autoHeight) {
+      let el = this.refs.element;
+
+      // wait css
       setTimeout(() => {
-        this.lineHeight = getLineHeight(el);
-        this.paddingHeight = parseInt(computedStyle(el, 'paddingTop')) +
-          parseInt(computedStyle(el, 'paddingBottom'));
-      }, 0);
+        this.minHeight = el.clientHeight;
+        this.shadow = cloneShadow(el);
+      });
     }
   }
 
-  bindElement (ref) {
-    this.element = ref;
+  componentWillUnmount () {
+    if (this.shadow) {
+      this.refs.element.parentNode.removeChild(this.shadow);
+    }
   }
 
   handleChange (event) {
-    this.props.autoHeight && this.autoHeight();
-    this.props.onChange(event.target.value);
-  }
-
-  handleCompositionStart () {
-    this.imeLock = true;
-  }
-
-  handleCompositionEnd () {
-    this.imeLock = false;
-  }
-
-  autoHeight () {
-    let el = this.element;
-    let scrH;
-    let rows;
-
-    scrH = el.scrollHeight - this.paddingHeight;
-    rows = Math.floor(scrH / this.lineHeight);
-
-    if (rows >= this.props.rows) {
-      this.setState({
-        rows
-      });
-    }
-
-    el.style.height = 'auto';
+    let value = event.target.value;
+    this.shadow.value = value;
+    this.refs.element.style.height = Math.max(this.minHeight, this.shadow.scrollHeight) + 'px';
+    this.props.onChange(event.target.value, event);
   }
 
   render () {
     let { className, grid, autoHeight, readOnly, ...other } = this.props;
-    const { rows } = this.state;
 
-    let style = { minHeight: 'auto' };
+    let style = {};
     if (autoHeight) {
       style.resize = 'none';
+      style.overflowY = 'hidden';
     }
 
     const props = {
       className: classnames(
         className,
         getGrid(grid),
-        readOnly && Styles.disabled,
-        Styles.input
+        readOnly && _inputs.disabled,
+        _inputs.input
       ),
-      onChange: this.handleChange,
-      onCompositionStart: this.handleCompositionStart,
-      onCompositionEnd: this.handleCompositionEnd,
+      onChange: readOnly ? undefined : this.handleChange,
       style: objectAssign({}, this.props.style, style),
-      readOnly,
-      rows
+      readOnly
     };
 
     return (
-      <textarea ref={this.bindElement} { ...other } { ...props } />
+      <textarea ref="element" { ...other } { ...props } />
     );
   }
 }
@@ -120,5 +89,8 @@ Textarea.defaultProps = {
   value: ''
 };
 
-export default register(['textarea'], {}, Textarea);
+export default compose(
+  register(['textarea'], {}),
+  triggerAble
+)(Textarea);