@tendaui/components 1.0.0

package/loading/Gradient.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, FC } from "react";
+import classnames from "classnames";
+import circleAdapter from "./circleAdapter";
+import useDomRefCallback from "../hooks/useDomRefCallback";
+import useConfig from "../hooks/useConfig";
+
+/**
+ * Loading组件 渐变部分实现
+ */
+const GradientLoading: FC = () => {
+  const { classPrefix } = useConfig();
+  const [conicRef, setConicRef] = useDomRefCallback();
+  const gradientClass = `${classPrefix}-loading__gradient`;
+
+  useEffect(() => {
+    const el = conicRef;
+    circleAdapter(el);
+  }, [conicRef]);
+
+  return (
+    <svg
+      className={classnames(gradientClass, `${classPrefix}-icon-loading`)}
+      viewBox="0 0 12 12"
+      version="1.1"
+      width="1em"
+      height="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <foreignObject x="0" y="0" width="12" height="12">
+        <div className={`${gradientClass}-conic`} ref={setConicRef} />
+      </foreignObject>
+    </svg>
+  );
+};
+
+export default GradientLoading;

package/loading/Loading.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useMemo, CSSProperties } from "react";
+import classnames from "classnames";
+import { canUseDocument } from "../utils/dom";
+import useConfig from "../hooks/useConfig";
+import { StyledProps } from "../common";
+import { TdLoadingProps } from "./type";
+import Portal from "../common/Portal";
+import Gradient from "./Gradient";
+import { loadingDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+import { addClass, removeClass } from "../utils/style";
+
+export interface LoadingProps extends TdLoadingProps, StyledProps {}
+
+const Loading: React.FC<LoadingProps> = (props) => {
+  const {
+    attach,
+    indicator,
+    text,
+    loading,
+    size,
+    delay,
+    fullscreen,
+    preventScrollThrough,
+    showOverlay,
+    content,
+    children,
+    inheritColor,
+    zIndex,
+    className,
+    style
+  } = useDefaultProps<LoadingProps>(props, loadingDefaultProps);
+
+  const [showLoading, setShowLoading] = useState(() => (delay ? false : loading));
+
+  const { classPrefix } = useConfig();
+
+  const name = `${classPrefix}-loading`;
+  const centerClass = `${classPrefix}-loading--center`;
+  const inheritColorClass = `${classPrefix}-loading--inherit-color`;
+  const fullClass = `${classPrefix}-loading--full`;
+  const fullscreenClass = `${classPrefix}-loading__fullscreen`;
+  const lockClass = `${classPrefix}-loading--lock`;
+  const overlayClass = `${classPrefix}-loading__overlay`;
+  const relativeClass = `${classPrefix}-loading__parent`;
+  const textClass = `${classPrefix}-loading__text`;
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (delay && loading) {
+      timer = setTimeout(() => {
+        setShowLoading(loading);
+      }, delay);
+    } else {
+      // Use setTimeout to avoid calling setState synchronously within an effect
+      setTimeout(() => {
+        setShowLoading(loading);
+      }, 0);
+    }
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [delay, loading]);
+
+  const calcStyles = useMemo<React.CSSProperties>(() => {
+    const styles: CSSProperties = {};
+
+    if (zIndex !== undefined) {
+      styles.zIndex = zIndex;
+    }
+
+    if (!["small", "medium", "large"].includes(size)) {
+      styles.fontSize = size;
+    }
+
+    return styles;
+  }, [size, zIndex]);
+
+  const sizeMap = {
+    large: `${classPrefix}-size-l`,
+    small: `${classPrefix}-size-s`,
+    medium: `${classPrefix}-size-m`
+  };
+
+  const baseClasses = classnames(
+    centerClass,
+    sizeMap[size],
+    {
+      [inheritColorClass]: inheritColor
+    },
+    className
+  );
+
+  useEffect(() => {
+    if (preventScrollThrough && fullscreen && canUseDocument && loading) {
+      addClass(document.body, lockClass);
+    }
+    return () => {
+      removeClass(document.body, lockClass);
+    };
+  }, [loading, preventScrollThrough, fullscreen, lockClass]);
+
+  const commonContent = () => {
+    let renderIndicator = <Gradient />;
+
+    if (indicator && typeof indicator !== "boolean") {
+      renderIndicator = indicator as React.ReactElement;
+    }
+    return (
+      <>
+        {indicator ? renderIndicator : null}
+        {text ? <div className={textClass}>{text}</div> : null}
+      </>
+    );
+  };
+
+  if (fullscreen) {
+    return loading ? (
+      <div className={classnames(name, fullscreenClass, centerClass, overlayClass)} style={{ ...calcStyles, ...style }}>
+        <div className={baseClasses}>{commonContent()}</div>
+      </div>
+    ) : null;
+  }
+
+  if (content || children) {
+    return (
+      <div className={relativeClass} style={style}>
+        {content || children}
+        {showLoading ? (
+          <div
+            className={classnames(name, baseClasses, fullClass, {
+              [overlayClass]: showOverlay
+            })}
+            style={calcStyles}
+          >
+            {commonContent()}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+  if (attach) {
+    return (
+      <Portal attach={attach}>
+        {loading ? (
+          <div
+            className={classnames(name, baseClasses, fullClass, {
+              [overlayClass]: showOverlay
+            })}
+            style={{ ...calcStyles, ...style }}
+          >
+            {commonContent()}
+          </div>
+        ) : null}
+      </Portal>
+    );
+  }
+
+  return loading ? (
+    <div className={classnames(name, baseClasses)} style={{ ...calcStyles, ...style }}>
+      {commonContent()}
+    </div>
+  ) : null;
+};
+
+Loading.displayName = "Loading";
+
+export default Loading;

package/loading/circleAdapter.ts

@@ -0,0 +1,44 @@
+import setStyle from "./utils/setStyle";
+import { getIEVersion } from "../utils/helper";
+
+export default function circleAdapter(circleElem: HTMLElement) {
+  let basicStyle = {};
+
+  if (!circleElem || typeof window === "undefined") {
+    return;
+  }
+
+  const computedStyle = window?.getComputedStyle?.(circleElem);
+  const { color, fontSize } = computedStyle || {};
+
+  // to fix the browser compat of foreignObject in Safari,
+  // https://bugs.webkit.org/show_bug.cgi?id=23113
+  const ua = window?.navigator?.userAgent || "";
+  const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua);
+  // 判断是否为 iOS 下的微信和企业微信
+  const isIosWechat = /(?=.*iPhone)[?=.*MicroMessenger]/.test(ua) && !/Chrome/.test(ua);
+  // 判断是否为 iPadOS 下的微信和企业微信
+  const isIpadWechat = /(?=.*iPad)[?=.*MicroMessenger]/.test(ua) && !/Chrome/.test(ua);
+
+  // 注意：chrome上调试mobile/ipad端时，loading出现异常，属于正常现象，不需要修改。
+  if (isSafari || isIosWechat || isIpadWechat) {
+    basicStyle = {
+      transformOrigin: "0px 0px",
+      transform: `scale(${parseInt(fontSize, 10) / 12})`
+    };
+  }
+  // 添加：判断是否为IE浏览器
+  if (color && getIEVersion() > 11) {
+    const matched = color.match(/[\d.]+/g);
+    const endColor = matched ? `rgba(${matched[0]}, ${matched[1]}, ${matched[2]}, 0)` : "";
+    setStyle(circleElem, {
+      ...basicStyle,
+      background: `conic-gradient(from 90deg at 50% 50%,${endColor} 0deg, ${color} 360deg)`
+    });
+  } else {
+    setStyle(circleElem, {
+      ...basicStyle,
+      background: ""
+    });
+  }
+}

package/loading/defaultProps.ts

@@ -0,0 +1,12 @@
+import { TdLoadingProps } from "./type";
+
+export const loadingDefaultProps: TdLoadingProps = {
+  delay: 0,
+  fullscreen: false,
+  indicator: true,
+  inheritColor: false,
+  loading: true,
+  preventScrollThrough: true,
+  showOverlay: true,
+  size: "medium"
+};

package/loading/index.ts

@@ -0,0 +1,13 @@
+import _Loading from "./Loading";
+// import { LoadingPlugin as _LoadingPlugin } from './plugin';
+
+import "./style/index.js";
+
+export type { LoadingProps } from "./Loading";
+export * from "./type";
+
+export const Loading = _Loading;
+// export const loading = _LoadingPlugin;
+// export const LoadingPlugin = _LoadingPlugin;
+
+export default Loading;

package/loading/style/css.js

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

package/loading/style/index.js

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

package/loading/type.ts

@@ -0,0 +1,71 @@
+import { TNode, AttachNode } from "../common";
+
+export interface TdLoadingProps {
+  /**
+   * 挂载元素，默认挂载到组件本身所在的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default ''
+   */
+  attach?: AttachNode;
+  /**
+   * 子元素，同 content
+   */
+  children?: TNode;
+  /**
+   * 子元素
+   */
+  content?: TNode;
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * 是否显示为全屏加载
+   * @default false
+   */
+  fullscreen?: boolean;
+  /**
+   * 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+   * @default true
+   */
+  indicator?: TNode;
+  /**
+   * 是否继承父元素颜色
+   * @default false
+   */
+  inheritColor?: boolean;
+  /**
+   * 是否处于加载状态
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * 防止滚动穿透，全屏加载模式有效
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否需要遮罩层，遮罩层对包裹元素才有效
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 尺寸，示例：small/medium/large/12px/56px/0.3em
+   * @default medium
+   */
+  size?: string;
+  /**
+   * 加载提示文案
+   */
+  text?: TNode;
+  /**
+   * 消息通知层级，样式默认为 3500
+   */
+  zIndex?: number;
+}
+
+export interface LoadingInstance {
+  hide: () => void;
+}
+
+export type LoadingMethod = (options: boolean | TdLoadingProps) => LoadingInstance;

package/loading/utils/setStyle.ts

@@ -0,0 +1,13 @@
+/**
+ * 用于为节点增加styles
+ * @param el HTMLElement
+ * @param style Styles
+ */
+function setStyle(el: HTMLElement, styles): void {
+  const keys = Object.keys(styles);
+  keys.forEach((key) => {
+    el.style[key] = styles[key];
+  });
+}
+
+export default setStyle;

package/notification/Notify.ts

@@ -0,0 +1,24 @@
+// notification.ts
+type NotificationType = "default" | "success" | "error" | "info" | "warning";
+type NotificationMessage = {
+  id: string;
+  type: NotificationType;
+  message: string;
+  title: string;
+};
+
+let addNotification: (notification: NotificationMessage) => void = () => {};
+
+export function notification(message: string, type: NotificationType = "default", title: string) {
+  const id = new Date().getTime().toString();
+  addNotification({
+    id,
+    message,
+    type,
+    title
+  });
+}
+
+export function registerNotificationHandler(cb: typeof addNotification) {
+  addNotification = cb;
+}

package/notification/NotifyContainer.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useState } from "react";
+import { TdNotificationProps } from "./type";
+import NotificationItem from "./NotifyItem";
+import useConfig from "../hooks/useConfig";
+export const GAP = 14;
+export const TOAST_WIDTH = 356;
+const NotificationContainer = ({
+  notifications,
+  onRemove,
+  onHoverStart,
+  onHoverEnd,
+  maxStack,
+  position
+}: {
+  notifications: TdNotificationProps[];
+  onRemove: (id: string) => void;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  maxStack: number;
+  position: string;
+}) => {
+  const [isHovering, setIsHovering] = useState(false);
+  const latestNotifications = notifications.slice(0, maxStack);
+  const [y, x] = position.split("-");
+  const handleMouseEnter = useCallback(() => {
+    setIsHovering(true);
+    onHoverStart();
+  }, [onHoverStart]);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovering(false);
+    onHoverEnd();
+  }, [onHoverEnd]);
+
+  const [heights, setHeights] = useState<{ toastId: string; height: number }[]>([]);
+
+  const { classPrefix: prefix } = useConfig();
+
+  return (
+    <div
+      className={`${prefix}-notify`}
+      style={
+        {
+          height: isHovering ? `${notifications.length * 100 + 16}px` : "auto",
+          minHeight: "80px",
+          "--front-toast-height": (heights[0]?.height || 0) + "px",
+          "--toast-width": TOAST_WIDTH + "px"
+        } as React.CSSProperties
+      }
+      data-toaster
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      data-x-position={x}
+      data-y-position={y}
+    >
+      <div
+        className={`${prefix}-notify__container`}
+        style={{
+          pointerEvents: "all"
+        }}
+      >
+        {latestNotifications.map((notification) => {
+          // const stackedStyle = !isHovering && !isLast;
+
+          // let offsetY = isHovering
+          //   ? index * 100 // 展开时，索引0在顶部
+          //   : stackedStyle
+          //   ? index * 8
+          //   : 0;
+
+          // const scale = stackedStyle ? 1 - index * 0.01 : 1;
+          // const opacity = stackedStyle ? 1 - index * 0.15 : 1;
+          return (
+            <NotificationItem
+              key={notification.id}
+              heights={heights}
+              setHeights={setHeights}
+              gap={GAP}
+              {...notification}
+              onRemove={onRemove}
+              isExpanded={isHovering}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationContainer;

package/notification/NotifyContext.tsx

@@ -0,0 +1,173 @@
+import React, { createContext, useState, useRef, useCallback, useContext } from "react";
+import { createPortal } from "react-dom";
+import NotifyContainer from "./NotifyContainer";
+
+// 1. 定义类型
+type NotificationType = "success" | "error" | "warning" | "info";
+
+interface Notification {
+  id: string;
+  type: NotificationType;
+  message: string;
+  createdAt: number;
+  isRemoved: boolean;
+  title: string;
+}
+
+// 2. 定义 Context 类型
+interface NotificationContextType {
+  notify: (type: NotificationType, message: Message) => void;
+  success: (message: Message) => void;
+  error: (message: Message) => void;
+  warning: (message: Message) => void;
+  info: (message: Message) => void;
+  removeNotification: (id: string) => void;
+}
+
+// 3. 创建 Context
+const NotificationContext = createContext<NotificationContextType | null>(null);
+
+// 4. 生成唯一 ID 的辅助函数
+const generateId = () => Math.random().toString(36).substr(2, 9);
+
+// 5. Provider 组件
+interface NotificationProviderProps {
+  children: React.ReactNode;
+  maxStack?: number;
+  displayDuration?: number;
+  position?: string;
+}
+
+type Message = {
+  title: string;
+  message: string;
+};
+export const NotificationProvider: React.FC<NotificationProviderProps> = ({
+  children,
+  maxStack = 5,
+  displayDuration = 3000,
+  position = "top-right"
+}) => {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const timersRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const pausedAtRef = useRef<Map<string, number>>(new Map());
+
+  // 定时器相关函数
+  const clearNotificationTimer = useCallback((id: string) => {
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
+  }, []);
+
+  const startTimer = useCallback(
+    (notification: Notification, remainingTime?: number) => {
+      const duration = remainingTime ?? displayDuration;
+      const timer = setTimeout(() => {
+        setNotifications((prev) => prev.map((n) => (n.id === notification.id ? { ...n, isRemoved: true } : n)));
+        setTimeout(() => {
+          setNotifications((prev) => prev.filter((t) => t.id !== notification.id));
+          clearNotificationTimer(notification.id);
+          pausedAtRef.current.delete(notification.id);
+        }, 400);
+      }, duration);
+      timersRef.current.set(notification.id, timer);
+    },
+    [displayDuration, clearNotificationTimer]
+  );
+
+  // 6. 核心通知函数
+  const addNotification = useCallback(
+    (type: NotificationType, message: Message) => {
+      const newNotification: Notification = {
+        id: generateId(),
+        type,
+        title: message.title,
+        message: message.message,
+        createdAt: Date.now(),
+        isRemoved: false
+      };
+
+      setNotifications((prev) => {
+        const newNotifications = [newNotification, ...prev];
+        const removedNotifications = newNotifications.slice(maxStack);
+
+        removedNotifications.forEach((notification) => {
+          clearNotificationTimer(notification.id);
+          pausedAtRef.current.delete(notification.id);
+        });
+
+        return newNotifications.slice(0, maxStack);
+      });
+
+      startTimer(newNotification);
+    },
+    [maxStack, startTimer, clearNotificationTimer]
+  );
+
+  // 7. 提供的 Context 值
+  const contextValue = React.useMemo(
+    () => ({
+      notify: addNotification,
+      success: (message: Message) => addNotification("success", message),
+      error: (message: Message) => addNotification("error", message),
+      warning: (message: Message) => addNotification("warning", message),
+      info: (message: Message) => addNotification("info", message),
+      removeNotification: (id: string) => {
+        setNotifications((prev) => prev.filter((t) => t.id !== id));
+        clearNotificationTimer(id);
+        pausedAtRef.current.delete(id);
+      }
+    }),
+    [addNotification, clearNotificationTimer]
+  );
+
+  // 悬停处理
+  const clearAllTimers = useCallback(() => {
+    const now = Date.now();
+    notifications.forEach((notification) => {
+      pausedAtRef.current.set(notification.id, now);
+      clearNotificationTimer(notification.id);
+    });
+  }, [notifications, clearNotificationTimer]);
+
+  const restartAllTimers = useCallback(() => {
+    notifications.forEach((notification) => {
+      const pausedAt = pausedAtRef.current.get(notification.id);
+      if (pausedAt) {
+        const elapsedTime = pausedAt - notification.createdAt;
+        const remainingTime = Math.max(0, displayDuration - elapsedTime);
+        startTimer(notification, remainingTime);
+        pausedAtRef.current.delete(notification.id);
+      }
+    });
+  }, [notifications, displayDuration, startTimer]);
+
+  return (
+    <NotificationContext.Provider value={contextValue}>
+      {children}
+      {createPortal(
+        <NotifyContainer
+          notifications={notifications as unknown as TdNotificationProps[]}
+          onRemove={(id) => contextValue.removeNotification(id)}
+          onHoverStart={clearAllTimers}
+          onHoverEnd={restartAllTimers}
+          data-testid="notification-container"
+          maxStack={maxStack}
+          position={position}
+        />,
+        document.body
+      )}
+    </NotificationContext.Provider>
+  );
+};
+
+// 8. 创建自定义 Hook
+export const useNotification = () => {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotification must be used within a NotificationProvider");
+  }
+  return context;
+};