@para-ui/core 3.0.55 → 3.0.56

package/TextField/index.js

@@ -0,0 +1,611 @@
+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 '@paraview/lib';
+import VisibilityOff from '@para-ui/icons/PreviewClose';
+import Visibility from '@para-ui/icons/PreviewOpen';
+import CloseCircle from '@para-ui/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-77f9e0fb.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 '@para-ui/icons/Help';
+import '@para-ui/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-grow: 1;\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  width: 100%;\n  line-height: 0;\n  position: relative;\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}\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}\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
+  var clickPlaceholder = function clickPlaceholder() {
+    if (disabled) return;
+    setShowText(false);
+    var dom = 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() {
+    if (handValue() && !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
+        })]
+      });
+    };
+    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(), showText && !isFocus && 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");
+    if (handValue()) 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 };

package/TimePicker/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Dayjs } from 'dayjs';
+import { PickerTimeProps, RangePickerTimeProps } from '../DatePicker/generatePicker';
+export interface TimePickerLocale {
+    placeholder?: string;
+    rangePlaceholder?: [string, string];
+}
+export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Dayjs>, 'picker'> {
+    popupClassName?: string;
+}
+declare const RangePicker: React.ForwardRefExoticComponent<TimeRangePickerProps & React.RefAttributes<any>>;
+export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {
+    addon?: () => React.ReactNode;
+    popupClassName?: string;
+}
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<any>>;
+type MergedTimePicker = typeof TimePicker & {
+    TimeRangePicker: typeof RangePicker;
+    RangePicker: typeof RangePicker;
+};
+declare const _default: MergedTimePicker;
+export default _default;