@tendaui/components 1.0.0

package/tag-input/hooks/useTagList.tsx

@@ -0,0 +1,131 @@
+import React, { MouseEvent, KeyboardEvent, ReactNode, Fragment } from "react";
+import { isFunction } from "lodash-es";
+import { TagInputChangeContext, TagInputValue, TdTagInputProps } from "../type";
+import { InputValue } from "../../input";
+import { Tag } from "../../tag";
+import useConfig from "../../hooks/useConfig";
+import useControlled from "../../hooks/useControlled";
+import { DragSortInnerProps } from "../../hooks/useDragSorter";
+
+export type ChangeParams = [TagInputChangeContext];
+
+interface TagInputProps extends TdTagInputProps, DragSortInnerProps {
+  options?: unknown[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
+
+export default function useTagList(props: TagInputProps) {
+  const { classPrefix: prefix } = useConfig();
+  const { onRemove, max, minCollapsedNum, size, disabled, readonly, tagProps, tag, collapsedItems, getDragProps } =
+    props;
+  const [tagValue, setTagValue] = useControlled(props, "value", props.onChange);
+
+  const onClose = (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => {
+    const arr = [...tagValue];
+    const [item] = arr.splice(p.index, 1);
+    setTagValue(arr, { trigger: "tag-remove", ...p, item });
+    onRemove?.({ ...p, item, trigger: "tag-remove", value: arr });
+  };
+
+  const clearAll = (context: { e: MouseEvent<SVGSVGElement> }) => {
+    setTagValue([], { trigger: "clear", e: context.e });
+  };
+
+  // 按下 Enter 键，新增标签
+  const onInnerEnter = (value: InputValue, context: { e: KeyboardEvent<HTMLInputElement> }) => {
+    const valueStr = value ? String(value).trim() : "";
+    let newValue: TagInputValue = tagValue;
+    const isLimitExceeded = max && tagValue?.length >= max;
+    if (valueStr && !isLimitExceeded) {
+      newValue = tagValue instanceof Array ? tagValue.concat(String(valueStr)) : [valueStr];
+      setTagValue(newValue, {
+        trigger: "enter",
+        index: newValue.length - 1,
+        item: valueStr,
+        e: context.e
+      });
+    }
+    props?.onEnter?.(newValue, { ...context, inputValue: value });
+  };
+
+  const onInputBackspaceKeyUp = (_value: InputValue) => {
+    if (!tagValue || !tagValue.length) return;
+  };
+
+  // 按下回退键，删除标签
+  const onInputBackspaceKeyDown = (value: InputValue, context: { e: KeyboardEvent<HTMLInputElement> }) => {
+    const { e } = context;
+    if (!tagValue || !tagValue.length || readonly) return;
+    // 回车键删除，输入框值为空时，才允许 Backspace 删除标签
+    if (!value && ["Backspace", "NumpadDelete"].includes(e.key)) {
+      const index = tagValue.length - 1;
+      const item = tagValue[index];
+      const trigger = "backspace";
+      const newValue = tagValue.slice(0, -1);
+      setTagValue(newValue, { e, index, item, trigger });
+      onRemove?.({ e, index, item, trigger, value: newValue });
+    }
+  };
+
+  const renderLabel = ({ displayNode, label }: { displayNode: ReactNode; label: ReactNode }) => {
+    const newList = minCollapsedNum ? tagValue.slice(0, minCollapsedNum) : tagValue;
+
+    const list = displayNode
+      ? [<Fragment key="display-node">{displayNode}</Fragment>]
+      : newList?.map((item, index) => {
+          const tagContent = isFunction(tag) ? tag({ value: item }) : tag;
+          return (
+            <Tag
+              key={index}
+              size={size}
+              disabled={disabled}
+              onClose={(context) => onClose({ e: context.e, index })}
+              closable={!readonly && !disabled}
+              {...getDragProps?.(index, item)}
+              {...tagProps}
+            >
+              {tagContent ?? item}
+            </Tag>
+          );
+        });
+    if (label) {
+      list?.unshift(
+        <div className={`${prefix}-tag-input__prefix`} key="label">
+          {label}
+        </div>
+      );
+    }
+    // 超出省略
+    if (newList.length !== tagValue.length) {
+      const len = tagValue.length - newList.length;
+      // 这里会从selectInput/SelectInput中传递options参数，用于自定义选中项呈现的内容和多选状态下设置折叠项内容
+      const options = Array.isArray(props?.options) ? props.options : tagValue;
+      const params = {
+        value: tagValue,
+        count: tagValue.length - minCollapsedNum,
+        collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
+        collapsedSelectedItems: options.slice(minCollapsedNum, tagValue.length),
+        onClose
+      };
+      const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;
+      list.push(
+        <Fragment key="more">
+          {more ?? (
+            <Tag size={size} {...tagProps}>
+              +{len}
+            </Tag>
+          )}
+        </Fragment>
+      );
+    }
+    return list;
+  };
+  return {
+    tagValue,
+    clearAll,
+    onClose,
+    onInnerEnter,
+    onInputBackspaceKeyDown,
+    onInputBackspaceKeyUp,
+    renderLabel
+  };
+}

package/tag-input/hooks/useTagScroll.ts

@@ -0,0 +1,105 @@
+/**
+ * 当标签数量过多时，输入框显示不下，则需要滚动查看，以下为滚动逻辑
+ * 如果标签过多时的处理方式，是标签省略，则不需要此功能
+ */
+
+import { isFunction } from "lodash-es";
+import { useRef, useEffect, useState, WheelEvent } from "react";
+import { TdTagInputProps } from "../type";
+
+let mouseEnterTimer: ReturnType<typeof setTimeout> | null = null;
+
+export default function useTagScroll(props: TdTagInputProps) {
+  const tagInputRef = useRef<{ currentElement: HTMLDivElement }>(null);
+  const { excessTagsDisplayType = "scroll", readonly, disabled } = props;
+  // 允许向右滚动的最大距离
+  const [scrollDistance, setScrollDistance] = useState(0);
+  const [scrollElement, setScrollElement] = useState<HTMLDivElement>();
+
+  const updateScrollElement = (element: HTMLDivElement) => {
+    const scrollElement = element.children[0] as HTMLDivElement;
+    setScrollElement(scrollElement);
+  };
+
+  const updateScrollDistance = () => {
+    if (!scrollElement) return;
+    setScrollDistance(scrollElement.scrollWidth - scrollElement.clientWidth);
+  };
+
+  const scrollTo = (distance: number) => {
+    if (isFunction(scrollElement?.scroll)) {
+      scrollElement.scroll({ left: distance, behavior: "smooth" });
+    }
+  };
+
+  const scrollToRight = () => {
+    updateScrollDistance();
+    scrollTo(scrollDistance);
+  };
+
+  const scrollToLeft = () => {
+    scrollTo(0);
+  };
+
+  // TODO：MAC 电脑横向滚动，Windows 纵向滚动。当前只处理了横向滚动
+  const onWheel = ({ e }: { e: WheelEvent<HTMLDivElement> }) => {
+    if (readonly || disabled) return;
+    if (!scrollElement) return;
+    if (e.deltaX > 0) {
+      const distance = Math.min(scrollElement.scrollLeft + 120, scrollDistance);
+      scrollTo(distance);
+    } else {
+      const distance = Math.max(scrollElement.scrollLeft - 120, 0);
+      scrollTo(distance);
+    }
+  };
+
+  // 鼠标 hover，自动滑动到最右侧，以便输入新标签
+  const scrollToRightOnEnter = () => {
+    if (excessTagsDisplayType !== "scroll") return;
+    // 一闪而过的 mousenter 不需要执行
+    mouseEnterTimer = setTimeout(() => {
+      scrollToRight();
+      if (mouseEnterTimer) clearTimeout(mouseEnterTimer);
+    }, 100);
+  };
+
+  const scrollToLeftOnLeave = () => {
+    if (excessTagsDisplayType !== "scroll") return;
+    scrollTo(0);
+    if (mouseEnterTimer) {
+      clearTimeout(mouseEnterTimer);
+    }
+  };
+
+  const clearScroll = () => {
+    if (mouseEnterTimer) clearTimeout(mouseEnterTimer);
+  };
+
+  const initScroll = (element: HTMLDivElement) => {
+    if (!element) return;
+    updateScrollElement(element);
+  };
+
+  useEffect(() => {
+    if (tagInputRef.current) initScroll(tagInputRef?.current?.currentElement);
+    return clearScroll;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    initScroll,
+    clearScroll,
+    tagInputRef,
+    scrollElement,
+    scrollDistance,
+    scrollTo,
+    scrollToRight,
+    scrollToLeft,
+    updateScrollElement,
+    updateScrollDistance,
+    onWheel,
+    scrollToRightOnEnter,
+    scrollToLeftOnLeave
+  };
+}

package/tag-input/index.ts

@@ -0,0 +1,9 @@
+import _TagInput from "./TagInput";
+import "./style/index.js";
+
+export * from "./type";
+
+export type { TagInputProps } from "./TagInput";
+
+export const TagInput = _TagInput;
+export default TagInput;

package/tag-input/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/tag-input/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/tag-input/_index.scss";

package/tag-input/type.ts

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

package/tag-input/useTagList.tsx

@@ -0,0 +1,131 @@
+import React, { MouseEvent, KeyboardEvent, ReactNode, Fragment } from "react";
+import { isFunction } from "lodash-es";
+import { TagInputChangeContext, TagInputValue, TdTagInputProps } from "./type";
+import { InputValue } from "../input";
+import { Tag } from "../tag";
+import useConfig from "../hooks/useConfig";
+import useControlled from "../hooks/useControlled";
+import { DragSortInnerProps } from "../hooks/useDragSorter";
+
+export type ChangeParams = [TagInputChangeContext];
+
+interface TagInputProps extends TdTagInputProps, DragSortInnerProps {
+  options?: unknown[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
+
+export default function useTagList(props: TagInputProps) {
+  const { classPrefix: prefix } = useConfig();
+  const { onRemove, max, minCollapsedNum, size, disabled, readonly, tagProps, tag, collapsedItems, getDragProps } =
+    props;
+  const [tagValue, setTagValue] = useControlled(props, "value", props.onChange);
+
+  const onClose = (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => {
+    const arr = [...tagValue];
+    const [item] = arr.splice(p.index, 1);
+    setTagValue(arr, { trigger: "tag-remove", ...p, item });
+    onRemove?.({ ...p, item, trigger: "tag-remove", value: arr });
+  };
+
+  const clearAll = (context: { e: MouseEvent<SVGSVGElement> }) => {
+    setTagValue([], { trigger: "clear", e: context.e });
+  };
+
+  // 按下 Enter 键，新增标签
+  const onInnerEnter = (value: InputValue, context: { e: KeyboardEvent<HTMLInputElement> }) => {
+    const valueStr = value ? String(value).trim() : "";
+    let newValue: TagInputValue = tagValue;
+    const isLimitExceeded = max && tagValue?.length >= max;
+    if (valueStr && !isLimitExceeded) {
+      newValue = tagValue instanceof Array ? tagValue.concat(String(valueStr)) : [valueStr];
+      setTagValue(newValue, {
+        trigger: "enter",
+        index: newValue.length - 1,
+        item: valueStr,
+        e: context.e
+      });
+    }
+    props?.onEnter?.(newValue, { ...context, inputValue: value });
+  };
+
+  const onInputBackspaceKeyUp = () => {
+    if (!tagValue || !tagValue.length) return;
+  };
+
+  // 按下回退键，删除标签
+  const onInputBackspaceKeyDown = (value: InputValue, context: { e: KeyboardEvent<HTMLInputElement> }) => {
+    const { e } = context;
+    if (!tagValue || !tagValue.length || readonly) return;
+    // 回车键删除，输入框值为空时，才允许 Backspace 删除标签
+    if (!value && ["Backspace", "NumpadDelete"].includes(e.key)) {
+      const index = tagValue.length - 1;
+      const item = tagValue[index];
+      const trigger = "backspace";
+      const newValue = tagValue.slice(0, -1);
+      setTagValue(newValue, { e, index, item, trigger });
+      onRemove?.({ e, index, item, trigger, value: newValue });
+    }
+  };
+
+  const renderLabel = ({ displayNode, label }: { displayNode: ReactNode; label: ReactNode }) => {
+    const newList = minCollapsedNum ? tagValue.slice(0, minCollapsedNum) : tagValue;
+
+    const list = displayNode
+      ? [<Fragment key="display-node">{displayNode}</Fragment>]
+      : newList?.map((item, index) => {
+          const tagContent = isFunction(tag) ? tag({ value: item }) : tag;
+          return (
+            <Tag
+              key={index}
+              size={size}
+              disabled={disabled}
+              onClose={(context) => onClose({ e: context.e, index })}
+              closable={!readonly && !disabled}
+              {...getDragProps?.(index, item)}
+              {...tagProps}
+            >
+              {tagContent ?? item}
+            </Tag>
+          );
+        });
+    if (label) {
+      list?.unshift(
+        <div className={`${prefix}-tag-input__prefix`} key="label">
+          {label}
+        </div>
+      );
+    }
+    // 超出省略
+    if (newList.length !== tagValue.length) {
+      const len = tagValue.length - newList.length;
+      // 这里会从selectInput/SelectInput中传递options参数，用于自定义选中项呈现的内容和多选状态下设置折叠项内容
+      const options = Array.isArray(props?.options) ? props.options : tagValue;
+      const params = {
+        value: tagValue,
+        count: tagValue.length - minCollapsedNum,
+        collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
+        collapsedSelectedItems: options.slice(minCollapsedNum, tagValue.length) as TagInputValue,
+        onClose
+      };
+      const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;
+      list.push(
+        <Fragment key="more">
+          {more ?? (
+            <Tag size={size} {...tagProps}>
+              +{len}
+            </Tag>
+          )}
+        </Fragment>
+      );
+    }
+    return list;
+  };
+  return {
+    tagValue,
+    clearAll,
+    onClose,
+    onInnerEnter,
+    onInputBackspaceKeyDown,
+    onInputBackspaceKeyUp,
+    renderLabel
+  };
+}

package/utils/composeRefs.ts

@@ -0,0 +1,14 @@
+import { Ref } from "react";
+
+// 同时处理多个 ref
+export default function composeRefs<T>(...refs: Ref<T>[]) {
+  return (instance: T) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref) {
+        (ref as { current: T }).current = instance;
+      }
+    }
+  };
+}

package/utils/dom.ts

@@ -0,0 +1,29 @@
+import { isString } from "lodash-es";
+
+export const canUseDocument = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+
+export const getWindowSize = (): { width: number; height: number } => {
+  if (!canUseDocument) {
+    return { width: 0, height: 0 };
+  }
+  return {
+    width: window.innerWidth || document.documentElement.clientWidth,
+    height: window.innerHeight || document.documentElement.clientHeight
+  };
+};
+
+export const getAttach = (
+  node: string | HTMLElement | (() => string | HTMLElement) | null | undefined
+): HTMLElement | null => {
+  const attachNode = typeof node === "function" ? node() : node;
+  if (!attachNode) {
+    return document.body;
+  }
+  if (isString(attachNode)) {
+    return document.querySelector(attachNode);
+  }
+  if (attachNode instanceof HTMLElement) {
+    return attachNode;
+  }
+  return document.body;
+};

package/utils/forwardRefWithStatics.ts

@@ -0,0 +1,12 @@
+import React, { RefAttributes, forwardRef } from "react";
+import hoistNonReactStatics from "hoist-non-react-statics";
+
+export default function forwardRefWithStatics<P, T = HTMLElement, S = Record<string, unknown>>(
+  component: React.ForwardRefRenderFunction<T, P>,
+  statics?: S
+): React.FunctionComponent<P & RefAttributes<T>> & S {
+  return hoistNonReactStatics(
+    forwardRef(component as React.ForwardRefRenderFunction<T, P>),
+    statics as S
+  ) as React.FunctionComponent<P & RefAttributes<T>> & S;
+}

package/utils/getScrollbarWidth.ts

@@ -0,0 +1,11 @@
+/**
+ * @description: Calculate scroll bar width
+ * @param container  Container used to calculate scrollbar width
+ * @default container: document.body
+ */
+export function getScrollbarWidth(container: HTMLElement = document.body) {
+  if (container === document.body) {
+    return window.innerWidth - document.documentElement.clientWidth;
+  }
+  return container.offsetWidth - container.clientWidth;
+}