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

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

"use strict";

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

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

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

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

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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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 _isNumber = _interopRequireDefault(require("lodash/isNumber"));

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

var _isRegExp = _interopRequireDefault(require("lodash/isRegExp"));

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

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

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

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

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

var _mobx = require("mobx");

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

var _shared = require("choerodon-ui/shared");

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

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

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 _measureTextWidth2 = _interopRequireDefault(require("../_util/measureTextWidth"));

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

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");

var _RenderedText = _interopRequireDefault(require("./RenderedText"));

var _isReactChildren = _interopRequireDefault(require("../_util/isReactChildren"));

var _TextFieldGroup = _interopRequireDefault(require("./TextFieldGroup"));

var _focusable = require("../_util/focusable");

var _singleton = require("../tooltip/singleton");

var _util = _interopRequireDefault(require("../overflow-tip/util"));

var _utils2 = require("../field/utils");

var _excluded = ["onFocus", "onBlur", "onMouseEnter", "onMouseLeave"],
    _excluded2 = ["onClick"],
    _excluded3 = ["className"];

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

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

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

  return true;
}

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

  var _super = (0, _createSuper2["default"])(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: "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 ((0, _isString["default"])(showHelp)) {
        return showHelp;
      }

      return this.context.showHelp || this.getContextConfig('showHelp') || _enum3.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) {
              (0, _mobx.runInAction)(function () {
                _this2.renderedStartText = undefined;
              });
            }

            break;
          }

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

            break;
          }

        default:
          {
            if (this.renderedText) {
              (0, _mobx.runInAction)(function () {
                _this2.renderedText = undefined;
              });
            }
          }
      }
    }
  }, {
    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: "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 (0, _measureTextWidth2["default"])(text, computedStyle);
    }
  }, {
    key: "getEditorTextInfo",
    value: function getEditorTextInfo(rangeTarget) {
      var isFlat = this.props.isFlat;

      var _ref = this.hasFloatLabel && !this.isFocused ? [] : this.getPlaceholders(),
          _ref2 = (0, _slicedToArray2["default"])(_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 = (0, _isNumber["default"])(unRenderedText) ? String(unRenderedText) : unRenderedText;

          if ((0, _isString["default"])(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 = (0, _slicedToArray2["default"])(_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 = (0, _isNumber["default"])(unRenderedStartText) ? String(unRenderedStartText) : unRenderedStartText;

          if ((0, _isString["default"])(startText) && startText.length) {
            return {
              text: startText,
              width: isFlat ? this.measureTextWidth(startText) : 0
            };
          }
        }

        if (!(0, _isNil["default"])(startPlaceHolder) || !(0, _isNil["default"])(text)) {
          var width = !(0, _isNil["default"])(text) ? this.measureTextWidth(text) : !(0, _isNil["default"])(startPlaceHolder) ? this.measureTextWidth(startPlaceHolder) : 0;
          return {
            text: '',
            width: isFlat ? width : 0,
            placeholder: (0, _isNil["default"])(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 = (0, _isNumber["default"])(unRenderedEndText) ? String(unRenderedEndText) : unRenderedEndText;

          if ((0, _isString["default"])(endText) && endText.length) {
            return {
              text: endText,
              width: isFlat ? this.measureTextWidth(endText) : 0
            };
          }
        }

        if (!(0, _isNil["default"])(endPlaceHolder) || !(0, _isNil["default"])(text)) {
          var _width = !(0, _isNil["default"])(text) ? this.measureTextWidth(text) : !(0, _isNil["default"])(endPlaceHolder) ? this.measureTextWidth(endPlaceHolder) : 0;

          return {
            text: '',
            width: isFlat ? _width : 0,
            placeholder: (0, _isNil["default"])(text) ? endPlaceHolder : undefined
          };
        }
      }

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

      return true;
    }
  }, {
    key: "isEmpty",
    value: function isEmpty() {
      return (this.isEditableLike() || (0, _isEmpty2["default"])(this.text)) && (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "isEmpty", this).call(this) && this.isRenderEmpty();
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get4["default"])((0, _getPrototypeOf2["default"])(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 = (0, _get4["default"])((0, _getPrototypeOf2["default"])(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) {
        (0, _get4["default"])((0, _getPrototypeOf2["default"])(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["default"].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["default"].TAB && !e.shiftKey) {
        onKeyDown(e);
      }
    }
  }, {
    key: "handleMultipleMouseEnter",
    value: function handleMultipleMouseEnter(e) {
      var _this$getOtherProps = this.getOtherProps(),
          onMouseEnter = _this$getOtherProps.onMouseEnter;

      if (onMouseEnter) {
        onMouseEnter(e);
      }

      (0, _singleton.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);
      }

      (0, _singleton.show)(e.currentTarget, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
        theme: getTooltipTheme('help'),
        placement: getTooltipPlacement('help'),
        title: this.getDisplayProp('help')
      }, helpTooltipProps), {}, {
        popupClassName: helpTooltipCls
      }));
      this.tooltipShown = true;
    }
  }, {
    key: "handleHelpMouseLeave",
    value: function handleHelpMouseLeave() {
      if (this.tooltipShown) {
        (0, _singleton.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 = (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref3 = {}, (0, _defineProperty2["default"])(_ref3, "".concat(prefixCls, "-suffix-button"), /*#__PURE__*/(0, _react.isValidElement)(suffix)), (0, _defineProperty2["default"])(_ref3, "".concat(prefixCls, "-multiple"), multiple), (0, _defineProperty2["default"])(_ref3, "".concat(prefixCls, "-range"), range), (0, _defineProperty2["default"])(_ref3, "".concat(prefixCls, "-border"), border), (0, _defineProperty2["default"])(_ref3, "".concat(prefixCls, "-prefix-button"), /*#__PURE__*/(0, _react.isValidElement)(prefix)), _ref3)].concat(args));
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      return this.renderGroup();
    }
  }, {
    key: "getRenderedValue",
    value: function getRenderedValue() {
      if (this.range) {
        return this.renderRangeValue((0, _utils2.toRangeValue)(this.getValue(), this.range));
      }

      return this.processRenderer(this.getValue());
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if ((0, _get4["default"])((0, _getPrototypeOf2["default"])(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 === _enum.Tooltip.always || tooltip === _enum.Tooltip.overflow && (0, _util["default"])(judgeOverflowElement)) {
          (0, _singleton.show)(judgeOverflowElement, {
            title: title,
            placement: tooltipPlacement || 'right',
            theme: tooltipTheme
          });
          return true;
        }

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

          if (tooltipType === _enum.Tooltip.always || tooltipType === _enum.Tooltip.overflow && (0, _util["default"])(judgeOverflowElement)) {
            (0, _singleton.show)(judgeOverflowElement, (0, _objectSpread2["default"])({
              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 = (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 = /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({
        key: "element"
      }, wrapperProps), multipleHolder, otherPrevNode, placeholderDiv, renderedValue, /*#__PURE__*/_react["default"].createElement("label", (0, _extends2["default"])({}, ZIndexOfIEProps, {
        onMouseDown: this.handleMouseDown
      }), prefix, input, floatLabel, suffix, button));

      if (otherNextNode) {
        return /*#__PURE__*/_react["default"].createElement(_react["default"].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 === _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 /*#__PURE__*/_react["default"].createElement(_TextFieldGroup["default"], {
        key: "wrapper",
        prefixCls: prefixCls,
        onBlur: _inTable && (addonBefore || addonAfter) ? onBlur : undefined
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: classString
      }, this.wrapGroupItem(addonBefore, _enum2.GroupItemCategory.before, {
        style: addonBeforeStyle,
        ref: this.saveAddonBeforeRef,
        onKeyDown: this.handleAddonBeforeKeyDown
      }, {
        tabIndex: tabIndex
      }), this.wrapGroupItem(inputElement, _enum2.GroupItemCategory.input), this.wrapGroupItem(help, _enum2.GroupItemCategory.help), this.wrapGroupItem(addonAfter, _enum2.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["default"].createElement(_icon["default"], {
          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["default"].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 === _interface.LabelLayout.placeholder) {
        var label = (0, _utils.getProperty)(props, 'label', dataSet, record);
        placeholder = label && !this.isFocused ? label : placeholderOrigin || label;
      }

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

      var prefixCls = this.prefixCls;
      var children = childrenProps ? _react.Children.map(node, function (child) {
        if ( /*#__PURE__*/(0, _react.isValidElement)(child) && !(0, _isString["default"])(child.type)) {
          return /*#__PURE__*/(0, _react.cloneElement)(child, childrenProps);
        }

        return child;
      }) : node;
      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
        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();
      }

      (0, _get4["default"])((0, _getPrototypeOf2["default"])(TextField.prototype), "setRangeTarget", this).call(this, target);
      (0, _defer["default"])(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 = (0, _slicedToArray2["default"])(_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 = !(0, _isNil["default"])(rangeTarget) ? rangeTarget === 0 ? startWidth + addWidth : endWidth + addWidth : undefined;
        editorStyle.boxSizing = !(0, _isNil["default"])(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 = (0, _classnames["default"])("".concat(prefixCls, "-range-split"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-range-split-custom"), this.rangeSeparator !== '~'));
      return /*#__PURE__*/_react["default"].createElement("span", {
        key: "text",
        className: "".concat(prefixCls, "-range-text")
      }, startRenderedValue, endRenderedValue, !this.disabled && /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, 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["default"].createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-start"),
        onChange: _noop["default"],
        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["default"].createElement("span", {
        className: splitClassNames
      }, (!isFlat || startPlaceholder || endPlaceholder || !this.isEmpty()) && this.rangeSeparator), /*#__PURE__*/_react["default"].createElement("input", {
        tabIndex: -1,
        className: "".concat(prefixCls, "-range-end"),
        onChange: _noop["default"],
        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 = (0, _UnitConvertor.pxToRem)(this.measureTextWidth(text), true);
      }

      return /*#__PURE__*/_react["default"].createElement("li", {
        key: "text"
      }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, 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 = (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 _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 (!(0, _isNil["default"])(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 = (0, _objectWithoutProperties2["default"])(_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["default"].createElement(_animate["default"], {
          component: "ul",
          componentProps: {
            ref: this.saveTagContainer,
            onScroll: _EventManager.stopPropagation
          },
          transitionName: !record || record === this.lastAnimationRecord ? 'zoom' : '',
          exclusive: true,
          onEnd: this.handleTagAnimateEnd,
          onEnter: this.handleTagAnimateEnter
        }, multipleTags, range ? this.renderRangeEditor(otherProps) : this.renderMultipleEditor((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps), {}, {
          className: "".concat(prefixCls, "-multiple-input")
        })));

        this.lastAnimationRecord = record;
        this.setInputStylePadding(otherProps);
        return wrap( /*#__PURE__*/_react["default"].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["default"].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 = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps.style), {}, {
          textIndent: -1000,
          color: 'transparent'
        });
      } // 筛选条默认宽度处理


      if (isFlat) {
        otherProps.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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["default"].createElement("input", (0, _extends2["default"])({
        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["default"].createElement(_react["default"].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 ? (0, _defaultTo["default"])(this.lengthInfoWidth, 0) + (0, _defaultTo["default"])(this.getSuffixWidth(), 0) + (this.clearButton ? (0, _UnitConvertor.toPx)('0.18rem') : 0) : (0, _defaultTo["default"])(this.lengthInfoWidth, 0) + Math.max((0, _defaultTo["default"])(this.getSuffixWidth(), 0), this.clearButton ? (0, _UnitConvertor.toPx)('0.18rem') : 0);

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

        if (paddingRight >= (0, _UnitConvertor.toPx)('0.25rem')) {
          var _pxToRem;

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

      if (this.prefixWidth && this.prefixWidth > (0, _UnitConvertor.toPx)('0.24rem')) {
        otherProps.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps.style), {}, {
          paddingLeft: (0, _UnitConvertor.pxToRem)(this.prefixWidth + (0, _UnitConvertor.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__*/(0, _react.isValidElement)(children)) {
        this.suffixWidth = (0, _UnitConvertor.toPx)('0.21rem');

        if (children.props && children.props.style) {
          divStyle = {
            width: children.props.style.width
          };
          this.suffixWidth = (0, _defaultTo["default"])((0, _UnitConvertor.toPx)(children.props.style.width), (0, _UnitConvertor.toPx)('0.21rem'));
        }

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

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

      var isSuffixClick = props && props.onClick;
      this.isSuffixClick = isSuffixClick;
      var classString = (0, _classnames["default"])("".concat(prefixCls, "-suffix"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-allow-clear"), clearButton && !isSuffixClick));
      var right = (0, _UnitConvertor.pxToRem)(this.lengthInfoWidth ? this.lengthInfoWidth + (0, _UnitConvertor.toPx)('0.03rem') : undefined, true);
      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
        className: classString,
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, divStyle), {}, {
          right: right
        }),
        onMouseDown: _EventManager.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;
      }

      (0, _mobx.runInAction)(function () {
        if (_this5.prefixWidth && _this5.prefixWidth > (0, _UnitConvertor.toPx)('0.24rem')) {
          if (_this5.floatLabelOffsetX !== _this5.prefixWidth - (0, _UnitConvertor.toPx)('0.24rem')) {
            _this5.floatLabelOffsetX = _this5.prefixWidth - (0, _UnitConvertor.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__*/(0, _react.isValidElement)(children)) {
        this.prefixWidth = (0, _UnitConvertor.toPx)('0.24rem');

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

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-prefix"),
        style: (0, _objectSpread2["default"])({}, 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 || '') + (0, _UnitConvertor.toPx)('0.22rem') + (this.getSuffix() ? (0, _UnitConvertor.toPx)('0.20rem') : 0);
      }

      if (multiple) {
        return /*#__PURE__*/_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.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 || (0, _isReactChildren["default"])(this.processValue(noRangeValue ? this.getValue() : value))) {
          var text = this.processRenderer(noRangeValue ? this.getValue() : value);

          if ((0, _isReactChildren["default"])(text)) {
            return /*#__PURE__*/_react["default"].createElement(_RenderedText["default"], (0, _extends2["default"])({
              key: "renderedText",
              prefixCls: prefixCls,
              onContentChange: this.handleRenderedValueChange,
              hidden: hidden
            }, props), (0, _mobx.toJS)(text));
          }
        }
      }

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

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

      if (placeholder) {
        var divStyle;

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

        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-placeholder"),
          style: (0, _objectSpread2["default"])({}, divStyle)
        }, /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-placeholder-inner")
        }, placeholder));
      }
    }
  }, {
    key: "getInne