@canvas-components/react-list-table 0.3.32 → 0.3.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +38 -6
- package/dist/index.js +39 -7
- package/package.json +5 -6
- package/assets/examples/basic.gif +0 -0
- package/assets/examples/cached-columns.gif +0 -0
- package/assets/examples/carousel-scroll.gif +0 -0
- package/assets/examples/cell-content.gif +0 -0
- package/assets/examples/context-menu.gif +0 -0
- package/assets/examples/data-format.gif +0 -0
- package/assets/examples/draggable.gif +0 -0
- package/assets/examples/editable-cell.gif +0 -0
- package/assets/examples/ellipsis-tooltip.gif +0 -0
- package/assets/examples/empty-state.gif +0 -0
- package/assets/examples/expandable.gif +0 -0
- package/assets/examples/header-actions.gif +0 -0
- package/assets/examples/highlight-mode.gif +0 -0
- package/assets/examples/merged-cells.gif +0 -0
- package/assets/examples/million-rows.gif +0 -0
- package/assets/examples/multi-header.gif +0 -0
- package/assets/examples/pagination.gif +0 -0
- package/assets/examples/remote-query.gif +0 -0
- package/assets/examples/resize.gif +0 -0
- package/assets/examples/row-drag.gif +0 -0
- package/assets/examples/row-selection.gif +0 -0
- package/assets/examples/sized.gif +0 -0
- package/assets/examples/striped.gif +0 -0
- package/assets/examples/summary-row.gif +0 -0
- package/assets/examples/super.gif +0 -0
- package/assets/examples/theme.gif +0 -0
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -728,7 +728,7 @@ function ScrollbarModeMenu(props) {
|
|
|
728
728
|
].map(([mode, label]) => ({
|
|
729
729
|
key: `scrollbar-mode-${mode}`,
|
|
730
730
|
label,
|
|
731
|
-
selected: (request.scrollbar
|
|
731
|
+
selected: reactComponents.resolveReactScrollbarMode(request.scrollbar) === mode,
|
|
732
732
|
onClick: () => {
|
|
733
733
|
request.onChangeScrollbar?.({
|
|
734
734
|
...request.scrollbar,
|
|
@@ -1792,6 +1792,7 @@ function ColumnEditorDialog(props) {
|
|
|
1792
1792
|
minWidth: item?.minWidth ?? Math.min(40, item?.width ?? 160),
|
|
1793
1793
|
maxWidth: item?.maxWidth ?? Math.max(2e3, item?.width ?? 160),
|
|
1794
1794
|
fixed: item?.fixed,
|
|
1795
|
+
visible: item ? item.checked || !!item.indeterminate : true,
|
|
1795
1796
|
sortOrder: item && (item.sortable === false || item.children?.length) ? void 0 : item ? request.sortState?.find((entry) => entry.key === item.key)?.order ?? null : null,
|
|
1796
1797
|
order: item?.order ?? (parentItem?.children?.length ?? request.columns?.length ?? 0) + 1
|
|
1797
1798
|
}));
|
|
@@ -1816,7 +1817,10 @@ function ColumnEditorDialog(props) {
|
|
|
1816
1817
|
fullscreenable: false,
|
|
1817
1818
|
onCancel: props.onClose,
|
|
1818
1819
|
onOk: () => {
|
|
1819
|
-
const nextError = request.onSaveColumn ? request.onSaveColumn(
|
|
1820
|
+
const nextError = request.onSaveColumn ? request.onSaveColumn({
|
|
1821
|
+
...draft,
|
|
1822
|
+
visible: draft.visible === (item ? item.checked || !!item.indeterminate : true) ? void 0 : draft.visible
|
|
1823
|
+
}) : "\u65E0\u6CD5\u4FDD\u5B58\u5217\u914D\u7F6E";
|
|
1820
1824
|
if (nextError) {
|
|
1821
1825
|
setError(nextError);
|
|
1822
1826
|
} else {
|
|
@@ -1899,6 +1903,25 @@ function ColumnEditorDialog(props) {
|
|
|
1899
1903
|
}
|
|
1900
1904
|
)
|
|
1901
1905
|
] }),
|
|
1906
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
|
|
1907
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u662F\u5426\u5C55\u793A\u5217" }),
|
|
1908
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1909
|
+
reactComponents.ReactSelect,
|
|
1910
|
+
{
|
|
1911
|
+
value: draft.visible === false ? "hidden" : "visible",
|
|
1912
|
+
allowClear: false,
|
|
1913
|
+
options: [
|
|
1914
|
+
{ label: "\u662F", value: "visible" },
|
|
1915
|
+
{
|
|
1916
|
+
label: "\u5426",
|
|
1917
|
+
value: "hidden",
|
|
1918
|
+
disabled: item?.disabled && draft.visible !== false
|
|
1919
|
+
}
|
|
1920
|
+
],
|
|
1921
|
+
onChange: (value) => update({ visible: value === "visible" })
|
|
1922
|
+
}
|
|
1923
|
+
)
|
|
1924
|
+
] }),
|
|
1902
1925
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: fieldStyle, children: [
|
|
1903
1926
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u6392\u5E8F\u65B9\u5F0F" }),
|
|
1904
1927
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5691,6 +5714,14 @@ function getColumnSettingsSignature(columns) {
|
|
|
5691
5714
|
}))
|
|
5692
5715
|
);
|
|
5693
5716
|
}
|
|
5717
|
+
|
|
5718
|
+
// src/components/stable-query-option.ts
|
|
5719
|
+
function retainEqualQueryOption(previous, next) {
|
|
5720
|
+
if (previous === next || !previous || !next) return next;
|
|
5721
|
+
const previousKeys = Object.keys(previous);
|
|
5722
|
+
const nextKeys = Object.keys(next);
|
|
5723
|
+
return previousKeys.length === nextKeys.length && previousKeys.every((key) => Object.is(previous[key], next[key])) ? previous : next;
|
|
5724
|
+
}
|
|
5694
5725
|
function ReactListTableInner(props, ref) {
|
|
5695
5726
|
const {
|
|
5696
5727
|
className,
|
|
@@ -5801,6 +5832,9 @@ function ReactListTableInner(props, ref) {
|
|
|
5801
5832
|
densityOverride,
|
|
5802
5833
|
summaryRowHeight
|
|
5803
5834
|
);
|
|
5835
|
+
const queryRef = react.useRef(query);
|
|
5836
|
+
queryRef.current = retainEqualQueryOption(queryRef.current, query);
|
|
5837
|
+
const stableQuery = queryRef.current;
|
|
5804
5838
|
const options = react.useMemo(() => {
|
|
5805
5839
|
const nextOptions = buildListTableOptions({
|
|
5806
5840
|
exportOptions,
|
|
@@ -5827,7 +5861,7 @@ function ReactListTableInner(props, ref) {
|
|
|
5827
5861
|
headerRowHeight: resolvedHeaderRowHeight,
|
|
5828
5862
|
summaryRowHeight: resolvedSummaryRowHeight,
|
|
5829
5863
|
overscanRowCount,
|
|
5830
|
-
query,
|
|
5864
|
+
query: stableQuery,
|
|
5831
5865
|
experimental,
|
|
5832
5866
|
rowSelector,
|
|
5833
5867
|
rowSelection,
|
|
@@ -5909,7 +5943,7 @@ function ReactListTableInner(props, ref) {
|
|
|
5909
5943
|
resolvedHeaderRowHeight,
|
|
5910
5944
|
resolvedSummaryRowHeight,
|
|
5911
5945
|
overscanRowCount,
|
|
5912
|
-
|
|
5946
|
+
stableQuery,
|
|
5913
5947
|
experimental,
|
|
5914
5948
|
rowSelector,
|
|
5915
5949
|
rowSelection,
|
|
@@ -6218,5 +6252,3 @@ Object.defineProperty(exports, "getListTableStoredPageSize", {
|
|
|
6218
6252
|
exports.ReactListTable = ReactListTable;
|
|
6219
6253
|
exports.ReactListTableDebugProvider = ReactListTableDebugProvider;
|
|
6220
6254
|
exports.ReactListTableExportNameDialog = ReactListTableExportNameDialog;
|
|
6221
|
-
//# sourceMappingURL=index.cjs.map
|
|
6222
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createContext, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useContext, useLayoutEffect, useId, Fragment as Fragment$1 } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, setSharedScrollbarSettings, ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
|
|
3
|
+
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';
|
|
4
4
|
import { EXPAND_COLUMN, SELECTION_COLUMN, ROW_SELECTION_COLUMN, resetListTableStoredColumnConfig, ListTable } from '@canvas-components/list-table';
|
|
5
5
|
export { EXPAND_COLUMN, ROW_SELECTION_COLUMN, SELECTION_COLUMN, getListTableStoredPageSize } from '@canvas-components/list-table';
|
|
6
6
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
@@ -727,7 +727,7 @@ function ScrollbarModeMenu(props) {
|
|
|
727
727
|
].map(([mode, label]) => ({
|
|
728
728
|
key: `scrollbar-mode-${mode}`,
|
|
729
729
|
label,
|
|
730
|
-
selected: (request.scrollbar
|
|
730
|
+
selected: resolveReactScrollbarMode(request.scrollbar) === mode,
|
|
731
731
|
onClick: () => {
|
|
732
732
|
request.onChangeScrollbar?.({
|
|
733
733
|
...request.scrollbar,
|
|
@@ -1791,6 +1791,7 @@ function ColumnEditorDialog(props) {
|
|
|
1791
1791
|
minWidth: item?.minWidth ?? Math.min(40, item?.width ?? 160),
|
|
1792
1792
|
maxWidth: item?.maxWidth ?? Math.max(2e3, item?.width ?? 160),
|
|
1793
1793
|
fixed: item?.fixed,
|
|
1794
|
+
visible: item ? item.checked || !!item.indeterminate : true,
|
|
1794
1795
|
sortOrder: item && (item.sortable === false || item.children?.length) ? void 0 : item ? request.sortState?.find((entry) => entry.key === item.key)?.order ?? null : null,
|
|
1795
1796
|
order: item?.order ?? (parentItem?.children?.length ?? request.columns?.length ?? 0) + 1
|
|
1796
1797
|
}));
|
|
@@ -1815,7 +1816,10 @@ function ColumnEditorDialog(props) {
|
|
|
1815
1816
|
fullscreenable: false,
|
|
1816
1817
|
onCancel: props.onClose,
|
|
1817
1818
|
onOk: () => {
|
|
1818
|
-
const nextError = request.onSaveColumn ? request.onSaveColumn(
|
|
1819
|
+
const nextError = request.onSaveColumn ? request.onSaveColumn({
|
|
1820
|
+
...draft,
|
|
1821
|
+
visible: draft.visible === (item ? item.checked || !!item.indeterminate : true) ? void 0 : draft.visible
|
|
1822
|
+
}) : "\u65E0\u6CD5\u4FDD\u5B58\u5217\u914D\u7F6E";
|
|
1819
1823
|
if (nextError) {
|
|
1820
1824
|
setError(nextError);
|
|
1821
1825
|
} else {
|
|
@@ -1898,6 +1902,25 @@ function ColumnEditorDialog(props) {
|
|
|
1898
1902
|
}
|
|
1899
1903
|
)
|
|
1900
1904
|
] }),
|
|
1905
|
+
/* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
|
|
1906
|
+
/* @__PURE__ */ jsx("span", { children: "\u662F\u5426\u5C55\u793A\u5217" }),
|
|
1907
|
+
/* @__PURE__ */ jsx(
|
|
1908
|
+
ReactSelect,
|
|
1909
|
+
{
|
|
1910
|
+
value: draft.visible === false ? "hidden" : "visible",
|
|
1911
|
+
allowClear: false,
|
|
1912
|
+
options: [
|
|
1913
|
+
{ label: "\u662F", value: "visible" },
|
|
1914
|
+
{
|
|
1915
|
+
label: "\u5426",
|
|
1916
|
+
value: "hidden",
|
|
1917
|
+
disabled: item?.disabled && draft.visible !== false
|
|
1918
|
+
}
|
|
1919
|
+
],
|
|
1920
|
+
onChange: (value) => update({ visible: value === "visible" })
|
|
1921
|
+
}
|
|
1922
|
+
)
|
|
1923
|
+
] }),
|
|
1901
1924
|
/* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
|
|
1902
1925
|
/* @__PURE__ */ jsx("span", { children: "\u6392\u5E8F\u65B9\u5F0F" }),
|
|
1903
1926
|
/* @__PURE__ */ jsx(
|
|
@@ -5690,6 +5713,14 @@ function getColumnSettingsSignature(columns) {
|
|
|
5690
5713
|
}))
|
|
5691
5714
|
);
|
|
5692
5715
|
}
|
|
5716
|
+
|
|
5717
|
+
// src/components/stable-query-option.ts
|
|
5718
|
+
function retainEqualQueryOption(previous, next) {
|
|
5719
|
+
if (previous === next || !previous || !next) return next;
|
|
5720
|
+
const previousKeys = Object.keys(previous);
|
|
5721
|
+
const nextKeys = Object.keys(next);
|
|
5722
|
+
return previousKeys.length === nextKeys.length && previousKeys.every((key) => Object.is(previous[key], next[key])) ? previous : next;
|
|
5723
|
+
}
|
|
5693
5724
|
function ReactListTableInner(props, ref) {
|
|
5694
5725
|
const {
|
|
5695
5726
|
className,
|
|
@@ -5800,6 +5831,9 @@ function ReactListTableInner(props, ref) {
|
|
|
5800
5831
|
densityOverride,
|
|
5801
5832
|
summaryRowHeight
|
|
5802
5833
|
);
|
|
5834
|
+
const queryRef = useRef(query);
|
|
5835
|
+
queryRef.current = retainEqualQueryOption(queryRef.current, query);
|
|
5836
|
+
const stableQuery = queryRef.current;
|
|
5803
5837
|
const options = useMemo(() => {
|
|
5804
5838
|
const nextOptions = buildListTableOptions({
|
|
5805
5839
|
exportOptions,
|
|
@@ -5826,7 +5860,7 @@ function ReactListTableInner(props, ref) {
|
|
|
5826
5860
|
headerRowHeight: resolvedHeaderRowHeight,
|
|
5827
5861
|
summaryRowHeight: resolvedSummaryRowHeight,
|
|
5828
5862
|
overscanRowCount,
|
|
5829
|
-
query,
|
|
5863
|
+
query: stableQuery,
|
|
5830
5864
|
experimental,
|
|
5831
5865
|
rowSelector,
|
|
5832
5866
|
rowSelection,
|
|
@@ -5908,7 +5942,7 @@ function ReactListTableInner(props, ref) {
|
|
|
5908
5942
|
resolvedHeaderRowHeight,
|
|
5909
5943
|
resolvedSummaryRowHeight,
|
|
5910
5944
|
overscanRowCount,
|
|
5911
|
-
|
|
5945
|
+
stableQuery,
|
|
5912
5946
|
experimental,
|
|
5913
5947
|
rowSelector,
|
|
5914
5948
|
rowSelection,
|
|
@@ -6199,5 +6233,3 @@ ReactListTable.SELECTION_COLUMN = SELECTION_COLUMN;
|
|
|
6199
6233
|
ReactListTable.ROW_SELECTION_COLUMN = ROW_SELECTION_COLUMN;
|
|
6200
6234
|
|
|
6201
6235
|
export { ReactListTable, ReactListTableDebugProvider, ReactListTableExportNameDialog };
|
|
6202
|
-
//# sourceMappingURL=index.js.map
|
|
6203
|
-
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canvas-components/react-list-table",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.33",
|
|
4
4
|
"description": "React adapter for the list table core engine.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
"**/*.css"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
|
-
"dist"
|
|
12
|
-
"assets"
|
|
11
|
+
"dist"
|
|
13
12
|
],
|
|
14
13
|
"main": "./dist/index.cjs",
|
|
15
14
|
"module": "./dist/index.js",
|
|
@@ -29,9 +28,9 @@
|
|
|
29
28
|
"pnpm": ">=9.0.0"
|
|
30
29
|
},
|
|
31
30
|
"dependencies": {
|
|
32
|
-
"@canvas-components/chart": "0.3.
|
|
33
|
-
"@canvas-components/list-table": "0.3.
|
|
34
|
-
"@canvas-components/react-components": "0.3.
|
|
31
|
+
"@canvas-components/chart": "0.3.7",
|
|
32
|
+
"@canvas-components/list-table": "0.3.29",
|
|
33
|
+
"@canvas-components/react-components": "0.3.16"
|
|
35
34
|
},
|
|
36
35
|
"peerDependencies": {
|
|
37
36
|
"react": ">=16.8.0",
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|