tdesign-react 0.24.2 → 0.25.2

package/esm/tag-input/index.js

@@ -0,0 +1,64 @@
+/**
+ * tdesign v0.25.2
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import TagInput$1 from './TagInput.js';
+import './style/index.js';
+import './type.js';
+import '../_chunks/dep-1dcd6f7a.js';
+import '../_chunks/dep-301db282.js';
+import '../_chunks/dep-5e33104a.js';
+import 'react';
+import 'tdesign-icons-react';
+import '../_chunks/dep-98412f1b.js';
+import '../_chunks/dep-04a6c042.js';
+import '../_chunks/dep-8aee3ad0.js';
+import '../_chunks/dep-e4bd3f59.js';
+import 'classnames';
+import '../_util/useConfig.js';
+import '../_chunks/dep-0c32a524.js';
+import '../_chunks/dep-a64706b5.js';
+import '../_chunks/dep-50c12e42.js';
+import '../_chunks/dep-70c9bb2d.js';
+import '../_chunks/dep-5a75ddfa.js';
+import '../_chunks/dep-75144258.js';
+import '../_chunks/dep-aabdac78.js';
+import '../_chunks/dep-0529bc9f.js';
+import '../_chunks/dep-1aa31dc5.js';
+import '../_chunks/dep-10b8d252.js';
+import '../_chunks/dep-0c0fc89b.js';
+import '../_chunks/dep-8a07113f.js';
+import '../_chunks/dep-6fb8cfe3.js';
+import '../_chunks/dep-3e5f80c6.js';
+import '../locale/zh_CN.js';
+import '../_common/js/locale/zh_CN.js';
+import '../config-provider/defaultConfig.js';
+import '../_util/useDragSorter.js';
+import '../input/index.js';
+import '../input/Input.js';
+import '../_chunks/dep-4b07e198.js';
+import '../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../input/InputGroup.js';
+import '../_util/useDefaultValue.js';
+import '../_util/useDefault.js';
+import '../_util/noop.js';
+import '../input/style/index.js';
+import '../input/type.js';
+import './useTagScroll.js';
+import './useTagList.js';
+import '../_chunks/dep-ed38fb3f.js';
+import 'lodash';
+import '../tag/index.js';
+import '../tag/Tag.js';
+import '../tag/CheckTag.js';
+import '../tag/style/index.js';
+import '../tag/type.js';
+import './useHover.js';
+
+var TagInput = TagInput$1;
+
+export { TagInput, TagInput as default };
+//# sourceMappingURL=index.js.map

package/esm/tag-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/tag-input/index.ts"],"sourcesContent":["import _TagInput from './TagInput';\n\nimport './style/index.js';\n\nexport type { TagInputProps } from './TagInput';\nexport * from './type';\n\nexport const TagInput = _TagInput;\nexport default TagInput;\n"],"names":["TagInput","_TagInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGaA,QAAQ,GAAGC;;;;"}

package/esm/tag-input/style/css.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/tag-input/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/tag-input/style/index.js

@@ -0,0 +1 @@
+import '../../_common/style/web/components/tag-input/_index.less';

package/esm/tag-input/type.d.ts

@@ -0,0 +1,196 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+import { InputProps, InputValue } from '../input';
+import { TagProps } from '../tag';
+import { TNode, TElement } from '../common';
+import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent } from 'react';
+export interface TdTagInputProps {
+    /**
+     * 宽度随内容自适应
+     * @default false
+     */
+    autoWidth?: boolean;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示标签值，`collapsedTags` 表示折叠标签值，`count` 表示总标签数量
+     */
+    collapsedItems?: TNode<{
+        value: TagInputValue;
+        collapsedTags: TagInputValue;
+        count: number;
+    }>;
+    /**
+     * 是否禁用标签输入框
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 【开发中】拖拽调整标签顺序
+     * @default false
+     */
+    dragSort?: boolean;
+    /**
+     * 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示
+     * @default scroll
+     */
+    excessTagsDisplayType?: 'scroll' | 'break-line';
+    /**
+     * 透传 Input 输入框组件全部属性
+     */
+    inputProps?: InputProps;
+    /**
+     * 左侧文本
+     */
+    label?: TNode;
+    /**
+     * 最大允许输入的标签数量
+     */
+    max?: number;
+    /**
+     * 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠
+     * @default 0
+     */
+    minCollapsedNum?: number;
+    /**
+     * 占位符
+     */
+    placeholder?: string;
+    /**
+     * 是否只读，值为真会隐藏标签移除按钮和输入框
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * 尺寸
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 输入框状态
+     */
+    status?: 'success' | 'warning' | 'error';
+    /**
+     * 后置图标前的后置内容
+     */
+    suffix?: TNode;
+    /**
+     * 组件后置图标
+     */
+    suffixIcon?: TElement;
+    /**
+     * 自定义标签的内部内容，每一个标签的当前值。注意和 `valueDisplay` 区分，`valueDisplay`  是用来定义全部标签内容，而非某一个标签
+     */
+    tag?: string | TNode<{
+        value: string | number;
+    }>;
+    /**
+     * 透传 Tag 组件全部属性
+     */
+    tagProps?: TagProps;
+    /**
+     * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+     */
+    tips?: TNode;
+    /**
+     * 值
+     */
+    value?: TagInputValue;
+    /**
+     * 值，非受控属性
+     */
+    defaultValue?: TagInputValue;
+    /**
+     * 自定义值呈现的全部内容，参数为所有标签的值
+     */
+    valueDisplay?: string | TNode<{
+        value: TagInputValue;
+        onClose: (index: number, item?: any) => void;
+    }>;
+    /**
+     * 失去焦点时触发
+     */
+    onBlur?: (value: TagInputValue, context: {
+        inputValue: InputValue;
+        e: FocusEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数
+     */
+    onChange?: (value: TagInputValue, context: TagInputChangeContext) => void;
+    /**
+     * 清空按钮点击时触发
+     */
+    onClear?: (context: {
+        e: MouseEvent<SVGElement>;
+    }) => void;
+    /**
+     * 点击组件时触发
+     */
+    onClick?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 按键按下 Enter 时触发
+     */
+    onEnter?: (value: TagInputValue, context: {
+        e: KeyboardEvent<HTMLDivElement>;
+        inputValue: InputValue;
+    }) => void;
+    /**
+     * 聚焦时触发
+     */
+    onFocus?: (value: TagInputValue, context: {
+        inputValue: InputValue;
+        e: FocusEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 输入框值发生变化时触发
+     */
+    onInputChange?: (value: InputValue, context?: {
+        e?: FormEvent<HTMLDivElement> | MouseEvent<HTMLElement | SVGElement>;
+    }) => void;
+    /**
+     * 进入输入框时触发
+     */
+    onMouseenter?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 离开输入框时触发
+     */
+    onMouseleave?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 粘贴事件，`pasteValue` 表示粘贴板的内容
+     */
+    onPaste?: (context: {
+        e: ClipboardEvent<HTMLInputElement>;
+        pasteValue: string;
+    }) => void;
+    /**
+     * 移除单个标签时触发
+     */
+    onRemove?: (context: TagInputRemoveContext) => void;
+}
+export declare type TagInputValue = Array<string | number>;
+export interface TagInputChangeContext {
+    trigger: TagInputTriggerSource;
+    index?: number;
+    item?: string | number;
+    e?: MouseEvent<SVGElement> | KeyboardEvent<HTMLDivElement>;
+}
+export declare type TagInputTriggerSource = 'enter' | 'tag-remove' | 'backspace' | 'clear';
+export interface TagInputRemoveContext {
+    value: TagInputValue;
+    index: number;
+    item: string | number;
+    e?: MouseEvent<SVGElement> | KeyboardEvent<HTMLDivElement>;
+    trigger: TagInputRemoveTrigger;
+}
+export declare type TagInputRemoveTrigger = 'tag-remove' | 'backspace';

package/esm/tag-input/type.js

@@ -0,0 +1,7 @@
+/**
+ * tdesign v0.25.2
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+//# sourceMappingURL=type.js.map

package/esm/tag-input/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/esm/tag-input/useHover.d.ts

@@ -0,0 +1,17 @@
+import { MouseEvent } from 'react';
+import { TdTagInputProps } from './type';
+export interface UseHoverParams {
+    readonly: boolean;
+    disabled: boolean;
+    onMouseenter: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    onMouseleave: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+}
+export default function useHover(props: TdTagInputProps): {
+    isHover: boolean;
+    addHover: (context: Parameters<UseHoverParams['onMouseenter']>[0]) => void;
+    cancelHover: (context: Parameters<UseHoverParams['onMouseleave']>[0]) => void;
+};

package/esm/tag-input/useHover.js

@@ -0,0 +1,42 @@
+/**
+ * tdesign v0.25.2
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _slicedToArray } from '../_chunks/dep-301db282.js';
+import { useState } from 'react';
+import '../_chunks/dep-5e33104a.js';
+
+function useHover(props) {
+  var readonly = props.readonly,
+      disabled = props.disabled,
+      onMouseenter = props.onMouseenter,
+      onMouseleave = props.onMouseleave;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHover = _useState2[0],
+      setIsHover = _useState2[1];
+
+  var addHover = function addHover(context) {
+    if (readonly || disabled) return;
+    setIsHover(true);
+    onMouseenter === null || onMouseenter === void 0 ? void 0 : onMouseenter(context);
+  };
+
+  var cancelHover = function cancelHover(context) {
+    if (readonly || disabled) return;
+    setIsHover(false);
+    onMouseleave === null || onMouseleave === void 0 ? void 0 : onMouseleave(context);
+  };
+
+  return {
+    isHover: isHover,
+    addHover: addHover,
+    cancelHover: cancelHover
+  };
+}
+
+export { useHover as default };
+//# sourceMappingURL=useHover.js.map

package/esm/tag-input/useHover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.js","sources":["../../src/tag-input/useHover.ts"],"sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { TdTagInputProps } from './type';\n\nexport interface UseHoverParams {\n  readonly: boolean;\n  disabled: boolean;\n  onMouseenter: (context: { e: MouseEvent<HTMLDivElement> }) => void;\n  onMouseleave: (context: { e: MouseEvent<HTMLDivElement> }) => void;\n}\n\nexport default function useHover(props: TdTagInputProps) {\n  const { readonly, disabled, onMouseenter, onMouseleave } = props;\n  const [isHover, setIsHover] = useState<boolean>(false);\n\n  const addHover = (context: Parameters<UseHoverParams['onMouseenter']>[0]) => {\n    if (readonly || disabled) return;\n    setIsHover(true);\n    onMouseenter?.(context);\n  };\n\n  const cancelHover = (context: Parameters<UseHoverParams['onMouseleave']>[0]) => {\n    if (readonly || disabled) return;\n    setIsHover(false);\n    onMouseleave?.(context);\n  };\n\n  return { isHover, addHover, cancelHover };\n}\n"],"names":["useHover","props","readonly","disabled","onMouseenter","onMouseleave","useState","isHover","setIsHover","addHover","context","cancelHover"],"mappings":";;;;;;;;;;AACe,SAASA,QAAT,CAAkBC,KAAlB,EAAyB;AACtC,MAAQC,QAAR,GAA2DD,KAA3D,CAAQC,QAAR;AAAA,MAAkBC,QAAlB,GAA2DF,KAA3D,CAAkBE,QAAlB;AAAA,MAA4BC,YAA5B,GAA2DH,KAA3D,CAA4BG,YAA5B;AAAA,MAA0CC,YAA1C,GAA2DJ,KAA3D,CAA0CI,YAA1C;;AACA,kBAA8BC,QAAQ,CAAC,KAAD,CAAtC;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,OAAD,EAAa;AAC5B,QAAIR,QAAQ,IAAIC,QAAhB,EACE;AACFK,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAJ,IAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGM,OAAH,CAAZ;AACD,GALD;;AAMA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACD,OAAD,EAAa;AAC/B,QAAIR,QAAQ,IAAIC,QAAhB,EACE;AACFK,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAH,IAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGK,OAAH,CAAZ;AACD,GALD;;AAMA,SAAO;AAAEH,IAAAA,OAAO,EAAPA,OAAF;AAAWE,IAAAA,QAAQ,EAARA,QAAX;AAAqBE,IAAAA,WAAW,EAAXA;AAArB,GAAP;AACD;;;;"}

package/esm/tag-input/useTagList.d.ts

@@ -0,0 +1,29 @@
+import React, { MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import { TagInputChangeContext, TagInputValue, TdTagInputProps } from './type';
+import { InputValue } from '../input';
+import { DragSortInnerProps } from '../_util/useDragSorter';
+export declare type ChangeParams = [TagInputChangeContext];
+interface TagInputProps extends TdTagInputProps, DragSortInnerProps {
+}
+export default function useTagList(props: TagInputProps): {
+    tagValue: TagInputValue;
+    clearAll: (context: {
+        e: MouseEvent<SVGElement>;
+    }) => void;
+    onClose: (p: {
+        e?: MouseEvent<SVGElement>;
+        index: number;
+        item: string | number;
+    }) => void;
+    onInnerEnter: (value: InputValue, context: {
+        e: KeyboardEvent<HTMLDivElement>;
+    }) => void;
+    onInputBackspaceKeyUp: (value: InputValue, context: {
+        e: KeyboardEvent<HTMLDivElement>;
+    }) => void;
+    renderLabel: ({ displayNode, label }: {
+        displayNode: ReactNode;
+        label: ReactNode;
+    }) => (true | React.ReactChild | React.ReactFragment | React.ReactPortal)[];
+};
+export {};

package/esm/tag-input/useTagList.js

@@ -0,0 +1,202 @@
+/**
+ * tdesign v0.25.2
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _defineProperty } from '../_chunks/dep-1dcd6f7a.js';
+import { _ as _toConsumableArray } from '../_chunks/dep-ed38fb3f.js';
+import { _ as _slicedToArray } from '../_chunks/dep-301db282.js';
+import React, { useState } from 'react';
+import { isFunction } from 'lodash';
+import { Tag } from '../tag/index.js';
+import useConfig from '../_util/useConfig.js';
+import useDefault from '../_util/useDefault.js';
+import '../_chunks/dep-5e33104a.js';
+import '../tag/Tag.js';
+import '../_chunks/dep-4b07e198.js';
+import 'classnames';
+import 'tdesign-icons-react';
+import '../_util/noop.js';
+import '../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../tag/CheckTag.js';
+import '../_chunks/dep-0c32a524.js';
+import '../_chunks/dep-04a6c042.js';
+import '../_chunks/dep-a64706b5.js';
+import '../_chunks/dep-50c12e42.js';
+import '../_chunks/dep-70c9bb2d.js';
+import '../_chunks/dep-98412f1b.js';
+import '../_chunks/dep-8aee3ad0.js';
+import '../_chunks/dep-e4bd3f59.js';
+import '../_chunks/dep-5a75ddfa.js';
+import '../_chunks/dep-75144258.js';
+import '../_chunks/dep-aabdac78.js';
+import '../_chunks/dep-0529bc9f.js';
+import '../_chunks/dep-1aa31dc5.js';
+import '../_chunks/dep-10b8d252.js';
+import '../_chunks/dep-0c0fc89b.js';
+import '../_chunks/dep-8a07113f.js';
+import '../_chunks/dep-6fb8cfe3.js';
+import '../_chunks/dep-3e5f80c6.js';
+import '../locale/zh_CN.js';
+import '../_common/js/locale/zh_CN.js';
+import '../config-provider/defaultConfig.js';
+import '../tag/style/index.js';
+import '../tag/type.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function useTagList(props) {
+  var _useConfig = useConfig(),
+      prefix = _useConfig.classPrefix;
+
+  var onRemove = props.onRemove,
+      max = props.max,
+      minCollapsedNum = props.minCollapsedNum,
+      size = props.size,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      tagProps = props.tagProps,
+      tag = props.tag,
+      collapsedItems = props.collapsedItems,
+      getDragProps = props.getDragProps;
+
+  var _useDefault = useDefault(props.value, props.defaultValue || [], props.onChange),
+      _useDefault2 = _slicedToArray(_useDefault, 2),
+      tagValue = _useDefault2[0],
+      setTagValue = _useDefault2[1];
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      oldInputValue = _useState2[0],
+      setOldInputValue = _useState2[1];
+
+  var _onClose = function onClose(p) {
+    var arr = _toConsumableArray(tagValue);
+
+    arr.splice(p.index, 1);
+    setTagValue(arr, _objectSpread({
+      trigger: "tag-remove"
+    }, p));
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove(_objectSpread(_objectSpread({}, p), {}, {
+      trigger: "tag-remove",
+      value: arr
+    }));
+  };
+
+  var clearAll = function clearAll(context) {
+    setTagValue([], {
+      trigger: "clear",
+      e: context.e
+    });
+  };
+
+  var onInnerEnter = function onInnerEnter(value, context) {
+    var _props$onEnter;
+
+    var valueStr = String(value).trim();
+    if (!valueStr) return;
+    var isLimitExceeded = max && (tagValue === null || tagValue === void 0 ? void 0 : tagValue.length) >= max;
+    var newValue = tagValue;
+
+    if (!isLimitExceeded) {
+      newValue = tagValue instanceof Array ? tagValue.concat(String(valueStr)) : [valueStr];
+      setTagValue(newValue, {
+        trigger: "enter",
+        index: newValue.length - 1,
+        item: valueStr,
+        e: context.e
+      });
+    }
+
+    props === null || props === void 0 ? void 0 : (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 ? void 0 : _props$onEnter.call(props, newValue, _objectSpread(_objectSpread({}, context), {}, {
+      inputValue: value
+    }));
+  };
+
+  var onInputBackspaceKeyUp = function onInputBackspaceKeyUp(value, context) {
+    var e = context.e;
+    if (!tagValue || !tagValue.length) return;
+
+    if (!oldInputValue && ["Backspace", "NumpadDelete"].includes(e.code)) {
+      var index = tagValue.length - 1;
+      var item = tagValue[index];
+      var trigger = "backspace";
+      setTagValue(tagValue.slice(0, -1), {
+        e: e,
+        index: index,
+        item: item,
+        trigger: trigger
+      });
+      onRemove === null || onRemove === void 0 ? void 0 : onRemove({
+        e: e,
+        index: index,
+        item: item,
+        trigger: trigger,
+        value: tagValue
+      });
+    }
+
+    setOldInputValue(value);
+  };
+
+  var renderLabel = function renderLabel(_ref) {
+    var displayNode = _ref.displayNode,
+        label = _ref.label;
+    var newList = minCollapsedNum ? tagValue.slice(0, minCollapsedNum) : tagValue;
+    var list = displayNode ? [displayNode] : newList === null || newList === void 0 ? void 0 : newList.map(function (item, index) {
+      var tagContent = isFunction(tag) ? tag({
+        value: item
+      }) : tag;
+      return /* @__PURE__ */React.createElement(Tag, _objectSpread(_objectSpread({
+        key: item,
+        size: size,
+        disabled: disabled,
+        onClose: function onClose(context) {
+          return _onClose({
+            e: context.e,
+            item: item,
+            index: index
+          });
+        },
+        closable: !readonly && !disabled
+      }, getDragProps === null || getDragProps === void 0 ? void 0 : getDragProps(index, item)), tagProps), tagContent !== null && tagContent !== void 0 ? tagContent : item);
+    });
+
+    if (label) {
+      list === null || list === void 0 ? void 0 : list.unshift( /* @__PURE__ */React.createElement("div", {
+        className: "".concat(prefix, "-tag-input__prefix"),
+        key: "label"
+      }, label));
+    }
+
+    if (newList.length !== tagValue.length) {
+      var len = tagValue.length - newList.length;
+      var params = {
+        value: tagValue,
+        count: tagValue.length,
+        collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length)
+      };
+      var more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;
+      list.push(more !== null && more !== void 0 ? more : /* @__PURE__ */React.createElement(Tag, {
+        key: "more"
+      }, "+", len));
+    }
+
+    return list;
+  };
+
+  return {
+    tagValue: tagValue,
+    clearAll: clearAll,
+    onClose: _onClose,
+    onInnerEnter: onInnerEnter,
+    onInputBackspaceKeyUp: onInputBackspaceKeyUp,
+    renderLabel: renderLabel
+  };
+}
+
+export { useTagList as default };
+//# sourceMappingURL=useTagList.js.map

package/esm/tag-input/useTagList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTagList.js","sources":["../../src/tag-input/useTagList.tsx"],"sourcesContent":["import React, { useState, MouseEvent, KeyboardEvent, ReactNode } from 'react';\nimport { isFunction } from 'lodash';\nimport { TagInputChangeContext, TagInputValue, TdTagInputProps } from './type';\nimport { InputValue } from '../input';\nimport Tag from '../tag';\nimport useConfig from '../_util/useConfig';\nimport useDefault from '../_util/useDefault';\nimport { DragSortInnerProps } from '../_util/useDragSorter';\n\nexport type ChangeParams = [TagInputChangeContext];\n\ninterface TagInputProps extends TdTagInputProps, DragSortInnerProps {}\n\n// handle tag add and remove\nexport default function useTagList(props: TagInputProps) {\n  const { classPrefix: prefix } = useConfig();\n  const { onRemove, max, minCollapsedNum, size, disabled, readonly, tagProps, tag, collapsedItems, getDragProps } =\n    props;\n  // handle controlled property and uncontrolled property\n  const [tagValue, setTagValue] = useDefault<TdTagInputProps['value'], [TagInputChangeContext]>(\n    props.value,\n    props.defaultValue || [],\n    props.onChange,\n  );\n  const [oldInputValue, setOldInputValue] = useState<InputValue>();\n\n  // 点击标签关闭按钮，删除标签\n  const onClose = (p: { e?: MouseEvent<SVGElement>; index: number; item: string | number }) => {\n    const arr = [...tagValue];\n    arr.splice(p.index, 1);\n    setTagValue(arr, { trigger: 'tag-remove', ...p });\n    onRemove?.({ ...p, trigger: 'tag-remove', value: arr });\n  };\n\n  const clearAll = (context: { e: MouseEvent<SVGElement> }) => {\n    setTagValue([], { trigger: 'clear', e: context.e });\n  };\n\n  // 按下 Enter 键，新增标签\n  const onInnerEnter = (value: InputValue, context: { e: KeyboardEvent<HTMLDivElement> }) => {\n    const valueStr = String(value).trim();\n    if (!valueStr) return;\n    const isLimitExceeded = max && tagValue?.length >= max;\n    let newValue: TagInputValue = tagValue;\n    if (!isLimitExceeded) {\n      newValue = tagValue instanceof Array ? tagValue.concat(String(valueStr)) : [valueStr];\n      setTagValue(newValue, {\n        trigger: 'enter',\n        index: newValue.length - 1,\n        item: valueStr,\n        e: context.e,\n      });\n    }\n    props?.onEnter?.(newValue, { ...context, inputValue: value });\n  };\n\n  // 按下回退键，删除标签\n  const onInputBackspaceKeyUp = (value: InputValue, context: { e: KeyboardEvent<HTMLDivElement> }) => {\n    const { e } = context;\n    if (!tagValue || !tagValue.length) return;\n    // 回车键删除，输入框值为空时，才允许 Backspace 删除标签\n    if (!oldInputValue && ['Backspace', 'NumpadDelete'].includes(e.code)) {\n      const index = tagValue.length - 1;\n      const item = tagValue[index];\n      const trigger = 'backspace';\n      setTagValue(tagValue.slice(0, -1), { e, index, item, trigger });\n      onRemove?.({ e, index, item, trigger, value: tagValue });\n    }\n    setOldInputValue(value);\n  };\n\n  const renderLabel = ({ displayNode, label }: { displayNode: ReactNode; label: ReactNode }) => {\n    const newList = minCollapsedNum ? tagValue.slice(0, minCollapsedNum) : tagValue;\n    const list = displayNode\n      ? [displayNode]\n      : newList?.map((item, index) => {\n          const tagContent = isFunction(tag) ? tag({ value: item }) : tag;\n          return (\n            <Tag\n              key={item}\n              size={size}\n              disabled={disabled}\n              onClose={(context) => onClose({ e: context.e, item, index })}\n              closable={!readonly && !disabled}\n              {...getDragProps?.(index, item)}\n              {...tagProps}\n            >\n              {tagContent ?? item}\n            </Tag>\n          );\n        });\n    if (label) {\n      list?.unshift(\n        <div className={`${prefix}-tag-input__prefix`} key=\"label\">\n          {label}\n        </div>,\n      );\n    }\n    // 超出省略\n    if (newList.length !== tagValue.length) {\n      const len = tagValue.length - newList.length;\n      const params = {\n        value: tagValue,\n        count: tagValue.length,\n        collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),\n      };\n      const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;\n      list.push(more ?? <Tag key=\"more\">+{len}</Tag>);\n    }\n    return list;\n  };\n\n  return {\n    tagValue,\n    clearAll,\n    onClose,\n    onInnerEnter,\n    onInputBackspaceKeyUp,\n    renderLabel,\n  };\n}\n"],"names":["useTagList","props","useConfig","prefix","classPrefix","onRemove","max","minCollapsedNum","size","disabled","readonly","tagProps","tag","collapsedItems","getDragProps","useDefault","value","defaultValue","onChange","tagValue","setTagValue","useState","oldInputValue","setOldInputValue","onClose","p","arr","splice","index","trigger","clearAll","context","e","onInnerEnter","valueStr","String","trim","isLimitExceeded","length","newValue","Array","concat","item","onEnter","inputValue","onInputBackspaceKeyUp","includes","code","slice","renderLabel","displayNode","label","newList","list","map","tagContent","isFunction","React","createElement","Tag","key","closable","unshift","className","len","params","count","collapsedTags","more","push"],"mappings":"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"}

package/esm/tag-input/useTagScroll.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 当标签数量过多时，输入框显示不下，则需要滚动查看，以下为滚动逻辑
+ * 如果标签过多时的处理方式，是标签省略，则不需要此功能
+ */
+import { RefObject, WheelEvent } from 'react';
+import { TdTagInputProps } from './type';
+export default function useTagScroll(props: TdTagInputProps): {
+    initScroll: (element: HTMLDivElement) => void;
+    clearScroll: () => void;
+    tagInputRef: RefObject<{
+        currentElement: HTMLDivElement;
+    }>;
+    scrollElement: HTMLDivElement;
+    scrollDistance: number;
+    scrollTo: (distance: number) => void;
+    scrollToRight: () => void;
+    scrollToLeft: () => void;
+    updateScrollElement: (element: HTMLDivElement) => void;
+    updateScrollDistance: () => void;
+    onWheel: ({ e }: {
+        e: WheelEvent<HTMLDivElement>;
+    }) => void;
+    scrollToRightOnEnter: () => void;
+    scrollToLeftOnLeave: () => void;
+};