@tendaui/components 1.0.0

package/popup/hooks/useTrigger.ts

@@ -0,0 +1,276 @@
+import React, { useRef, useEffect, isValidElement, useCallback, useMemo } from "react";
+import { isFragment } from "react-is";
+import { supportRef, getRefDom, getNodeRef } from "../../utils/refs";
+import composeRefs from "../../utils/composeRefs";
+import { off, on } from "../../utils/listener";
+import classNames from "classnames";
+import { TNode } from "../../common";
+const ESC_KEY = "Escape";
+
+interface UseTriggerProps {
+  content: TNode;
+  disabled?: boolean;
+  trigger: "hover" | "click" | "mousedown" | "focus" | "context-menu" | undefined;
+  visible: boolean | undefined;
+  onVisibleChange: (
+    visible: boolean,
+    context: {
+      e?:
+        | React.MouseEvent<HTMLElement>
+        | React.TouchEvent<HTMLElement>
+        | React.FocusEvent<HTMLElement>
+        | React.KeyboardEvent<HTMLElement>;
+      trigger: string;
+    }
+  ) => void;
+  triggerRef: React.RefObject<HTMLElement>;
+  delay?: number | [number, number] | number[];
+}
+
+export default function useTrigger({
+  content,
+  disabled,
+  trigger,
+  visible,
+  onVisibleChange,
+  triggerRef,
+  delay
+}: UseTriggerProps) {
+  const hasPopupMouseDown = useRef(false);
+  const mouseDownTimer = useRef(0);
+  const visibleTimer = useRef(null);
+  const triggerDataKey = useRef<string>("");
+  const leaveFlag = useRef(false); // 防止多次触发显隐
+
+  // 在 effect 中初始化 triggerDataKey，避免在渲染期间调用不纯函数
+  useEffect(() => {
+    if (!triggerDataKey.current) {
+      triggerDataKey.current = `t-popup--${Math.random().toFixed(10)}`;
+    }
+  }, []);
+
+  // 禁用和无内容时不展示
+  const shouldToggle = useMemo(() => {
+    if (disabled) return false; // 禁用
+    return !disabled && content === 0 ? true : content; // 无内容时
+  }, [disabled, content]);
+
+  // 解析 delay 数据类型
+  const [appearDelay = 0, exitDelay = 0] = useMemo(() => {
+    if (Array.isArray(delay)) return delay;
+    return [delay, delay];
+  }, [delay]);
+
+  function callFuncWithDelay({ delay, callback }: { delay?: number; callback: () => void }) {
+    if (delay) {
+      clearTimeout(visibleTimer.current);
+      visibleTimer.current = setTimeout(callback, delay);
+    } else {
+      callback();
+    }
+  }
+
+  // 点击 trigger overlay 以外的元素关闭
+  useEffect(() => {
+    if (!shouldToggle) return;
+
+    const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
+      if (getRefDom(triggerRef)?.contains?.(e.target as Node) || hasPopupMouseDown.current) {
+        return;
+      }
+      if (visible) {
+        onVisibleChange(false, { trigger: "document" });
+      }
+    };
+    on(document, "mousedown", handleDocumentClick);
+    on(document, "touchend", handleDocumentClick);
+
+    // 清理事件监听
+    return () => {
+      off(document, "mousedown", handleDocumentClick);
+      off(document, "touchend", handleDocumentClick);
+    };
+  }, [shouldToggle, visible, onVisibleChange, triggerRef]);
+
+  // 弹出内容交互处理
+  function getPopupProps(): React.HTMLAttributes<HTMLElement> {
+    if (!shouldToggle) return {};
+
+    return {
+      onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
+        console.log("popup mouse enter");
+        // leaveFlag表示是从 trigger 元素 hover 过来的，避免频繁显示隐藏
+        if (trigger === "hover" && !leaveFlag.current) {
+          // 清除延迟显示定时器
+          clearTimeout(visibleTimer.current);
+          // 立即显示
+          onVisibleChange(true, { e, trigger: "trigger-element-hover" });
+        }
+      },
+      onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
+        console.log("popup mouse leave");
+        if (trigger === "hover") {
+          // 防止 鼠标移出后，马上移入 popup 元素，导致 popup 重新显示 特别是有延迟显示时 是一个防抖标志
+          leaveFlag.current = true;
+
+          // 清除延迟显示定时器
+          clearTimeout(visibleTimer.current);
+          // 立即隐藏
+          onVisibleChange(false, { e, trigger: "trigger-element-hover" });
+        }
+      },
+      onMouseDown: () => {
+        //  清除鼠标按下定时器
+        clearTimeout(mouseDownTimer.current);
+        // 鼠标按下时，触发 useEffect 中的 document click 事件，点击trigger和popup元素 不需要隐藏
+        hasPopupMouseDown.current = true;
+        mouseDownTimer.current = window.setTimeout(() => {
+          // 事件处理完毕后，重置标志
+          hasPopupMouseDown.current = false;
+        });
+      },
+      // 触摸结束时,和mouseDown 类似
+
+      onTouchEnd: () => {
+        clearTimeout(mouseDownTimer.current);
+        hasPopupMouseDown.current = true;
+        mouseDownTimer.current = window.setTimeout(() => {
+          hasPopupMouseDown.current = false;
+        });
+      }
+    };
+  }
+
+  // 整理 trigger props
+  function getTriggerProps(triggerNode: React.ReactElement<React.HTMLAttributes<HTMLElement>>) {
+    if (!shouldToggle) return {};
+
+    const triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> } = {
+      className: visible ? classNames(triggerNode.props.className, `t-popup-open`) : triggerNode.props.className,
+      onMouseDown: (e: React.MouseEvent<HTMLElement>) => {
+        if (trigger === "mousedown") {
+          callFuncWithDelay({
+            delay: visible ? appearDelay : exitDelay,
+            callback: () =>
+              onVisibleChange(!visible, {
+                e,
+                trigger: "trigger-element-mousedown"
+              })
+          });
+        }
+        triggerNode.props.onMouseDown?.(e);
+      },
+      onClick: (e: React.MouseEvent<HTMLElement>) => {
+        if (trigger === "click") {
+          callFuncWithDelay({
+            // appearDelay 和 exitDelay 分别表示点击时的延迟显示和隐藏
+            delay: visible ? appearDelay : exitDelay,
+            callback: () =>
+              onVisibleChange(!visible, {
+                e,
+                trigger: "trigger-element-click"
+              })
+          });
+        }
+        triggerNode.props.onClick?.(e);
+      },
+      onTouchStart: (e: React.TouchEvent<HTMLElement>) => {
+        if (trigger === "hover" || trigger === "mousedown") {
+          // leaveFlag 表示是从 trigger 元素 hover 过来的，避免频繁显示隐藏
+          leaveFlag.current = false;
+          callFuncWithDelay({
+            delay: appearDelay,
+            callback: () => onVisibleChange(true, { e, trigger: "trigger-element-hover" })
+          });
+        }
+        triggerNode.props.onTouchStart?.(e);
+      },
+      onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
+        if (trigger === "hover") {
+          leaveFlag.current = false;
+          callFuncWithDelay({
+            delay: appearDelay,
+            callback: () => onVisibleChange(true, { e, trigger: "trigger-element-hover" })
+          });
+        }
+        triggerNode.props.onMouseEnter?.(e);
+      },
+      onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
+        if (trigger === "hover") {
+          leaveFlag.current = false;
+          callFuncWithDelay({
+            delay: exitDelay,
+            callback: () => onVisibleChange(false, { e, trigger: "trigger-element-hover" })
+          });
+        }
+        triggerNode.props.onMouseLeave?.(e);
+      },
+      onFocus: (e: React.FocusEvent<HTMLElement>) => {
+        if (trigger === "focus") {
+          callFuncWithDelay({
+            delay: appearDelay,
+            callback: () => onVisibleChange(true, { e, trigger: "trigger-element-focus" })
+          });
+        }
+        triggerNode.props.onFocus?.(e);
+      },
+      onBlur: (e: React.FocusEvent<HTMLElement>) => {
+        if (trigger === "focus") {
+          callFuncWithDelay({
+            delay: appearDelay,
+            callback: () => onVisibleChange(false, { e, trigger: "trigger-element-blur" })
+          });
+        }
+        triggerNode.props.onBlur?.(e);
+      },
+      onContextMenu: (e: React.MouseEvent<HTMLElement>) => {
+        if (trigger === "context-menu") {
+          e.preventDefault();
+          callFuncWithDelay({
+            delay: appearDelay,
+            callback: () => onVisibleChange(true, { e, trigger: "context-menu" })
+          });
+        }
+        triggerNode.props.onContextMenu?.(e);
+      },
+      onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => {
+        if (e?.key === ESC_KEY) {
+          callFuncWithDelay({
+            delay: exitDelay,
+            callback: () => onVisibleChange(false, { e, trigger: "keydown-esc" })
+          });
+        }
+        triggerNode.props.onKeyDown?.(e);
+      }
+    };
+    // 如果支持 ref 透传，composeRefs 返回一个函数，当组件挂载时，执行函数，triggerRef 和 tiggerNode 指向触发元素的dom
+    if (supportRef(triggerNode)) {
+      triggerProps.ref = composeRefs(triggerRef, getNodeRef(triggerNode));
+    } else {
+      // 标记 trigger 元素
+      triggerProps["data-popup"] = triggerDataKey.current;
+    }
+
+    return triggerProps;
+  }
+
+  // 整理 trigger 元素
+  function getTriggerNode(children: React.ReactNode) {
+    const triggerNode =
+      isValidElement(children) && !isFragment(children) ? children : React.createElement("span", {}, children);
+
+    return React.cloneElement(triggerNode, getTriggerProps(triggerNode));
+  }
+
+  // ref 透传失败时使用 dom 查找
+  const getTriggerDom = useCallback(() => {
+    if (typeof document === "undefined") return {};
+    return document.querySelector(`[data-popup="${triggerDataKey.current}"]`);
+  }, []);
+
+  return {
+    getTriggerNode,
+    getPopupProps,
+    getTriggerDom
+  };
+}

package/popup/index.ts

@@ -0,0 +1,6 @@
+import _Popup from "./Popup";
+import "./style/index";
+export type { PopupProps, PopupRef } from "./Popup";
+export * from "./type";
+export const Popup = _Popup;
+export default Popup;

package/popup/style/css.js

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

package/popup/style/index.js

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

package/popup/type.ts

@@ -0,0 +1,130 @@
+import { TNode, ClassName, Styles, AttachNode } from "../common";
+import { MouseEvent, KeyboardEvent, FocusEvent, WheelEvent } from "react";
+
+export interface TdPopupProps {
+  /**
+   * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default 'body'
+   */
+  attach?: AttachNode;
+  /**
+   * 触发元素，同 triggerElement
+   */
+  children?: TNode;
+  /**
+   * 浮层里面的内容
+   */
+  content?: TNode;
+  /**
+   * 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]
+   */
+  delay?: number | Array<number>;
+  /**
+   * 是否在关闭浮层时销毁浮层
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 是否禁用组件
+   */
+  disabled?: boolean;
+  /**
+   * 浮层是否隐藏空内容，默认不隐藏
+   * @default false
+   */
+  hideEmptyPopup?: boolean;
+  /**
+   * 浮层类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`
+   */
+  overlayClassName?: ClassName;
+  /**
+   * 浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`
+   */
+  overlayInnerClassName?: ClassName;
+  /**
+   * 浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点
+   */
+  overlayInnerStyle?: Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles);
+  /**
+   * 浮层样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点
+   */
+  overlayStyle?: Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles);
+  /**
+   * 浮层出现位置
+   * @default top
+   */
+  placement?: PopupPlacement;
+  /**
+   * popper 初始化配置，详情参考 https://popper.js.org/docs/
+   */
+  popperOptions?: object;
+  /**
+   * 是否显示浮层箭头
+   * @default false
+   */
+  showArrow?: boolean;
+  /**
+   * 触发浮层出现的方式
+   * @default hover
+   */
+  trigger?: "hover" | "click" | "focus" | "mousedown" | "context-menu";
+  /**
+   * 触发元素。值类型为字符串表示元素选择器
+   */
+  triggerElement?: TNode;
+  /**
+   * 是否显示浮层
+   */
+  visible?: boolean;
+  /**
+   * 是否显示浮层，非受控属性
+   */
+  defaultVisible?: boolean;
+  /**
+   * 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500
+   */
+  zIndex?: number;
+  /**
+   * 下拉选项滚动事件
+   */
+  onScroll?: (context: { e: WheelEvent<HTMLDivElement> }) => void;
+  /**
+   * 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑
+   */
+  onScrollToBottom?: (context: { e: WheelEvent<HTMLDivElement> }) => void;
+  /**
+   * 当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发
+   */
+  onVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void;
+}
+
+export type PopupPlacement =
+  | "top"
+  | "left"
+  | "right"
+  | "bottom"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "left-top"
+  | "left-bottom"
+  | "right-top"
+  | "right-bottom";
+
+export interface PopupVisibleChangeContext {
+  e?: PopupTriggerEvent;
+  trigger?: PopupTriggerSource;
+}
+
+export type PopupTriggerEvent = MouseEvent<HTMLDivElement> | FocusEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+
+export type PopupTriggerSource =
+  | "document"
+  | "trigger-element-click"
+  | "trigger-element-hover"
+  | "trigger-element-blur"
+  | "trigger-element-focus"
+  | "trigger-element-mousedown"
+  | "context-menu"
+  | "keydown-esc";

package/portal/Portal.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, useMemo, useImperativeHandle } from "react";
+import { createPortal } from "react-dom";
+import { canUseDocument } from "../utils/dom";
+import { AttachNode, AttachNodeReturnValue } from "../common";
+import useIsomorphicLayoutEffect from "../hooks/useLayoutEffect";
+
+export interface PortalProps {
+  /**
+   * 指定挂载的 HTML 节点, false 为挂载在 body
+   */
+  attach?: React.ReactElement | AttachNode | boolean;
+  /**
+   * 触发元素
+   */
+  triggerNode?: HTMLElement;
+  children: React.ReactNode;
+}
+// 获取挂载的 HTML 节点
+
+export function getAttach(attach: PortalProps["attach"], triggerNode?: HTMLElement): AttachNodeReturnValue {
+  if (!canUseDocument) return null;
+
+  let el: AttachNodeReturnValue = null;
+  if (typeof attach === "string") {
+    el = document.querySelector(attach);
+  }
+  if (typeof attach === "function") {
+    el = attach(triggerNode);
+  }
+  if (typeof attach === "object" && attach instanceof window.HTMLElement) {
+    el = attach;
+  }
+
+  // fix el in iframe
+  if (el && el.nodeType === 1) return el;
+
+  return document.body;
+}
+
+const Portal = forwardRef((props: PortalProps, ref) => {
+  const { attach, children, triggerNode } = props;
+  const container = useMemo(() => {
+    const div = document.createElement("div");
+    div.className = "portal-container bg-primary";
+    return div;
+  }, []);
+  // 兼容 SSR 环境
+  useIsomorphicLayoutEffect(() => {
+    const parentElement = getAttach(attach, triggerNode);
+    parentElement?.appendChild?.(container);
+    // Clean up the container when the component unmounts
+    return () => {
+      parentElement?.removeChild?.(container);
+    };
+  }, [container, attach, triggerNode]);
+  // 自定义暴露给父组件的ref是container
+  useImperativeHandle(ref, () => container);
+
+  return canUseDocument ? createPortal(children, container) : null;
+});
+
+Portal.displayName = "Portal";
+export default Portal;

package/portal/index.ts

@@ -0,0 +1 @@
+export * from "./Portal";

package/select/Option.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useMemo } from "react";
+import classNames from "classnames";
+import { isNumber, isString, get } from "lodash-es";
+
+import useConfig from "../hooks/useConfig";
+import useDomRefCallback from "../hooks/useDomRefCallback";
+
+import { StyledProps } from "../common";
+import { SelectValue, TdOptionProps, TdSelectProps, SelectKeysType, SelectOption } from "./type";
+
+export interface SelectOptionProps
+  extends StyledProps,
+    TdOptionProps,
+    Pick<TdSelectProps, "size" | "multiple" | "max"> {
+  selectedValue?: SelectValue;
+  children?: React.ReactNode;
+  onSelect?: (
+    value: string | number,
+    context: {
+      label?: string;
+      selected?: boolean;
+      event: React.MouseEvent<HTMLLIElement>;
+      restData?: Record<string, unknown>;
+    }
+  ) => void;
+  onCheckAllChange?: (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => void;
+  restData?: Record<string, unknown>;
+  keys?: SelectKeysType;
+  optionLength?: number;
+  isVirtual?: boolean;
+  onRowMounted?: (rowData: { ref: HTMLElement; data: SelectOption }) => void;
+}
+
+const componentType = "select";
+
+const Option: React.FC<SelectOptionProps> = (props) => {
+  const {
+    disabled: propDisabled,
+    label: propLabel,
+    title: propTitle,
+    selectedValue,
+    checkAll,
+    multiple,
+    size,
+    max,
+    keys,
+    value,
+    onSelect,
+    children,
+    content,
+    restData,
+    style,
+    className,
+    isVirtual
+  } = props;
+  let selected: boolean;
+  let indeterminate: boolean;
+  const label = propLabel || value;
+  const disabled = propDisabled || (multiple && Array.isArray(selectedValue) && max && selectedValue.length >= max);
+
+  const titleContent = useMemo(() => {
+    // 外部设置 props，说明希望受控
+    const controlledTitle = Reflect.has(props, "title");
+    if (controlledTitle) return propTitle;
+    if (typeof label === "string") return label;
+    return null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propTitle, label]);
+  const { classPrefix } = useConfig();
+  // 使用斜八角动画
+  const [optionRef, setRefCurrent] = useDomRefCallback();
+
+  useEffect(() => {
+    if (isVirtual && optionRef) {
+      props.onRowMounted?.({
+        ref: optionRef,
+        data: props
+      });
+    }
+    // eslint-disable-next-line
+  }, [isVirtual, optionRef]);
+
+  // 处理单选场景
+  if (!multiple) {
+    selected =
+      isNumber(selectedValue) || isString(selectedValue)
+        ? value === selectedValue
+        : value === get(selectedValue, keys?.value || "value");
+  }
+
+  // 处理多选场景
+  if (multiple && Array.isArray(selectedValue)) {
+    selected = selectedValue.some((item) => {
+      if (isNumber(item) || isString(item)) {
+        // 如果非 object 类型
+        return item === value;
+      }
+      return get(item, keys?.value || "value") === value;
+    });
+    if (props.checkAll) {
+      selected = selectedValue.length === props.optionLength;
+      indeterminate = selectedValue.length > 0 && !selected;
+    }
+  }
+
+  const handleSelect = (event: React.MouseEvent<HTMLLIElement>) => {
+    if (!disabled && !checkAll) {
+      if (value) onSelect?.(value, { label: String(label), selected, event, restData });
+    }
+    if (checkAll) {
+      props.onCheckAllChange?.(selected, event);
+    }
+  };
+
+  const renderItem = (children: React.ReactNode) => {
+    if (multiple) {
+      return (
+        <label
+          className={classNames(`${classPrefix}-checkbox`, {
+            [`${classPrefix}-is-indeterminate`]: indeterminate,
+            [`${classPrefix}-is-disabled`]: disabled,
+            [`${classPrefix}-is-checked`]: selected
+          })}
+          title={titleContent}
+        >
+          <input
+            type="checkbox"
+            className={classNames(`${classPrefix}-checkbox__former`)}
+            value=""
+            disabled={disabled && !selected}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.nativeEvent.stopImmediatePropagation();
+            }}
+          />
+          <span className={classNames(`${classPrefix}-checkbox__input`)}></span>
+          <span className={classNames(`${classPrefix}-checkbox__label`)}>{children || content || label}</span>
+        </label>
+      );
+    }
+    return <span title={titleContent}>{children || content || label}</span>;
+  };
+
+  return (
+    <li
+      className={classNames(className, `${classPrefix}-${componentType}-option`, {
+        [`${classPrefix}-is-disabled`]: disabled,
+        [`${classPrefix}-is-selected`]: selected,
+        [`${classPrefix}-size-s`]: size === "small",
+        [`${classPrefix}-size-l`]: size === "large"
+      })}
+      key={value}
+      onClick={handleSelect}
+      ref={setRefCurrent}
+      style={style}
+    >
+      {renderItem(children)}
+    </li>
+  );
+};
+
+export default Option;

package/select/OptionGroup.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+
+import { TdOptionGroupProps } from "./type";
+import { optionGroupDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface SelectGOptionGroupProps extends TdOptionGroupProps {
+  children?: React.ReactNode;
+}
+
+const OptionGroup: React.FC<SelectGOptionGroupProps> = (props) => {
+  const { children, label, divider } = useDefaultProps<SelectGOptionGroupProps>(props, optionGroupDefaultProps);
+
+  const { classPrefix } = useConfig();
+
+  return (
+    <li
+      className={classNames(`${classPrefix}-select-option-group`, {
+        [`${classPrefix}-select-option-group__divider`]: divider
+      })}
+    >
+      {(label ?? false) && <div className={`${classPrefix}-select-option-group__header`}>{label}</div>}
+      {children}
+    </li>
+  );
+};
+
+export default OptionGroup;