@tendaui/components 1.0.0 → 1.0.2

package/fireworks/Fireworks.tsx

@@ -0,0 +1,138 @@
+import React, {
+  CSSProperties,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import classNames from "classnames";
+
+import useConfig from "../hooks/useConfig";
+import { StyledProps } from "../common";
+import type { FireworkBurst, FireworksLaunchContext, TdFireworksProps } from "./type";
+
+const DEFAULT_COLORS = ["#FF5F6D", "#FFC371", "#00C9FF", "#92FE9D", "#C77DFF", "#F2EA02"];
+
+type CSSPropertiesWithVars = CSSProperties & {
+  [key: `--${string}`]: string | number;
+};
+
+const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
+
+const pickColor = (palette: string[]) => {
+  if (!palette || palette.length === 0) return DEFAULT_COLORS[0];
+  const index = Math.floor(Math.random() * palette.length);
+  return palette[index];
+};
+
+const createBurstList = (count: number, colors: string[]): FireworkBurst[] =>
+  Array.from({ length: Math.max(1, count) }).map((_, index) => ({
+    id: `${Date.now()}-${index}-${Math.random().toString(36).slice(2, 7)}`,
+    color: pickColor(colors),
+    left: randomInRange(8, 92),
+    top: randomInRange(15, 85),
+    delay: randomInRange(0, 500),
+    rotationOffset: randomInRange(0, 360)
+  }));
+
+export interface FireworksProps extends TdFireworksProps, StyledProps {}
+
+const Fireworks = forwardRef<HTMLDivElement, FireworksProps>((props, ref) => {
+  const {
+    className,
+    style,
+    count = 6,
+    colors = DEFAULT_COLORS,
+    duration = 2400,
+    size = 140,
+    interval = 2800,
+    particleCount = 12,
+    loop = true,
+    onLaunch,
+    ...rest
+  } = props;
+
+  const { classPrefix } = useConfig();
+  const componentCls = `${classPrefix}-fireworks`;
+  const safeParticleCount = Math.max(6, particleCount);
+  const [bursts, setBursts] = useState<FireworkBurst[]>(() => createBurstList(count, colors));
+  const timerRef = useRef<ReturnType<typeof setInterval>>();
+
+  const particleAngles = useMemo(() => {
+    return Array.from({ length: safeParticleCount }).map((_, index) => (360 / safeParticleCount) * index);
+  }, [safeParticleCount]);
+
+  const triggerLaunch = useCallback(() => {
+    const nextBursts = createBurstList(count, colors);
+    setBursts(nextBursts);
+    const context: FireworksLaunchContext = { bursts: nextBursts };
+    onLaunch?.(context);
+  }, [count, colors, onLaunch]);
+
+  useEffect(() => {
+    triggerLaunch();
+  }, [triggerLaunch]);
+
+  useEffect(() => {
+    if (!loop) return undefined;
+    timerRef.current && clearInterval(timerRef.current);
+    timerRef.current = setInterval(triggerLaunch, Math.max(interval, duration));
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [duration, interval, loop, triggerLaunch]);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    },
+    []
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(componentCls, className)}
+      style={style}
+      role="presentation"
+      aria-hidden="true"
+      {...rest}
+    >
+      {bursts.map((burst) => {
+        const burstStyle: CSSPropertiesWithVars = {
+          "--fireworks-left": `${burst.left}%`,
+          "--fireworks-top": `${burst.top}%`,
+          "--fireworks-delay": `${burst.delay}ms`,
+          "--fireworks-color": burst.color,
+          "--fireworks-size": `${size}px`,
+          "--fireworks-duration": `${duration}ms`
+        };
+
+        return (
+          <span key={burst.id} className={`${componentCls}__burst`} style={burstStyle}>
+            {particleAngles.map((angle, index) => {
+              const sparkStyle: CSSPropertiesWithVars = {
+                "--fireworks-delay": `${burst.delay}ms`,
+                "--fireworks-duration": `${duration}ms`,
+                "--fireworks-color": burst.color,
+                "--fireworks-rotate": `${angle + burst.rotationOffset}deg`
+              };
+              return <i key={`${burst.id}-${index}`} className={`${componentCls}__spark`} style={sparkStyle} />;
+            })}
+          </span>
+        );
+      })}
+    </div>
+  );
+});
+
+Fireworks.displayName = "Fireworks";
+
+export default Fireworks;
+

package/fireworks/index.ts

@@ -0,0 +1,10 @@
+import _Fireworks from "./Fireworks";
+
+import "./style/index.js";
+
+export type { FireworksProps } from "./Fireworks";
+export * from "./type";
+
+export const Fireworks = _Fireworks;
+export default Fireworks;
+

package/fireworks/type.ts

@@ -0,0 +1,72 @@
+export interface FireworkBurst {
+  /**
+   * 唯一标识，用于 React 渲染
+   */
+  id: string;
+  /**
+   * 烟花的主色
+   */
+  color: string;
+  /**
+   * 爆炸中心的横向位置（百分比）
+   */
+  left: number;
+  /**
+   * 爆炸中心的纵向位置（百分比）
+   */
+  top: number;
+  /**
+   * 动画延迟，毫秒
+   */
+  delay: number;
+  /**
+   * 每朵烟花的旋转偏移，度数
+   */
+  rotationOffset: number;
+}
+
+export interface FireworksLaunchContext {
+  bursts: FireworkBurst[];
+}
+
+export interface TdFireworksProps {
+  /**
+   * 同时展示的烟花数量
+   * @default 6
+   */
+  count?: number;
+  /**
+   * 烟花的随机颜色池
+   */
+  colors?: string[];
+  /**
+   * 单次烟花动画时长，毫秒
+   * @default 2400
+   */
+  duration?: number;
+  /**
+   * 单朵烟花的最大尺寸，像素
+   * @default 140
+   */
+  size?: number;
+  /**
+   * 每轮重新生成烟花的间隔，毫秒
+   * @default 2800
+   */
+  interval?: number;
+  /**
+   * 单朵烟花的光束数量
+   * @default 12
+   */
+  particleCount?: number;
+  /**
+   * 是否持续循环播放
+   * @default true
+   */
+  loop?: boolean;
+  /**
+   * 每次重新生成烟花时回调
+   */
+  onLaunch?: (context: FireworksLaunchContext) => void;
+}
+

package/form/FormItem.tsx

@@ -244,7 +244,7 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
       .filter((item) => item.result !== true)
       .map((item) => {
         Object.keys(item).forEach((key) => {
-          if (!item.message && errorMessages[key]) {
+          if (!item.message && errorMessages && errorMessages[key] && typeof errorMessages[key] === "string") {
             item.message = parseMessage(errorMessages[key], {
               validate: item[key],
               name: isString(label) ? label : String(name)
@@ -512,8 +512,8 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
             let ctrlKey = "value";
             if (React.isValidElement(child)) {
               if (child.type === FormItem) {
-                return React.cloneElement(child, {
-                  ref: (el) => {
+                return React.cloneElement(child as React.ReactElement<any>, {
+                  ref: (el: any) => {
                     if (!el) return;
                     innerFormItemsRef.current[index] = el;
                   }
@@ -523,11 +523,11 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
                 ctrlKey = ctrlKeyMap.get(child.type) || "value";
               }
               const childProps = child.props as TdFormItemProps & React.HTMLAttributes<HTMLDivElement>;
-              return React.cloneElement(child, {
+              return React.cloneElement(child as React.ReactElement<any>, {
                 disabled: disabledFromContext,
                 ...childProps,
                 [ctrlKey]: formValue,
-                onChange: (value: ValueType, ...args: unknown[]) => {
+                onChange: (value: ValueType, ...args: any[]) => {
                   const newValue = valueFormat ? valueFormat(value) : value;
                   updateFormValue(newValue, true, true);
                   childProps?.onChange?.call?.(null, value, ...args);

package/form/easing.ts

@@ -0,0 +1,10 @@
+export type EasingFunction = (t: number, b: number, c: number, d: number) => number;
+
+export const easeInOutCubic: EasingFunction = (t, b, c, d) => {
+  const cc = c - b;
+  t /= d / 2;
+  if (t < 1) {
+    return (cc / 2) * t * t * t + b;
+  }
+  return (cc / 2) * ((t -= 2) * t * t + 2) + b;
+};

package/form/scroll.ts

@@ -0,0 +1,124 @@
+import { isString } from "lodash-es";
+import raf from "raf";
+import { ScrollContainer, ScrollContainerElement } from "../common";
+import { isWindow } from "../utils/dom";
+import { easeInOutCubic, EasingFunction } from "./easing";
+
+export function hasBodyScrollbar() {
+  return document.body.scrollHeight > document.documentElement.clientHeight;
+}
+
+// 用于判断节点内容是否溢出
+export const isNodeOverflow = (ele: Element | Element[]): boolean => {
+  const { clientWidth = 0, scrollWidth = 0 } = ele as Element & { clientWidth: number; scrollWidth: number };
+
+  if (scrollWidth > clientWidth) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * 获取滚动容器
+ * 因为 document 不存在 scroll 等属性, 因此排除 document
+ * window | HTMLElement
+ * @param {ScrollContainerElement} [container='body']
+ * @returns {ScrollContainer}
+ */
+export const getScrollContainer = (container: ScrollContainer = "body"): ScrollContainerElement => {
+  if (isString(container)) {
+    return container ? (document.querySelector(container) as HTMLElement) : window;
+  }
+  if (typeof container === "function") {
+    return container();
+  }
+  return container || window;
+};
+
+/**
+ * 获取滚动距离
+ *
+ * @export
+ * @param {ScrollTarget} target
+ * @param {boolean} isLeft true 为获取 scrollLeft, false 为获取 scrollTop
+ * @returns {number}
+ */
+export function getScroll(target: ScrollTarget, isLeft?: boolean): number {
+  // node 环境或者 target 为空
+  if (typeof window === "undefined" || !target) {
+    return 0;
+  }
+  const method = isLeft ? "scrollLeft" : "scrollTop";
+  let result = 0;
+  if (isWindow(target)) {
+    result = (target as Window)[isLeft ? "pageXOffset" : "pageYOffset"];
+  } else if (target instanceof Document) {
+    result = target.documentElement[method];
+  } else if (target) {
+    result = (target as HTMLElement)[method];
+  }
+  return result;
+}
+
+export type ScrollTarget = HTMLElement | Window | Document;
+
+interface ScrollTopOptions {
+  container?: ScrollTarget;
+  duration?: number;
+  easing?: EasingFunction;
+}
+
+export function scrollTo(target: number, opt: ScrollTopOptions) {
+  const { container = window, duration = 450, easing = easeInOutCubic } = opt;
+  const scrollTop = getScroll(container);
+  const startTime = Date.now();
+  return new Promise((res) => {
+    const fnc = () => {
+      const timestamp = Date.now();
+      const time = timestamp - startTime;
+      const nextScrollTop = easing(Math.min(time, duration), scrollTop, target, duration);
+      if (isWindow(container)) {
+        (container as Window).scrollTo(window.pageXOffset, nextScrollTop);
+      } else if (
+        typeof HTMLDocument !== "undefined" &&
+        (container instanceof HTMLDocument || container.constructor.name === "HTMLDocument")
+      ) {
+        (container as HTMLDocument).documentElement.scrollTop = nextScrollTop;
+      } else {
+        (container as HTMLElement).scrollTop = nextScrollTop;
+      }
+      if (time < duration) {
+        raf(fnc);
+      } else {
+        // 由于上面步骤设置了 scrollTop, 滚动事件可能未触发完毕
+        // 此时应该在下一帧再执行 res
+        raf(res);
+      }
+    };
+    raf(fnc);
+  });
+}
+
+/**
+ * 获取当前视图滑动的距离
+ * @returns { scrollTop: number, scrollLeft: number }
+ */
+export function getWindowScroll(): { scrollTop: number; scrollLeft: number } {
+  const { body } = document;
+  const docElm = document.documentElement;
+  const scrollTop = window.pageYOffset || docElm.scrollTop || body.scrollTop;
+  const scrollLeft = window.pageXOffset || docElm.scrollLeft || body.scrollLeft;
+
+  return { scrollTop, scrollLeft };
+}
+
+export type AnchorContainer = HTMLElement | Window;
+
+export function getOffsetTop(target: HTMLElement, container: AnchorContainer) {
+  const { top } = target.getBoundingClientRect();
+  if (container === window) {
+    // 减去 document 的边框
+    return top - document.documentElement.clientTop;
+  }
+  return top - (container as HTMLElement).getBoundingClientRect().top;
+}