import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useState, useRef, useEffect, useMemo } from 'react';
import Label from '../Label/index.js';
import { UUID } from '@iam-com/lib';
import VisibilityOff from '@iam-com/icons/PreviewClose';
import Visibility from '@iam-com/icons/PreviewOpen';
import CloseCircle from '@iam-com/icons/CloseCircle';
import AutoTips from '../AutoTips/index.js';
import { Loading } from '../Loading/index.js';
import HelperText from '../HelperText/index.js';
import { u as useGlobalProps } from '../_verture/useGlobalProps-1b846a65.js';
import { D as Dropdown } from '../_verture/index-fac03ce3.js';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../Help/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '@iam-com/icons/Help';
import '@iam-com/icons/LoadingF';
import '@para-ui/core/GlobalContext';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-text-field {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: inline-block;\n  width: 100%;\n}\n.paraui-v3-text-field > .text-field-content {\n  border: 1px solid;\n  border-radius: 4px;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  width: 100%;\n  position: relative;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-text-field > .text-field-content:hover {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-before {\n  color: rgb(46, 55, 67);\n  padding: 0 12px;\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border-bottom-left-radius: 4px;\n  border-top-left-radius: 4px;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-before svg {\n  font-size: 20px;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .clean-up-icon {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  margin-right: 12px;\n  cursor: pointer;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .clean-up-icon svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 16px;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .clean-up-icon:hover svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .right-icon {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  margin-right: 12px;\n  cursor: pointer;\n  color: rgba(46, 55, 67, 0.7);\n  position: relative;\n  z-index: 1;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .right-icon.right-icon-password:hover svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .right-icon svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 20px;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .length-limit {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  margin-right: 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  line-height: 0;\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input input::-webkit-outer-spin-button,\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input input[type=number] {\n  -moz-appearance: textfield;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  width: 100%;\n  height: 100%;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  width: 100% !important;\n  padding: 12px;\n  resize: none;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input, .paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input::-ms-clear, .paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea::-ms-clear {\n  display: none;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input::-ms-reveal, .paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea::-ms-reveal {\n  display: none;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > input:disabled, .paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea:disabled {\n  background-color: transparent;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  padding: 0 12px;\n  color: rgba(46, 55, 67, 0.4);\n  cursor: text;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  pointer-events: none;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder > .text-field-required {\n  margin-left: 2px;\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-after {\n  color: rgb(46, 55, 67);\n  padding: 0 12px;\n  border-left: 1px solid rgba(171, 176, 185, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-text-field > .text-field-content > .text-field-content-after svg {\n  font-size: 20px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-multiline > .text-field-content .text-field-content-within > .clean-up-icon {\n  display: none;\n}\n.paraui-v3-text-field.paraui-v3-text-field-multiline > .text-field-content .text-field-content-within > .length-limit {\n  position: absolute;\n  height: 22px;\n  bottom: 0;\n  border-radius: 4px;\n  width: calc(100% - 12px);\n  background: white;\n  justify-content: flex-end;\n  padding-bottom: 8px;\n  margin-right: 0;\n  left: 0;\n}\n.paraui-v3-text-field.paraui-v3-text-field-multiline > .text-field-content .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  padding-top: 12px;\n  line-height: 1;\n  height: calc(100% - 24px);\n}\n.paraui-v3-text-field.paraui-v3-text-field-disabled > .text-field-content {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-text-field.paraui-v3-text-field-disabled > .text-field-content:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-text-field.paraui-v3-text-field-disabled > .text-field-content > .text-field-content-before {\n  background-color: transparent;\n}\n.paraui-v3-text-field.paraui-v3-text-field-disabled > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  cursor: not-allowed;\n}\n.paraui-v3-text-field.paraui-v3-text-field-disabled > .text-field-content > .text-field-content-within > .text-field-content-within-input > input, .paraui-v3-text-field.paraui-v3-text-field-disabled > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  cursor: not-allowed;\n}\n.paraui-v3-text-field.paraui-v3-text-field-disabled > .text-field-content > .text-field-content-after {\n  background-color: transparent;\n}\n.paraui-v3-text-field.paraui-v3-text-field-disabled.paraui-v3-text-field-multiline > .text-field-content .text-field-content-within > .length-limit {\n  background-color: transparent;\n}\n.paraui-v3-text-field.paraui-v3-text-field-error > .text-field-content {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-text-field.paraui-v3-text-field-error > .text-field-content:hover {\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-text-field.paraui-v3-text-field-limit > .text-field-content {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-text-field.paraui-v3-text-field-limit > .text-field-content:hover {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-text-field.paraui-v3-text-field-limit-length > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  padding-bottom: 25px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-focus > .text-field-content {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-text-field.paraui-v3-text-field-small > .text-field-content {\n  height: 28px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-small > .text-field-content > .text-field-content-before {\n  line-height: 26px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-small > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  height: 26px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-small > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  padding: 6px 12px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-small > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  line-height: 26px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-small > .text-field-content .text-field-content-after {\n  line-height: 26px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-medium > .text-field-content {\n  height: 32px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-medium > .text-field-content > .text-field-content-before {\n  line-height: 30px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-medium > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  height: 30px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-medium > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  padding: 8px 12px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-medium > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  line-height: 30px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-medium > .text-field-content .text-field-content-after {\n  line-height: 30px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-large > .text-field-content {\n  height: 36px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-large > .text-field-content > .text-field-content-before {\n  line-height: 34px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-large > .text-field-content > .text-field-content-within > .text-field-content-within-input {\n  height: 34px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-large > .text-field-content > .text-field-content-within > .text-field-content-within-input > input {\n  padding: 10px 12px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-large > .text-field-content > .text-field-content-within > .text-field-content-within-input > .text-field-label-placeholder {\n  line-height: 34px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-large > .text-field-content .text-field-content-after {\n  line-height: 34px;\n}\n.paraui-v3-text-field.paraui-v3-text-field-resize > .text-field-content > .text-field-content-within > .text-field-content-within-input > textarea {\n  resize: both;\n}\n\n.paraui-v3-text-field-select.component-dropdown > .text-field-select-content {\n  max-height: 300px;\n  overflow: auto;\n}\n.paraui-v3-text-field-select.component-dropdown > .text-field-select-content > .text-field-select-content-item {\n  display: flex;\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n  padding: 0 12px;\n}\n.paraui-v3-text-field-select.component-dropdown > .text-field-select-content > .text-field-select-content-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-text-field-select.component-dropdown > .text-field-select-content > .text-field-select-content-item.text-field-select-content-item-keydown {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-text-field-select.component-dropdown > .text-field-select-content.text-field-select-content-loading {\n  height: 100px;\n  position: relative;\n  overflow: hidden;\n}\n.paraui-v3-text-field-select.component-dropdown.paraui-v3-text-field-select-small > .text-field-select-content > .text-field-select-content-item {\n  line-height: 28px;\n}\n.paraui-v3-text-field-select.component-dropdown.paraui-v3-text-field-select-medium > .text-field-select-content > .text-field-select-content-item {\n  line-height: 32px;\n}\n.paraui-v3-text-field-select.component-dropdown.paraui-v3-text-field-select-large > .text-field-select-content > .text-field-select-content-item {\n  line-height: 36px;\n}\n.paraui-v3-text-field-select.paraui-v3-text-field-select-data.component-tooltip {\n  padding: 8px 0;\n}";
styleInject(css_248z);

// true:数值型的，false：非数值型
var IsNaN = function IsNaN(value) {
  return typeof value === 'number' && !isNaN(value);
};
var TextField = function TextField(props) {
  var _a = useGlobalProps(props, 'TextField'),
    className = _a.className,
    style = _a.style,
    _a$size = _a.size,
    size = _a$size === void 0 ? 'large' : _a$size,
    _a$labelMode = _a.labelMode,
    labelMode = _a$labelMode === void 0 ? 'outside' : _a$labelMode,
    _a$placeholder = _a.placeholder,
    placeholder = _a$placeholder === void 0 ? '' : _a$placeholder,
    _a$label = _a.label,
    label = _a$label === void 0 ? '' : _a$label,
    labelTooltip = _a.labelTooltip,
    _a$disabled = _a.disabled,
    disabled = _a$disabled === void 0 ? false : _a$disabled,
    _a$multiline = _a.multiline,
    multiline = _a$multiline === void 0 ? false : _a$multiline,
    _a$required = _a.required,
    required = _a$required === void 0 ? false : _a$required,
    labelSign = _a.labelSign,
    _a$rows = _a.rows,
    rows = _a$rows === void 0 ? 2 : _a$rows,
    _a$error = _a.error,
    error = _a$error === void 0 ? false : _a$error,
    hideErrorDom = _a.hideErrorDom,
    _a$helperText = _a.helperText,
    helperText = _a$helperText === void 0 ? '' : _a$helperText,
    _a$addonBefore = _a.addonBefore,
    addonBefore = _a$addonBefore === void 0 ? '' : _a$addonBefore,
    _a$addonAfter = _a.addonAfter,
    addonAfter = _a$addonAfter === void 0 ? '' : _a$addonAfter;
    _a.defaultValue;
    var value = _a.value,
    _a$type = _a.type,
    type = _a$type === void 0 ? 'text' : _a$type,
    onClickIcon = _a.onClickIcon,
    rightIcon = _a.rightIcon,
    _a$showRightIcon = _a.showRightIcon,
    showRightIcon = _a$showRightIcon === void 0 ? true : _a$showRightIcon,
    _a$allowClear = _a.allowClear,
    allowClear = _a$allowClear === void 0 ? false : _a$allowClear,
    limitLength = _a.limitLength,
    fetchSuggestions = _a.fetchSuggestions,
    selectPopoverClass = _a.selectPopoverClass,
    renderSelectItem = _a.renderSelectItem,
    _a$showSelectName = _a.showSelectName,
    showSelectName = _a$showSelectName === void 0 ? 'value' : _a$showSelectName,
    _a$resize = _a.resize,
    resize = _a$resize === void 0 ? true : _a$resize,
    searchEmpty = _a.searchEmpty,
    onBlur = _a.onBlur,
    onFocus = _a.onFocus,
    onChange = _a.onChange,
    onKeydown = _a.onKeydown,
    onKeyUp = _a.onKeyUp,
    onEnter = _a.onEnter,
    onClickAddonBefore = _a.onClickAddonBefore,
    onClickAddonAfter = _a.onClickAddonAfter,
    onSelect = _a.onSelect,
    onClear = _a.onClear,
    otherProps = __rest(_a, ["className", "style", "size", "labelMode", "placeholder", "label", "labelTooltip", "disabled", "multiline", "required", "labelSign", "rows", "error", "hideErrorDom", "helperText", "addonBefore", "addonAfter", "defaultValue", "value", "type", "onClickIcon", "rightIcon", "showRightIcon", "allowClear", "limitLength", "fetchSuggestions", "selectPopoverClass", "renderSelectItem", "showSelectName", "resize", "searchEmpty", "onBlur", "onFocus", "onChange", "onKeydown", "onKeyUp", "onEnter", "onClickAddonBefore", "onClickAddonAfter", "onSelect", "onClear"]);
  var _useState = useState('text-field-select-content-' + UUID()),
    _useState2 = _slicedToArray(_useState, 1),
    classSearchOne = _useState2[0]; // 唯一class
  var _useState3 = useState(true),
    _useState4 = _slicedToArray(_useState3, 2),
    showText = _useState4[0],
    setShowText = _useState4[1]; // 是否显示输入框lable,placeholder true显示
  var _useState5 = useState(''),
    _useState6 = _slicedToArray(_useState5, 2),
    valueCom = _useState6[0],
    setValueCom = _useState6[1]; // 组件值
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    isFocus = _useState8[0],
    setIsFocus = _useState8[1]; // 是否得到焦点
  var _useState9 = useState('text'),
    _useState10 = _slicedToArray(_useState9, 2),
    typeCom = _useState10[0],
    setTypeCom = _useState10[1];
  var _useState11 = useState(false),
    _useState12 = _slicedToArray(_useState11, 2),
    open = _useState12[0],
    setOpen = _useState12[1]; // 是否打开下拉框
  var _useState13 = useState(false),
    _useState14 = _slicedToArray(_useState13, 2),
    selectLoading = _useState14[0],
    setSelectLoading = _useState14[1]; // 下拉loading
  var _useState15 = useState([]),
    _useState16 = _slicedToArray(_useState15, 2),
    selectData = _useState16[0],
    setSelectData = _useState16[1];
  //const [constData] = useState<ConstDataProps>({});
  var inputDom = useRef(null);
  var selectPosDom = useRef(null); // 下拉框定位元素
  useEffect(function () {
    if (props.defaultValue !== undefined) {
      setValueCom(props.defaultValue === null ? '' : props.defaultValue);
    }
  }, []);
  // 组件类型
  useEffect(function () {
    if (type !== typeCom) setTypeCom(type);
  }, [type]);
  // 监听value
  useEffect(function () {
    if (value !== undefined) {
      setValueCom(value === null ? '' : value);
    }
  }, [value]);
  // 监听组件值,判断是否显示placehold,label
  useEffect(function () {
    if (valueCom !== '' && valueCom !== undefined) setShowText(false);else setShowText(true);
  }, [valueCom]);
  // 判断是否显示下拉
  useEffect(function () {
    if (!fetchSuggestions) return;
    setOpen(isFocus);
  }, [isFocus, fetchSuggestions]);
  useEffect(function () {
    if (open) {
      window.addEventListener("keydown", keydownCom);
    } else {
      window.removeEventListener("keydown", keydownCom);
    }
    return function () {
      window.removeEventListener("keydown", keydownCom);
    };
  }, [open]);
  useEffect(function () {
    // 失去焦点
    if (!isFocus && valueCom) {
      var val = handValueLimit(valueCom);
      if (val !== valueCom) {
        var e = {};
        e.target = inputDom.current;
        e.target.value = val;
        if (props.value === undefined) {
          setValueCom(val);
        }
        props.onChange && props.onChange(e);
      }
    }
  }, [valueCom, isFocus]);
  /**
   * 处理value值
   * 超出字符长度限制,截取符合长度内容,并且触发onchange事件
   * */
  var handValueLimit = function handValueLimit(val) {
    var valHand = val;
    if (IsNaN(props.limitLength) && val.toString().length > Number(props.limitLength)) {
      valHand = valHand.toString().substr(0, props.limitLength);
    }
    return valHand;
  };
  // 点击内标题 / placeholder
  /*const clickPlaceholder = () => {
      if (disabled) return;
      setShowText(false);
      const dom: any = inputDom && inputDom.current;
      dom.focus();
  }*/
  /**
   * 处理键盘事件 上/下
   * @param config
   * 例:
   * {
   *     selectDom: 外容器
   *     keyCode: 键盘code
   *     currentDom: 当前元素
   * }
   */
  var handKeydown = function handKeydown(config) {
    var selectDom = config.selectDom,
      keyCode = config.keyCode,
      currentDom = config.currentDom;
    var brotherDom = currentDom;
    var type = 'nextSibling';
    var classSelectStr = '.text-field-select-content-item';
    if (keyCode === 38) {
      // 上
      type = 'previousSibling';
      classSelectStr = '.text-field-select-content-item:last-child';
    }
    if (brotherDom) {
      // 存在键盘上下的元素
      brotherDom = brotherDom[type];
      // 没有兄弟节点,去最后跟第一的节点
      if (!brotherDom) brotherDom = selectDom.querySelector(classSelectStr);
    } else {
      // 不存在,默认情况
      brotherDom = selectDom.querySelector('.text-field-select-content-item');
    }
    if (brotherDom) {
      brotherDom.classList.add("text-field-select-content-item-keydown");
      domClientTop(brotherDom, selectDom);
    }
  };
  /**
   * 设置当前上下选中的元素是否在当前可见页面里面
   * @param currentDom 当前元素
   * @param selectDom 外容器
   */
  var domClientTop = function domClientTop(currentDom, selectDom) {
    var clientHeight = selectDom.clientHeight; // 可见区域的高度
    var top = currentDom.offsetTop + currentDom.clientHeight;
    var difference = top - clientHeight;
    if (difference > 0) {
      selectDom.scrollTop = difference;
    } else {
      selectDom.scrollTop = 0;
    }
  };
  /**
   * 键盘事件
   * @param e 键盘信息
   */
  var keydownCom = function keydownCom(e) {
    var selectDom = document.querySelector('.' + classSearchOne);
    var currentDom = null;
    var keydownDom = selectDom.querySelector('.text-field-select-content-item-keydown');
    // 回车
    if (e.keyCode === 13) {
      if (keydownDom) {
        var val = keydownDom.dataset.val;
        clickSelectItem(JSON.parse(val))(e);
        var dom = inputDom && inputDom.current;
        dom.blur();
      }
    }
    if (keydownDom) {
      currentDom = keydownDom;
      keydownDom.classList.remove("text-field-select-content-item-keydown");
    }
    // 下
    if (e.keyCode === 40) {
      handKeydown({
        selectDom: selectDom,
        keyCode: e.keyCode,
        currentDom: currentDom
      });
    }
    // 上
    if (e.keyCode === 38) {
      handKeydown({
        selectDom: selectDom,
        keyCode: e.keyCode,
        currentDom: currentDom
      });
    }
  };
  /**
   * 失去焦点
   * @param event 失去焦点元素对象
   */
  var onBlurCom = function onBlurCom(event) {
    setIsFocus(false);
    if (event.target.value === '') setShowText(true);
    onBlur && onBlur(event);
  };
  /**
   * 下拉搜索
   * @param val 搜索值
   */
  var fetchSuggestionsCom = function fetchSuggestionsCom(val) {
    if (fetchSuggestions) {
      setSelectLoading(true);
      fetchSuggestions(val, function (data) {
        setSelectData(data || []);
        setSelectLoading(false);
      });
    }
  };
  /**
   * 得到焦点
   * @param event 得到焦点元素
   */
  var onFocusCom = function onFocusCom(event) {
    setIsFocus(true);
    onFocus && onFocus(event);
    fetchSuggestionsCom(event.target.value);
  };
  /**
   * 改变输入框
   * @param event 输入框元素
   */
  var onChangeCom = function onChangeCom(event) {
    var val = event.target.value;
    if (val) setShowText(false); // 有值不显示placehold,防止浏览器默认填充
    /*if (limitLength && val !== undefined && val !== '' && val.toString().length > limitLength) {
        return;
    }*/
    if (props.value === undefined) {
      setValueCom(val);
    }
    onChange && onChange(event);
    fetchSuggestionsCom(event.target.value);
  };
  /**
   * 键盘按下事件
   * @param event 输入框元素
   */
  var onKeyDownCom = function onKeyDownCom(event) {
    if (event.keyCode === 13) onEnter && onEnter(event);
    onKeydown && onKeydown(event);
  };
  /**
   * 键盘抬起事件
   * @param event 输入框元素
   */
  var onKeyUpCom = function onKeyUpCom(event) {
    onKeyUp && onKeyUp(event);
  };
  /**
   * 点击图标
   * @param event 图标元素
   */
  var onClickRightIcon = function onClickRightIcon(event) {
    if (type === 'password') {
      if (typeCom === 'text') {
        setTypeCom('password');
      }
      if (typeCom === 'password') {
        setTypeCom('text');
      }
    }
    onClickIcon && onClickIcon(event);
  };
  var handValue = function handValue() {
    if (props.value === undefined) return valueCom;
    return value;
  };
  // 处理下拉框样式
  var handleClassPopover = function handleClassPopover() {
    var str = "".concat($prefixCls, "-text-field-select ").concat($prefixCls, "-scrollbar-small");
    if (size) str += " ".concat($prefixCls, "-text-field-select-").concat(size);
    if (selectPopoverClass) str += ' ' + selectPopoverClass;
    if (selectData.length > 0) str += " ".concat($prefixCls, "-text-field-select-data");
    return str;
  };
  // 点击下拉
  var clickSelectItem = function clickSelectItem(item) {
    return function (e) {
      onSelect && onSelect(item);
    };
  };
  // 限制长度
  var limitMemo = useMemo(function () {
    return jsx(Fragment, {
      children: IsNaN(limitLength) && jsx("span", Object.assign({
        className: "length-limit"
      }, {
        children: (valueCom ? valueCom.toString().length : 0) + '/' + limitLength
      }))
    });
  }, [limitLength, valueCom]);
  // 图标
  var rightIconMemo = useMemo(function () {
    var rightIconFunc = function rightIconFunc() {
      return rightIcon ? rightIcon :
      // 只有密码模式有默认图标
      type === 'password' ? typeCom === 'password' ? jsx(VisibilityOff, {}) : jsx(Visibility, {}) : null;
    };
    var rightIconContent = rightIconFunc();
    return jsx(Fragment, {
      children: showRightIcon && rightIconContent && jsx("span", Object.assign({
        className: type === 'password' ? 'right-icon right-icon-password' : 'right-icon',
        onClick: onClickRightIcon
      }, {
        children: rightIconContent
      }))
    });
  }, [showRightIcon, rightIcon, type, typeCom, onClickIcon]);
  // 输入框
  var renderInputDom = function renderInputDom() {
    if (multiline) {
      return jsx("textarea", Object.assign({
        ref: inputDom,
        rows: rows,
        value: handValue(),
        onBlur: onBlurCom,
        onFocus: onFocusCom,
        onChange: onChangeCom,
        onKeyDown: onKeyDownCom,
        onKeyUp: onKeyUpCom,
        disabled: disabled
      }, otherProps));
    }
    return jsx("input", Object.assign({
      ref: inputDom,
      type: typeCom,
      value: handValue(),
      onBlur: onBlurCom,
      onFocus: onFocusCom,
      onChange: onChangeCom,
      onKeyDown: onKeyDownCom,
      onKeyUp: onKeyUpCom,
      disabled: disabled
    }, otherProps));
  };
  // 点击清楚按钮
  var clickClean = function clickClean() {
    var target = inputDom.current;
    target.value = '';
    if (props.value === undefined) {
      setValueCom('');
    }
    onChange && onChange({
      target: target
    });
    fetchSuggestionsCom('');
    onClear && onClear();
  };
  // 清空内容
  var clearRender = function clearRender() {
    var valCom = handValue();
    if ((valCom || valCom === 0) && !disabled && allowClear) {
      return jsx("span", Object.assign({
        className: "clean-up-icon",
        onClick: clickClean
      }, {
        children: jsx(CloseCircle, {})
      }));
    }
  };
  // 中间主体
  var contentMemo = useMemo(function () {
    var handPlaceholderCon = function handPlaceholderCon() {
      if (labelMode === 'outside') return placeholder;
      return jsxs(Fragment, {
        children: [label || placeholder, required && jsx("span", Object.assign({
          className: "text-field-required"
        }, {
          children: "*"
        })), labelSign && jsx("span", {
          children: labelSign
        })]
      });
    };
    var valCom = handValue();
    return jsxs("div", Object.assign({
      className: "text-field-content-within",
      ref: selectPosDom
    }, {
      children: [jsxs("div", Object.assign({
        className: "text-field-content-within-input"
      }, {
        children: [renderInputDom(), !valCom && valCom !== 0 && jsx("span", Object.assign({
          className: "text-field-label-placeholder" /*onClick={clickPlaceholder}*/
        }, {
          children: handPlaceholderCon()
        }))]
      })), clearRender(), limitMemo, rightIconMemo]
    }));
  }, [showText, isFocus, typeCom, valueCom, limitMemo, rightIconMemo, labelMode, placeholder, label, disabled, multiline, rows, otherProps, onChange, fetchSuggestions, onClickIcon, allowClear, onClear]);
  // 搜索下拉内容
  var selectContentMemo = useMemo(function () {
    var handSelectContentClass = function handSelectContentClass() {
      var str = 'text-field-select-content';
      if (selectLoading) str += ' text-field-select-content-loading';
      if (classSearchOne) str += ' ' + classSearchOne;
      return str;
    };
    var handText = function handText(item) {
      if (_typeof(item) === 'object' && item !== null) {
        return item[showSelectName];
      }
      return item;
    };
    return jsxs("div", Object.assign({
      className: handSelectContentClass(),
      style: {
        width: (selectPosDom && selectPosDom.current ? selectPosDom.current.offsetWidth : 0) + 'px'
      }
    }, {
      children: [selectData && selectData.map(function (item, index) {
        return jsx("div", Object.assign({
          className: "text-field-select-content-item",
          onMouseDown: clickSelectItem(item),
          "data-val": JSON.stringify(item)
        }, {
          children: renderSelectItem ? renderSelectItem(item) : jsx(AutoTips, {
            children: handText(item)
          })
        }), index);
      }), selectData.length === 0 && searchEmpty, selectLoading && jsx(Loading, {})]
    }));
  }, [selectPosDom, open, selectData, renderSelectItem, showSelectName, onSelect, selectLoading, classSearchOne, searchEmpty]);
  // 带有搜索的中间主体
  var searchContentMemo = useMemo(function () {
    return jsx(Dropdown, Object.assign({
      visible: open,
      placement: 'bottomLeft',
      trigger: ['click'],
      overlay: jsx(Fragment, {
        children: selectContentMemo
      }),
      overlayClassName: handleClassPopover()
    }, {
      children: contentMemo
    }));
  }, [showText, isFocus, typeCom, valueCom, limitMemo, rightIconMemo, labelMode, placeholder, label, disabled, multiline, rows, otherProps, onChange, fetchSuggestions, onSelect, selectPosDom, open, selectPopoverClass, size, onClickIcon, selectData, allowClear, onClear]);
  // 外标题
  var outSideMemo = useMemo(function () {
    var showTag = Boolean(required || labelSign || label);
    if (labelMode === 'outside' && showTag) {
      var handLabelClass = function handLabelClass() {
        var str = 'text-field-label';
        if (labelTooltip && labelTooltip.className) {
          str += ' ' + labelTooltip.className;
        }
        return str;
      };
      return jsx(Label, Object.assign({
        label: label,
        required: required,
        labelSign: labelSign
      }, labelTooltip, {
        className: handLabelClass()
      }));
    }
    return null;
  }, [labelMode, label, labelSign, required, labelTooltip]);
  // 处理class
  var handClass = function handClass() {
    var str = "".concat($prefixCls, "-text-field");
    if (className) str += ' ' + className;
    if (size && !multiline) str += " ".concat($prefixCls, "-text-field-").concat(size);
    if (error) str += " ".concat($prefixCls, "-text-field-error");
    if (isFocus) str += " ".concat($prefixCls, "-text-field-focus");
    if (disabled) str += " ".concat($prefixCls, "-text-field-disabled");
    if (multiline) str += " ".concat($prefixCls, "-text-field-multiline");
    if (IsNaN(props.limitLength)) str += " ".concat($prefixCls, "-text-field-limit-length");
    if (IsNaN(props.limitLength) && valueCom && valueCom.toString().length > Number(props.limitLength)) str += " ".concat($prefixCls, "-text-field-limit");
    if (resize) str += " ".concat($prefixCls, "-text-field-resize");
    var valCom = handValue();
    if (valCom || valCom === 0) str += " ".concat($prefixCls, "-text-field-value");
    if (allowClear) str += " ".concat($prefixCls, "-text-field-allow-clear");
    return str;
  };
  // 点击前缀
  var clickBefore = function clickBefore(event) {
    onClickAddonBefore && onClickAddonBefore(event);
  };
  // 点击后缀
  var clickAfter = function clickAfter(event) {
    onClickAddonAfter && onClickAddonAfter(event);
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style
  }, {
    children: [outSideMemo, jsxs("div", Object.assign({
      className: "text-field-content"
    }, {
      children: [addonBefore && jsx("div", Object.assign({
        className: "text-field-content-before",
        onClick: clickBefore
      }, {
        children: addonBefore
      })), fetchSuggestions ? searchContentMemo : contentMemo, addonAfter && jsx("div", Object.assign({
        className: "text-field-content-after",
        onClick: clickAfter
      }, {
        children: addonAfter
      }))]
    })), jsx(HelperText, {
      className: "text-field-error-text",
      error: error,
      helperText: helperText,
      hideErrorDom: hideErrorDom
    })]
  }));
};

export { TextField, TextField as default };
