text: var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  
  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  
  import React, { Component, PureComponent } from 'react';
  import debounce from 'lodash-es/debounce';
  import reactCSS from 'reactcss';
  
  var DEFAULT_ARROW_OFFSET = 1;
  
  var UP_KEY_CODE = 38;
  var DOWN_KEY_CODE = 40;
  var VALID_KEY_CODES = [UP_KEY_CODE, DOWN_KEY_CODE];
  var isValidKeyCode = function isValidKeyCode(keyCode) {
    return VALID_KEY_CODES.indexOf(keyCode) > -1;
  };
  var getNumberValue = function getNumberValue(value) {
    return Number(String(value).replace(/%/g, ''));
  };
  
  var idCounter = 1;
  
  export var EditableInput = function (_ref) {
    _inherits(EditableInput, _ref);
  
    function EditableInput(props) {
      _classCallCheck(this, EditableInput);
  
      var _this = _possibleConstructorReturn(this, (EditableInput.__proto__ || Object.getPrototypeOf(EditableInput)).call(this));
  
      _this.handleBlur = function (e) {
        console.log("trigger onchange", _this.state.value, _this.state.blurValue);
        if (_this.state.blurValue) {
          var blurVal = _this.state.blurValue;
          _this.setState({ value: _this.state.blurValue, blurValue: null }, function () {
            _this.props.onChange(blurVal, e);
          });
        }
      };
  
      _this.handleChange = function (e) {
        _this.setUpdatedValue(e.target.value, e);
      };
  
      _this.handleKeyDown = function (e) {
        // In case `e.target.value` is a percentage remove the `%` character
        // and update accordingly with a percentage
        // https://github.com/casesandberg/react-color/issues/383
        var value = getNumberValue(e.target.value);
        if (!isNaN(value) && isValidKeyCode(e.keyCode)) {
          var offset = _this.getArrowOffset();
          var updatedValue = e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
  
          _this.setUpdatedValue(updatedValue, e);
        }
      };
  
      _this.handleDrag = function (e) {
        if (_this.props.dragLabel) {
          var newValue = Math.round(_this.props.value + e.movementX);
          if (newValue >= 0 && newValue <= _this.props.dragMax) {
            _this.props.onChange && _this.props.onChange(_this.getValueObjectWithLabel(newValue), e);
          }
        }
      };
  
      _this.handleMouseDown = function (e) {
        if (_this.props.dragLabel) {
          e.preventDefault();
          _this.handleDrag(e);
          window.addEventListener('mousemove', _this.handleDrag);
          window.addEventListener('mouseup', _this.handleMouseUp);
        }
      };
  
      _this.handleMouseUp = function () {
        _this.unbindEventListeners();
      };
  
      _this.unbindEventListeners = function () {
        window.removeEventListener('mousemove', _this.handleDrag);
        window.removeEventListener('mouseup', _this.handleMouseUp);
      };
  
      _this.state = {
        value: String(props.value).toUpperCase(),
        blurValue: String(props.value).toUpperCase()
      };
  
      _this.inputId = 'rc-editable-input-' + idCounter++;
      return _this;
    }
  
    _createClass(EditableInput, [{
      key: 'componentDidUpdate',
      value: function componentDidUpdate(prevProps, prevState) {
        if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
          if (this.input === document.activeElement) {
            this.setState({ blurValue: String(this.props.value).toUpperCase() });
          } else {
            this.setState({ value: String(this.props.value).toUpperCase(), blurValue: !this.state.blurValue && String(this.props.value).toUpperCase() });
          }
        }
      }
    }, {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        this.unbindEventListeners();
      }
    }, {
      key: 'getValueObjectWithLabel',
      value: function getValueObjectWithLabel(value) {
        return _defineProperty({}, this.props.label, value);
      }
    }, {
      key: 'getArrowOffset',
      value: function getArrowOffset() {
        return this.props.arrowOffset || DEFAULT_ARROW_OFFSET;
      }
    }, {
      key: 'setUpdatedValue',
      value: function setUpdatedValue(value, e) {
        var _this2 = this;
  
        var onChangeValue = this.props.label ? this.getValueObjectWithLabel(value) : value;
        this.setState({ value: value });
        if (this.props.onChange) {
          console.log("debounce onchange", onChangeValue, this.props.inputDebounceTime);
          if (this.props.inputDebounceTime) {
            debounce(function () {
              return _this2.props.onChange(onChangeValue, e);
            }, this.props.inputDebounceTime);
          } else {
            this.props.onChange(onChangeValue, e);
          }
        }
      }
    }, {
      key: 'render',
      value: function render() {
        var _this3 = this;
  
        var styles = reactCSS({
          'default': {
            wrap: {
              position: 'relative'
            }
          },
          'user-override': {
            wrap: this.props.style && this.props.style.wrap ? this.props.style.wrap : {},
            input: this.props.style && this.props.style.input ? this.props.style.input : {},
            label: this.props.style && this.props.style.label ? this.props.style.label : {}
          },
          'dragLabel-true': {
            label: {
              cursor: 'ew-resize'
            }
          }
        }, {
          'user-override': true
        }, this.props);
  
        return React.createElement(
          'div',
          { style: styles.wrap },
          React.createElement('input', {
            id: this.inputId,
            style: styles.input,
            ref: function ref(input) {
              return _this3.input = input;
            },
            value: this.state.value,
            onKeyDown: this.handleKeyDown,
            onChange: this.handleChange,
            onBlur: this.handleBlur,
            placeholder: this.props.placeholder,
            spellCheck: 'false'
          }),
          this.props.label && !this.props.hideLabel ? React.createElement(
            'label',
            {
              htmlFor: this.inputId,
              style: styles.label,
              onMouseDown: this.handleMouseDown
            },
            this.props.label
          ) : null
        );
      }
    }]);
  
    return EditableInput;
  }(PureComponent || Component);
  
  export default EditableInput;