@tsingroc/tsingroc-components 5.0.1 → 5.1.0

package/dist/components/HighlightSyncedTable/index.d.ts

@@ -0,0 +1,8 @@
+import type { GetProps, Table } from "antd";
+/**
+ * 添加了高亮同步能力的表格，必须包裹在 {@linkcode HighlightProvider} 内使用。
+ *
+ * 调用接口与 [Ant Design 的 Table](https://ant-design.antgroup.com/components/table-cn) 完全一致，
+ * 也支持套用 {@linkcode TsingrocTable} 的样式。
+ */
+export default function HighlightSyncedTable<DataType extends Record<string, any>>({ ref: outerRef, onRow, ...props }: GetProps<typeof Table<DataType>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/HighlightSyncedTable/index.js

@@ -0,0 +1,183 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useEffectEvent, useId, useImperativeHandle, useRef } from "react";
+import { debugAssert } from "#src/utils/debug";
+import { useHighlight
+// oxlint-disable-line no-unused-vars
+} from "../HighlightSyncedECharts";
+import ScrollableTable from "../ScrollableTable";
+import { jsx as _jsx } from "react/jsx-runtime";
+// oxlint-disable-line no-unused-vars
+
+class SyntheticMouseEvent extends MouseEvent {
+  constructor(name) {
+    super(name, {
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+  }
+}
+
+/**
+ * 添加了高亮同步能力的表格，必须包裹在 {@linkcode HighlightProvider} 内使用。
+ *
+ * 调用接口与 [Ant Design 的 Table](https://ant-design.antgroup.com/components/table-cn) 完全一致，
+ * 也支持套用 {@linkcode TsingrocTable} 的样式。
+ */
+export default function HighlightSyncedTable(t0) {
+  const $ = _c(25);
+  let onRow;
+  let outerRef;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      ref: outerRef,
+      onRow,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = onRow;
+    $[2] = outerRef;
+    $[3] = props;
+  } else {
+    onRow = $[1];
+    outerRef = $[2];
+    props = $[3];
+  }
+  const id = useId();
+  const [highlight, setHighlight] = useHighlight();
+  const ref = useRef(null);
+  let t1;
+  let t2;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      debugAssert(ref.current, "ref should be connected");
+      return ref.current;
+    };
+    t2 = [];
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  useImperativeHandle(outerRef, t1, t2);
+  let t3;
+  let t4;
+  if ($[6] !== highlight || $[7] !== id) {
+    t3 = () => {
+      if (!ref.current) {
+        return;
+      }
+      if (highlight && highlight.source !== id) {
+        const row = ref.current.nativeElement.querySelector(`.ant-table-body tr:nth-child(${highlight.index + 2})`);
+        if (row) {
+          row.scrollIntoView({
+            block: "center",
+            container: "nearest",
+            behavior: "smooth"
+          });
+          row.children[0]?.dispatchEvent(new SyntheticMouseEvent("mouseover"));
+        }
+      } else {
+        if (!highlight) {
+          ref.current.nativeElement.querySelector("tr:nth-child(2) > td")?.dispatchEvent(new SyntheticMouseEvent("mouseout"));
+        }
+      }
+    };
+    t4 = [id, highlight];
+    $[6] = highlight;
+    $[7] = id;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t3 = $[8];
+    t4 = $[9];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[10] !== highlight || $[11] !== id || $[12] !== setHighlight) {
+    t5 = (event, index) => {
+      if (event.nativeEvent instanceof SyntheticMouseEvent) {
+        return;
+      }
+      if (index === undefined) {
+        return;
+      }
+      if (highlight?.source === id && highlight.index === index) {
+        return;
+      }
+      setHighlight({
+        source: id,
+        index
+      });
+    };
+    $[10] = highlight;
+    $[11] = id;
+    $[12] = setHighlight;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  const onMouseOverRow = useEffectEvent(t5);
+  let t6;
+  if ($[14] !== highlight?.source || $[15] !== id || $[16] !== setHighlight) {
+    t6 = event_0 => {
+      if (event_0.nativeEvent instanceof SyntheticMouseEvent) {
+        return;
+      }
+      if (highlight?.source !== id) {
+        return;
+      }
+      setHighlight(undefined);
+    };
+    $[14] = highlight?.source;
+    $[15] = id;
+    $[16] = setHighlight;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const onMouseOutRow = useEffectEvent(t6);
+  let t7;
+  if ($[18] !== onMouseOutRow || $[19] !== onMouseOverRow || $[20] !== onRow) {
+    t7 = (data, index_0) => {
+      const {
+        onMouseOver,
+        onMouseOut,
+        ...rest
+      } = onRow?.(data, index_0) ?? {};
+      return {
+        onMouseOver: event_1 => {
+          onMouseOverRow(event_1, index_0);
+          onMouseOver?.(event_1);
+        },
+        onMouseOut: event_2 => {
+          onMouseOutRow(event_2);
+          onMouseOut?.(event_2);
+        },
+        ...rest
+      };
+    };
+    $[18] = onMouseOutRow;
+    $[19] = onMouseOverRow;
+    $[20] = onRow;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== props || $[23] !== t7) {
+    t8 = /*#__PURE__*/_jsx(ScrollableTable, {
+      ref: ref,
+      onRow: t7,
+      ...props
+    });
+    $[22] = props;
+    $[23] = t7;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  return t8;
+}

package/dist/components/LoadingSection/index.d.ts

@@ -0,0 +1,41 @@
+import type { CSSProperties } from "react";
+/**
+ * Props for LoadingSection component
+ */
+export interface LoadingSectionProps {
+    /** Type of content being loaded */
+    type: "chart" | "table" | "summary" | "custom";
+    /** Number of rows/items to show (for table/summary type) */
+    rows?: number;
+    /** Whether to show active animation */
+    active?: boolean;
+    /** Custom style */
+    style?: CSSProperties;
+    /** Custom className */
+    className?: string;
+    /** Height for chart type */
+    height?: string | number;
+}
+/**
+ * LoadingSection - Section-level skeleton for charts, tables, dashboards
+ *
+ * **Usage:** Charts, tables, analytics panels, dashboards, cards
+ *
+ * Reserves layout space and shows skeleton placeholder for section-level content.
+ *
+ * @example
+ * ```tsx
+ * // Chart section
+ * <LoadingSection type="chart" height={300} />
+ *
+ * // Table section
+ * <LoadingSection type="table" rows={8} />
+ *
+ * // Summary section (header + content)
+ * <LoadingSection type="summary" rows={3} />
+ *
+ * // Custom section
+ * <LoadingSection type="custom" rows={6} />
+ * ```
+ */
+export declare function LoadingSection({ type, rows, active, style, className, height, }: LoadingSectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/LoadingSection/index.js

@@ -0,0 +1,183 @@
+import { c as _c } from "react/compiler-runtime";
+import { Skeleton } from "antd";
+import { ARIA_LABELS, ARIA_ROLES } from "#src/utils/accessibility";
+import { LoadingSkeleton } from "../LoadingSkeleton";
+
+/**
+ * Props for LoadingSection component
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * LoadingSection - Section-level skeleton for charts, tables, dashboards
+ *
+ * **Usage:** Charts, tables, analytics panels, dashboards, cards
+ *
+ * Reserves layout space and shows skeleton placeholder for section-level content.
+ *
+ * @example
+ * ```tsx
+ * // Chart section
+ * <LoadingSection type="chart" height={300} />
+ *
+ * // Table section
+ * <LoadingSection type="table" rows={8} />
+ *
+ * // Summary section (header + content)
+ * <LoadingSection type="summary" rows={3} />
+ *
+ * // Custom section
+ * <LoadingSection type="custom" rows={6} />
+ * ```
+ */
+export function LoadingSection(t0) {
+  const $ = _c(27);
+  const {
+    type,
+    rows: t1,
+    active: t2,
+    style,
+    className,
+    height
+  } = t0;
+  const rows = t1 === undefined ? 6 : t1;
+  const active = t2 === undefined ? true : t2;
+  let t3;
+  if ($[0] !== style) {
+    t3 = {
+      width: "100%",
+      ...style
+    };
+    $[0] = style;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const baseStyle = t3;
+  switch (type) {
+    case "chart":
+      {
+        const t4 = height || 300;
+        let t5;
+        if ($[2] !== baseStyle || $[3] !== t4) {
+          t5 = {
+            height: t4,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            ...baseStyle
+          };
+          $[2] = baseStyle;
+          $[3] = t4;
+          $[4] = t5;
+        } else {
+          t5 = $[4];
+        }
+        let t6;
+        if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+          t6 = {
+            width: "100%",
+            height: "100%"
+          };
+          $[5] = t6;
+        } else {
+          t6 = $[5];
+        }
+        let t7;
+        if ($[6] !== active) {
+          t7 = /*#__PURE__*/_jsx(Skeleton.Node, {
+            active: active,
+            style: t6
+          });
+          $[6] = active;
+          $[7] = t7;
+        } else {
+          t7 = $[7];
+        }
+        let t8;
+        if ($[8] !== className || $[9] !== t5 || $[10] !== t7) {
+          t8 = /*#__PURE__*/_jsx("div", {
+            style: t5,
+            className: className,
+            role: ARIA_ROLES.STATUS,
+            "aria-live": "polite",
+            "aria-label": ARIA_LABELS.LOADING,
+            children: t7
+          });
+          $[8] = className;
+          $[9] = t5;
+          $[10] = t7;
+          $[11] = t8;
+        } else {
+          t8 = $[11];
+        }
+        return t8;
+      }
+    case "table":
+      {
+        let t4;
+        if ($[12] !== active || $[13] !== className || $[14] !== rows || $[15] !== style) {
+          t4 = /*#__PURE__*/_jsx(LoadingSkeleton, {
+            type: "table",
+            rows: rows,
+            active: active,
+            className: className,
+            style: style
+          });
+          $[12] = active;
+          $[13] = className;
+          $[14] = rows;
+          $[15] = style;
+          $[16] = t4;
+        } else {
+          t4 = $[16];
+        }
+        return t4;
+      }
+    case "summary":
+      {
+        let t4;
+        if ($[17] !== active || $[18] !== className || $[19] !== rows || $[20] !== style) {
+          t4 = /*#__PURE__*/_jsx(LoadingSkeleton, {
+            type: "summary",
+            rows: rows,
+            active: active,
+            className: className,
+            style: style
+          });
+          $[17] = active;
+          $[18] = className;
+          $[19] = rows;
+          $[20] = style;
+          $[21] = t4;
+        } else {
+          t4 = $[21];
+        }
+        return t4;
+      }
+    case "custom":
+      {
+        let t4;
+        if ($[22] !== active || $[23] !== className || $[24] !== rows || $[25] !== style) {
+          t4 = /*#__PURE__*/_jsx(LoadingSkeleton, {
+            type: "custom",
+            rows: rows,
+            active: active,
+            className: className,
+            style: style
+          });
+          $[22] = active;
+          $[23] = className;
+          $[24] = rows;
+          $[25] = style;
+          $[26] = t4;
+        } else {
+          t4 = $[26];
+        }
+        return t4;
+      }
+    default:
+      {
+        return null;
+      }
+  }
+}

package/dist/components/LoadingSkeleton/index.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties } from "react";
+/**
+ * Props for LoadingSkeleton component
+ */
+interface LoadingSkeletonProps {
+    /** Type of skeleton to display */
+    type?: "table" | "form" | "card" | "list" | "custom" | "summary" | "compact";
+    /** Number of rows (for table/list/custom type) */
+    rows?: number;
+    /** Number of cards (for card type) */
+    cards?: number;
+    /** Whether to show the active animation */
+    active?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: CSSProperties;
+}
+/**
+ * LoadingSkeleton - Textual content skeleton
+ *
+ * **Usage:** Text paragraphs, lists, form content
+ *
+ * Displays skeleton placeholder for textual content with accessibility support.
+ *
+ * @example
+ * ```tsx
+ * // Compact text skeleton (for stats cards, small areas)
+ * <LoadingSkeleton type="compact" rows={2} />
+ *
+ * // Table skeleton
+ * <LoadingSkeleton type="table" rows={8} />
+ *
+ * // Summary skeleton (header + content)
+ * <LoadingSkeleton type="summary" rows={4} />
+ *
+ * // Custom skeleton (default paragraph style)
+ * <LoadingSkeleton rows={4} />
+ * ```
+ */
+export declare function LoadingSkeleton({ type, rows, cards, active, className, style, }: LoadingSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};