react-public-components 1.1.16 → 1.1.18

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactNode, CSSProperties } from 'react';
+import React__default, { ReactNode, CSSProperties, Key, HTMLAttributes } from 'react';
 
 type CollapseBoxDirection = 'horizontal' | 'vertical';
 type CollapseBoxButtonPosition = 'left' | 'right' | 'top' | 'bottom';
@@ -109,4 +109,81 @@ interface DisabledBoxProps {
 }
 declare const DisabledBox: (props: DisabledBoxProps) => React.JSX.Element;
 
-export { CollapsibleBox as CollapseBox, type CollapseBoxButtonPosition, type CollapseBoxDirection, type CollapseBoxProps, DisabledBox, type DisabledBoxProps, CustomSplitter as Splitter, type SplitterCollapsible, type SplitterOrientation, type SplitterPanelProps, type SplitterProps, type SplitterSize };
+/** 响应式断点名称 */
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/** 间距配置项 */
+type Gap = undefined | number | Partial<Record<Breakpoint, number>>;
+/** 瀑布流单项结构 */
+interface MasonryItem<T = any> {
+    /** 自定义展示内容，相对 itemRender 具有更高优先级 */
+    children?: ReactNode;
+    /** 自定义所在列（0-indexed） */
+    column?: number;
+    /** 自定义存储数据 */
+    data?: T;
+    /** 高度（手指定时优先使用，否则通过测量动态计算） */
+    height?: number;
+    /** 唯一标识 */
+    key: Key;
+}
+/** 语义化 DOM 节点 */
+type MasonrySemanticDOM = 'root' | 'item';
+type MasonryClassNames = Partial<Record<MasonrySemanticDOM, string>> | ((info: {
+    props: MasonryProps<any>;
+}) => Partial<Record<MasonrySemanticDOM, string>>);
+type MasonryStyles = Partial<Record<MasonrySemanticDOM, CSSProperties>> | ((info: {
+    props: MasonryProps<any>;
+}) => Partial<Record<MasonrySemanticDOM, CSSProperties>>);
+/** Masonry 组件属性 */
+interface MasonryProps<T = any> {
+    /** 用于自定义组件内部各语义化结构的 class，支持对象或函数 */
+    classNames?: MasonryClassNames;
+    /** 列数，可以是固定值或响应式配置，默认 3 */
+    columns?: number | Partial<Record<Breakpoint, number>>;
+    /** 是否持续监听子项尺寸变化，默认 false */
+    fresh?: boolean;
+    /** 间距，可以是固定值、响应式配置或水平垂直间距配置 [horizontalGap, verticalGap]，默认 0 */
+    gutter?: Gap | [Gap, Gap];
+    /** 瀑布流项列表 */
+    items?: MasonryItem<T>[];
+    /** 自定义项渲染 */
+    itemRender?: (item: MasonryItem<T>) => ReactNode;
+    /** 语义化结构 style，支持对象和函数形式 */
+    styles?: MasonryStyles;
+    /** 列排序回调 */
+    onLayoutChange?: (layout: {
+        key: Key;
+        column: number;
+    }[]) => void;
+    /** 根节点自定义类名 */
+    className?: string;
+    /** 根节点自定义 CSS 样式 */
+    style?: CSSProperties;
+    /** JSX 子节点支持 */
+    children?: ReactNode;
+}
+declare const Masonry: <T = unknown>(props: MasonryProps<T>) => React__default.JSX.Element;
+
+type BorderBeamColorStop = {
+    color: string;
+    percent: number;
+};
+interface BorderBeamProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** 装饰内容 */
+    children?: ReactNode;
+    /** 流光颜色配置，支持单色字符串或渐变停靠点数组 */
+    color?: string | BorderBeamColorStop[];
+    /** 流光数量，默认为 1 */
+    count?: number;
+    /** 流光完成一圈动画的时间，单位秒，默认为 6 */
+    duration?: number;
+    /** 流光线宽，数字类型按像素处理，默认为 1px */
+    lineWidth?: number | string;
+    /** 流光层相对容器边缘的外扩距离，遇到裁剪容器时可设为 0 */
+    outset?: number | string;
+    /** 流光可见段的尺寸，数字类型按像素处理，默认为 100 */
+    size?: number | string;
+}
+declare const BorderBeam: (props: BorderBeamProps) => React.JSX.Element;
+
+export { BorderBeam, type BorderBeamColorStop, type BorderBeamProps, type Breakpoint, CollapsibleBox as CollapseBox, type CollapseBoxButtonPosition, type CollapseBoxDirection, type CollapseBoxProps, DisabledBox, type DisabledBoxProps, type Gap, Masonry, type MasonryClassNames, type MasonryItem, type MasonryProps, type MasonrySemanticDOM, type MasonryStyles, CustomSplitter as Splitter, type SplitterCollapsible, type SplitterOrientation, type SplitterPanelProps, type SplitterProps, type SplitterSize };

package/dist/index.js

@@ -827,9 +827,350 @@ var DisabledBox = (props) => {
   );
 };
 var DisabledBox_default = DisabledBox;
+
+// Masonry/index.tsx
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BREAKPOINT_ORDER = ["xs", "sm", "md", "lg", "xl", "xxl"];
+function getBreakpoint(width) {
+  if (width >= 1600) return "xxl";
+  if (width >= 1200) return "xl";
+  if (width >= 992) return "lg";
+  if (width >= 768) return "md";
+  if (width >= 576) return "sm";
+  return "xs";
+}
+function resolveResponsiveValue(value, currentBp, defaultValue) {
+  if (value === void 0 || value === null) return defaultValue;
+  if (typeof value === "object") {
+    const obj = value;
+    if (obj[currentBp] !== void 0) return obj[currentBp];
+    const currentIdx = BREAKPOINT_ORDER.indexOf(currentBp);
+    for (let i = currentIdx - 1; i >= 0; i--) {
+      const bp = BREAKPOINT_ORDER[i];
+      if (obj[bp] !== void 0) return obj[bp];
+    }
+    for (let i = currentIdx + 1; i < BREAKPOINT_ORDER.length; i++) {
+      const bp = BREAKPOINT_ORDER[i];
+      if (obj[bp] !== void 0) return obj[bp];
+    }
+    return defaultValue;
+  }
+  return value;
+}
+function resolveGutter(gutter, currentBp) {
+  if (!gutter) return [0, 0];
+  if (Array.isArray(gutter)) {
+    const h = resolveResponsiveValue(gutter[0], currentBp, 0);
+    const v = resolveResponsiveValue(gutter[1], currentBp, 0);
+    return [h, v];
+  }
+  const g = resolveResponsiveValue(gutter, currentBp, 0);
+  return [g, g];
+}
+var Masonry = (props) => {
+  const {
+    classNames,
+    columns = 3,
+    fresh = false,
+    gutter = 0,
+    items,
+    itemRender,
+    styles,
+    onLayoutChange,
+    className,
+    style,
+    children
+  } = props;
+  const rootRef = useRef2(null);
+  const [containerWidth, setContainerWidth] = useState3(0);
+  const [measuredHeights, setMeasuredHeights] = useState3({});
+  const itemRefs = useRef2(/* @__PURE__ */ new Map());
+  const normalizedItems = useMemo2(() => {
+    if (items) return items;
+    if (!children) return [];
+    return React2.Children.toArray(children).map((child, index) => {
+      var _a;
+      if (React2.isValidElement(child)) {
+        const key = (_a = child.key) != null ? _a : `masonry-item-${index}`;
+        return {
+          key,
+          children: child
+        };
+      }
+      return {
+        key: `masonry-item-${index}`,
+        children: child
+      };
+    });
+  }, [items, children]);
+  const currentBreakpoint = useMemo2(() => getBreakpoint(containerWidth), [containerWidth]);
+  const resolvedColumns = useMemo2(() => {
+    const count = resolveResponsiveValue(columns, currentBreakpoint, 3);
+    return Math.max(1, Math.floor(count));
+  }, [columns, currentBreakpoint]);
+  const [horizontalGap, verticalGap] = useMemo2(
+    () => resolveGutter(gutter, currentBreakpoint),
+    [gutter, currentBreakpoint]
+  );
+  useEffect2(() => {
+    if (!rootRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        if (width > 0) {
+          setContainerWidth(width);
+        }
+      }
+    });
+    observer.observe(rootRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const measureItems = useCallback2(() => {
+    let hasChange = false;
+    const newHeights = {};
+    itemRefs.current.forEach((el, key) => {
+      if (el) {
+        const strKey = String(key);
+        const h = el.offsetHeight;
+        if (h > 0) {
+          newHeights[strKey] = h;
+          if (measuredHeights[strKey] !== h) {
+            hasChange = true;
+          }
+        }
+      }
+    });
+    if (hasChange) {
+      setMeasuredHeights((prev) => ({ ...prev, ...newHeights }));
+    }
+  }, [measuredHeights]);
+  useLayoutEffect(() => {
+    const handle = requestAnimationFrame(() => {
+      measureItems();
+    });
+    return () => cancelAnimationFrame(handle);
+  }, [measureItems]);
+  useEffect2(() => {
+    if (!fresh) return;
+    const observer = new ResizeObserver(() => {
+      measureItems();
+    });
+    itemRefs.current.forEach((el) => {
+      if (el) observer.observe(el);
+    });
+    return () => observer.disconnect();
+  }, [fresh, measureItems, normalizedItems]);
+  const columnWidth = useMemo2(() => {
+    if (containerWidth <= 0) return 0;
+    const totalGap = (resolvedColumns - 1) * horizontalGap;
+    return Math.max(0, (containerWidth - totalGap) / resolvedColumns);
+  }, [containerWidth, resolvedColumns, horizontalGap]);
+  const { layoutItems, containerHeight, layoutChangeData } = useMemo2(() => {
+    const colHeights = new Array(resolvedColumns).fill(0);
+    const changeData = [];
+    const computedList = normalizedItems.map((item) => {
+      var _a, _b;
+      const h = (_b = (_a = item.height) != null ? _a : measuredHeights[String(item.key)]) != null ? _b : 0;
+      let targetCol = 0;
+      if (typeof item.column === "number" && item.column >= 0 && item.column < resolvedColumns) {
+        targetCol = Math.floor(item.column);
+      } else {
+        let minH = colHeights[0];
+        for (let i = 1; i < resolvedColumns; i++) {
+          if (colHeights[i] < minH) {
+            minH = colHeights[i];
+            targetCol = i;
+          }
+        }
+      }
+      const left = targetCol * (columnWidth + horizontalGap);
+      const top = colHeights[targetCol];
+      colHeights[targetCol] += h + (h > 0 ? verticalGap : 0);
+      changeData.push({ key: item.key, column: targetCol });
+      return {
+        item,
+        left,
+        top,
+        width: columnWidth,
+        height: h,
+        column: targetCol
+      };
+    });
+    const totalH = Math.max(0, ...colHeights);
+    return {
+      layoutItems: computedList,
+      containerHeight: totalH,
+      layoutChangeData: changeData
+    };
+  }, [normalizedItems, resolvedColumns, horizontalGap, verticalGap, columnWidth, measuredHeights]);
+  const prevLayoutRef = useRef2("");
+  useEffect2(() => {
+    const layoutKey = JSON.stringify(layoutChangeData);
+    if (layoutKey !== prevLayoutRef.current) {
+      prevLayoutRef.current = layoutKey;
+      onLayoutChange == null ? void 0 : onLayoutChange(layoutChangeData);
+    }
+  }, [layoutChangeData, onLayoutChange]);
+  const semanticClassNames = useMemo2(() => {
+    var _a;
+    if (typeof classNames === "function") {
+      return (_a = classNames({ props })) != null ? _a : {};
+    }
+    return classNames != null ? classNames : {};
+  }, [classNames, props]);
+  const semanticStyles = useMemo2(() => {
+    var _a;
+    if (typeof styles === "function") {
+      return (_a = styles({ props })) != null ? _a : {};
+    }
+    return styles != null ? styles : {};
+  }, [styles, props]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: rootRef,
+      className: ["masonry_root", semanticClassNames.root, className].filter(Boolean).join(" "),
+      style: {
+        minHeight: containerHeight > 0 ? containerHeight : void 0,
+        height: containerHeight > 0 ? containerHeight : void 0,
+        ...semanticStyles.root,
+        ...style
+      },
+      children: layoutItems.map(({ item, left, top, width, height }) => {
+        var _a;
+        const content = (_a = item.children) != null ? _a : itemRender == null ? void 0 : itemRender(item);
+        return /* @__PURE__ */ jsx5(
+          "div",
+          {
+            ref: (node) => {
+              if (node) {
+                itemRefs.current.set(item.key, node);
+              } else {
+                itemRefs.current.delete(item.key);
+              }
+            },
+            className: ["masonry_item", semanticClassNames.item].filter(Boolean).join(" "),
+            style: {
+              width: containerWidth > 0 ? width : "100%",
+              height: height > 0 ? height : void 0,
+              transform: containerWidth > 0 ? `translate3d(${left}px, ${top}px, 0)` : void 0,
+              opacity: containerWidth > 0 ? 1 : 0,
+              ...semanticStyles.item
+            },
+            onLoad: measureItems,
+            children: content
+          },
+          item.key
+        );
+      })
+    }
+  );
+};
+var Masonry_default = Masonry;
+
+// BorderBeam/index.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var formatSizeUnit = (value, defaultValue) => {
+  if (value === void 0 || value === null) {
+    return defaultValue;
+  }
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+};
+var buildGradientString = (color) => {
+  if (!color) {
+    return "linear-gradient(to left, #1677ff 0%, transparent 100%)";
+  }
+  if (typeof color === "string") {
+    return `linear-gradient(to left, ${color} 0%, transparent 100%)`;
+  }
+  if (Array.isArray(color)) {
+    if (color.length === 0) {
+      return "linear-gradient(to left, #1677ff 0%, transparent 100%)";
+    }
+    const sorted = [...color].sort((a, b) => a.percent - b.percent);
+    const mappedStops = sorted.map((stop) => {
+      const mappedPercent = Math.min(Math.max(stop.percent / 100 * 80, 0), 80);
+      return `${stop.color} ${mappedPercent.toFixed(2)}%`;
+    });
+    return `linear-gradient(to left, ${mappedStops.join(", ")}, transparent 100%)`;
+  }
+  return "linear-gradient(to left, #1677ff 0%, transparent 100%)";
+};
+var BorderBeam = (props) => {
+  const {
+    children,
+    color,
+    count = 1,
+    duration = 6,
+    lineWidth = "1px",
+    outset = "0px",
+    size = 100,
+    className,
+    style,
+    ...restProps
+  } = props;
+  const formattedLineWidth = formatSizeUnit(lineWidth, "1px");
+  const formattedOutset = formatSizeUnit(outset, "0px");
+  const formattedSize = formatSizeUnit(size, "100px");
+  const gradientCss = buildGradientString(color);
+  const maskStyle = {
+    "--border-beam-line-width": formattedLineWidth,
+    "--border-beam-outset": formattedOutset,
+    "--border-beam-size": formattedSize,
+    "--border-beam-duration": `${duration}s`,
+    "--border-beam-gradient": gradientCss
+  };
+  const beamCount = Math.max(1, count);
+  const beams = Array.from({ length: beamCount }).map((_, index) => {
+    const delaySeconds = -(duration * index / beamCount);
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "react-public-border-beam-item",
+        style: {
+          animationDelay: `${delaySeconds}s`
+        }
+      },
+      index
+    );
+  });
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: `react-public-border-beam-container ${className || ""}`.trim(),
+        style,
+        ...restProps,
+        children: [
+          children,
+          /* @__PURE__ */ jsx6("div", { className: "react-public-border-beam-mask", style: maskStyle, children: beams })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: `react-public-border-beam-mask ${className || ""}`.trim(),
+      style: {
+        ...maskStyle,
+        ...style
+      },
+      ...restProps,
+      children: beams
+    }
+  );
+};
+var BorderBeam_default = BorderBeam;
 export {
+  BorderBeam_default as BorderBeam,
   CollapseBox_default as CollapseBox,
   DisabledBox_default as DisabledBox,
+  Masonry_default as Masonry,
   Splitter_default as Splitter
 };
 //# sourceMappingURL=index.js.map