@tendaui/components 1.0.0

package/hooks/useControlled.ts

@@ -0,0 +1,39 @@
+import { upperFirst } from "lodash-es";
+import React from "react";
+type DefaultOptions<T extends string> = `default${Capitalize<T>}`;
+export interface ChangeHander<T, P extends unknown[]> {
+  (value: T, ...args: P): void;
+}
+type ToString<T extends string | number | symbol> = T extends string ? T : `${Extract<T, number>}`;
+const useControlled: <P extends unknown[], R extends object, K extends keyof R>(
+  props: R,
+  valueKey: K,
+  onChange: ChangeHander<R[K], P>,
+  defaultOptions?: { [key in DefaultOptions<ToString<K>>]: R[K] }
+) => [R[K], ChangeHander<R[K], P>] = (
+  props,
+  valueKey, // 默认受控属性为 value
+  onChange,
+  defaultOptions = {}
+) => {
+  const isControlled = Reflect.has(props, valueKey);
+  // 受控属性
+  const value = props[valueKey];
+
+  // 默认值
+  const defaultKey = `default${upperFirst(valueKey as string)}`;
+  const defaultValue = defaultOptions[defaultKey as keyof typeof defaultOptions] || props[defaultKey];
+
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+
+  if (isControlled) return [value, onChange || (() => {})];
+  return [
+    internalValue,
+    (newValue, ...args) => {
+      setInternalValue(newValue);
+      onChange?.(newValue, ...args);
+    }
+  ];
+};
+
+export default useControlled;

package/hooks/useDefaultProps.ts

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+
+// defaultProps 将于 19.0.0 废弃，故需实现 hook 在组件内部兼容
+// https://github.com/facebook/react/pull/16210
+export default function useDefaultProps<T>(originalProps: T, defaultProps: Partial<T>): T {
+  return useMemo<T>(() => {
+    const props: Partial<T> = Object.assign({}, originalProps);
+    Object.keys(defaultProps).forEach((key) => {
+      // https://github.com/facebook/react/blob/main/packages/react/src/jsx/ReactJSXElement.js#L733-L740
+      if (props[key] === undefined) {
+        props[key] = defaultProps[key];
+      }
+    });
+    return props as T;
+  }, [originalProps, defaultProps]);
+}

package/hooks/useDomCallback.ts

@@ -0,0 +1,13 @@
+import { useCallback, useState } from "react";
+
+export default function useDomRefCallback<T extends HTMLElement>() {
+  const [refCurrent, setRefCurrent] = useState<T | null>(null);
+
+  const refCallback = useCallback((dom: T | null) => {
+    if (dom) {
+      setRefCurrent(dom);
+    }
+  }, []);
+
+  return [refCurrent, refCallback] as const;
+}

package/hooks/useDomRefCallback.ts

@@ -0,0 +1,12 @@
+import { useCallback, useState } from "react";
+
+// https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
+export default function useDomRefCallback(): [HTMLElement, React.Dispatch<React.SetStateAction<HTMLElement>>] {
+  const [refCurrent, setRefCurrent] = useState<HTMLElement>();
+
+  useCallback((dom: HTMLElement) => {
+    if (dom) setRefCurrent(dom);
+  }, []);
+
+  return [refCurrent, setRefCurrent];
+}

package/hooks/useDragSorter.tsx

@@ -0,0 +1,151 @@
+import { useCallback, useState } from "react";
+import useEventCallback from "./useEventCallback";
+
+interface DragSortProps<T> {
+  sortOnDraggable: boolean;
+  onDragSort?: (context: DragSortContext<T>) => void;
+  onDragOverCheck?: {
+    x?: boolean;
+    targetClassNameRegExp?: RegExp;
+  };
+}
+
+type DragFnType<T = unknown> = (e?: React.DragEvent<HTMLTableRowElement>, index?: number, record?: T) => void;
+interface DragSortInnerData<T = unknown> {
+  dragging?: boolean;
+  draggable?: boolean;
+  onDragStart?: DragFnType<T>;
+  onDragOver?: DragFnType<T>;
+  onDrop?: DragFnType<T>;
+  onDragEnd?: DragFnType<T>;
+}
+
+export interface DragSortInnerProps<T = unknown> extends DragSortInnerData<T> {
+  getDragProps?: (index?: number, record?: T) => DragSortInnerData<T>;
+}
+
+export interface DragSortContext<T> {
+  currentIndex: number;
+  current: T;
+  targetIndex: number;
+  target: T;
+}
+
+function useDragSorter<T>(props: DragSortProps<T>): DragSortInnerProps<T> {
+  const { sortOnDraggable, onDragSort, onDragOverCheck } = props;
+  const [draggingIndex, setDraggingIndex] = useState(-1);
+  const [dragStartData, setDragStartData] = useState(null);
+  const [isDropped, setIsDropped] = useState(null);
+  const [startInfo, setStartInfo] = useState({
+    nodeX: 0,
+    nodeWidth: 0,
+    mouseX: 0
+  });
+  const onDragSortEvent = useEventCallback(onDragSort as (context: DragSortContext<T>) => void);
+
+  const onDragOver = useCallback(
+    (e, index, record: T) => {
+      e.preventDefault();
+      if (draggingIndex === index || draggingIndex === -1) return;
+      if (onDragOverCheck?.targetClassNameRegExp && !onDragOverCheck?.targetClassNameRegExp.test(e.target?.className)) {
+        return;
+      }
+
+      if (onDragOverCheck?.x) {
+        if (!startInfo.nodeWidth) return;
+
+        const { x, width } = e.target.getBoundingClientRect();
+        const targetNodeMiddleX = x + width / 2;
+        const clientX = e.clientX || 0;
+        const draggingNodeLeft = clientX - (startInfo.mouseX - startInfo.nodeX);
+        const draggingNodeRight = draggingNodeLeft + startInfo.nodeWidth;
+
+        let overlap = false;
+        if (draggingNodeLeft > x && draggingNodeLeft < x + width) {
+          overlap = draggingNodeLeft < targetNodeMiddleX;
+        } else {
+          overlap = draggingNodeRight > targetNodeMiddleX;
+        }
+        if (!overlap) return;
+      }
+
+      onDragSortEvent({
+        currentIndex: draggingIndex,
+        current: dragStartData,
+        target: record,
+        targetIndex: index
+      });
+      setDraggingIndex(index);
+    },
+    [
+      draggingIndex,
+      onDragOverCheck?.targetClassNameRegExp,
+      onDragOverCheck?.x,
+      dragStartData,
+      startInfo.nodeWidth,
+      startInfo.mouseX,
+      startInfo.nodeX,
+      onDragSortEvent
+    ]
+  );
+
+  if (!sortOnDraggable) {
+    return {};
+  }
+
+  function onDragStart(e, index, record: T) {
+    setDraggingIndex(index);
+    setDragStartData(record);
+    if (onDragOverCheck) {
+      const { x, width } = e.target.getBoundingClientRect();
+      setStartInfo({
+        nodeX: x,
+        nodeWidth: width,
+        mouseX: e.clientX || 0
+      });
+    }
+  }
+
+  function onDrop() {
+    setIsDropped(true);
+  }
+  function onDragEnd() {
+    if (!isDropped) {
+      // 取消排序，待扩展 api，输出 dragStartData
+    }
+    setIsDropped(false);
+    setDraggingIndex(-1);
+    setDragStartData(null);
+  }
+  function getDragProps(index, record: T) {
+    if (sortOnDraggable) {
+      return {
+        draggable: true,
+        onDragStart: (e) => {
+          onDragStart(e, index, record);
+        },
+        onDragOver: (e) => {
+          onDragOver(e, index, record);
+        },
+        onDrop: () => {
+          onDrop();
+        },
+        onDragEnd: () => {
+          onDragEnd();
+        }
+      };
+    }
+    return {};
+  }
+
+  return {
+    onDragStart,
+    onDragOver,
+    onDrop,
+    onDragEnd,
+    getDragProps,
+    dragging: draggingIndex !== -1
+  };
+}
+
+export default useDragSorter;

package/hooks/useEventCallback.ts

@@ -0,0 +1,47 @@
+// https://github.com/scottrippey/react-use-event-hook/blob/75ba34af9175dc311afb3fb302d6fea44e4a5203/src/useEvent.ts
+// [RFC](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md)
+import React from "react";
+import noop from "../utils/noop";
+
+type AnyFunction = (...args: unknown[]) => unknown;
+
+/**
+ * Suppress the warning when using useLayoutEffect with SSR. (https://reactjs.org/link/uselayouteffect-ssr)
+ * Make use of useInsertionEffect if available.
+ */
+const useInsertionEffect = typeof window !== "undefined" ? React.useInsertionEffect || React.useLayoutEffect : noop;
+
+/**
+ * Render methods should be pure, especially when concurrency is used,
+ * so we will throw this error if the callback is called while rendering.
+ */
+function useEventCallbackShouldNotBeInvokedBeforeMount() {
+  throw new Error(
+    "INVALID_USEEVENTCALLBACK_INVOCATION: the callback from useEventCallback cannot be invoked before the component has mounted."
+  );
+}
+
+/**
+ * Similar to useCallback, with a few subtle differences:
+ * - The returned function is a stable reference, and will always be the same between renders
+ * - No dependency lists required
+ * - Properties or state accessed within the callback will always be "current"
+ */
+export default function useEventCallback<TCallback extends AnyFunction>(callback: TCallback): TCallback {
+  // Keep track of the latest callback:
+  const latestRef = React.useRef<TCallback>(useEventCallbackShouldNotBeInvokedBeforeMount as TCallback);
+  useInsertionEffect(() => {
+    latestRef.current = callback;
+  }, [callback]);
+
+  // Create a stable callback that always calls the latest callback:
+  // using useRef instead of useCallback avoids creating and empty array on every render
+  const stableRef = React.useRef<TCallback>(null);
+  if (!stableRef.current) {
+    stableRef.current = function (...args: Parameters<TCallback>) {
+      return latestRef.current(...args);
+    } as TCallback;
+  }
+
+  return stableRef.current;
+}

package/hooks/useGlobalConfig.ts

@@ -0,0 +1,14 @@
+import useConfig from "./useConfig";
+
+// 从 globalConfig 获取 icon 配置用于覆盖组件内置 icon
+export default function useGlobalIcon(tdIcon: Record<string, unknown>) {
+  const { icon: globalIcon } = useConfig();
+
+  const resultIcon = {};
+
+  Object.keys(tdIcon).forEach((key) => {
+    resultIcon[key] = globalIcon?.[key] || tdIcon[key];
+  });
+
+  return resultIcon;
+}

package/hooks/useGlobalIcon.ts

@@ -0,0 +1,14 @@
+import useConfig from "./useConfig";
+import Icon from "@tendaui/icons";
+// 从 globalConfig 获取 icon 配置用于覆盖组件内置 icon
+export default function useGlobalIcon(tdIcon: Record<string, typeof Icon>) {
+  const { icon: globalIcon } = useConfig();
+
+  const resultIcon: Record<string, typeof Icon> = {};
+
+  Object.keys(tdIcon).forEach((key) => {
+    resultIcon[key] = globalIcon?.[key] || tdIcon[key];
+  });
+
+  return resultIcon;
+}

package/hooks/useLastest.ts

@@ -0,0 +1,13 @@
+import { useRef, useEffect } from "react";
+
+const useLatest = <T>(value: T) => {
+  const ref = useRef(value);
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref;
+};
+
+export default useLatest;

package/hooks/useLayoutEffect.ts

@@ -0,0 +1,7 @@
+import { useLayoutEffect, useEffect } from "react";
+import { canUseDocument } from "../utils/dom";
+// 兼容 SSR 环境
+// 在浏览器环境中使用 useLayoutEffect，否则使用 useEffect
+const useIsomorphicLayoutEffect = canUseDocument ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;

package/hooks/useMouseEvent.ts

@@ -0,0 +1,142 @@
+import { useEffect, useRef } from "react";
+
+export type MouseEventLike = MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent;
+export type MouseCallback = MouseEvent | React.MouseEvent | Touch | React.Touch;
+
+/**
+ * 鼠标相对当前元素的坐标
+ */
+export interface MouseCoordinate {
+  x: number;
+  y: number;
+}
+export interface MouseContext {
+  coordinate: MouseCoordinate;
+}
+
+type MouseEventOptions = {
+  enabled?: boolean;
+  enableTouch?: boolean; // 支持触摸事件
+  onDown?: (e: MouseCallback, ctx: MouseContext) => void;
+  onMove?: (e: MouseCallback, ctx: MouseContext) => void;
+  onUp?: (e: MouseCallback, ctx: MouseContext) => void;
+  onEnter?: (e: MouseCallback, ctx: MouseContext) => void;
+  onLeave?: (e: MouseCallback, ctx: MouseContext) => void;
+};
+
+const useMouseEvent = (elementRef: React.RefObject<HTMLElement | null>, options: MouseEventOptions) => {
+  const { enabled = true, enableTouch = true } = options;
+  const isMovingRef = useRef(false);
+
+  const normalizeEvent = (e: MouseEventLike) => {
+    if (!enableTouch) {
+      return e as MouseEvent;
+    }
+    if ("touches" in e && e.touches.length > 0) {
+      return e.touches[0];
+    }
+    if ("changedTouches" in e && e.changedTouches.length > 0) {
+      return e.changedTouches[0];
+    }
+    if ("clientX" in e && "clientY" in e) {
+      return e as MouseEvent;
+    }
+    return undefined;
+  };
+
+  const getCoordinate = (event: MouseCallback) => {
+    const rect = elementRef?.current?.getBoundingClientRect();
+    if (!rect) {
+      return { x: 0, y: 0 };
+    }
+    const { clientX, clientY } = event;
+    const left = clientX - rect.left;
+    const top = clientY - rect.top;
+    return {
+      x: Math.min(Math.max(0, left), rect.width),
+      y: Math.min(Math.max(0, top), rect.height)
+    };
+  };
+
+  const emitMouseChange = (e: MouseEventLike, handler?: (e: MouseCallback, ctx: MouseContext) => void) => {
+    if (!handler) return;
+    const event = normalizeEvent(e);
+    if (event !== undefined) {
+      const coordinate = getCoordinate(event);
+      handler(event, { coordinate });
+    }
+  };
+
+  const handleMouseMove = (e: MouseEventLike) => {
+    if (!isMovingRef.current) return;
+    e.preventDefault();
+    emitMouseChange(e, options.onMove);
+  };
+
+  const handleMouseUp = (e: MouseEventLike) => {
+    if (!isMovingRef.current) return;
+    isMovingRef.current = false;
+    emitMouseChange(e, options.onUp);
+    document.removeEventListener("mouseup", handleMouseUp);
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("touchend", handleMouseUp);
+    document.removeEventListener("touchmove", handleMouseMove);
+  };
+
+  const handleMouseDown = (e: MouseEventLike) => {
+    isMovingRef.current = true;
+    emitMouseChange(e, options.onDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("mousemove", handleMouseMove);
+    if (!enableTouch) return;
+    document.addEventListener("touchend", handleMouseUp);
+    document.addEventListener("touchmove", handleMouseMove, { passive: false });
+  };
+
+  const handleMouseEnter = (e: MouseEventLike) => {
+    emitMouseChange(e, options.onEnter);
+  };
+
+  const handleMouseLeave = (e: MouseEventLike) => {
+    emitMouseChange(e, options.onLeave);
+  };
+
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el || !enabled) return;
+
+    // 基本上只要开启了鼠标事件，就会用到这三个
+    // 有的组件虽然只需要 mousemove 的回调结果，但也需要 mousedown 和 mouseup 来控制状态
+    el.addEventListener("mousedown", handleMouseDown);
+    el.addEventListener("mousemove", handleMouseMove);
+    el.addEventListener("mouseup", handleMouseUp);
+    // 下面这两个一般是为了处理 hover 状态，可选性监听
+    if (options.onEnter) {
+      el.addEventListener("mouseenter", handleMouseEnter);
+    }
+    if (options.onLeave) {
+      el.addEventListener("mouseleave", handleMouseLeave);
+    }
+
+    if (!enableTouch) return;
+    el.addEventListener("touchstart", handleMouseDown, { passive: false });
+    el.addEventListener("touchend", handleMouseUp);
+
+    return () => {
+      el.removeEventListener("mousedown", handleMouseDown);
+      el.removeEventListener("mouseenter", handleMouseDown);
+      el.removeEventListener("mouseleave", handleMouseLeave);
+      el.removeEventListener("mousemove", handleMouseMove);
+      el.removeEventListener("mouseup", handleMouseUp);
+      el.removeEventListener("touchstart", handleMouseDown);
+      el.removeEventListener("touchend", handleMouseUp);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef.current, options, enabled]);
+
+  return {
+    isMoving: isMovingRef.current
+  };
+};
+
+export default useMouseEvent;

package/hooks/useMutationObserver.ts

@@ -0,0 +1,56 @@
+import { useRef, useEffect } from "react";
+import { debounce, isEqual } from "lodash-es";
+import useLatest from "./useLastest";
+
+const DEFAULT_OPTIONS = {
+  debounceTime: 0,
+  config: {
+    attributes: true,
+    childList: true,
+    characterData: true,
+    subtree: true
+  } as MutationObserverInit
+};
+
+type Options = typeof DEFAULT_OPTIONS;
+
+export default function useMutationObservable(
+  targetEl: HTMLElement | null,
+  cb: MutationCallback,
+  options = DEFAULT_OPTIONS
+) {
+  const optionsRef = useRef<Options>(null);
+  const signalRef = useRef(0);
+  const callbackRef = useLatest(cb);
+
+  if (!isEqual(options, optionsRef.current)) {
+    signalRef.current += 1;
+  }
+
+  optionsRef.current = options;
+
+  useEffect(() => {
+    if (!targetEl || !targetEl?.nodeType) return;
+    let observer: MutationObserver | null = null;
+    try {
+      if (optionsRef.current !== null) {
+        const { debounceTime, config } = optionsRef.current;
+        const mutationCallback: MutationCallback = (...args) => {
+          callbackRef.current(...args);
+        };
+        observer = new MutationObserver(debounceTime > 0 ? debounce(mutationCallback, debounceTime) : mutationCallback);
+        observer.observe(targetEl, config);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetEl, signalRef.current]);
+}