@tendaui/components 1.0.0

package/hooks/usePopper.ts

@@ -0,0 +1,189 @@
+// https://github.com/floating-ui/react-popper/blob/master/src/usePopper.js
+// React popper was archived by the owner on Dec 6, 2024.
+// to maintain this hook in the repo since upgrading to support React 19.0
+import { useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import {
+  createPopper as defaultCreatePopper,
+  type Options as PopperOptions,
+  type VirtualElement,
+  type State as PopperState,
+  type Instance as PopperInstance
+} from "@popperjs/core";
+
+import isEqual from "react-fast-compare";
+import useIsomorphicLayoutEffect from "./useLayoutEffect";
+import type { Styles } from "../common";
+
+type Options = Partial<
+  PopperOptions & {
+    createPopper: typeof defaultCreatePopper;
+  }
+>;
+
+type Attributes = {
+  [key: string]: { [key: string]: string };
+};
+
+type State = {
+  styles: Record<string, Styles>;
+  attributes: Attributes;
+};
+
+import type { ModifierPhases } from "@popperjs/core";
+
+interface Modifier {
+  name: string;
+  enabled?: boolean;
+  phase?: ModifierPhases;
+  fn?: (data: { state: PopperState }) => void;
+  requires?: string[];
+}
+
+const EMPTY_MODIFIERS: Modifier[] = [];
+
+type UsePopperResult = {
+  state?: PopperState;
+  styles: Record<string, Styles>;
+  attributes: Attributes;
+  update: PopperInstance["update"] | null;
+  forceUpdate: PopperInstance["forceUpdate"] | null;
+};
+
+const fromEntries = <T>(entries: Array<[string, T]>): Record<string, T> =>
+  entries.reduce(
+    (acc, [key, value]) => {
+      acc[key] = value;
+      return acc;
+    },
+    {} as Record<string, T>
+  );
+
+const usePopper = (
+  referenceElement?: Element | VirtualElement,
+  popperElement?: HTMLElement,
+  options: Options = {}
+): UsePopperResult => {
+  const prevOptions = useRef<PopperOptions>(null);
+
+  const optionsWithDefaults = {
+    onFirstUpdate: options.onFirstUpdate,
+    placement: options.placement || "bottom",
+    strategy: options.strategy || "absolute",
+    modifiers: options.modifiers || EMPTY_MODIFIERS
+  };
+
+  const [state, setState] = useState<State>({
+    styles: {
+      popper: {
+        position: optionsWithDefaults.strategy,
+        left: "0",
+        top: "0"
+      },
+      arrow: {
+        position: "absolute"
+      }
+    },
+    attributes: {}
+  });
+
+  const updateStateModifier = useMemo(
+    () => ({
+      name: "updateState",
+      enabled: true,
+      phase: "write" as ModifierPhases,
+      fn: ({ state }: { state: PopperState }) => {
+        const elements = Object.keys(state.elements);
+
+        flushSync(() => {
+          setState({
+            styles: fromEntries(elements.map((element) => [element, state.styles[element] || {}])) as Record<
+              string,
+              Styles
+            >,
+            attributes: fromEntries(elements.map((element) => [element, state.attributes[element]])) as Attributes
+          });
+        });
+      },
+      requires: ["computeStyles"]
+    }),
+    []
+  );
+
+  const popperOptions = useMemo(() => {
+    const newOptions = {
+      onFirstUpdate: optionsWithDefaults.onFirstUpdate,
+      placement: optionsWithDefaults.placement,
+      strategy: optionsWithDefaults.strategy,
+      modifiers: [
+        ...optionsWithDefaults.modifiers,
+        updateStateModifier,
+        {
+          name: "applyStyles",
+          enabled: false,
+          phase: "write" as ModifierPhases
+        }
+      ]
+    };
+
+    // 使用 setTimeout 避免在渲染期间访问 ref
+    setTimeout(() => {
+      if (!isEqual(prevOptions.current, newOptions)) {
+        prevOptions.current = newOptions;
+      }
+    }, 0);
+
+    return newOptions;
+  }, [
+    optionsWithDefaults.onFirstUpdate,
+    optionsWithDefaults.placement,
+    optionsWithDefaults.strategy,
+    optionsWithDefaults.modifiers,
+    updateStateModifier
+  ]);
+
+  const popperInstanceRef = useRef<PopperInstance | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    if (popperInstanceRef.current) {
+      popperInstanceRef.current.setOptions(popperOptions);
+    }
+  }, [popperOptions]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (referenceElement == null || popperElement == null) {
+      return;
+    }
+
+    const createPopper = options.createPopper || defaultCreatePopper;
+    const popperInstance = createPopper(referenceElement, popperElement, popperOptions);
+
+    popperInstanceRef.current = popperInstance;
+
+    return () => {
+      popperInstance.destroy();
+      popperInstanceRef.current = null;
+    };
+  }, [referenceElement, popperElement, options.createPopper]);
+
+  const getPopperInstance = () => popperInstanceRef.current;
+
+  return {
+    get state() {
+      const instance = getPopperInstance();
+      return instance ? instance.state : undefined;
+    },
+    styles: state.styles,
+    attributes: state.attributes,
+    get update() {
+      const instance = getPopperInstance();
+      return instance ? instance.update : null;
+    },
+    get forceUpdate() {
+      const instance = getPopperInstance();
+      return instance ? instance.forceUpdate : null;
+    }
+  };
+};
+
+export default usePopper;

package/hooks/useSetState.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react";
+
+const isFunction = (arg: unknown) => typeof arg === "function";
+
+/**
+ * 管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。
+ * @param initialState
+ * @returns [state, setMergeState]
+ */
+const useSetState = <T extends object>(
+  initialState: T = {} as T
+): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void] => {
+  const [state, setState] = useState<T>(initialState);
+
+  const setMergeState = useCallback((patch: ((prevState: T) => Partial<T>) | Partial<T>) => {
+    setState((prevState) => ({
+      ...prevState,
+      ...(isFunction(patch) ? patch(prevState) : patch)
+    }));
+  }, []);
+
+  return [state, setMergeState];
+};
+
+export default useSetState;

package/hooks/useVirtualScroll.ts

@@ -0,0 +1,246 @@
+/**
+ * 通用虚拟滚动，可支持 Select/List/Table/TreeSelect/Cascader 等组件
+ */
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
+import { isEqual } from "lodash-es";
+import type { ScrollToElementParams, TScroll } from "../common";
+
+export type UseVirtualScrollParams = {
+  /** 列数据 */
+  data: { [key: string]: unknown }[];
+  scroll: TScroll & {
+    fixedRows?: Array<number>;
+  };
+};
+
+const requestAnimationFrame =
+  (typeof window === "undefined" ? false : window.requestAnimationFrame) || ((cb) => setTimeout(cb, 16.6));
+
+const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseVirtualScrollParams) => {
+  const { data, scroll } = params;
+  const dataRef = useRef(data);
+
+  /** 注意测试：数据长度为空；数据长度小于表格高度等情况。即期望只有数据量达到一定程度才允许开启虚拟滚动 */
+  const [visibleData, setVisibleData] = useState<unknown[]>([]);
+  // 滚动过程中表格顶部占位距离
+  const [translateY, setTranslateY] = useState(() => (data?.length || 0) * (scroll?.rowHeight || 50));
+  // 滚动高度，用于显示滚动条
+  const [scrollHeight, setScrollHeight] = useState(0);
+  const trScrollTopHeightList = useRef<number[]>([]);
+  // 已经通过节点渲染计算出来的各自行高
+  const [trHeightList, setTrHeightList] = useState<number[]>([]);
+  const containerHeight = useRef(0);
+  const [startAndEndIndex, setStartAndEndIndex] = useState<[number, number]>(() => [0, (scroll?.bufferSize || 10) * 3]);
+
+  // 设置初始值
+  const tScroll = useMemo(() => {
+    if (!scroll) return {};
+    return {
+      bufferSize: scroll.bufferSize || 10,
+      isFixedRowHeight: scroll.isFixedRowHeight ?? false,
+      rowHeight: scroll.rowHeight || 47,
+      threshold: scroll.threshold || 100,
+      type: scroll.type,
+      fixedRows: scroll.fixedRows ?? [0, 0]
+    };
+  }, [scroll]);
+
+  // 当前场景是否满足开启虚拟滚动的条件
+  const isVirtualScroll = useMemo(() => tScroll.type === "virtual" && tScroll.threshold < data.length, [tScroll, data]);
+  const getTrScrollTopHeightList = (trHeightList: number[]) => {
+    const list: number[] = [];
+    // 大数据场景不建议使用 forEach 一类函数迭代
+    // 当前行滚动高度 = 上一行滚动高度 + 当前行高度
+    for (let i = 0, len = data.length; i < len; i++) {
+      list[i] = (list[i - 1] || 0) + (trHeightList[i] || tScroll.rowHeight);
+    }
+    return list;
+  };
+
+  const updateVisibleData = (trScrollTopHeightList: number[], scrollTop: number) => {
+    let currentIndex = -1;
+    // 获取当前滚动到哪一个元素（大数据场景不建议使用 forEach 一类函数迭代）
+    for (let i = 0, len = trScrollTopHeightList.length; i < len; i++) {
+      if (trScrollTopHeightList[i] >= scrollTop) {
+        currentIndex = i;
+        break;
+      }
+    }
+    let lastIndex = trScrollTopHeightList.length;
+    const containerCurrentHeight = containerHeight.current || container.current.getBoundingClientRect().height;
+    const scrollBottom = scrollTop + containerCurrentHeight;
+    // 获取当前视窗的最后一个元素（大数据场景不建议使用 forEach 一类函数迭代）
+    for (let i = currentIndex, len = trScrollTopHeightList.length; i < len; i++) {
+      if (trScrollTopHeightList[i] >= scrollBottom) {
+        lastIndex = i;
+        break;
+      }
+    }
+    if (currentIndex < 0) return;
+    const startIndex = Math.max(currentIndex - tScroll.bufferSize, 0);
+    const endIndex = Math.min(lastIndex + tScroll.bufferSize, trScrollTopHeightList.length);
+
+    // 计算固定行情况
+    const { fixedRows } = tScroll;
+    const [fixedStart, fixedEnd] = fixedRows;
+    let fixedStartData = fixedStart ? data.slice(0, fixedStart) : [];
+    if (fixedStart && startIndex < fixedStart) {
+      fixedStartData = fixedStartData.slice(0, startIndex);
+    }
+    let fixedEndData = fixedEnd ? data.slice(data.length - fixedEnd) : [];
+    const bottomStartIndex = endIndex - data.length + 1 + (fixedEnd ?? 0);
+    if (fixedEnd && bottomStartIndex > 0) {
+      fixedEndData = fixedEndData.slice(bottomStartIndex);
+    }
+
+    if (startAndEndIndex.join() !== [startIndex, endIndex].join() && startIndex >= 0) {
+      const tmpVisibleData = fixedStartData.concat(data.slice(startIndex, endIndex)).concat(fixedEndData);
+      setVisibleData(tmpVisibleData);
+      const lastScrollTop = trScrollTopHeightList[startIndex - 1];
+      const top = lastScrollTop > 0 ? lastScrollTop : 0;
+      const stickyHeight = trScrollTopHeightList[Math.min(startIndex, fixedStart) - 1] || 0;
+      setTranslateY(top - stickyHeight);
+      setStartAndEndIndex([startIndex, endIndex]);
+    }
+  };
+
+  // 仅非固定高度场景需要
+  const handleRowMounted = (rowData: { ref: HTMLElement; data: { __VIRTUAL_SCROLL_INDEX: number } }) => {
+    if (!isVirtualScroll || !rowData || tScroll.isFixedRowHeight || !container?.current) return;
+    const trHeight = rowData.ref.offsetHeight;
+
+    const rowIndex = rowData.data.__VIRTUAL_SCROLL_INDEX;
+    const newTrHeightList = [...trHeightList];
+    if (newTrHeightList[rowIndex] !== trHeight) {
+      newTrHeightList[rowIndex] = trHeight;
+      setTrHeightList(newTrHeightList);
+
+      const scrollTopHeightList = getTrScrollTopHeightList(newTrHeightList);
+      trScrollTopHeightList.current = scrollTopHeightList;
+
+      const lastIndex = scrollTopHeightList.length - 1;
+      setScrollHeight(scrollTopHeightList[lastIndex] - containerHeight.current);
+      updateVisibleData(scrollTopHeightList, container.current.scrollTop);
+    }
+  };
+
+  const handleScroll = () => {
+    if (!isVirtualScroll) return;
+    updateVisibleData(trScrollTopHeightList.current, container.current.scrollTop);
+  };
+
+  const addIndexToData = (data: { [key: string]: unknown }[]) => {
+    data.forEach((item, index) => {
+      Reflect.set(item, "__VIRTUAL_SCROLL_INDEX", index);
+    });
+  };
+
+  const updateScrollTop = ({ index, top = 0, behavior }: ScrollToElementParams) => {
+    const scrollTop = trScrollTopHeightList.current[index] - top;
+    container.current?.scrollTo({
+      top: scrollTop,
+      behavior: behavior || "auto"
+    });
+  };
+
+  /**
+   * 滚动到指定元素（对外暴露的方法，谨慎修改）
+   */
+  const scrollToElement = (p: ScrollToElementParams) => {
+    updateScrollTop(p);
+    if (!tScroll.isFixedRowHeight) {
+      requestAnimationFrame(() => {
+        const duration = p.time ?? 60;
+        const timer = setTimeout(() => {
+          updateScrollTop(p);
+          clearTimeout(timer);
+        }, duration);
+      });
+    }
+  };
+
+  // 固定高度场景，可直接通过数据长度计算出最大滚动高度
+  useEffect(
+    () => {
+      if (!isVirtualScroll) {
+        trScrollTopHeightList.current = getTrScrollTopHeightList(trHeightList);
+        return;
+      }
+
+      // 给数据添加下标
+      addIndexToData(data);
+
+      const scrollTopHeightList = trScrollTopHeightList.current;
+      const dataChanged = !isEqual(dataRef.current, data);
+
+      if (scrollTopHeightList?.length === data?.length && !dataChanged) {
+        // 正常滚动时更新可见数据
+        const lastIndex = scrollTopHeightList.length - 1;
+        setScrollHeight(scrollTopHeightList[lastIndex]);
+
+        updateVisibleData(scrollTopHeightList, container.current.scrollTop);
+      } else {
+        /**
+        /* 进入这个分支的场景可能有：
+         * - 初始化
+         * - 从非虚拟滚动切换到虚拟滚动
+         * - 外部数据动态更新（长度变化、内容结构变化等）
+         */
+        dataRef.current = data;
+        setScrollHeight(data.length * tScroll.rowHeight);
+
+        // 如果之前存在滚动，基于原先数据计算位置
+        const currentScrollTop = container.current?.scrollTop || 0;
+        let currentIndex = Math.floor(currentScrollTop / tScroll.rowHeight);
+        const prevScrollTopHeightList = trScrollTopHeightList.current;
+        for (let i = 0; i < prevScrollTopHeightList?.length; i++) {
+          if (prevScrollTopHeightList[i] >= currentScrollTop) {
+            currentIndex = i;
+            break;
+          }
+        }
+
+        const startIndex = Math.max(currentIndex - tScroll.bufferSize, 0);
+        const visibleCount = Math.min(tScroll.bufferSize * 3, data.length);
+        const endIndex = Math.min(startIndex + visibleCount, data.length);
+        const tmpData = data.slice(startIndex, endIndex);
+
+        let translateY = startIndex * tScroll.rowHeight;
+
+        if (prevScrollTopHeightList?.length > 0 && startIndex > 0) {
+          const prevHeight = prevScrollTopHeightList[Math.min(startIndex - 1, prevScrollTopHeightList.length - 1)] || 0;
+          translateY = Math.max(0, prevHeight);
+        }
+
+        setVisibleData(tmpData);
+        setTranslateY(translateY);
+      }
+
+      const timer = setTimeout(() => {
+        if (container.current) {
+          const tmpContainerHeight = container.current.getBoundingClientRect().height;
+          containerHeight.current = tmpContainerHeight;
+          const scrollTopHeightList = getTrScrollTopHeightList(trHeightList);
+          trScrollTopHeightList.current = scrollTopHeightList;
+          clearTimeout(timer);
+        }
+      }, 1);
+    },
+    // eslint-disable-next-line
+    [container, data, tScroll, isVirtualScroll, startAndEndIndex, trHeightList]
+  );
+
+  return {
+    visibleData,
+    translateY,
+    scrollHeight,
+    isVirtualScroll,
+    handleScroll,
+    handleRowMounted,
+    scrollToElement
+  };
+};
+
+export type VirtualScrollConfig = ReturnType<typeof useVirtualScroll>;
+
+export default useVirtualScroll;

package/hooks/useWindowSize.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { debounce } from "lodash-es";
+import { getWindowSize } from "../utils/dom";
+
+export interface WindowSize {
+  width: number;
+  height: number;
+}
+
+function useWindowSize(): WindowSize {
+  const [size, setSize] = useState(getWindowSize);
+
+  useEffect(() => {
+    function handleResize() {
+      setSize(getWindowSize());
+    }
+
+    const debounceResize = debounce(handleResize, 400);
+
+    window.addEventListener("resize", debounceResize);
+
+    return () => {
+      window.removeEventListener("resize", debounceResize);
+      debounceResize.cancel();
+    };
+  }, []);
+
+  return size;
+}
+
+export default useWindowSize;

package/index.ts

@@ -0,0 +1,70 @@
+// export * from './grid';
+export * from "./loading";
+export * from "./popup";
+export * from "./button";
+export * from "./input";
+// export * from './input-adornment';
+export * from "./alert";
+export * from "./badge";
+// export * from './radio';
+export * from "./checkbox";
+// export * from './input-number';
+export * from "./config-provider";
+// export * from './steps';
+// export * from './sticky-tool';
+// export * from './message';
+// export * from './table';
+export * from "./tag";
+export * from "./tag-input";
+export * from "./select";
+export * from "./select-input";
+// export * from './list';
+// export * from './tabs';
+export * from "./notification";
+// export * from './pagination';
+// export * from './menu';
+export * from "./dialog";
+// export * from './tree';
+// export * from './tree-select';
+// export * from './divider';
+export * from "./switch";
+// export * from './anchor';
+// export * from './calendar';
+export * from "./form";
+// export * from './tooltip';
+// export * from './drawer';
+// export * from './progress';
+// export * from './popconfirm';
+// export * from './textarea';
+// export * from './breadcrumb';
+// export * from './affix';
+// export * from './dropdown';
+// export * from './slider';
+// export * from './auto-complete';
+// export * from './cascader';
+// export * from './time-picker';
+// export * from './date-picker';
+// export * from './upload';
+// export * from './swiper';
+// export * from './comment';
+// export * from './transfer';
+// export * from './avatar';
+// export * from './skeleton';
+// export * from './color-picker';
+// export * from './card';
+// export * from './collapse';
+// export * from './range-input';
+// export * from './watermark';
+// export * from './image-viewer';
+// export * from './space';
+// export * from './timeline';
+// export * from './image';
+// export * from './rate';
+// export * from './link';
+// export * from './guide';
+// export * from './back-top';
+// export * from './statistic';
+// export * from './descriptions';
+// export * from './empty';
+// export * from './typography';
+// export * from './qrcode';