choerodon-ui/pro/lib/text-field/TextField.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.isPlaceHolderSupport = isPlaceHolderSupport;
exports["default"] = exports.TextField = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get4 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _defer = _interopRequireDefault(require("lodash/defer"));

var _isArray = _interopRequireDefault(require("lodash/isArray"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _isArrayLike = _interopRequireDefault(require("lodash/isArrayLike"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _configure = require("../../../lib/configure");

var _enum = require("../core/enum");

var _FormField2 = require("../field/FormField");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _isEmpty2 = _interopRequireDefault(require("../_util/isEmpty"));

var _isIE = _interopRequireDefault(require("../_util/isIE"));

var _icon = _interopRequireDefault(require("../icon"));

var _EventManager = require("../_util/EventManager");

var _measureTextWidth = _interopRequireDefault(require("../_util/measureTextWidth"));

var _animate = _interopRequireDefault(require("../animate"));

var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));

var _enum2 = require("./enum");

var _enum3 = require("../field/enum");

var _enum4 = require("../data-set/enum");

var _interface = require("../form/interface");

var _utils = require("../form/utils");

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var PLACEHOLDER_SUPPORT;

function isPlaceHolderSupport() {
  if (PLACEHOLDER_SUPPORT !== undefined) {
    return PLACEHOLDER_SUPPORT;
  }

  if (typeof window !== 'undefined') {
    return PLACEHOLDER_SUPPORT = 'placeholder' in document.createElement('input');
  }

  return true;
}

var TextField =
/*#__PURE__*/
function (_FormField) {
  (0, _inherits2["default"])(TextField, _FormField);

  var _super = _createSuper(TextField);

  function TextField(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, TextField);
    _this = _super.call(this, props, context);
    _this.type = 'text';
    _this.handleChangeWait = _this.getHandleChange(props);
    return _this;
  }

  (0, _createClass2["default"])(TextField, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
      var _this$props = this.props,
          wait = _this$props.wait,
          waitType = _this$props.waitType;

      if (wait !== nextProps.wait || waitType !== nextProps.waitType) {
        this.handleChangeWait = this.getHandleChange(nextProps);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "componentWillUnmount", this).call(this);
      this.handleChangeWait.cancel();
    }
  }, {
    key: "saveTagContainer",
    value: function saveTagContainer(node) {
      this.tagContainer = node;
    }
  }, {
    key: "isEmpty",
    value: function isEmpty() {
      var result = (0, _isEmpty2["default"])(this.text) && (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "isEmpty", this).call(this);

      if (this.range === true) {
        if (this.value && (0, _isArrayLike["default"])(this.value) && !this.value.find(function (v) {
          return v;
        })) {
          return true;
        }

        return result;
      }

      if ((0, _isArrayLike["default"])(this.range)) {
        if (this.value && !Object.values(this.value).find(function (v) {
          return v;
        })) {
          return true;
        }

        return result;
      }

      return result;
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _omit["default"])((0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "getOtherProps", this).call(this), ['prefix', 'suffix', 'clearButton', 'addonBefore', 'addonAfter', 'restrict', 'placeholder', 'placeHolder', 'maxLengths', 'autoComplete', 'isFlat', 'valueChangeAction', 'wait', 'waitType', 'groupClassName']);
      otherProps.type = this.type;
      otherProps.maxLength = this.getProp('maxLength');
      otherProps.onKeyDown = this.handleKeyDown;
      otherProps.autoComplete = this.props.autoComplete || (0, _configure.getConfig)('textFieldAutoComplete') || 'off';
      return otherProps;
    }
  }, {
    key: "getValidatorProps",
    value: function getValidatorProps() {
      var pattern = this.getProp('pattern');
      var maxLength = this.getProp('maxLength');
      var minLength = this.getProp('minLength');
      return (0, _objectSpread2["default"])({}, (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "getValidatorProps", this).call(this), {
        pattern: pattern,
        maxLength: maxLength,
        minLength: minLength
      });
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _get2, _ref;

      var prefixCls = this.prefixCls,
          multiple = this.multiple,
          range = this.range;
      var suffix = this.getSuffix();
      var prefix = this.getPrefix();

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return (_get2 = (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-empty"), this.isEmpty()), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-suffix-button"), (0, _react.isValidElement)(suffix)), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-multiple"), multiple), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-range"), range), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-prefix-button"), (0, _react.isValidElement)(prefix)), _ref)].concat(args));
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      return this.renderGroup();
    }
  }, {
    key: "renderInputElement",
    value: function renderInputElement() {
      var _this$props2 = this.props,
          addonBefore = _this$props2.addonBefore,
          addonAfter = _this$props2.addonAfter;
      var input = this.getWrappedEditor();
      var button = this.getInnerSpanButton();
      var suffix = this.getSuffix();
      var prefix = this.getPrefix();
      var otherPrevNode = this.getOtherPrevNode();
      var otherNextNode = this.getOtherNextNode();
      var placeholderDiv = this.renderPlaceHolder();
      var renderedValue = this.renderRenderedValue();
      var floatLabel = this.renderFloatLabel();
      var multipleHolder = this.renderMultipleHolder();
      var wrapperProps = this.getWrapperProps(); // 修复设置宽度导致拥有addon出现宽度超出

      if (addonAfter || addonBefore) {
        wrapperProps.style = (0, _omit["default"])(wrapperProps.style, 'width');
      } // 修复ie下出现多层model导致的输入框遮盖问题
      // fixed the input would shadow each other in ie brower


      var ZIndexOfIEProps = (0, _isIE["default"])() ? {
        style: {
          zIndex: 'auto'
        }
      } : {};

      var element = _react["default"].createElement("span", (0, _extends2["default"])({
        key: "element"
      }, wrapperProps), multipleHolder, otherPrevNode, placeholderDiv, renderedValue, _react["default"].createElement("label", (0, _extends2["default"])({}, ZIndexOfIEProps, {
        onMouseDown: this.handleMouseDown
      }), prefix, input, floatLabel, button, suffix));

      if (otherNextNode) {
        return _react["default"].createElement(_react["default"].Fragment, null, element, otherNextNode);
      }

      return element;
    }
  }, {
    key: "renderGroup",
    value: function renderGroup() {
      var prefixCls = this.prefixCls,
          _this$props3 = this.props,
          addonBefore = _this$props3.addonBefore,
          addonAfter = _this$props3.addonAfter,
          showHelp = _this$props3.showHelp,
          groupClassName = _this$props3.groupClassName;
      var inputElement = this.renderInputElement();
      var help = showHelp === _enum3.ShowHelp.tooltip ? this.renderTooltipHelp() : null;

      if (!addonBefore && !addonAfter && !help) {
        return inputElement;
      }

      var classString = (0, _classnames["default"])("".concat(prefixCls, "-group"), groupClassName, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-float-label-group"), this.hasFloatLabel));
      return _react["default"].createElement("div", {
        key: "wrapper",
        className: "".concat(prefixCls, "-group-wrapper")
      }, _react["default"].createElement("div", (0, _extends2["default"])({}, this.getWrapperProps(), {
        className: classString
      }), this.wrapGroupItem(addonBefore, _enum2.GroupItemCategory.before), this.wrapGroupItem(inputElement, _enum2.GroupItemCategory.input), this.wrapGroupItem(help, _enum2.GroupItemCategory.help), this.wrapGroupItem(addonAfter, _enum2.GroupItemCategory.after)));
    }
  }, {
    key: "renderTooltipHelp",
    value: function renderTooltipHelp() {
      return _react["default"].createElement(_Tooltip["default"], {
        title: this.getProp('help'),
        popupClassName: "".concat((0, _configure.getConfig)('proPrefixCls'), "-tooltip-popup-help"),
        placement: "bottom"
      }, _react["default"].createElement(_icon["default"], {
        type: "help"
      }));
    } // 处理 form 中的 labelLayout 为 placeholder 情况避免以前 placeholder 和 label 无法区分彼此。

  }, {
    key: "getPlaceholders",
    value: function getPlaceholders() {
      var dataSet = this.dataSet,
          record = this.record,
          props = this.props,
          labelLayout = this.labelLayout;
      var placeholderOrigin = this.getProp('placeholder');
      var label = (0, _utils.getProperty)(props, 'label', dataSet, record);
      var placeholder = placeholderOrigin;

      if (labelLayout === _interface.LabelLayout.placeholder) {
        placeholder = label && !this.isFocused ? label : placeholderOrigin || label;
      }

      var holders = [];
      return placeholder ? holders.concat(placeholder) : holders;
    }
  }, {
    key: "getLabel",
    value: function getLabel() {
      var _this$getPlaceholders = this.getPlaceholders(),
          _this$getPlaceholders2 = (0, _slicedToArray2["default"])(_this$getPlaceholders, 2),
          placeholder = _this$getPlaceholders2[0],
          endPlaceHolder = _this$getPlaceholders2[1];

      if (this.isEmpty() && this.rangeTarget === 1 && !(0, _isNil["default"])(endPlaceHolder)) {
        return endPlaceHolder;
      }

      if (this.isEmpty() && placeholder) {
        return placeholder;
      }

      return this.getProp('label');
    }
  }, {
    key: "wrapGroupItem",
    value: function wrapGroupItem(node, category) {
      var prefixCls = this.prefixCls;

      if (!node) {
        return null;
      }

      return _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-group-").concat(category)
      }, node);
    }
  }, {
    key: "setRangeTarget",
    value: function setRangeTarget(target) {
      var _this2 = this;

      if (this.text !== undefined) {
        this.prepareSetValue(this.text);
        this.setText();
      }

      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "setRangeTarget", this).call(this, target);
      (0, _defer["default"])(function () {
        return _this2.isFocused && _this2.select();
      });
    }
  }, {
    key: "renderRangeEditor",
    value: function renderRangeEditor(props) {
      var prefixCls = this.prefixCls,
          rangeTarget = this.rangeTarget,
          isFocused = this.isFocused;

      var _this$getPlaceholders3 = this.getPlaceholders(),
          _this$getPlaceholders4 = (0, _slicedToArray2["default"])(_this$getPlaceholders3, 2),
          startPlaceholder = _this$getPlaceholders4[0],
          _this$getPlaceholders5 = _this$getPlaceholders4[1],
          endPlaceHolder = _this$getPlaceholders5 === void 0 ? startPlaceholder : _this$getPlaceholders5;

      var _this$processRangeVal = this.processRangeValue(),
          _this$processRangeVal2 = (0, _slicedToArray2["default"])(_this$processRangeVal, 2),
          _this$processRangeVal3 = _this$processRangeVal2[0],
          startValue = _this$processRangeVal3 === void 0 ? '' : _this$processRangeVal3,
          _this$processRangeVal4 = _this$processRangeVal2[1],
          endValue = _this$processRangeVal4 === void 0 ? '' : _this$processRangeVal4;

      var editorStyle = {};

      if (rangeTarget === 1) {
        editorStyle.right = 0;
      } else {
        editorStyle.left = 0;
      }

      return _react["default"].createElement("span", {
        key: "text",
        className: "".concat(prefixCls, "-range-text")
      }, !this.isDisabled() && _react["default"].createElement("input", (0, _extends2["default"])({}, props, {
        className: "".concat(prefixCls, "-range-input"),
        key: "text",
        value: rangeTarget === undefined || !this.isFocused ? '' : this.text === undefined ? rangeTarget === 0 ? startValue : endValue : this.text,
        placeholder: rangeTarget === undefined || !this.isFocused ? '' : rangeTarget === 0 ? startPlaceholder : endPlaceHolder,
        readOnly: this.isReadOnly(),
        style: editorStyle
      })), _react["default"].createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-start"),
        onChange: _noop["default"],
        onMouseDown: this.handleRangeStart,
        value: rangeTarget === 0 && isFocused ? '' : startValue,
        placeholder: rangeTarget === 0 && isFocused ? '' : startPlaceholder,
        disabled: props.disabled === undefined ? false : props.disabled,
        readOnly: true
      }), _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-range-split")
      }, "~"), _react["default"].createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-end"),
        onChange: _noop["default"],
        onMouseDown: this.handleRangeEnd,
        value: rangeTarget === 1 && isFocused ? '' : endValue,
        placeholder: rangeTarget === 1 && isFocused ? '' : endPlaceHolder,
        disabled: props.disabled === undefined ? false : props.disabled,
        readOnly: true
      }));
    }
  }, {
    key: "renderMultipleEditor",
    value: function renderMultipleEditor(props) {
      var style = this.props.style;
      var text = this.text;
      var editorStyle = {};

      if (!this.editable) {
        editorStyle.position = 'absolute';
        editorStyle.left = 0;
        editorStyle.top = 0;
        editorStyle.zIndex = -1;
        props.readOnly = true;
      } else if (text) {
        editorStyle.width = (0, _UnitConvertor.pxToRem)((0, _measureTextWidth["default"])(text, style));
      }

      return _react["default"].createElement("li", {
        key: "text"
      }, _react["default"].createElement("input", (0, _extends2["default"])({}, props, {
        value: text || '',
        style: editorStyle
      })));
    }
  }, {
    key: "getWrappedEditor",
    value: function getWrappedEditor() {
      return this.getEditor();
    }
  }, {
    key: "getClassName",
    value: function getClassName() {
      var _get3;

      var prefixCls = this.prefixCls,
          format = this.format;

      for (var _len2 = arguments.length, props = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        props[_key2] = arguments[_key2];
      }

      return (_get3 = (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "getClassName", this)).call.apply(_get3, [this, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-").concat(format), [_enum4.FieldFormat.uppercase, _enum4.FieldFormat.lowercase, _enum4.FieldFormat.capitalize].includes(format))].concat(props));
    }
    /**
     * 处理 flat 多选tooltip text
     */

  }, {
    key: "getMultipleText",
    value: function getMultipleText() {
      var _this3 = this;

      var values = this.getValues();
      var repeats = new Map();
      var texts = values.map(function (v) {
        var key = _this3.getValueKey(v);

        var repeat = repeats.get(key) || 0;

        var text = _this3.processText(_this3.getText(v));

        repeats.set(key, repeat + 1);

        if (!(0, _isNil["default"])(text)) {
          return text;
        }

        return undefined;
      });
      return texts.join('、');
    }
  }, {
    key: "getEditor",
    value: function getEditor() {
      var prefixCls = this.prefixCls,
          multiple = this.multiple,
          range = this.range,
          _this$props4 = this.props,
          style = _this$props4.style,
          isFlat = _this$props4.isFlat,
          clearButton = _this$props4.clearButton;
      var otherProps = this.getOtherProps();

      var _ref3 = style || {},
          height = _ref3.height;

      if (multiple) {
        var tags = _react["default"].createElement(_animate["default"], {
          component: "ul",
          componentProps: {
            ref: this.saveTagContainer,
            onScroll: _EventManager.stopPropagation,
            style: height && height !== 'auto' ? {
              height: (0, _UnitConvertor.pxToRem)((0, _UnitConvertor.toPx)(height) - 2)
            } : undefined
          },
          transitionName: "zoom",
          exclusive: true,
          onEnd: this.handleTagAnimateEnd,
          onEnter: this.handleTagAnimateEnter
        }, this.renderMultipleValues(), range ? this.renderRangeEditor(otherProps) : this.renderMultipleEditor((0, _objectSpread2["default"])({}, otherProps, {
          className: "".concat(prefixCls, "-multiple-input")
        })));

        return _react["default"].createElement("div", {
          key: "text",
          className: otherProps.className
        }, isFlat ? _react["default"].createElement(_Tooltip["default"], {
          title: this.getMultipleText()
        }, tags) : tags);
      }

      if (range) {
        return _react["default"].createElement("span", {
          key: "text",
          className: otherProps.className
        }, this.renderRangeEditor(otherProps));
      }

      var text = this.getTextNode();
      var placeholder = this.hasFloatLabel ? undefined : this.getPlaceholders()[0];
      var finalText = (0, _isString["default"])(text) ? text : this.getText(this.getValue());
      var width = 0; // 筛选条默认宽度处理

      if (isFlat) {
        var hasValue = this.getValue() !== undefined && this.getValue() !== null;
        width = hasValue ? (0, _measureTextWidth["default"])(finalText) + (clearButton ? 37 : 21) : (0, _measureTextWidth["default"])(placeholder || '') + 24;
      }

      if ((0, _react.isValidElement)(text)) {
        otherProps.style = (0, _objectSpread2["default"])({}, otherProps.style, {
          textIndent: -1000,
          width: isFlat ? width : undefined
        });
      } else if (isFlat) {
        otherProps.style = (0, _objectSpread2["default"])({
          width: width
        }, otherProps.style);
      }

      return _react["default"].createElement("input", (0, _extends2["default"])({
        key: "text"
      }, otherProps, {
        placeholder: placeholder,
        value: finalText,
        readOnly: !this.editable
      }));
    }
  }, {
    key: "getSuffix",
    value: function getSuffix() {
      var _this$props$suffix = this.props.suffix,
          suffix = _this$props$suffix === void 0 ? this.getDefaultSuffix() : _this$props$suffix;

      if (suffix) {
        return this.wrapperSuffix(suffix);
      }
    }
  }, {
    key: "getDefaultSuffix",
    value: function getDefaultSuffix() {
      return undefined;
    }
  }, {
    key: "wrapperSuffix",
    value: function wrapperSuffix(children, props) {
      var prefixCls = this.prefixCls;

      if ((0, _react.isValidElement)(children)) {
        var _children = children,
            type = _children.type;
        var _children$props = children.props,
            onClick = _children$props.onClick,
            otherProps = (0, _objectWithoutProperties2["default"])(_children$props, ["onClick"]);

        if (onClick) {
          children = (0, _react.createElement)(type, otherProps);
          props = (0, _objectSpread2["default"])({
            onClick: onClick
          }, props);
        }
      }

      return _react["default"].createElement("div", (0, _extends2["default"])({
        className: "".concat(prefixCls, "-suffix"),
        onMouseDown: _EventManager.preventDefault
      }, props), children);
    }
  }, {
    key: "getPrefix",
    value: function getPrefix() {
      var prefix = this.props.prefix;

      if (prefix) {
        return this.wrapperPrefix(prefix);
      }
    }
  }, {
    key: "wrapperPrefix",
    value: function wrapperPrefix(children) {
      var prefixCls = this.prefixCls;
      return _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-prefix")
      }, children);
    }
  }, {
    key: "renderMultipleHolder",
    value: function renderMultipleHolder() {
      var name = this.name,
          multiple = this.multiple,
          isFlat = this.props.isFlat;
      var width = 'auto';

      if (isFlat) {
        var hasValue = !this.isEmpty();
        var placeholder = this.hasFloatLabel ? undefined : this.getPlaceholders()[0];
        width = hasValue ? 'auto' : (0, _measureTextWidth["default"])(placeholder || '') + 22;
      }

      if (multiple) {
        return _react["default"].createElement("input", {
          key: "value",
          className: "".concat(this.prefixCls, "-multiple-value"),
          value: this.toValueString(this.getValue()) || '',
          name: name,
          onChange: _noop["default"],
          style: {
            width: isFlat ? width : 'auto'
          }
        });
      }
    }
  }, {
    key: "getOtherPrevNode",
    value: function getOtherPrevNode() {
      return undefined;
    }
  }, {
    key: "getOtherNextNode",
    value: function getOtherNextNode() {
      return undefined;
    }
  }, {
    key: "renderPlaceHolder",
    value: function renderPlaceHolder() {
      if ((this.multiple || !isPlaceHolderSupport()) && !this.hasFloatLabel && !this.range) {
        return this.getPlaceHolderNode();
      }
    }
  }, {
    key: "renderRenderedValue",
    value: function renderRenderedValue() {
      var prefixCls = this.prefixCls,
          range = this.range,
          multiple = this.multiple;

      if (!range && !multiple) {
        var text = this.getTextNode();

        if ((!this.isFocused || !this.editable) && (0, _react.isValidElement)(text)) {
          return _react["default"].createElement("span", {
            key: "renderedText",
            className: "".concat(prefixCls, "-rendered-value")
          }, _react["default"].createElement("span", {
            className: "".concat(prefixCls, "-rendered-value-inner")
          }, text));
        }
      }
    }
  }, {
    key: "getPlaceHolderNode",
    value: function getPlaceHolderNode() {
      var prefixCls = this.prefixCls;

      var _this$getPlaceholders6 = this.getPlaceholders(),
          _this$getPlaceholders7 = (0, _slicedToArray2["default"])(_this$getPlaceholders6, 1),
          placeholder = _this$getPlaceholders7[0];

      if (placeholder) {
        return _react["default"].createElement("div", {
          className: "".concat(prefixCls, "-placeholder")
        }, placeholder);
      }
    }
  }, {
    key: "getInnerSpanButton",
    value: function getInnerSpanButton() {
      var _this$props5 = this.props,
          clearButton = _this$props5.clearButton,
          isFlat = _this$props5.isFlat,
          prefixCls = this.prefixCls;

      if (clearButton && !this.isReadOnly()) {
        return this.wrapperInnerSpanButton(_react["default"].createElement(_icon["default"], {
          type: "close",
          onClick: this.handleClearButtonClick,
          onMouseDown: this.handleInnerButtonMouseDown
        }), {
          className: isFlat ? "".concat(prefixCls, "-clear-button ").concat(prefixCls, "-clear-button-flat") : "".concat(prefixCls, "-clear-button")
        });
      }
    }
  }, {
    key: "wrapperInnerSpanButton",
    value: function wrapperInnerSpanButton(children) {
      var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var prefixCls = this.prefixCls;
      var className = props.className,
          otherProps = (0, _objectWithoutProperties2["default"])(props, ["className"]);
      return !this.isDisabled() && _react["default"].createElement("div", (0, _extends2["default"])({
        key: "inner-button"
      }, otherProps, {
        className: (0, _classnames["default"])("".concat(prefixCls, "-inner-button"), className)
      }), children);
    }
  }, {
    key: "removeLastValue",
    value: function removeLastValue() {
      var values = this.getValues();
      var value = values.pop();
      this.setValue(values);
      this.afterRemoveValue(value, -1);
    }
  }, {
    key: "handleTagAnimateEnd",
    value: function handleTagAnimateEnd() {}
  }, {
    key: "handleTagAnimateEnter",
    value: function handleTagAnimateEnter() {
      var tagContainer = this.tagContainer;
      var style = this.props.style;

      if (tagContainer && style && style.height) {
        if (tagContainer.scrollTo) {
          tagContainer.scrollTo(0, tagContainer.getBoundingClientRect().height);
        } else {
          tagContainer.scrollTop = tagContainer.getBoundingClientRect().height;
        }
      }
    }
  }, {
    key: "handleRangeStart",
    value: function handleRangeStart(event) {
      // 进行切换的时候默认不会收起 popup 因为点击start的时候也会触发 trigger 的 handleClick
      // 导致在设置了 isClickToHide 的情况下回收起
      // handleRangeEnd 同理
      if (this.rangeTarget === 1 && this.isFocused) {
        event.preventDefault();
      }

      this.setRangeTarget(0);
    }
  }, {
    key: "handleRangeEnd",
    value: function handleRangeEnd(event) {
      if (this.rangeTarget === 0 && this.isFocused) {
        event.preventDefault();
      }

      this.setRangeTarget(1);
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var _this$props6 = this.props,
          disabled = _this$props6.disabled,
          clearButton = _this$props6.clearButton;

      if (!this.isReadOnly() && !disabled) {
        if (this.range && e.keyCode === _KeyCode["default"].TAB) {
          if (this.rangeTarget === 0 && !e.shiftKey) {
            this.setRangeTarget(1);
            e.preventDefault();
          }

          if (this.rangeTarget === 1 && e.shiftKey) {
            this.setRangeTarget(0);
            e.preventDefault();
          }
        }

        if (this.multiple) {
          if (!this.text) {
            switch (e.keyCode) {
              case _KeyCode["default"].DELETE:
                this.clear();
                break;

              case _KeyCode["default"].BACKSPACE:
                this.removeLastValue();
                break;

              default:
            }
          }
        } else if (clearButton && !this.editable) {
          switch (e.keyCode) {
            case _KeyCode["default"].DELETE:
            case _KeyCode["default"].BACKSPACE:
              this.clear();
              break;

            default:
          }
        }
      } else if ((0, _isIE["default"])()) {
        /**
         * 修复ie出现点击backSpace的页面回到上一页问题
         */
        if (e.keyCode === _KeyCode["default"].BACKSPACE) {
          e.preventDefault();
        }
      }

      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "handleKeyDown", this).call(this, e);
    }
  }, {
    key: "handleMouseDown",
    value: function handleMouseDown(e) {
      if (e.target !== this.element) {
        if (!this.isDisabled()) {
          e.preventDefault();
        }

        if (!this.isFocused) {
          this.focus();
        }
      }
    }
  }, {
    key: "handleClearButtonClick",
    value: function handleClearButtonClick(e) {
      e.preventDefault();
      this.setRangeTarget(0);
      this.clear();
    }
  }, {
    key: "handleFocus",
    value: function handleFocus(e) {
      var _this4 = this;

      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "handleFocus", this).call(this, e);
      (0, _defer["default"])(function () {
        return _this4.isFocused && _this4.select();
      });
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (!e.isDefaultPrevented()) {
        if (this.editable) {
          this.syncValueOnBlur(e.target.value);
        } else if (!this.getValues().length) {
          this.setValue(null);
        }
      }

      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "handleBlur", this).call(this, e);
    }
  }, {
    key: "handleInnerButtonMouseDown",
    value: function handleInnerButtonMouseDown(e) {
      if (!this.isFocus) {
        e.stopPropagation();
      }
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "setValue", this).call(this, value);
      this.setText(undefined);
    }
  }, {
    key: "getTextNode",
    value: function getTextNode() {
      return this.text === undefined ? (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "getTextNode", this).call(this) : this.text;
    }
  }, {
    key: "setText",
    value: function setText(text) {
      this.text = text;
    }
  }, {
    key: "select",
    value: function select() {
      var element = this.element;

      if (element && this.editable) {
        element.select();
      }
    }
  }, {
    key: "getHandleChange",
    value: function getHandleChange(props) {
      var wait = props.wait,
          waitType = props.waitType;

      if (wait && waitType) {
        var options = {
          leading: true,
          trailing: true
        };

        if (waitType === _enum.WaitType.throttle) {
          options.trailing = false;
          options.maxWait = wait;
        } else if (waitType === _enum.WaitType.debounce) {
          options.leading = false;
        }

        return (0, _debounce["default"])(this.prepareSetValue, wait, options);
      }

      return (0, _debounce["default"])(this.prepareSetValue, 0);
    }
  }, {
    key: "handleChange",
    value: function handleChange(e) {
      var target = e.target,
          type = e.type,
          value = e.target.value;
      var valueChangeAction = this.props.valueChangeAction;

      if (type === 'compositionend') {
        this.lock = false;
      }

      if (!this.lock) {
        var restricted = this.restrictInput(value);

        if (restricted !== value) {
          var selectionEnd = target.selectionEnd + restricted.length - value.length;
          target.value = restricted;
          target.setSelectionRange(selectionEnd, selectionEnd);
        }

        this.setText(restricted);

        if (valueChangeAction === _enum2.ValueChangeAction.input) {
          this.handleChangeWait(restricted);
        }
      } else {
        this.setText(value);

        if (valueChangeAction === _enum2.ValueChangeAction.input) {
          this.handleChangeWait(value);
        }
      }
    }
  }, {
    key: "restrictInput",
    value: function restrictInput(value) {
      var restrict = this.props.restrict;

      if (restrict) {
        return value.replace(new RegExp("[^".concat(restrict, "]+"), 'g'), '');
      }

      return value;
    }
  }, {
    key: "toValueString",
    value: function toValueString(value) {
      if ((0, _isArray["default"])(value)) {
        return value.join(',');
      }

      return value;
    }
  }]);
  return TextField;
}(_FormField2.FormField);

exports.TextField = TextField;
TextField.displayName = 'TextField';
TextField.propTypes = (0, _objectSpread2["default"])({
  /**
   * 占位词
   */
  placeholder: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),

  /**
   * 最小长度
   */
  minLength: _propTypes["default"].number,

  /**
   * 最大长度
   */
  maxLength: _propTypes["default"].number,

  /**
   * 正则校验
   */
  pattern: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),

  /**
   * 自动完成
   */
  autoComplete: _propTypes["default"].string,

  /**
   * 前缀
   */
  prefix: _propTypes["default"].node,

  /**
   * 后缀
   */
  suffix: _propTypes["default"].node,

  /**
   * 是否显示清除按钮
   */
  clearButton: _propTypes["default"].bool,

  /**
   * 前置标签
   */
  addonBefore: _propTypes["default"].node,

  /**
   * 后置标签
   */
  addonAfter: _propTypes["default"].node,

  /**
   * 限制可输入的字符
   */
  restrict: _propTypes["default"].string,

  /**
   * 是否是筛选条 flat 模式
   */
  isFlat: _propTypes["default"].bool,

  /**
   * 触发值变更的动作， default: blur
   */
  valueChangeAction: _propTypes["default"].oneOf([_enum2.ValueChangeAction.input, _enum2.ValueChangeAction.blur]),

  /**
   * 值变更间隔时间，只有在valueChangeAction为input时起作用
   */
  wait: _propTypes["default"].number,

  /**
   * 值变更间隔类型，可选值：throttle | debounce
   * @default throttle
   */
  waitType: _propTypes["default"].oneOf([_enum.WaitType.throttle, _enum.WaitType.debounce]),
  groupClassName: _propTypes["default"].string
}, _FormField2.FormField.propTypes);
TextField.defaultProps = (0, _objectSpread2["default"])({}, _FormField2.FormField.defaultProps, {
  suffixCls: 'input',
  clearButton: false,
  multiple: false,
  valueChangeAction: _enum2.ValueChangeAction.blur,
  waitType: _enum.WaitType.debounce
});
(0, _tslib.__decorate)([_mobx.observable], TextField.prototype, "text", void 0);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "saveTagContainer", null);
(0, _tslib.__decorate)([_mobx.action], TextField.prototype, "removeLastValue", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleTagAnimateEnter", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleRangeStart", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleRangeEnd", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleKeyDown", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleMouseDown", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleClearButtonClick", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleFocus", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleBlur", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleInnerButtonMouseDown", null);
(0, _tslib.__decorate)([_mobx.action], TextField.prototype, "setValue", null);
(0, _tslib.__decorate)([_mobx.action], TextField.prototype, "setText", null);
(0, _tslib.__decorate)([_autobind["default"]], TextField.prototype, "handleChange", null);

var ObserverTextField =
/*#__PURE__*/
function (_TextField) {
  (0, _inherits2["default"])(ObserverTextField, _TextField);

  var _super2 = _createSuper(ObserverTextField);

  function ObserverTextField() {
    (0, _classCallCheck2["default"])(this, ObserverTextField);
    return _super2.apply(this, arguments);
  }

  return ObserverTextField;
}(TextField);

ObserverTextField.defaultProps = TextField.defaultProps;
ObserverTextField = (0, _tslib.__decorate)([_mobxReact.observer], ObserverTextField);
var _default = ObserverTextField;
exports["default"] = _default;
//# sourceMappingURL=TextField.js.map