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

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

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { createElement, isValidElement } from 'react';
import omit from 'lodash/omit';
import defer from 'lodash/defer';
import isArray from 'lodash/isArray';
import isString from 'lodash/isString';
import isNil from 'lodash/isNil';
import noop from 'lodash/noop';
import debounce from 'lodash/debounce';
import isArrayLike from 'lodash/isArrayLike';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import KeyCode from '../../../es/_util/KeyCode';
import { pxToRem, toPx } from '../../../es/_util/UnitConvertor';
import { getConfig } from '../../../es/configure';
import { WaitType } from '../core/enum';
import { FormField } from '../field/FormField';
import autobind from '../_util/autobind';
import _isEmpty from '../_util/isEmpty';
import isIE from '../_util/isIE';
import Icon from '../icon';
import { preventDefault, stopPropagation } from '../_util/EventManager';
import measureTextWidth from '../_util/measureTextWidth';
import Animate from '../animate';
import Tooltip from '../tooltip/Tooltip';
import { GroupItemCategory, ValueChangeAction } from './enum';
import { ShowHelp } from '../field/enum';
import { FieldFormat } from '../data-set/enum';
import { LabelLayout } from '../form/interface';
import { getProperty } from '../form/utils';
var PLACEHOLDER_SUPPORT;
export function isPlaceHolderSupport() {
  if (PLACEHOLDER_SUPPORT !== undefined) {
    return PLACEHOLDER_SUPPORT;
  }

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

  return true;
}
export var TextField =
/*#__PURE__*/
function (_FormField) {
  _inherits(TextField, _FormField);

  var _super = _createSuper(TextField);

  function TextField(props, context) {
    var _this;

    _classCallCheck(this, TextField);

    _this = _super.call(this, props, context);
    _this.type = 'text';
    _this.handleChangeWait = _this.getHandleChange(props);
    return _this;
  }

  _createClass(TextField, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      _get(_getPrototypeOf(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() {
      _get(_getPrototypeOf(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 = _isEmpty(this.text) && _get(_getPrototypeOf(TextField.prototype), "isEmpty", this).call(this);

      if (this.range === true) {
        if (this.value && isArrayLike(this.value) && !this.value.find(function (v) {
          return v;
        })) {
          return true;
        }

        return result;
      }

      if (isArrayLike(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 = omit(_get(_getPrototypeOf(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 || 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 _objectSpread({}, _get(_getPrototypeOf(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 = _get(_getPrototypeOf(TextField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-empty"), this.isEmpty()), _defineProperty(_ref, "".concat(prefixCls, "-suffix-button"), isValidElement(suffix)), _defineProperty(_ref, "".concat(prefixCls, "-multiple"), multiple), _defineProperty(_ref, "".concat(prefixCls, "-range"), range), _defineProperty(_ref, "".concat(prefixCls, "-prefix-button"), 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 = omit(wrapperProps.style, 'width');
      } // 修复ie下出现多层model导致的输入框遮盖问题
      // fixed the input would shadow each other in ie brower


      var ZIndexOfIEProps = isIE() ? {
        style: {
          zIndex: 'auto'
        }
      } : {};
      var element = React.createElement("span", _extends({
        key: "element"
      }, wrapperProps), multipleHolder, otherPrevNode, placeholderDiv, renderedValue, React.createElement("label", _extends({}, ZIndexOfIEProps, {
        onMouseDown: this.handleMouseDown
      }), prefix, input, floatLabel, button, suffix));

      if (otherNextNode) {
        return React.createElement(React.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 === ShowHelp.tooltip ? this.renderTooltipHelp() : null;

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

      var classString = classNames("".concat(prefixCls, "-group"), groupClassName, _defineProperty({}, "".concat(prefixCls, "-float-label-group"), this.hasFloatLabel));
      return React.createElement("div", {
        key: "wrapper",
        className: "".concat(prefixCls, "-group-wrapper")
      }, React.createElement("div", _extends({}, this.getWrapperProps(), {
        className: classString
      }), this.wrapGroupItem(addonBefore, GroupItemCategory.before), this.wrapGroupItem(inputElement, GroupItemCategory.input), this.wrapGroupItem(help, GroupItemCategory.help), this.wrapGroupItem(addonAfter, GroupItemCategory.after)));
    }
  }, {
    key: "renderTooltipHelp",
    value: function renderTooltipHelp() {
      return React.createElement(Tooltip, {
        title: this.getProp('help'),
        popupClassName: "".concat(getConfig('proPrefixCls'), "-tooltip-popup-help"),
        placement: "bottom"
      }, React.createElement(Icon, {
        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 = getProperty(props, 'label', dataSet, record);
      var placeholder = placeholderOrigin;

      if (labelLayout === 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 = _slicedToArray(_this$getPlaceholders, 2),
          placeholder = _this$getPlaceholders2[0],
          endPlaceHolder = _this$getPlaceholders2[1];

      if (this.isEmpty() && this.rangeTarget === 1 && !isNil(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.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();
      }

      _get(_getPrototypeOf(TextField.prototype), "setRangeTarget", this).call(this, target);

      defer(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 = _slicedToArray(_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 = _slicedToArray(_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.createElement("span", {
        key: "text",
        className: "".concat(prefixCls, "-range-text")
      }, !this.isDisabled() && React.createElement("input", _extends({}, 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.createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-start"),
        onChange: noop,
        onMouseDown: this.handleRangeStart,
        value: rangeTarget === 0 && isFocused ? '' : startValue,
        placeholder: rangeTarget === 0 && isFocused ? '' : startPlaceholder,
        disabled: props.disabled === undefined ? false : props.disabled,
        readOnly: true
      }), React.createElement("span", {
        className: "".concat(prefixCls, "-range-split")
      }, "~"), React.createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-end"),
        onChange: noop,
        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 = pxToRem(measureTextWidth(text, style));
      }

      return React.createElement("li", {
        key: "text"
      }, React.createElement("input", _extends({}, 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 = _get(_getPrototypeOf(TextField.prototype), "getClassName", this)).call.apply(_get3, [this, _defineProperty({}, "".concat(prefixCls, "-").concat(format), [FieldFormat.uppercase, FieldFormat.lowercase, 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 (!isNil(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.createElement(Animate, {
          component: "ul",
          componentProps: {
            ref: this.saveTagContainer,
            onScroll: stopPropagation,
            style: height && height !== 'auto' ? {
              height: pxToRem(toPx(height) - 2)
            } : undefined
          },
          transitionName: "zoom",
          exclusive: true,
          onEnd: this.handleTagAnimateEnd,
          onEnter: this.handleTagAnimateEnter
        }, this.renderMultipleValues(), range ? this.renderRangeEditor(otherProps) : this.renderMultipleEditor(_objectSpread({}, otherProps, {
          className: "".concat(prefixCls, "-multiple-input")
        })));
        return React.createElement("div", {
          key: "text",
          className: otherProps.className
        }, isFlat ? React.createElement(Tooltip, {
          title: this.getMultipleText()
        }, tags) : tags);
      }

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

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

      if (isFlat) {
        var hasValue = this.getValue() !== undefined && this.getValue() !== null;
        width = hasValue ? measureTextWidth(finalText) + (clearButton ? 37 : 21) : measureTextWidth(placeholder || '') + 24;
      }

      if (isValidElement(text)) {
        otherProps.style = _objectSpread({}, otherProps.style, {
          textIndent: -1000,
          width: isFlat ? width : undefined
        });
      } else if (isFlat) {
        otherProps.style = _objectSpread({
          width: width
        }, otherProps.style);
      }

      return React.createElement("input", _extends({
        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 (isValidElement(children)) {
        var _children = children,
            type = _children.type;

        var _children$props = children.props,
            onClick = _children$props.onClick,
            otherProps = _objectWithoutProperties(_children$props, ["onClick"]);

        if (onClick) {
          children = createElement(type, otherProps);
          props = _objectSpread({
            onClick: onClick
          }, props);
        }
      }

      return React.createElement("div", _extends({
        className: "".concat(prefixCls, "-suffix"),
        onMouseDown: 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.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' : measureTextWidth(placeholder || '') + 22;
      }

      if (multiple) {
        return React.createElement("input", {
          key: "value",
          className: "".concat(this.prefixCls, "-multiple-value"),
          value: this.toValueString(this.getValue()) || '',
          name: name,
          onChange: noop,
          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) && isValidElement(text)) {
          return React.createElement("span", {
            key: "renderedText",
            className: "".concat(prefixCls, "-rendered-value")
          }, React.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 = _slicedToArray(_this$getPlaceholders6, 1),
          placeholder = _this$getPlaceholders7[0];

      if (placeholder) {
        return React.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.createElement(Icon, {
          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 = _objectWithoutProperties(props, ["className"]);

      return !this.isDisabled() && React.createElement("div", _extends({
        key: "inner-button"
      }, otherProps, {
        className: classNames("".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.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.DELETE:
                this.clear();
                break;

              case KeyCode.BACKSPACE:
                this.removeLastValue();
                break;

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

            default:
          }
        }
      } else if (isIE()) {
        /**
         * 修复ie出现点击backSpace的页面回到上一页问题
         */
        if (e.keyCode === KeyCode.BACKSPACE) {
          e.preventDefault();
        }
      }

      _get(_getPrototypeOf(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;

      _get(_getPrototypeOf(TextField.prototype), "handleFocus", this).call(this, e);

      defer(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);
        }
      }

      _get(_getPrototypeOf(TextField.prototype), "handleBlur", this).call(this, e);
    }
  }, {
    key: "handleInnerButtonMouseDown",
    value: function handleInnerButtonMouseDown(e) {
      if (!this.isFocus) {
        e.stopPropagation();
      }
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      _get(_getPrototypeOf(TextField.prototype), "setValue", this).call(this, value);

      this.setText(undefined);
    }
  }, {
    key: "getTextNode",
    value: function getTextNode() {
      return this.text === undefined ? _get(_getPrototypeOf(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 === WaitType.throttle) {
          options.trailing = false;
          options.maxWait = wait;
        } else if (waitType === WaitType.debounce) {
          options.leading = false;
        }

        return debounce(this.prepareSetValue, wait, options);
      }

      return debounce(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 === ValueChangeAction.input) {
          this.handleChangeWait(restricted);
        }
      } else {
        this.setText(value);

        if (valueChangeAction === 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 (isArray(value)) {
        return value.join(',');
      }

      return value;
    }
  }]);

  return TextField;
}(FormField);
TextField.displayName = 'TextField';
TextField.propTypes = _objectSpread({
  /**
   * 占位词
   */
  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),

  /**
   * 最小长度
   */
  minLength: PropTypes.number,

  /**
   * 最大长度
   */
  maxLength: PropTypes.number,

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

  /**
   * 自动完成
   */
  autoComplete: PropTypes.string,

  /**
   * 前缀
   */
  prefix: PropTypes.node,

  /**
   * 后缀
   */
  suffix: PropTypes.node,

  /**
   * 是否显示清除按钮
   */
  clearButton: PropTypes.bool,

  /**
   * 前置标签
   */
  addonBefore: PropTypes.node,

  /**
   * 后置标签
   */
  addonAfter: PropTypes.node,

  /**
   * 限制可输入的字符
   */
  restrict: PropTypes.string,

  /**
   * 是否是筛选条 flat 模式
   */
  isFlat: PropTypes.bool,

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

  /**
   * 值变更间隔时间，只有在valueChangeAction为input时起作用
   */
  wait: PropTypes.number,

  /**
   * 值变更间隔类型，可选值：throttle | debounce
   * @default throttle
   */
  waitType: PropTypes.oneOf([WaitType.throttle, WaitType.debounce]),
  groupClassName: PropTypes.string
}, FormField.propTypes);
TextField.defaultProps = _objectSpread({}, FormField.defaultProps, {
  suffixCls: 'input',
  clearButton: false,
  multiple: false,
  valueChangeAction: ValueChangeAction.blur,
  waitType: WaitType.debounce
});

__decorate([observable], TextField.prototype, "text", void 0);

__decorate([autobind], TextField.prototype, "saveTagContainer", null);

__decorate([action], TextField.prototype, "removeLastValue", null);

__decorate([autobind], TextField.prototype, "handleTagAnimateEnter", null);

__decorate([autobind], TextField.prototype, "handleRangeStart", null);

__decorate([autobind], TextField.prototype, "handleRangeEnd", null);

__decorate([autobind], TextField.prototype, "handleKeyDown", null);

__decorate([autobind], TextField.prototype, "handleMouseDown", null);

__decorate([autobind], TextField.prototype, "handleClearButtonClick", null);

__decorate([autobind], TextField.prototype, "handleFocus", null);

__decorate([autobind], TextField.prototype, "handleBlur", null);

__decorate([autobind], TextField.prototype, "handleInnerButtonMouseDown", null);

__decorate([action], TextField.prototype, "setValue", null);

__decorate([action], TextField.prototype, "setText", null);

__decorate([autobind], TextField.prototype, "handleChange", null);

var ObserverTextField =
/*#__PURE__*/
function (_TextField) {
  _inherits(ObserverTextField, _TextField);

  var _super2 = _createSuper(ObserverTextField);

  function ObserverTextField() {
    _classCallCheck(this, ObserverTextField);

    return _super2.apply(this, arguments);
  }

  return ObserverTextField;
}(TextField);

ObserverTextField.defaultProps = TextField.defaultProps;
ObserverTextField = __decorate([observer], ObserverTextField);
export default ObserverTextField;
//# sourceMappingURL=TextField.js.map