@canvas-components/react-list-table 0.3.39 → 0.3.40

package/README.md

@@ -4,6 +4,13 @@
 
 通过顶层 `loading` 属性控制数据加载状态：`<ReactListTable loading={loading} dataSource={rows} columns={columns} />`。加载期间展示加载提示并保留汇总标题；加载完成后，组件自动计算并统一展示完整汇总结果。服务端汇总可通过 `query.summaryValues` 提供，业务侧无需单独管理汇总计算状态。
 
+## 属性更新与性能
+
+- 相同属性引用的父组件重渲染由 `React.memo` 跳过；组件内部交互仍正常更新。
+- `onChange`、`onRow` 以及查询、分页、行选择、展开、拖拽和性能通知等事件使用稳定入口，调用时读取最近一次已提交的回调，避免仅回调引用变化就重置底层查询。
+- `scroll`、`theme`、`pagination` 等常用配置进行第一层字段比较，内容相同的新对象复用之前的配置。嵌套对象和数组仍按引用判断。
+- `columns`、`dataSource`、受控选中/展开数组，以及 `rowKey`、列渲染、`getCheckboxProps` 等影响数据或展示的函数，变化时继续刷新。大数据数组不做深比较，建议用 `useMemo` 或稳定状态保存，并在内容改变时更新引用。
+
 ## 示例效果
 
 ![React List Table 基础示例](./assets/examples/basic.gif)

package/dist/index.cjs

@@ -477,6 +477,22 @@ function createSelectionChartOption(data, chartType, seriesIndex = 0) {
   const area = chartType.includes("area");
   const bumpData = chartType === "bump" ? resolveBumpRanks(data) : null;
   const option = {
+    dataZoom: data.labels.length > 30 ? [
+      {
+        type: "slider",
+        xAxisIndex: 0,
+        start: 0,
+        end: horizontal ? 100 : Math.max(1, 3e3 / data.labels.length)
+      },
+      { type: "inside", xAxisIndex: 0 },
+      {
+        type: "slider",
+        yAxisIndex: 0,
+        start: 0,
+        end: horizontal ? Math.max(1, 3e3 / data.labels.length) : 100
+      },
+      { type: "inside", yAxisIndex: 0 }
+    ] : void 0,
     categoryKeys: data.keys,
     grid: {
       show: true,
@@ -612,6 +628,7 @@ function ChartDialog(props) {
             display: "flex",
             flexDirection: "column",
             flex: 1,
+            minWidth: 0,
             minHeight: 0,
             gap: 12
           },
@@ -679,6 +696,8 @@ function ChartDialog(props) {
                 ref: chartHostRef,
                 style: {
                   width: "100%",
+                  minWidth: 0,
+                  overflow: "hidden",
                   height: 400,
                   flex: "1 1 200px",
                   minHeight: 160
@@ -796,7 +815,6 @@ function ResetMenu(props) {
 function ReactTableContextMenuView(props) {
   const { request } = props;
   const [closedRequest, setClosedRequest] = react.useState(null);
-  const menuOpen = request !== null && closedRequest !== request;
   const setMenuOpen = (open) => {
     setClosedRequest(open ? null : request);
   };
@@ -839,6 +857,7 @@ function ReactTableContextMenuView(props) {
   ) : null;
   const [customSelectionRequest, setCustomSelectionRequest] = react.useState(null);
   const [chartRequest, setChartRequest] = react.useState(null);
+  const menuOpen = request !== null && closedRequest !== request && !chartRequest;
   const [columnEditor, setColumnEditor] = react.useState(null);
   const columnDialogs = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: columnEditor ? /* @__PURE__ */ jsxRuntime.jsx(
     ColumnEditorDialog,
@@ -883,6 +902,7 @@ function ReactTableContextMenuView(props) {
           getData: chartRequest.request.onCreateChart,
           onClose: () => {
             chartRequest.request.onClose();
+            setMenuOpen(false);
             setChartRequest(null);
           }
         }
@@ -1366,6 +1386,7 @@ function ReactTableContextMenuView(props) {
         getData: chartRequest.request.onCreateChart,
         onClose: () => {
           chartRequest.request.onClose();
+          setMenuOpen(false);
           setChartRequest(null);
         }
       }
@@ -5760,6 +5781,87 @@ function useReactListTableState(options) {
     }
   };
 }
+function retainShallowEqual(previous, next) {
+  if (Object.is(previous, next)) return previous;
+  if (!previous || !next || typeof previous !== "object" || typeof next !== "object" || Array.isArray(previous) || Array.isArray(next))
+    return next;
+  const left = previous;
+  const right = next;
+  const keys = Object.keys(right);
+  return Object.keys(left).length === keys.length && keys.every(
+    (key) => Object.prototype.hasOwnProperty.call(left, key) && Object.is(left[key], right[key])
+  ) ? previous : next;
+}
+var CONFIG_KEYS = [
+  "scroll",
+  "locale",
+  "theme",
+  "styles",
+  "keyboardNavigation",
+  "contextMenu",
+  "grouping",
+  "query",
+  "experimental",
+  "rowSelector",
+  "rowSelection",
+  "expandable",
+  "pagination",
+  "scrollbar",
+  "carouselScroll",
+  "cachePreferences",
+  "rowDrag",
+  "debug",
+  "exportOptions"
+];
+var EVENT_KEYS = {
+  query: ["onChange", "onError"],
+  pagination: ["onChange", "onShowSizeChange"],
+  rowSelection: ["onChange", "onSelect"],
+  expandable: ["onExpand", "onExpandedRowsChange"],
+  experimental: ["onOffscreenCanvasStatus"],
+  rowDrag: ["onDrop", "onDragEndRemove"],
+  debug: ["onPerformance"]
+};
+function useStableTableProps(props) {
+  const committedProps = react.useRef(props);
+  const previous = react.useRef();
+  const handlers = react.useRef(/* @__PURE__ */ new Map());
+  const next = { ...props };
+  const event = (group, key) => {
+    const path = group ? `${group}.${key}` : key;
+    let handler = handlers.current.get(path);
+    if (!handler) {
+      handler = (...args) => {
+        const current = committedProps.current;
+        const owner = group ? current[group] : current;
+        const callback = owner?.[key];
+        return typeof callback === "function" ? Reflect.apply(callback, owner, args) : void 0;
+      };
+      handlers.current.set(path, handler);
+    }
+    return handler;
+  };
+  for (const key of ["onChange", "onRow"]) {
+    if (typeof props[key] === "function") next[key] = event(void 0, key);
+  }
+  for (const key of CONFIG_KEYS) {
+    let value = props[key];
+    if (value && typeof value === "object" && EVENT_KEYS[key]) {
+      const config = { ...value };
+      for (const name of EVENT_KEYS[key]) {
+        if (typeof config[name] === "function") config[name] = event(key, name);
+      }
+      value = config;
+    }
+    next[key] = retainShallowEqual(previous.current?.[key], value);
+  }
+  const result = next;
+  react.useLayoutEffect(() => {
+    committedProps.current = props;
+    previous.current = result;
+  });
+  return result;
+}
 
 // src/components/build-list-table-options.ts
 function resolveDensityLinkedHeight(densityOverride, configuredHeight) {
@@ -5897,6 +5999,7 @@ function retainEqualQueryOption(previous, next) {
   return previousKeys.length === nextKeys.length && previousKeys.every((key) => Object.is(previous[key], next[key])) ? previous : next;
 }
 function ReactListTableInner(props, ref) {
+  props = useStableTableProps(props);
   const {
     className,
     style,
@@ -6403,8 +6506,8 @@ function ReactListTableInner(props, ref) {
     ) : null
   ] });
 }
-var ReactListTable = react.forwardRef(
-  ReactListTableInner
+var ReactListTable = react.memo(
+  react.forwardRef(ReactListTableInner)
 );
 ReactListTable.EXPAND_COLUMN = listTable.EXPAND_COLUMN;
 ReactListTable.SELECTION_COLUMN = listTable.SELECTION_COLUMN;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useContext, useLayoutEffect, useId, Fragment as Fragment$1 } from 'react';
+import { createContext, memo, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useLayoutEffect, useContext, useId, Fragment as Fragment$1 } from 'react';
 import { createPortal } from 'react-dom';
 import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, setSharedScrollbarSettings, ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, resolveReactScrollbarMode, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
 import { EXPAND_COLUMN, SELECTION_COLUMN, ROW_SELECTION_COLUMN, resetListTableStoredColumnConfig, ListTable } from '@canvas-components/list-table';
@@ -476,6 +476,22 @@ function createSelectionChartOption(data, chartType, seriesIndex = 0) {
   const area = chartType.includes("area");
   const bumpData = chartType === "bump" ? resolveBumpRanks(data) : null;
   const option = {
+    dataZoom: data.labels.length > 30 ? [
+      {
+        type: "slider",
+        xAxisIndex: 0,
+        start: 0,
+        end: horizontal ? 100 : Math.max(1, 3e3 / data.labels.length)
+      },
+      { type: "inside", xAxisIndex: 0 },
+      {
+        type: "slider",
+        yAxisIndex: 0,
+        start: 0,
+        end: horizontal ? Math.max(1, 3e3 / data.labels.length) : 100
+      },
+      { type: "inside", yAxisIndex: 0 }
+    ] : void 0,
     categoryKeys: data.keys,
     grid: {
       show: true,
@@ -611,6 +627,7 @@ function ChartDialog(props) {
             display: "flex",
             flexDirection: "column",
             flex: 1,
+            minWidth: 0,
             minHeight: 0,
             gap: 12
           },
@@ -678,6 +695,8 @@ function ChartDialog(props) {
                 ref: chartHostRef,
                 style: {
                   width: "100%",
+                  minWidth: 0,
+                  overflow: "hidden",
                   height: 400,
                   flex: "1 1 200px",
                   minHeight: 160
@@ -795,7 +814,6 @@ function ResetMenu(props) {
 function ReactTableContextMenuView(props) {
   const { request } = props;
   const [closedRequest, setClosedRequest] = useState(null);
-  const menuOpen = request !== null && closedRequest !== request;
   const setMenuOpen = (open) => {
     setClosedRequest(open ? null : request);
   };
@@ -838,6 +856,7 @@ function ReactTableContextMenuView(props) {
   ) : null;
   const [customSelectionRequest, setCustomSelectionRequest] = useState(null);
   const [chartRequest, setChartRequest] = useState(null);
+  const menuOpen = request !== null && closedRequest !== request && !chartRequest;
   const [columnEditor, setColumnEditor] = useState(null);
   const columnDialogs = /* @__PURE__ */ jsx(Fragment, { children: columnEditor ? /* @__PURE__ */ jsx(
     ColumnEditorDialog,
@@ -882,6 +901,7 @@ function ReactTableContextMenuView(props) {
           getData: chartRequest.request.onCreateChart,
           onClose: () => {
             chartRequest.request.onClose();
+            setMenuOpen(false);
             setChartRequest(null);
           }
         }
@@ -1365,6 +1385,7 @@ function ReactTableContextMenuView(props) {
         getData: chartRequest.request.onCreateChart,
         onClose: () => {
           chartRequest.request.onClose();
+          setMenuOpen(false);
           setChartRequest(null);
         }
       }
@@ -5759,6 +5780,87 @@ function useReactListTableState(options) {
     }
   };
 }
+function retainShallowEqual(previous, next) {
+  if (Object.is(previous, next)) return previous;
+  if (!previous || !next || typeof previous !== "object" || typeof next !== "object" || Array.isArray(previous) || Array.isArray(next))
+    return next;
+  const left = previous;
+  const right = next;
+  const keys = Object.keys(right);
+  return Object.keys(left).length === keys.length && keys.every(
+    (key) => Object.prototype.hasOwnProperty.call(left, key) && Object.is(left[key], right[key])
+  ) ? previous : next;
+}
+var CONFIG_KEYS = [
+  "scroll",
+  "locale",
+  "theme",
+  "styles",
+  "keyboardNavigation",
+  "contextMenu",
+  "grouping",
+  "query",
+  "experimental",
+  "rowSelector",
+  "rowSelection",
+  "expandable",
+  "pagination",
+  "scrollbar",
+  "carouselScroll",
+  "cachePreferences",
+  "rowDrag",
+  "debug",
+  "exportOptions"
+];
+var EVENT_KEYS = {
+  query: ["onChange", "onError"],
+  pagination: ["onChange", "onShowSizeChange"],
+  rowSelection: ["onChange", "onSelect"],
+  expandable: ["onExpand", "onExpandedRowsChange"],
+  experimental: ["onOffscreenCanvasStatus"],
+  rowDrag: ["onDrop", "onDragEndRemove"],
+  debug: ["onPerformance"]
+};
+function useStableTableProps(props) {
+  const committedProps = useRef(props);
+  const previous = useRef();
+  const handlers = useRef(/* @__PURE__ */ new Map());
+  const next = { ...props };
+  const event = (group, key) => {
+    const path = group ? `${group}.${key}` : key;
+    let handler = handlers.current.get(path);
+    if (!handler) {
+      handler = (...args) => {
+        const current = committedProps.current;
+        const owner = group ? current[group] : current;
+        const callback = owner?.[key];
+        return typeof callback === "function" ? Reflect.apply(callback, owner, args) : void 0;
+      };
+      handlers.current.set(path, handler);
+    }
+    return handler;
+  };
+  for (const key of ["onChange", "onRow"]) {
+    if (typeof props[key] === "function") next[key] = event(void 0, key);
+  }
+  for (const key of CONFIG_KEYS) {
+    let value = props[key];
+    if (value && typeof value === "object" && EVENT_KEYS[key]) {
+      const config = { ...value };
+      for (const name of EVENT_KEYS[key]) {
+        if (typeof config[name] === "function") config[name] = event(key, name);
+      }
+      value = config;
+    }
+    next[key] = retainShallowEqual(previous.current?.[key], value);
+  }
+  const result = next;
+  useLayoutEffect(() => {
+    committedProps.current = props;
+    previous.current = result;
+  });
+  return result;
+}
 
 // src/components/build-list-table-options.ts
 function resolveDensityLinkedHeight(densityOverride, configuredHeight) {
@@ -5896,6 +5998,7 @@ function retainEqualQueryOption(previous, next) {
   return previousKeys.length === nextKeys.length && previousKeys.every((key) => Object.is(previous[key], next[key])) ? previous : next;
 }
 function ReactListTableInner(props, ref) {
+  props = useStableTableProps(props);
   const {
     className,
     style,
@@ -6402,8 +6505,8 @@ function ReactListTableInner(props, ref) {
     ) : null
   ] });
 }
-var ReactListTable = forwardRef(
-  ReactListTableInner
+var ReactListTable = memo(
+  forwardRef(ReactListTableInner)
 );
 ReactListTable.EXPAND_COLUMN = EXPAND_COLUMN;
 ReactListTable.SELECTION_COLUMN = SELECTION_COLUMN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/react-list-table",
-  "version": "0.3.39",
+  "version": "0.3.40",
   "description": "React adapter for the list table core engine.",
   "license": "MIT",
   "type": "module",
@@ -28,9 +28,9 @@
     "pnpm": ">=9.0.0"
   },
   "dependencies": {
-    "@canvas-components/chart": "0.3.7",
-    "@canvas-components/react-components": "0.3.17",
-    "@canvas-components/list-table": "0.3.33"
+    "@canvas-components/chart": "0.3.8",
+    "@canvas-components/list-table": "0.3.34",
+    "@canvas-components/react-components": "0.3.18"
   },
   "peerDependencies": {
     "react": ">=16.8.0",