content: import _defineProperty from 'babel-runtime/helpers/defineProperty';
  import _extends from 'babel-runtime/helpers/extends';
  import React from 'react';
  import PropTypes from 'prop-types';
  import createReactClass from 'create-react-class';
  import classNames from 'classnames';
  import mixin from './mixin';
  import InputHandler from './InputHandler';
  
  function noop() {}
  
  function preventDefault(e) {
    e.preventDefault();
  }
  
  var InputNumber = createReactClass({
    displayName: 'InputNumber',
  
    propTypes: {
      focusOnUpDown: PropTypes.bool,
      onChange: PropTypes.func,
      onKeyDown: PropTypes.func,
      onKeyUp: PropTypes.func,
      prefixCls: PropTypes.string,
      disabled: PropTypes.bool,
      onFocus: PropTypes.func,
      onBlur: PropTypes.func,
      readOnly: PropTypes.bool,
      max: PropTypes.number,
      min: PropTypes.number,
      step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      upHandler: PropTypes.node,
      downHandler: PropTypes.node,
      useTouch: PropTypes.bool,
      formatter: PropTypes.func,
      parser: PropTypes.func,
      onMouseEnter: PropTypes.func,
      onMouseLeave: PropTypes.func,
      onMouseOver: PropTypes.func,
      onMouseOut: PropTypes.func,
      precision: PropTypes.number
    },
  
    mixins: [mixin],
  
    getDefaultProps: function getDefaultProps() {
      return {
        focusOnUpDown: true,
        useTouch: false,
        prefixCls: 'rc-input-number'
      };
    },
    componentDidMount: function componentDidMount() {
      this.componentDidUpdate();
    },
    componentWillUpdate: function componentWillUpdate() {
      try {
        this.start = this.refs.input.selectionStart;
        this.end = this.refs.input.selectionEnd;
      } catch (e) {
        // Fix error in Chrome:
        // Failed to read the 'selectionStart' property from 'HTMLInputElement'
        // http://stackoverflow.com/q/21177489/3040605
      }
    },
    componentDidUpdate: function componentDidUpdate() {
      if (this.props.focusOnUpDown && this.state.focused) {
        var selectionRange = this.refs.input.setSelectionRange;
        if (selectionRange && typeof selectionRange === 'function' && this.start !== undefined && this.end !== undefined && this.start !== this.end) {
          this.refs.input.setSelectionRange(this.start, this.end);
        } else {
          this.focus();
        }
      }
    },
    onKeyDown: function onKeyDown(e) {
      if (e.keyCode === 38) {
        var ratio = this.getRatio(e);
        this.up(e, ratio);
        this.stop();
      } else if (e.keyCode === 40) {
        var _ratio = this.getRatio(e);
        this.down(e, _ratio);
        this.stop();
      }
      var onKeyDown = this.props.onKeyDown;
  
      if (onKeyDown) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }
  
        onKeyDown.apply(undefined, [e].concat(args));
      }
    },
    onKeyUp: function onKeyUp(e) {
      this.stop();
      var onKeyUp = this.props.onKeyUp;
  
      if (onKeyUp) {
        for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }
  
        onKeyUp.apply(undefined, [e].concat(args));
      }
    },
    getRatio: function getRatio(e) {
      var ratio = 1;
      if (e.metaKey || e.ctrlKey) {
        ratio = 0.1;
      } else if (e.shiftKey) {
        ratio = 10;
      }
      return ratio;
    },
    getValueFromEvent: function getValueFromEvent(e) {
      return e.target.value;
    },
    focus: function focus() {
      this.refs.input.focus();
    },
    formatWrapper: function formatWrapper(num) {
      if (this.props.formatter) {
        return this.props.formatter(num);
      }
      return num;
    },
    render: function render() {
      var _classNames;
  
      var props = _extends({}, this.props);
      var prefixCls = props.prefixCls,
          disabled = props.disabled,
          readOnly = props.readOnly,
          useTouch = props.useTouch;
  
      var classes = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, props.className, !!props.className), _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, prefixCls + '-focused', this.state.focused), _classNames));
      var upDisabledClass = '';
      var downDisabledClass = '';
      var value = this.state.value;
  
      if (value) {
        if (!isNaN(value)) {
          var val = Number(value);
          if (val >= props.max) {
            upDisabledClass = prefixCls + '-handler-up-disabled';
          }
          if (val <= props.min) {
            downDisabledClass = prefixCls + '-handler-down-disabled';
          }
        } else {
          upDisabledClass = prefixCls + '-handler-up-disabled';
          downDisabledClass = prefixCls + '-handler-down-disabled';
        }
      }
  
      var editable = !props.readOnly && !props.disabled;
  
      // focus state, show input value
      // unfocus state, show valid value
      var inputDisplayValue = void 0;
      if (this.state.focused) {
        inputDisplayValue = this.state.inputValue;
      } else {
        inputDisplayValue = this.toPrecisionAsStep(this.state.value);
      }
  
      if (inputDisplayValue === undefined || inputDisplayValue === null) {
        inputDisplayValue = '';
      }
  
      var upEvents = void 0;
      var downEvents = void 0;
      if (useTouch) {
        upEvents = {
          onTouchStart: editable && !upDisabledClass ? this.up : noop,
          onTouchEnd: this.stop
        };
        downEvents = {
          onTouchStart: editable && !downDisabledClass ? this.down : noop,
          onTouchEnd: this.stop
        };
      } else {
        upEvents = {
          onMouseDown: editable && !upDisabledClass ? this.up : noop,
          onMouseUp: this.stop,
          onMouseLeave: this.stop
        };
        downEvents = {
          onMouseDown: editable && !downDisabledClass ? this.down : noop,
          onMouseUp: this.stop,
          onMouseLeave: this.stop
        };
      }
      var inputDisplayValueFormat = this.formatWrapper(inputDisplayValue);
      var isUpDisabled = !!upDisabledClass || disabled || readOnly;
      var isDownDisabled = !!downDisabledClass || disabled || readOnly;
      // ref for test
      return React.createElement(
        'div',
        {
          className: classes,
          style: props.style,
          onMouseEnter: props.onMouseEnter,
          onMouseLeave: props.onMouseLeave,
          onMouseOver: props.onMouseOver,
          onMouseOut: props.onMouseOut
        },
        React.createElement(
          'div',
          { className: prefixCls + '-handler-wrap' },
          React.createElement(
            InputHandler,
            _extends({
              ref: 'up',
              disabled: isUpDisabled,
              prefixCls: prefixCls,
              unselectable: 'unselectable'
            }, upEvents, {
              role: 'button',
              'aria-label': 'Increase Value',
              'aria-disabled': !!isUpDisabled,
              className: prefixCls + '-handler ' + prefixCls + '-handler-up ' + upDisabledClass
            }),
            this.props.upHandler || React.createElement('span', {
              unselectable: 'unselectable',
              className: prefixCls + '-handler-up-inner',
              onClick: preventDefault
            })
          ),
          React.createElement(
            InputHandler,
            _extends({
              ref: 'down',
              disabled: isDownDisabled,
              prefixCls: prefixCls,
              unselectable: 'unselectable'
            }, downEvents, {
              role: 'button',
              'aria-label': 'Decrease Value',
              'aria-disabled': !!isDownDisabled,
              className: prefixCls + '-handler ' + prefixCls + '-handler-down ' + downDisabledClass
            }),
            this.props.downHandler || React.createElement('span', {
              unselectable: 'unselectable',
              className: prefixCls + '-handler-down-inner',
              onClick: preventDefault
            })
          )
        ),
        React.createElement(
          'div',
          {
            className: prefixCls + '-input-wrap',
            role: 'spinbutton',
            'aria-valuemin': props.min,
            'aria-valuemax': props.max,
            'aria-valuenow': value
          },
          React.createElement('input', {
            type: props.type,
            placeholder: props.placeholder,
            onClick: props.onClick,
            className: prefixCls + '-input',
            autoComplete: 'off',
            onFocus: this.onFocus,
            onBlur: this.onBlur,
            onKeyDown: editable ? this.onKeyDown : noop,
            onKeyUp: editable ? this.onKeyUp : noop,
            autoFocus: props.autoFocus,
            maxLength: props.maxLength,
            readOnly: props.readOnly,
            disabled: props.disabled,
            max: props.max,
            min: props.min,
            name: props.name,
            id: props.id,
            onChange: this.onChange,
            ref: 'input',
            value: inputDisplayValueFormat
          })
        )
      );
    }
  });
  
  export default InputNumber;