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 _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["onFocus", "onBlur", "onMouseEnter", "onMouseLeave"],
    _excluded2 = ["onClick"],
    _excluded3 = ["className"];
import { __decorate } from "tslib";
import React, { Children, cloneElement, createElement, isValidElement } from 'react';
import omit from 'lodash/omit';
import defer from 'lodash/defer';
import isArray from 'lodash/isArray';
import isNumber from 'lodash/isNumber';
import isString from 'lodash/isString';
import isRegExp from 'lodash/isRegExp';
import isNil from 'lodash/isNil';
import noop from 'lodash/noop';
import defaultTo from 'lodash/defaultTo';
import debounce from 'lodash/debounce';
import classNames from 'classnames';
import { action, computed, observable, runInAction, toJS, isArrayLike } from 'mobx';
import { observer } from 'mobx-react';
import { global } from 'choerodon-ui/shared';
import KeyCode from '../../../es/_util/KeyCode';
import { pxToRem, toPx } from '../../../es/_util/UnitConvertor';
import { Tooltip as TextTooltip, WaitType, FieldFocusMode } 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 { 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';
import RenderedText from './RenderedText';
import isReactChildren from '../_util/isReactChildren';
import TextFieldGroup from './TextFieldGroup';
import { findFirstFocusableElement } from '../_util/focusable';
import { hide, show } from '../tooltip/singleton';
import isOverflow from '../overflow-tip/util';
import { toRangeValue } from '../field/utils';

var defaultWrap = function defaultWrap(node) {
  return node;
};

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

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

  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: "clearButton",
    get: function get() {
      var clearButton = this.props.clearButton;
      return !!clearButton && !this.readOnly && !this.disabled;
    }
    /**
     * 是否显示长度信息
     */

  }, {
    key: "showLengthInfo",
    get: function get() {
      if ('showLengthInfo' in this.props) {
        return this.props.showLengthInfo;
      }

      return this.getContextConfig('showLengthInfo');
    }
  }, {
    key: "showHelp",
    get: function get() {
      var showHelp = this.observableProps.showHelp;

      if (isString(showHelp)) {
        return showHelp;
      }

      return this.context.showHelp || this.getContextConfig('showHelp') || ShowHelp.newLine;
    }
  }, {
    key: "border",
    get: function get() {
      return this.props.border;
    }
  }, {
    key: "handleRenderedValueChange",
    value: function handleRenderedValueChange(text, width, rangeTarget) {
      switch (rangeTarget) {
        case 0:
          {
            this.renderedStartText = {
              text: text,
              width: width
            };
            break;
          }

        case 1:
          {
            this.renderedEndText = {
              text: text,
              width: width
            };
            break;
          }

        default:
          {
            this.renderedText = {
              text: text,
              width: width
            };
          }
      }
    }
  }, {
    key: "clearRenderedText",
    value: function clearRenderedText(rangeTarget) {
      var _this2 = this;

      switch (rangeTarget) {
        case 0:
          {
            if (this.renderedStartText) {
              runInAction(function () {
                _this2.renderedStartText = undefined;
              });
            }

            break;
          }

        case 1:
          {
            if (this.renderedEndText) {
              runInAction(function () {
                _this2.renderedEndText = undefined;
              });
            }

            break;
          }

        default:
          {
            if (this.renderedText) {
              runInAction(function () {
                _this2.renderedText = undefined;
              });
            }
          }
      }
    }
  }, {
    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: "saveAddonAfterRef",
    value: function saveAddonAfterRef(node) {
      this.addonAfterRef = node;
    }
  }, {
    key: "saveAddonBeforeRef",
    value: function saveAddonBeforeRef(node) {
      this.addonBeforeRef = node;
    }
  }, {
    key: "saveSuffixRef",
    value: function saveSuffixRef(node) {
      return node;
    }
  }, {
    key: "measureTextWidth",
    value: function measureTextWidth(text) {
      var element = this.element && this.element.element ? this.element.element : this.element;
      var computedStyle = element ? getComputedStyle(element) : undefined;
      return _measureTextWidth(text, computedStyle);
    }
  }, {
    key: "getEditorTextInfo",
    value: function getEditorTextInfo(rangeTarget) {
      var isFlat = this.props.isFlat;

      var _ref = this.hasFloatLabel && !this.isFocused ? [] : this.getPlaceholders(),
          _ref2 = _slicedToArray(_ref, 2),
          startPlaceHolder = _ref2[0],
          _ref2$ = _ref2[1],
          endPlaceHolder = _ref2$ === void 0 ? startPlaceHolder : _ref2$;

      var text = this.text;

      if (rangeTarget === undefined) {
        if (text !== undefined) {
          return {
            text: text,
            width: isFlat ? this.measureTextWidth(text) : 0
          };
        }

        var renderedText = this.renderedText;

        if (renderedText) {
          if (renderedText.text) {
            return renderedText;
          }
        } else {
          var unRenderedText = this.getTextNode(this.getValue());
          var processedText = isNumber(unRenderedText) ? String(unRenderedText) : unRenderedText;

          if (isString(processedText) && processedText.length) {
            return {
              text: processedText,
              width: isFlat ? this.measureTextWidth(processedText) : 0
            };
          }
        }

        if (startPlaceHolder) {
          return {
            text: '',
            width: isFlat ? this.measureTextWidth(startPlaceHolder) : 0,
            placeholder: startPlaceHolder
          };
        }

        return {
          text: '',
          width: 0
        };
      }

      var _this$processRangeVal = this.processRangeValue(this.isEditableLike() ? undefined : this.rangeValue),
          _this$processRangeVal2 = _slicedToArray(_this$processRangeVal, 2),
          startValue = _this$processRangeVal2[0],
          endValue = _this$processRangeVal2[1];

      if (rangeTarget === 0) {
        var renderedStartText = this.renderedStartText;

        if (renderedStartText) {
          if (renderedStartText.text) {
            return renderedStartText;
          }
        } else {
          var unRenderedStartText = this.getTextByValue(startValue);
          var startText = isNumber(unRenderedStartText) ? String(unRenderedStartText) : unRenderedStartText;

          if (isString(startText) && startText.length) {
            return {
              text: startText,
              width: isFlat ? this.measureTextWidth(startText) : 0
            };
          }
        }

        if (!isNil(startPlaceHolder) || !isNil(text)) {
          var width = !isNil(text) ? this.measureTextWidth(text) : !isNil(startPlaceHolder) ? this.measureTextWidth(startPlaceHolder) : 0;
          return {
            text: '',
            width: isFlat ? width : 0,
            placeholder: isNil(text) ? startPlaceHolder : undefined
          };
        }
      }

      if (rangeTarget === 1) {
        var renderedEndText = this.renderedEndText;

        if (renderedEndText) {
          if (renderedEndText.text) {
            return renderedEndText;
          }
        } else {
          var unRenderedEndText = this.getTextByValue(endValue);
          var endText = isNumber(unRenderedEndText) ? String(unRenderedEndText) : unRenderedEndText;

          if (isString(endText) && endText.length) {
            return {
              text: endText,
              width: isFlat ? this.measureTextWidth(endText) : 0
            };
          }
        }

        if (!isNil(endPlaceHolder) || !isNil(text)) {
          var _width = !isNil(text) ? this.measureTextWidth(text) : !isNil(endPlaceHolder) ? this.measureTextWidth(endPlaceHolder) : 0;

          return {
            text: '',
            width: isFlat ? _width : 0,
            placeholder: isNil(text) ? endPlaceHolder : undefined
          };
        }
      }

      return {
        text: '',
        width: 0
      };
    }
  }, {
    key: "isRenderEmpty",
    value: function isRenderEmpty() {
      if (!this.multiple) {
        return this.range ? _isEmpty(this.getEditorTextInfo(0).text) && _isEmpty(this.getEditorTextInfo(1).text) : _isEmpty(this.getEditorTextInfo().text);
      }

      return true;
    }
  }, {
    key: "isEmpty",
    value: function isEmpty() {
      return (this.isEditableLike() || _isEmpty(this.text)) && _get(_getPrototypeOf(TextField.prototype), "isEmpty", this).call(this) && this.isRenderEmpty();
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(TextField.prototype), "getOmitPropsKeys", this).call(this).concat(['prefix', 'suffix', 'clearButton', 'addonBefore', 'addonAfter', 'addonBeforeStyle', 'addonAfterStyle', 'restrict', 'placeholder', 'placeHolder', 'maxLengths', 'autoComplete', 'valueChangeAction', 'wait', 'waitType', 'groupClassName', 'showLengthInfo', 'border']);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = _get(_getPrototypeOf(TextField.prototype), "getOtherProps", this).call(this);

      otherProps.type = this.type;
      otherProps.maxLength = this.getProp('maxLength');
      otherProps.onKeyDown = this.handleKeyDown;
      otherProps.autoComplete = this.props.autoComplete || this.getContextConfig('textFieldAutoComplete') || 'off';
      return otherProps;
    }
  }, {
    key: "forceBlur",
    value: function forceBlur(e) {
      var _this$props2 = this.props,
          addonBefore = _this$props2.addonBefore,
          addonAfter = _this$props2.addonAfter,
          _inTable = _this$props2._inTable;

      if (!_inTable || !addonBefore && !addonAfter) {
        _get(_getPrototypeOf(TextField.prototype), "forceBlur", this).call(this, e);
      }
    }
  }, {
    key: "handleAddonBeforeKeyDown",
    value: function handleAddonBeforeKeyDown(e) {
      var _this$props3 = this.props,
          _inTable = _this$props3._inTable,
          onKeyDown = _this$props3.onKeyDown;

      if (_inTable && onKeyDown && e.keyCode === KeyCode.TAB && e.shiftKey) {
        onKeyDown(e);
      }
    }
  }, {
    key: "handleAddonAfterKeyDown",
    value: function handleAddonAfterKeyDown(e) {
      var _this$props4 = this.props,
          _inTable = _this$props4._inTable,
          onKeyDown = _this$props4.onKeyDown;

      if (_inTable && onKeyDown && e.keyCode === KeyCode.TAB && !e.shiftKey) {
        onKeyDown(e);
      }
    }
  }, {
    key: "handleMultipleMouseEnter",
    value: function handleMultipleMouseEnter(e) {
      var _this$getOtherProps = this.getOtherProps(),
          onMouseEnter = _this$getOtherProps.onMouseEnter;

      if (onMouseEnter) {
        onMouseEnter(e);
      }

      show(e.currentTarget, {
        title: this.getMultipleText()
      });
      this.tooltipShown = true;
    }
  }, {
    key: "handleMultipleMouseLeave",
    value: function handleMultipleMouseLeave() {
      var _this$getOtherProps2 = this.getOtherProps(),
          onMouseLeave = _this$getOtherProps2.onMouseLeave;

      if (onMouseLeave) {
        onMouseLeave();
      }

      this.handleHelpMouseLeave();
    }
  }, {
    key: "handleHelpMouseEnter",
    value: function handleHelpMouseEnter(e) {
      var _this$context = this.context,
          getTooltipTheme = _this$context.getTooltipTheme,
          getTooltipPlacement = _this$context.getTooltipPlacement;
      var helpTooltipProps = this.helpTooltipProps;
      var helpTooltipCls = "".concat(this.getContextConfig('proPrefixCls'), "-tooltip-popup-help");

      if (helpTooltipProps && helpTooltipProps.popupClassName) {
        helpTooltipCls = helpTooltipCls.concat(' ', helpTooltipProps.popupClassName);
      }

      show(e.currentTarget, _objectSpread(_objectSpread({
        theme: getTooltipTheme('help'),
        placement: getTooltipPlacement('help'),
        title: this.getDisplayProp('help')
      }, helpTooltipProps), {}, {
        popupClassName: helpTooltipCls
      }));
      this.tooltipShown = true;
    }
  }, {
    key: "handleHelpMouseLeave",
    value: function handleHelpMouseLeave() {
      if (this.tooltipShown) {
        hide();
        this.tooltipShown = false;
      }
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _get2, _ref3;

      var prefixCls = this.prefixCls,
          multiple = this.multiple,
          range = this.range,
          border = this.border;
      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, (_ref3 = {}, _defineProperty(_ref3, "".concat(prefixCls, "-suffix-button"), /*#__PURE__*/isValidElement(suffix)), _defineProperty(_ref3, "".concat(prefixCls, "-multiple"), multiple), _defineProperty(_ref3, "".concat(prefixCls, "-range"), range), _defineProperty(_ref3, "".concat(prefixCls, "-border"), border), _defineProperty(_ref3, "".concat(prefixCls, "-prefix-button"), /*#__PURE__*/isValidElement(prefix)), _ref3)].concat(args));
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      return this.renderGroup();
    }
  }, {
    key: "getRenderedValue",
    value: function getRenderedValue() {
      if (this.range) {
        return this.renderRangeValue(toRangeValue(this.getValue(), this.range));
      }

      return this.processRenderer(this.getValue());
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if (_get(_getPrototypeOf(TextField.prototype), "showTooltip", this).call(this, e)) {
        return true;
      }

      var _this$context2 = this.context,
          getTooltip = _this$context2.getTooltip,
          getTooltipTheme = _this$context2.getTooltipTheme,
          getTooltipPlacement = _this$context2.getTooltipPlacement;
      var inputTooltip = this.props.tooltip;
      var disabledTooltip = getTooltip('text-field-disabled');
      var element = this.element,
          renderedValue = this.renderedValue;
      var title = this.getRenderedValue();
      var judgeOverflowElement = renderedValue ? element.parentNode.previousElementSibling : element;
      var tooltip = this.disabled ? disabledTooltip : inputTooltip;
      var tooltipPlacement = this.disabled ? getTooltipPlacement('text-field-disabled') : getTooltipPlacement('output');
      var tooltipTheme = this.disabled ? getTooltipTheme('text-field-disabled') : getTooltipTheme('output');

      if (judgeOverflowElement && !this.multiple && title) {
        if (tooltip === TextTooltip.always || tooltip === TextTooltip.overflow && isOverflow(judgeOverflowElement)) {
          show(judgeOverflowElement, {
            title: title,
            placement: tooltipPlacement || 'right',
            theme: tooltipTheme
          });
          return true;
        }

        if (isArrayLike(tooltip)) {
          var tooltipType = tooltip[0];
          var TextTooltipProps = tooltip[1] || {};
          var mouseEnterDelay = TextTooltipProps.mouseEnterDelay;

          if (tooltipType === TextTooltip.always || tooltipType === TextTooltip.overflow && isOverflow(judgeOverflowElement)) {
            show(judgeOverflowElement, _objectSpread({
              title: TextTooltipProps.title ? TextTooltipProps.title : title,
              placement: tooltipPlacement || 'right',
              theme: tooltipTheme
            }, TextTooltipProps), mouseEnterDelay);
            return true;
          }
        }
      }

      return false;
    }
  }, {
    key: "renderInputElement",
    value: function renderInputElement() {
      var _this$props5 = this.props,
          addonBefore = _this$props5.addonBefore,
          addonAfter = _this$props5.addonAfter,
          isFlat = _this$props5.isFlat;
      var renderedValue = this.renderRenderedValue(undefined, {
        isFlat: isFlat
      });
      this.renderedValue = renderedValue; // 先计算lengthElement,然后计算suffix,再计算clearButton,设置right和输入框paddingRight,避免重叠

      this.renderLengthElement();
      var suffix = this.getSuffix();
      var button = this.getInnerSpanButton();
      var prefix = this.getPrefix();
      var input = this.getWrappedEditor(renderedValue);
      var otherPrevNode = this.getOtherPrevNode();
      var otherNextNode = this.getOtherNextNode();
      var placeholderDiv = renderedValue ? undefined : this.renderPlaceHolder();
      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 = /*#__PURE__*/React.createElement("span", _extends({
        key: "element"
      }, wrapperProps), multipleHolder, otherPrevNode, placeholderDiv, renderedValue, /*#__PURE__*/React.createElement("label", _extends({}, ZIndexOfIEProps, {
        onMouseDown: this.handleMouseDown
      }), prefix, input, floatLabel, suffix, button));

      if (otherNextNode) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, element, otherNextNode);
      }

      return element;
    }
  }, {
    key: "renderGroup",
    value: function renderGroup() {
      var showHelp = this.showHelp,
          prefixCls = this.prefixCls,
          _this$props6 = this.props,
          addonBefore = _this$props6.addonBefore,
          addonAfter = _this$props6.addonAfter,
          addonBeforeStyle = _this$props6.addonBeforeStyle,
          addonAfterStyle = _this$props6.addonAfterStyle,
          groupClassName = _this$props6.groupClassName,
          _inTable = _this$props6._inTable,
          onBlur = _this$props6.onBlur,
          tabIndex = _this$props6.tabIndex;
      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 /*#__PURE__*/React.createElement(TextFieldGroup, {
        key: "wrapper",
        prefixCls: prefixCls,
        onBlur: _inTable && (addonBefore || addonAfter) ? onBlur : undefined
      }, /*#__PURE__*/React.createElement("div", {
        className: classString
      }, this.wrapGroupItem(addonBefore, GroupItemCategory.before, {
        style: addonBeforeStyle,
        ref: this.saveAddonBeforeRef,
        onKeyDown: this.handleAddonBeforeKeyDown
      }, {
        tabIndex: tabIndex
      }), this.wrapGroupItem(inputElement, GroupItemCategory.input), this.wrapGroupItem(help, GroupItemCategory.help), this.wrapGroupItem(addonAfter, GroupItemCategory.after, {
        style: addonAfterStyle,
        ref: this.saveAddonAfterRef,
        onKeyDown: this.handleAddonAfterKeyDown
      }, {
        tabIndex: tabIndex
      })));
    }
  }, {
    key: "renderTooltipHelp",
    value: function renderTooltipHelp() {
      var help = this.getDisplayProp('help');

      if (help) {
        return /*#__PURE__*/React.createElement(Icon, {
          type: "help",
          onMouseEnter: this.handleHelpMouseEnter,
          onMouseLeave: this.handleHelpMouseLeave
        });
      }
    }
  }, {
    key: "renderLengthInfo",
    value: function renderLengthInfo(maxLength, inputLength) {
      var prefixCls = this.prefixCls;
      return maxLength && maxLength > 0 ? /*#__PURE__*/React.createElement("div", {
        key: "length-info",
        className: "".concat(prefixCls, "-length-info")
      }, "".concat(inputLength, "/").concat(maxLength)) : null;
    } // 处理 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 placeholder = placeholderOrigin;

      if (labelLayout === LabelLayout.placeholder) {
        var label = getProperty(props, 'label', dataSet, record);
        placeholder = label && !this.isFocused ? label : placeholderOrigin || label;
      }

      var holders = [];
      return placeholder ? holders.concat(toJS(placeholder)) : holders;
    }
  }, {
    key: "wrapGroupItem",
    value: function wrapGroupItem(node, category, props, childrenProps) {
      if (!node) {
        return null;
      }

      var prefixCls = this.prefixCls;
      var children = childrenProps ? Children.map(node, function (child) {
        if ( /*#__PURE__*/isValidElement(child) && !isString(child.type)) {
          return /*#__PURE__*/cloneElement(child, childrenProps);
        }

        return child;
      }) : node;
      return /*#__PURE__*/React.createElement("div", _extends({
        className: "".concat(prefixCls, "-group-").concat(category)
      }, props), children);
    }
  }, {
    key: "setRangeTarget",
    value: function setRangeTarget(target) {
      var _this3 = this;

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

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

      defer(function () {
        return _this3.isFocused && _this3.select();
      });
    }
  }, {
    key: "renderRangeEditor",
    value: function renderRangeEditor(props) {
      var isFlat = this.props.isFlat;
      var prefixCls = this.prefixCls,
          rangeTarget = this.rangeTarget,
          isFocused = this.isFocused,
          editable = this.editable;

      var _this$processRangeVal3 = this.processRangeValue(this.isEditableLike() ? undefined : this.rangeValue),
          _this$processRangeVal4 = _slicedToArray(_this$processRangeVal3, 2),
          _this$processRangeVal5 = _this$processRangeVal4[0],
          startValue = _this$processRangeVal5 === void 0 ? '' : _this$processRangeVal5,
          _this$processRangeVal6 = _this$processRangeVal4[1],
          endValue = _this$processRangeVal6 === void 0 ? '' : _this$processRangeVal6;

      var startRenderedValue = this.renderRenderedValue(startValue, {
        key: 'startRenderedText',
        className: "".concat(prefixCls, "-range-start-rendered-value"),
        rangeTarget: 0,
        isFlat: isFlat
      });
      var startStyle = {};
      var endStyle = {};
      var endRenderedValue = this.renderRenderedValue(endValue, {
        key: 'endRenderedText',
        className: "".concat(prefixCls, "-range-end-rendered-value"),
        rangeTarget: 1,
        isFlat: isFlat
      });

      var _this$getEditorTextIn = this.getEditorTextInfo(0),
          startText = _this$getEditorTextIn.text,
          startPlaceholder = _this$getEditorTextIn.placeholder,
          startWidth = _this$getEditorTextIn.width;

      var _this$getEditorTextIn2 = this.getEditorTextInfo(1),
          endText = _this$getEditorTextIn2.text,
          endPlaceholder = _this$getEditorTextIn2.placeholder,
          endWidth = _this$getEditorTextIn2.width;

      var editorStyle = {};

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

      if (!editable) {
        editorStyle.textIndent = -1000;
        editorStyle.color = 'transparent';
      } // 筛选条默认宽度处理


      var addWidth = 4 + (this.isFocused && (rangeTarget === 0 && startText || rangeTarget === 1 && endText) ? 4 : 0);

      if (isFlat) {
        startStyle.width = startWidth + addWidth;
        startStyle.boxSizing = 'content-box';
        endStyle.width = endWidth + addWidth;
        endStyle.boxSizing = 'content-box';
        editorStyle.width = !isNil(rangeTarget) ? rangeTarget === 0 ? startWidth + addWidth : endWidth + addWidth : undefined;
        editorStyle.boxSizing = !isNil(rangeTarget) ? 'content-box' : undefined;
      }

      if (startRenderedValue && (!editable || !isFocused)) {
        startStyle.textIndent = -1000;
        startStyle.color = 'transparent';
      }

      if (endRenderedValue && (!editable || !isFocused)) {
        endStyle.textIndent = -1000;
        endStyle.color = 'transparent';
      }

      var splitClassNames = classNames("".concat(prefixCls, "-range-split"), _defineProperty({}, "".concat(prefixCls, "-range-split-custom"), this.rangeSeparator !== '~'));
      return /*#__PURE__*/React.createElement("span", {
        key: "text",
        className: "".concat(prefixCls, "-range-text")
      }, startRenderedValue, endRenderedValue, !this.disabled && /*#__PURE__*/React.createElement("input", _extends({}, props, {
        className: this.getInputClassString("".concat(prefixCls, "-range-input")),
        key: "text",
        value: this.getRangeInputValue(startText, endText),
        placeholder: !editable || rangeTarget === undefined || !this.isFocused ? '' : rangeTarget === 0 ? startPlaceholder : endPlaceholder,
        readOnly: !editable,
        style: editorStyle
      })), /*#__PURE__*/React.createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-start"),
        onChange: noop,
        onMouseDown: this.handleRangeStart,
        value: editable && rangeTarget === 0 && isFocused ? '' : startText,
        placeholder: editable && rangeTarget === 0 && isFocused ? '' : startPlaceholder,
        disabled: props.disabled === undefined ? false : props.disabled,
        style: startStyle,
        readOnly: true
      }), /*#__PURE__*/React.createElement("span", {
        className: splitClassNames
      }, (!isFlat || startPlaceholder || endPlaceholder || !this.isEmpty()) && this.rangeSeparator), /*#__PURE__*/React.createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-end"),
        onChange: noop,
        onMouseDown: this.handleRangeEnd,
        value: editable && rangeTarget === 1 && isFocused ? '' : endText,
        placeholder: editable && rangeTarget === 1 && isFocused ? '' : endPlaceholder,
        disabled: props.disabled === undefined ? false : props.disabled,
        style: endStyle,
        readOnly: true
      }));
    }
  }, {
    key: "getRangeInputValue",
    value: function getRangeInputValue(startText, endText) {
      var rangeTarget = this.rangeTarget,
          text = this.text;
      return rangeTarget === undefined || !this.isFocused ? '' : text === undefined ? rangeTarget === 0 ? startText : endText : text;
    }
  }, {
    key: "getInputClassString",
    value: function getInputClassString(className) {
      return className;
    }
  }, {
    key: "renderMultipleEditor",
    value: function renderMultipleEditor(props) {
      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(this.measureTextWidth(text), true);
      }

      return /*#__PURE__*/React.createElement("li", {
        key: "text"
      }, /*#__PURE__*/React.createElement("input", _extends({}, props, {
        value: text || '',
        style: editorStyle
      })));
    }
  }, {
    key: "getWrappedEditor",
    value: function getWrappedEditor(renderedValue) {
      return this.getEditor(defaultWrap, renderedValue);
    }
  }, {
    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 _this4 = this;

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

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

        var text = _this4.processText(_this4.processValue(v));

        repeats.set(key, repeat + 1);

        if (!isNil(text)) {
          return text;
        }

        return undefined;
      });
      return texts.join('、');
    }
  }, {
    key: "getEditor",
    value: function getEditor(wrap, renderedValue) {
      var prefixCls = this.prefixCls,
          multiple = this.multiple,
          range = this.range,
          isFlat = this.props.isFlat;

      var _this$getOtherProps3 = this.getOtherProps(),
          onFocus = _this$getOtherProps3.onFocus,
          onBlur = _this$getOtherProps3.onBlur,
          onMouseEnter = _this$getOtherProps3.onMouseEnter,
          onMouseLeave = _this$getOtherProps3.onMouseLeave,
          otherProps = _objectWithoutProperties(_this$getOtherProps3, _excluded);

      if (multiple) {
        var record = this.record;

        var _this$renderMultipleV = this.renderMultipleValues(),
            multipleTags = _this$renderMultipleV.tags,
            isOverflowMaxTagCount = _this$renderMultipleV.isOverflowMaxTagCount;

        var _isOverflow = isOverflowMaxTagCount || isFlat;

        var tags = /*#__PURE__*/React.createElement(Animate, {
          component: "ul",
          componentProps: {
            ref: this.saveTagContainer,
            onScroll: stopPropagation
          },
          transitionName: !record || record === this.lastAnimationRecord ? 'zoom' : '',
          exclusive: true,
          onEnd: this.handleTagAnimateEnd,
          onEnter: this.handleTagAnimateEnter
        }, multipleTags, range ? this.renderRangeEditor(otherProps) : this.renderMultipleEditor(_objectSpread(_objectSpread({}, otherProps), {}, {
          className: "".concat(prefixCls, "-multiple-input")
        })));
        this.lastAnimationRecord = record;
        this.setInputStylePadding(otherProps);
        return wrap( /*#__PURE__*/React.createElement("div", {
          key: "text",
          className: otherProps.className,
          style: otherProps.style,
          onFocus: onFocus,
          onBlur: onBlur,
          onMouseEnter: _isOverflow ? this.handleMultipleMouseEnter : onMouseEnter,
          onMouseLeave: _isOverflow ? this.handleMultipleMouseLeave : onMouseLeave
        }, tags));
      }

      if (range) {
        return wrap( /*#__PURE__*/React.createElement("span", {
          key: "text",
          className: otherProps.className,
          style: otherProps.style,
          onFocus: onFocus,
          onBlur: onBlur,
          onMouseEnter: onMouseEnter,
          onMouseLeave: onMouseLeave
        }, this.renderRangeEditor(otherProps)));
      }

      var editorTextInfo = this.getEditorTextInfo();

      if (renderedValue && (!this.editable || !this.isFocused)) {
        otherProps.style = _objectSpread(_objectSpread({}, otherProps.style), {}, {
          textIndent: -1000,
          color: 'transparent'
        });
      } // 筛选条默认宽度处理


      if (isFlat) {
        otherProps.style = _objectSpread(_objectSpread({}, otherProps.style), {}, {
          width: editorTextInfo.width + 4,
          boxSizing: 'content-box'
        });
      } // 兼容继承的组件


      if (this.showLengthInfo && !this.lengthElement) {
        this.renderLengthElement();
      }

      otherProps.className = this.getInputClassString(otherProps.className);
      this.setInputStylePadding(otherProps);
      var childNodes = [/*#__PURE__*/React.createElement("input", _extends({
        key: "text"
      }, otherProps, {
        onFocus: onFocus,
        onBlur: onBlur,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
        placeholder: editorTextInfo.placeholder,
        value: editorTextInfo.text,
        readOnly: !this.editable
      }))];

      if (this.showLengthInfo && this.lengthElement) {
        childNodes.push(this.lengthElement);
      }

      return wrap( /*#__PURE__*/React.createElement(React.Fragment, null, childNodes));
    }
  }, {
    key: "getSuffixWidth",
    value: function getSuffixWidth() {
      var wrapperWidth = 0;

      if (this.suffixRef) {
        wrapperWidth = this.suffixRef.getBoundingClientRect().width;
      }

      return this.suffixWidth ? Math.max(this.suffixWidth, wrapperWidth) : this.suffixWidth;
    }
  }, {
    key: "setInputStylePadding",
    value: function setInputStylePadding(otherProps) {
      // 存在lengthInfo, 或suffix, 或clearButton, 计算paddingRight
      if (this.lengthInfoWidth || this.getSuffixWidth() || this.clearButton) {
        var paddingRight = this.isSuffixClick ? defaultTo(this.lengthInfoWidth, 0) + defaultTo(this.getSuffixWidth(), 0) + (this.clearButton ? toPx('0.18rem') : 0) : defaultTo(this.lengthInfoWidth, 0) + Math.max(defaultTo(this.getSuffixWidth(), 0), this.clearButton ? toPx('0.18rem') : 0);

        if (this.lengthInfoWidth && !this.getSuffixWidth() && !this.clearButton) {
          paddingRight += toPx('0.03rem');
        }

        if (paddingRight >= toPx('0.25rem')) {
          var _pxToRem;

          var pr = "".concat(Number((_pxToRem = pxToRem(paddingRight + 2, true)) === null || _pxToRem === void 0 ? void 0 : _pxToRem.split('rem')[0]).toFixed(3), "rem");
          otherProps.style = _objectSpread(_objectSpread({}, otherProps.style), {}, {
            paddingRight: pr
          });
        }
      }

      if (this.prefixWidth && this.prefixWidth > toPx('0.24rem')) {
        otherProps.style = _objectSpread(_objectSpread({}, otherProps.style), {}, {
          paddingLeft: pxToRem(this.prefixWidth + toPx('0.02rem'), true)
        });
      }
    }
  }, {
    key: "renderLengthElement",
    value: function renderLengthElement() {
      var multiple = this.multiple,
          range = this.range,
          showLengthInfo = this.showLengthInfo;

      if (!multiple && !range && showLengthInfo) {
        var editorTextInfo = this.getEditorTextInfo();
        var inputLength = editorTextInfo.text.length;
        var maxLength = this.getProp('maxLength');
        this.lengthElement = this.renderLengthInfo(maxLength, inputLength);

        if (this.lengthElement) {
          this.lengthInfoWidth = this.measureTextWidth("".concat(inputLength, " / ").concat(maxLength));
        } else {
          this.lengthInfoWidth = undefined;
        }
      } else {
        this.lengthElement = undefined;
        this.lengthInfoWidth = undefined;
      }
    }
  }, {
    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);
      }

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

      if ( /*#__PURE__*/isValidElement(children)) {
        this.suffixWidth = toPx('0.21rem');

        if (children.props && children.props.style) {
          divStyle = {
            width: children.props.style.width
          };
          this.suffixWidth = defaultTo(toPx(children.props.style.width), toPx('0.21rem'));
        }

        var _children = children,
            type = _children.type;

        var _children$props = children.props,
            onClick = _children$props.onClick,
            otherProps = _objectWithoutProperties(_children$props, _excluded2);

        if (onClick) {
          children = /*#__PURE__*/createElement(type, otherProps);
          props = _objectSpread({
            onClick: onClick
          }, props);
        }
      } else if (children && children !== true) {
        this.suffixWidth = this.measureTextWidth(children.toString()) + toPx('0.02rem');
        divStyle = {
          width: pxToRem(this.getSuffixWidth(), true)
        };
      } else {
        this.suffixWidth = undefined;
      }

      var isSuffixClick = props && props.onClick;
      this.isSuffixClick = isSuffixClick;
      var classString = classNames("".concat(prefixCls, "-suffix"), _defineProperty({}, "".concat(prefixCls, "-allow-clear"), clearButton && !isSuffixClick));
      var right = pxToRem(this.lengthInfoWidth ? this.lengthInfoWidth + toPx('0.03rem') : undefined, true);
      return /*#__PURE__*/React.createElement("div", _extends({
        className: classString,
        style: _objectSpread(_objectSpread({}, divStyle), {}, {
          right: right
        }),
        onMouseDown: preventDefault
      }, props, {
        ref: this.saveSuffixRef
      }), children);
    }
  }, {
    key: "getPrefix",
    value: function getPrefix() {
      var _this5 = this;

      var prefix = this.props.prefix;
      var wrapperPrefixNode;

      if (prefix) {
        wrapperPrefixNode = this.wrapperPrefix(prefix);
      } else {
        this.prefixWidth = undefined;
      }

      runInAction(function () {
        if (_this5.prefixWidth && _this5.prefixWidth > toPx('0.24rem')) {
          if (_this5.floatLabelOffsetX !== _this5.prefixWidth - toPx('0.24rem')) {
            _this5.floatLabelOffsetX = _this5.prefixWidth - toPx('0.24rem');
          }
        } else if (_this5.floatLabelOffsetX !== undefined) {
          _this5.floatLabelOffsetX = undefined;
        }
      });
      return wrapperPrefixNode;
    }
  }, {
    key: "wrapperPrefix",
    value: function wrapperPrefix(children) {
      var prefixCls = this.prefixCls;
      var divStyle = {};

      if ( /*#__PURE__*/isValidElement(children)) {
        this.prefixWidth = toPx('0.24rem');

        if (children.props && children.props.style) {
          divStyle = {
            width: children.props.style.width
          };
          var calculateWidth = toPx(children.props.style.width);
          this.prefixWidth = calculateWidth != null ? calculateWidth : toPx('0.24rem');
        }
      } else if (children && children !== true) {
        this.prefixWidth = this.measureTextWidth(children.toString()) + toPx('0.04rem');
        divStyle = {
          width: pxToRem(this.prefixWidth > toPx('0.24rem') ? this.prefixWidth : undefined, true)
        };
      } else {
        this.prefixWidth = undefined;
      }

      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-prefix"),
        style: _objectSpread({}, divStyle)
      }, 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' : this.measureTextWidth(placeholder || '') + toPx('0.22rem') + (this.getSuffix() ? toPx('0.20rem') : 0);
      }

      if (multiple) {
        return /*#__PURE__*/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.isFocused) && !this.range) {
        return this.getPlaceHolderNode();
      }
    }
  }, {
    key: "renderRenderedValue",
    value: function renderRenderedValue(value, props) {
      var prefixCls = this.prefixCls,
          range = this.range,
          multiple = this.multiple;
      var rangeTarget = props.rangeTarget;
      var noRangeValue = rangeTarget === undefined;

      if (!range && !multiple || !noRangeValue) {
        var hidden = this.editable && this.isFocused;

        if (!hidden || isReactChildren(this.processValue(noRangeValue ? this.getValue() : value))) {
          var text = this.processRenderer(noRangeValue ? this.getValue() : value);

          if (isReactChildren(text)) {
            return /*#__PURE__*/React.createElement(RenderedText, _extends({
              key: "renderedText",
              prefixCls: prefixCls,
              onContentChange: this.handleRenderedValueChange,
              hidden: hidden
            }, props), toJS(text));
          }
        }
      }

      this.clearRenderedText(rangeTarget);
    }
  }, {
    key: "getPlaceHolderNode",
    value: function getPlaceHolderNode() {
      var prefixCls = this.prefixCls;

      var _this$getPlaceholders = this.getPlaceholders(),
          _this$getPlaceholders2 = _slicedToArray(_this$getPlaceholders, 1),
          placeholder = _this$getPlaceholders2[0];

      if (placeholder) {
        var divStyle;

        if (this.prefixWidth && this.prefixWidth > toPx('0.24rem')) {
          divStyle = {
            paddingLeft: pxToRem(this.prefixWidth + toPx('0.05rem'), true)
          };
        }

        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-placeholder"),
          style: _objectSpread({}, divStyle)
        }, /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-placeholder-inner")
        }, placeholder));
      }
    }
  }, {
    key: "getInnerSpanButton",
    value: function getInnerSpanButton() {
      var clearButton = this.clearButton,
          prefixCls = this.prefixCls;

      if (clearButton) {
        var right;

        if (this.lengthInfoWidth || this.getSuffixWidth()) {
          right = this.isSuffixClick ? defaultTo(this.lengthInfoWidth, 0) + defaultTo(this.getSuffixWidth(), 0) : this.lengthInfoWidth;
        }

        return this.wrapperInnerSpanButton( /*#__PURE__*/React.createElement(Icon, {
          type: "close",
          onClick: this.handleClearButtonClick,
          onMouseDown: this.handleInnerButtonMouseDown
        }), {
          className: "".concat(prefixCls, "-clear-button"),
          style: {
            right: pxToRem(right, true)
          }
        });
      }
    }
  }, {
    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, _excluded3);

      return /*#__PURE__*/React.createElement("div", _extends({
        key: "inner-button"
      }, otherProps, {
        className: classNames("".concat(prefixCls, "-inner-button"), className)
      }), children);
    }
  }, {
    key: "handleTagAnimateEnd",
    value: function handleTagAnimateEnd() {// noop
    }
  }, {
    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) {
      if (!this.disabled && !this.readOnly) {
        if (e.keyCode === KeyCode.TAB) {
          var _inTable = this.props._inTable;

          if (_inTable) {
            if (e.shiftKey) {
              var addonBeforeRef = this.addonBeforeRef;

              if (addonBeforeRef) {
                var focusableElement = findFirstFocusableElement(addonBeforeRef);

                if (focusableElement) {
                  focusableElement.focus();
                  e.preventDefault();
                }
              }
            } else {
              var addonAfterRef = this.addonAfterRef;

              if (addonAfterRef) {
                var _focusableElement = findFirstFocusableElement(addonAfterRef);

                if (_focusableElement) {
                  _focusableElement.focus();

                  e.preventDefault();
                }
              }
            }
          }

          var range = this.range;

          if (range) {
            if (e.shiftKey) {
              if (this.rangeTarget === 1) {
                this.setRangeTarget(0);
                e.preventDefault();
              }
            } else if (this.rangeTarget === 0) {
              this.setRangeTarget(1);
              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 {
          var clearButton = this.props.clearButton;

          if (clearButton && !this.editable) {
            switch (e.keyCode) {
              case KeyCode.DELETE:
              case KeyCode.BACKSPACE: