@m4l/components 9.3.36-JT20251128-beta.1 → 9.3.37-JT20251128-beta.2
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/components/DataGrid/contexts/DataGridContext/index.js +41 -268
- package/components/DataGrid/contexts/DataGridContext/types.d.ts +3 -20
- package/components/DataGrid/helpers/getAllViewModes/getAllViewModes.d.ts +19 -0
- package/components/DataGrid/helpers/getAllViewModes/getAllViewModes.js +6 -0
- package/components/DataGrid/helpers/getAllViewModes/getAllViewModes.test.d.ts +1 -0
- package/components/DataGrid/helpers/getAllViewModes/index.d.ts +1 -0
- package/components/DataGrid/helpers/getAllViewModes/index.js +1 -0
- package/components/DataGrid/helpers/getColumnsWidth/getColumnsWidth.d.ts +47 -0
- package/components/DataGrid/helpers/getColumnsWidth/getColumnsWidth.js +32 -0
- package/components/DataGrid/helpers/getColumnsWidth/getColumnsWidth.test.d.ts +1 -0
- package/components/DataGrid/helpers/getColumnsWidth/index.d.ts +1 -0
- package/components/DataGrid/helpers/getColumnsWidth/index.js +1 -0
- package/components/DataGrid/helpers/getIndexRowHeightVariant/getIndexRowHeightVariant.d.ts +24 -0
- package/components/DataGrid/helpers/getIndexRowHeightVariant/getIndexRowHeightVariant.js +12 -0
- package/components/DataGrid/helpers/getIndexRowHeightVariant/getIndexRowHeightVariant.test.d.ts +1 -0
- package/components/DataGrid/helpers/getIndexRowHeightVariant/index.d.ts +1 -0
- package/components/DataGrid/helpers/getIndexRowHeightVariant/index.js +1 -0
- package/components/DataGrid/helpers/getInitialColumnsConfig/getInitialColumnsConfig.d.ts +48 -0
- package/components/DataGrid/helpers/getInitialColumnsConfig/getInitialColumnsConfig.js +35 -0
- package/components/DataGrid/helpers/getInitialColumnsConfig/getInitialColumnsConfig.test.d.ts +1 -0
- package/components/DataGrid/helpers/getInitialColumnsConfig/index.d.ts +1 -0
- package/components/DataGrid/helpers/getInitialColumnsConfig/index.js +1 -0
- package/components/DataGrid/helpers/getViewMode/getViewMode.d.ts +41 -0
- package/components/DataGrid/helpers/getViewMode/getViewMode.js +19 -0
- package/components/DataGrid/helpers/getViewMode/getViewMode.test.d.ts +1 -0
- package/components/DataGrid/helpers/getViewMode/index.d.ts +1 -0
- package/components/DataGrid/helpers/getViewMode/index.js +1 -0
- package/components/DataGrid/helpers/getViewSpecificConfig/getViewSpecificConfig.d.ts +28 -0
- package/components/DataGrid/helpers/getViewSpecificConfig/getViewSpecificConfig.js +22 -0
- package/components/DataGrid/helpers/getViewSpecificConfig/getViewSpecificConfig.test.d.ts +1 -0
- package/components/DataGrid/helpers/getViewSpecificConfig/index.d.ts +1 -0
- package/components/DataGrid/helpers/getViewSpecificConfig/index.js +1 -0
- package/components/DataGrid/helpers/getViewSuffix/getViewSuffix.d.ts +24 -0
- package/components/DataGrid/helpers/getViewSuffix/getViewSuffix.js +9 -0
- package/components/DataGrid/helpers/getViewSuffix/getViewSuffix.test.d.ts +1 -0
- package/components/DataGrid/helpers/getViewSuffix/index.d.ts +1 -0
- package/components/DataGrid/helpers/getViewSuffix/index.js +1 -0
- package/components/DataGrid/helpers/index.d.ts +13 -0
- package/components/DataGrid/helpers/index.js +1 -0
- package/components/DataGrid/helpers/loadViewConfig/index.d.ts +1 -0
- package/components/DataGrid/helpers/loadViewConfig/index.js +1 -0
- package/components/DataGrid/helpers/loadViewConfig/loadViewConfig.d.ts +23 -0
- package/components/DataGrid/helpers/loadViewConfig/loadViewConfig.js +12 -0
- package/components/DataGrid/helpers/loadViewConfig/loadViewConfig.test.d.ts +1 -0
- package/components/DataGrid/helpers/saveColumnsWidth/index.d.ts +1 -0
- package/components/DataGrid/helpers/saveColumnsWidth/index.js +1 -0
- package/components/DataGrid/helpers/saveColumnsWidth/saveColumnsWidth.d.ts +52 -0
- package/components/DataGrid/helpers/saveColumnsWidth/saveColumnsWidth.js +18 -0
- package/components/DataGrid/helpers/saveColumnsWidth/saveColumnsWidth.test.d.ts +1 -0
- package/components/DataGrid/helpers/saveViewConfig/index.d.ts +1 -0
- package/components/DataGrid/helpers/saveViewConfig/index.js +1 -0
- package/components/DataGrid/helpers/saveViewConfig/saveViewConfig.d.ts +35 -0
- package/components/DataGrid/helpers/saveViewConfig/saveViewConfig.js +15 -0
- package/components/DataGrid/helpers/saveViewConfig/saveViewConfig.test.d.ts +1 -0
- package/components/DataGrid/helpers/saveViewMode/index.d.ts +1 -0
- package/components/DataGrid/helpers/saveViewMode/index.js +1 -0
- package/components/DataGrid/helpers/saveViewMode/saveViewMode.d.ts +33 -0
- package/components/DataGrid/helpers/saveViewMode/saveViewMode.js +13 -0
- package/components/DataGrid/helpers/saveViewMode/saveViewMode.test.d.ts +1 -0
- package/components/DataGrid/hooks/index.d.ts +6 -0
- package/components/DataGrid/hooks/index.js +1 -0
- package/components/DataGrid/hooks/useChangeColumnsConfig/index.d.ts +1 -0
- package/components/DataGrid/hooks/useChangeColumnsConfig/index.js +1 -0
- package/components/DataGrid/hooks/useChangeColumnsConfig/useChangeColumnsConfig.d.ts +9 -0
- package/components/DataGrid/hooks/useChangeColumnsConfig/useChangeColumnsConfig.js +27 -0
- package/components/DataGrid/hooks/useChangeColumnsConfig/useChangeColumnsConfig.test.d.ts +1 -0
- package/components/DataGrid/hooks/useChangeColumnsOrder/index.d.ts +1 -0
- package/components/DataGrid/hooks/useChangeColumnsOrder/index.js +1 -0
- package/components/DataGrid/hooks/useChangeColumnsOrder/useChangeColumnsOrder.d.ts +10 -0
- package/components/DataGrid/hooks/useChangeColumnsOrder/useChangeColumnsOrder.js +34 -0
- package/components/DataGrid/hooks/useChangeColumnsOrder/useChangeColumnsOrder.test.d.ts +1 -0
- package/components/DataGrid/hooks/useColumnsWidth/index.d.ts +1 -0
- package/components/DataGrid/hooks/useColumnsWidth/index.js +1 -0
- package/components/DataGrid/hooks/useColumnsWidth/useColumnsWidth.d.ts +11 -0
- package/components/DataGrid/hooks/useColumnsWidth/useColumnsWidth.js +29 -0
- package/components/DataGrid/hooks/useColumnsWidth/useColumnsWidth.test.d.ts +1 -0
- package/components/DataGrid/hooks/useRowHeight/index.d.ts +1 -0
- package/components/DataGrid/hooks/useRowHeight/index.js +1 -0
- package/components/DataGrid/hooks/useRowHeight/useRowHeight.d.ts +28 -0
- package/components/DataGrid/hooks/useRowHeight/useRowHeight.js +51 -0
- package/components/DataGrid/hooks/useRowHeight/useRowHeight.test.d.ts +1 -0
- package/components/DataGrid/hooks/useViewConfig/index.d.ts +1 -0
- package/components/DataGrid/hooks/useViewConfig/index.js +1 -0
- package/components/DataGrid/hooks/useViewConfig/useViewConfig.d.ts +9 -0
- package/components/DataGrid/hooks/useViewConfig/useViewConfig.js +30 -0
- package/components/DataGrid/hooks/useViewConfig/useViewConfig.test.d.ts +1 -0
- package/components/DataGrid/hooks/useViewMode/index.d.ts +1 -0
- package/components/DataGrid/hooks/useViewMode/index.js +1 -0
- package/components/DataGrid/hooks/useViewMode/useViewMode.d.ts +31 -0
- package/components/DataGrid/hooks/useViewMode/useViewMode.js +44 -0
- package/components/DataGrid/hooks/useViewMode/useViewMode.test.d.ts +1 -0
- package/components/DataGrid/index.d.ts +5 -4
- package/components/DataGrid/types.helpers.d.ts +55 -0
- package/components/DataGrid/types.helpers.js +1 -0
- package/components/DataGrid/types.hooks.d.ts +81 -0
- package/hooks/useDataGridPersistence/constants.d.ts +1 -0
- package/hooks/useDataGridPersistence/constants.js +4 -2
- package/hooks/useDataGridPersistence/useDataGridPersistence.js +5 -2
- package/package.json +1 -1
|
@@ -1,146 +1,22 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState,
|
|
3
|
-
import {
|
|
4
|
-
import { useFirstRender, useIsMobile } from "@m4l/graphics";
|
|
2
|
+
import { useState, useEffect, useMemo, createContext } from "react";
|
|
3
|
+
import { useFirstRender } from "@m4l/graphics";
|
|
5
4
|
import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
|
|
6
5
|
import { a as DATAGRID_ROW_HEIGHTS, b as DATAGRID_ROW_HEADER_HEIGHTS, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
|
|
7
6
|
import { C as ControlNavigateSlots, a as ColumnsConfigSlots, T as TextEditorSlots, b as TableSlots, R as RowsCountSlots, A as ActionsSlots, D as DataGridSlots } from "../../slots/DataGridEnum.js";
|
|
8
7
|
import { deepEqual } from "fast-equals";
|
|
8
|
+
import { u as useViewMode } from "../../hooks/useViewMode/useViewMode.js";
|
|
9
|
+
import { u as useRowHeight } from "../../hooks/useRowHeight/useRowHeight.js";
|
|
10
|
+
import { u as useColumnsWidth } from "../../hooks/useColumnsWidth/useColumnsWidth.js";
|
|
11
|
+
import { u as useViewConfig } from "../../hooks/useViewConfig/useViewConfig.js";
|
|
12
|
+
import { u as useChangeColumnsConfig } from "../../hooks/useChangeColumnsConfig/useChangeColumnsConfig.js";
|
|
13
|
+
import { u as useChangeColumnsOrder } from "../../hooks/useChangeColumnsOrder/useChangeColumnsOrder.js";
|
|
14
|
+
import { g as getColumnsWidth } from "../../helpers/getColumnsWidth/getColumnsWidth.js";
|
|
15
|
+
import { g as getInitialColumnsConfig } from "../../helpers/getInitialColumnsConfig/getInitialColumnsConfig.js";
|
|
16
|
+
import { g as getAllViewModes } from "../../helpers/getAllViewModes/getAllViewModes.js";
|
|
17
|
+
import { g as getViewSpecificConfig } from "../../helpers/getViewSpecificConfig/getViewSpecificConfig.js";
|
|
18
|
+
import { g as getViewMode } from "../../helpers/getViewMode/getViewMode.js";
|
|
9
19
|
const DataGridContext = createContext(null);
|
|
10
|
-
function getColumnsWidth(id, columns, defaultUserColumns) {
|
|
11
|
-
const newMap = /* @__PURE__ */ new Map();
|
|
12
|
-
let storeColumnsWidth;
|
|
13
|
-
try {
|
|
14
|
-
const item = window.localStorage.getItem(`${id}_columns_width`);
|
|
15
|
-
storeColumnsWidth = item !== null ? new Map(JSON.parse(item)) : /* @__PURE__ */ new Map();
|
|
16
|
-
} catch (_e) {
|
|
17
|
-
storeColumnsWidth = /* @__PURE__ */ new Map();
|
|
18
|
-
}
|
|
19
|
-
for (let i = 0; i < columns.length; i++) {
|
|
20
|
-
let width;
|
|
21
|
-
if (defaultUserColumns) {
|
|
22
|
-
try {
|
|
23
|
-
width = defaultUserColumns.columnsWidths[columns[i].key];
|
|
24
|
-
} catch (_e) {
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
if (width === void 0) {
|
|
28
|
-
const storeWidth = storeColumnsWidth.get(columns[i].key);
|
|
29
|
-
if (typeof storeWidth === "number") {
|
|
30
|
-
width = storeWidth;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
if (width !== void 0) {
|
|
34
|
-
newMap.set(columns[i].key, width);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
return newMap;
|
|
38
|
-
}
|
|
39
|
-
function saveColumnsWidth(id, storeColumnsWidth, onChangeUserColumns) {
|
|
40
|
-
if (onChangeUserColumns) {
|
|
41
|
-
const columnsWidthObject = castMapColumnsWidthToRecord(storeColumnsWidth);
|
|
42
|
-
onChangeUserColumns({
|
|
43
|
-
reason: "columnsWidths",
|
|
44
|
-
userConfig: columnsWidthObject
|
|
45
|
-
});
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
localStorage.setItem(
|
|
49
|
-
`${id}_columns_width`,
|
|
50
|
-
JSON.stringify([...storeColumnsWidth])
|
|
51
|
-
);
|
|
52
|
-
}
|
|
53
|
-
const getAllViewModes = () => {
|
|
54
|
-
return ["table", "cards"];
|
|
55
|
-
};
|
|
56
|
-
const getViewSpecificConfig = (viewMode) => {
|
|
57
|
-
const configs = {
|
|
58
|
-
table: {
|
|
59
|
-
defaults: { frozen: false },
|
|
60
|
-
originalDefaults: { originalFrozen: false },
|
|
61
|
-
dynamicOriginalProperty: (item) => ({
|
|
62
|
-
originalFrozen: item?.frozen ?? false
|
|
63
|
-
})
|
|
64
|
-
},
|
|
65
|
-
cards: {
|
|
66
|
-
defaults: { showTitle: true },
|
|
67
|
-
originalDefaults: { originalShowTitle: true },
|
|
68
|
-
dynamicOriginalProperty: (item) => ({
|
|
69
|
-
originalShowTitle: item?.showTitle ?? true
|
|
70
|
-
})
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
return configs[viewMode] || configs.table;
|
|
74
|
-
};
|
|
75
|
-
const getViewSuffix = (viewMode) => {
|
|
76
|
-
if (viewMode === "table") {
|
|
77
|
-
return "";
|
|
78
|
-
}
|
|
79
|
-
return `_${viewMode}`;
|
|
80
|
-
};
|
|
81
|
-
function getInitialColumnsConfig(id, columns, viewMode, defaultUserConfig, viewSpecificDefaults, originalViewSpecificDefaults) {
|
|
82
|
-
let columnsConfig;
|
|
83
|
-
if (defaultUserConfig) {
|
|
84
|
-
columnsConfig = defaultUserConfig;
|
|
85
|
-
} else {
|
|
86
|
-
columnsConfig = loadViewConfig(
|
|
87
|
-
id,
|
|
88
|
-
getViewSuffix(viewMode)
|
|
89
|
-
) || [];
|
|
90
|
-
}
|
|
91
|
-
return columns.map((column, index) => {
|
|
92
|
-
const existingConfig = columnsConfig.find((c) => c.key === column.key);
|
|
93
|
-
const columnConfigIndex = existingConfig ? columnsConfig.indexOf(existingConfig) : -1;
|
|
94
|
-
const baseConfig = {
|
|
95
|
-
key: column.key,
|
|
96
|
-
name: typeof column.name === "string" ? column.name : String(column.name),
|
|
97
|
-
hidden: column.hidden === void 0 ? false : column.hidden,
|
|
98
|
-
index: columnConfigIndex > -1 ? columnConfigIndex : index,
|
|
99
|
-
visible: existingConfig?.visible !== void 0 ? existingConfig.visible : column.visible === void 0 ? true : column.visible,
|
|
100
|
-
originalIndex: index,
|
|
101
|
-
originalVisible: column.visible === void 0 ? true : column.visible
|
|
102
|
-
};
|
|
103
|
-
return {
|
|
104
|
-
...baseConfig,
|
|
105
|
-
...viewSpecificDefaults,
|
|
106
|
-
...originalViewSpecificDefaults,
|
|
107
|
-
...existingConfig || {}
|
|
108
|
-
};
|
|
109
|
-
}).sort((a, b) => a.index - b.index);
|
|
110
|
-
}
|
|
111
|
-
function saveViewConfig(id, viewSuffix, config, onChangeCallback) {
|
|
112
|
-
if (onChangeCallback) {
|
|
113
|
-
const reason = viewSuffix === "" ? "columnsConfig" : `columnsConfig${viewSuffix.replace("_", "")}`;
|
|
114
|
-
onChangeCallback({
|
|
115
|
-
reason,
|
|
116
|
-
userConfig: config
|
|
117
|
-
});
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
const storageKey = viewSuffix === "" ? `${id}_columns_config` : `${id}_columns_config${viewSuffix}`;
|
|
121
|
-
localStorage.setItem(storageKey, JSON.stringify(config));
|
|
122
|
-
}
|
|
123
|
-
function loadViewConfig(id, viewSuffix) {
|
|
124
|
-
try {
|
|
125
|
-
const storageKey = viewSuffix === "" ? `${id}_columns_config` : `${id}_columns_config${viewSuffix}`;
|
|
126
|
-
const stored = localStorage.getItem(storageKey);
|
|
127
|
-
return stored ? JSON.parse(stored) : null;
|
|
128
|
-
} catch (_e) {
|
|
129
|
-
return null;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
function saveViewMode(id, viewMode) {
|
|
133
|
-
localStorage.setItem(`${id}_view_mode`, viewMode);
|
|
134
|
-
}
|
|
135
|
-
function getIndexRowHeightVariant(variant) {
|
|
136
|
-
if (variant === "compact") {
|
|
137
|
-
return 0;
|
|
138
|
-
}
|
|
139
|
-
if (variant === "standard") {
|
|
140
|
-
return 1;
|
|
141
|
-
}
|
|
142
|
-
return 2;
|
|
143
|
-
}
|
|
144
20
|
function DataGridProvider(props) {
|
|
145
21
|
const {
|
|
146
22
|
id,
|
|
@@ -167,7 +43,32 @@ function DataGridProvider(props) {
|
|
|
167
43
|
cardsViewConfig
|
|
168
44
|
} = props;
|
|
169
45
|
const isFirstRender = useFirstRender([columns, id]);
|
|
170
|
-
const
|
|
46
|
+
const { viewModeState, setViewModeState, handleViewModeChange } = useViewMode({
|
|
47
|
+
id,
|
|
48
|
+
viewMode,
|
|
49
|
+
defaultViewMode,
|
|
50
|
+
onViewModeChange,
|
|
51
|
+
onChangeUserColumns
|
|
52
|
+
});
|
|
53
|
+
const { currentRowHeightVariant, setRowHeightVariant } = useRowHeight({
|
|
54
|
+
rowHeights,
|
|
55
|
+
rowHeaderHeights,
|
|
56
|
+
initialRowHeightVariant
|
|
57
|
+
});
|
|
58
|
+
const { columnsWidths, setColumnsWidths, onChangeColumnWidth } = useColumnsWidth({
|
|
59
|
+
id,
|
|
60
|
+
onChangeUserColumns
|
|
61
|
+
});
|
|
62
|
+
const { getConfigColumns, updateConfigColumns } = useViewConfig();
|
|
63
|
+
const { onChangeColumnsConfig } = useChangeColumnsConfig({
|
|
64
|
+
id,
|
|
65
|
+
onChangeUserColumns,
|
|
66
|
+
updateConfigColumns
|
|
67
|
+
});
|
|
68
|
+
const { onChangeColumnsOrder } = useChangeColumnsOrder({
|
|
69
|
+
getConfigColumns,
|
|
70
|
+
onChangeColumnsConfig
|
|
71
|
+
});
|
|
171
72
|
const classes = getComponentClasses(DATAGRID_PREFIX_NAME, {
|
|
172
73
|
...DataGridSlots,
|
|
173
74
|
...ActionsSlots,
|
|
@@ -177,80 +78,8 @@ function DataGridProvider(props) {
|
|
|
177
78
|
...ColumnsConfigSlots,
|
|
178
79
|
...ControlNavigateSlots
|
|
179
80
|
});
|
|
180
|
-
const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
|
|
181
|
-
const [viewConfig, setViewConfig] = useState(() => ({
|
|
182
|
-
table: [],
|
|
183
|
-
cards: []
|
|
184
|
-
}));
|
|
185
|
-
const getConfigColumns = useCallback(
|
|
186
|
-
(viewModeParam) => {
|
|
187
|
-
return viewConfig[viewModeParam];
|
|
188
|
-
},
|
|
189
|
-
[viewConfig]
|
|
190
|
-
);
|
|
191
|
-
const updateConfigColumns = useCallback(
|
|
192
|
-
(viewModeParam, config) => {
|
|
193
|
-
setViewConfig((prev) => ({
|
|
194
|
-
...prev,
|
|
195
|
-
[viewModeParam]: config
|
|
196
|
-
}));
|
|
197
|
-
},
|
|
198
|
-
[]
|
|
199
|
-
);
|
|
200
81
|
const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
|
|
201
82
|
const [sortColumns, setSortColumns] = useState([]);
|
|
202
|
-
const [viewModeState, setViewModeState] = useState(() => {
|
|
203
|
-
if (viewMode) {
|
|
204
|
-
return viewMode;
|
|
205
|
-
}
|
|
206
|
-
try {
|
|
207
|
-
const savedViewMode = localStorage.getItem(`${id}_view_mode`);
|
|
208
|
-
if (savedViewMode === "cards" || savedViewMode === "table") {
|
|
209
|
-
return savedViewMode;
|
|
210
|
-
}
|
|
211
|
-
} catch (_e) {
|
|
212
|
-
}
|
|
213
|
-
if (defaultViewMode) {
|
|
214
|
-
return defaultViewMode;
|
|
215
|
-
}
|
|
216
|
-
return isMobile ? "cards" : "table";
|
|
217
|
-
});
|
|
218
|
-
const handleViewModeChange = useCallback(
|
|
219
|
-
(newViewMode) => {
|
|
220
|
-
setViewModeState(newViewMode);
|
|
221
|
-
saveViewMode(id, newViewMode);
|
|
222
|
-
onViewModeChange?.(newViewMode);
|
|
223
|
-
},
|
|
224
|
-
[onViewModeChange, id]
|
|
225
|
-
);
|
|
226
|
-
useEffect(() => {
|
|
227
|
-
if (viewMode !== void 0) {
|
|
228
|
-
setViewModeState(viewMode);
|
|
229
|
-
}
|
|
230
|
-
}, [viewMode]);
|
|
231
|
-
const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState(() => {
|
|
232
|
-
if (typeof rowHeights !== typeof rowHeaderHeights) {
|
|
233
|
-
throw new Error("Must be same type rowheights and rowHeaderTypes");
|
|
234
|
-
}
|
|
235
|
-
if (typeof rowHeights === "number" && typeof rowHeaderHeights === "number") {
|
|
236
|
-
return {
|
|
237
|
-
rowHVariant: "compact",
|
|
238
|
-
rowHeight: rowHeights,
|
|
239
|
-
rowHeaderHeight: rowHeaderHeights
|
|
240
|
-
};
|
|
241
|
-
}
|
|
242
|
-
if (typeof rowHeights !== "number" && rowHeights.length !== 3) {
|
|
243
|
-
throw new Error("Must be 3 heights");
|
|
244
|
-
}
|
|
245
|
-
if (typeof rowHeaderHeights !== "number" && rowHeaderHeights.length !== 3) {
|
|
246
|
-
throw new Error("Must be 3 HeaderHeights");
|
|
247
|
-
}
|
|
248
|
-
return {
|
|
249
|
-
rowHVariant: initialRowHeightVariant,
|
|
250
|
-
rowHeight: typeof rowHeights !== "number" ? rowHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeights,
|
|
251
|
-
rowHeaderHeight: typeof rowHeaderHeights !== "number" ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeaderHeights
|
|
252
|
-
};
|
|
253
|
-
});
|
|
254
83
|
useEffect(() => {
|
|
255
84
|
const keys = new Set(columns.map((c) => c.key));
|
|
256
85
|
if (sortSettings?.sortsColumns) {
|
|
@@ -316,10 +145,10 @@ function DataGridProvider(props) {
|
|
|
316
145
|
}
|
|
317
146
|
}, [columns, sortSettings, filterSettings, cardsViewConfig]);
|
|
318
147
|
const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
|
|
319
|
-
let timerSaveColumns;
|
|
320
148
|
useEffect(() => {
|
|
321
149
|
if (isFirstRender) {
|
|
322
150
|
setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
|
|
151
|
+
setViewModeState(getViewMode(id, defaultUserColumns, defaultViewMode) ?? "table");
|
|
323
152
|
updateConfigColumns(
|
|
324
153
|
"table",
|
|
325
154
|
getInitialColumnsConfig(
|
|
@@ -451,65 +280,9 @@ function DataGridProvider(props) {
|
|
|
451
280
|
});
|
|
452
281
|
}
|
|
453
282
|
}, [columns, id]);
|
|
454
|
-
const onChangeColumnsConfig = useCallback(
|
|
455
|
-
(viewModeParam, newConfig) => {
|
|
456
|
-
saveViewConfig(
|
|
457
|
-
id,
|
|
458
|
-
getViewSuffix(viewModeParam),
|
|
459
|
-
newConfig,
|
|
460
|
-
onChangeUserColumns
|
|
461
|
-
);
|
|
462
|
-
updateConfigColumns(viewModeParam, newConfig);
|
|
463
|
-
},
|
|
464
|
-
[id, onChangeUserColumns, updateConfigColumns]
|
|
465
|
-
);
|
|
466
|
-
const onChangeColumnsOrder = useCallback(
|
|
467
|
-
(viewModeParam, sourceKey, targetKey) => {
|
|
468
|
-
if (sourceKey === targetKey) {
|
|
469
|
-
return;
|
|
470
|
-
}
|
|
471
|
-
const currentConfig = getConfigColumns(viewModeParam);
|
|
472
|
-
const sourceColumnIndex = currentConfig.findIndex(
|
|
473
|
-
(c) => c.key === sourceKey
|
|
474
|
-
);
|
|
475
|
-
const targetColumnIndex = currentConfig.findIndex(
|
|
476
|
-
(c) => c.key === targetKey
|
|
477
|
-
);
|
|
478
|
-
const reorderedConfig = [...currentConfig];
|
|
479
|
-
reorderedConfig.splice(
|
|
480
|
-
targetColumnIndex,
|
|
481
|
-
0,
|
|
482
|
-
reorderedConfig.splice(sourceColumnIndex, 1)[0]
|
|
483
|
-
);
|
|
484
|
-
onChangeColumnsConfig(viewModeParam, reorderedConfig);
|
|
485
|
-
},
|
|
486
|
-
[getConfigColumns, onChangeColumnsConfig]
|
|
487
|
-
);
|
|
488
|
-
const onChangeColumnWidth = (columnKey, width) => {
|
|
489
|
-
columnsWidths.set(columnKey, Math.round(width));
|
|
490
|
-
if (timerSaveColumns) {
|
|
491
|
-
clearTimeout(timerSaveColumns);
|
|
492
|
-
}
|
|
493
|
-
timerSaveColumns = setTimeout(() => {
|
|
494
|
-
saveColumnsWidth(id, columnsWidths, onChangeUserColumns);
|
|
495
|
-
}, 500);
|
|
496
|
-
};
|
|
497
283
|
const setRowFilterCountInternal = (newRowsCount) => {
|
|
498
284
|
setRowFilterCount(newRowsCount);
|
|
499
285
|
};
|
|
500
|
-
const setCurrentRowHeightInternal = useCallback(
|
|
501
|
-
(newVariant) => {
|
|
502
|
-
if (typeof rowHeights === "number" || typeof rowHeaderHeights === "number") {
|
|
503
|
-
throw new Error("Only use setCurrentRowHeight with vector rowHeights");
|
|
504
|
-
}
|
|
505
|
-
setCurrentRowHeightVariant({
|
|
506
|
-
rowHVariant: newVariant,
|
|
507
|
-
rowHeight: rowHeights[getIndexRowHeightVariant(newVariant)],
|
|
508
|
-
rowHeaderHeight: rowHeaderHeights[getIndexRowHeightVariant(newVariant)]
|
|
509
|
-
});
|
|
510
|
-
},
|
|
511
|
-
[setCurrentRowHeightVariant, rowHeights, rowHeaderHeights]
|
|
512
|
-
);
|
|
513
286
|
return /* @__PURE__ */ jsx(
|
|
514
287
|
DataGridContext.Provider,
|
|
515
288
|
{
|
|
@@ -529,7 +302,7 @@ function DataGridProvider(props) {
|
|
|
529
302
|
onChangeColumnWidth,
|
|
530
303
|
setRowsCount: setRowFilterCountInternal,
|
|
531
304
|
rowActionsGetter,
|
|
532
|
-
setRowHeightVariant
|
|
305
|
+
setRowHeightVariant,
|
|
533
306
|
onCheckedRowsChange,
|
|
534
307
|
checkedRowsMultiple,
|
|
535
308
|
rowKeyGetter,
|
|
@@ -3,21 +3,12 @@ import { RowKey, RowHeightVariants, GridProps } from '../../types';
|
|
|
3
3
|
import { Maybe } from '@m4l/core';
|
|
4
4
|
import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from '../../slots/DataGridEnum';
|
|
5
5
|
import { SortColumn } from 'react-data-grid';
|
|
6
|
-
|
|
7
|
-
* Configuración base genérica que puede extenderse con propiedades específicas de cualquier vista
|
|
8
|
-
* USO INTERNO: El sistema usa esto para manejar genéricamente las configuraciones
|
|
9
|
-
*/
|
|
10
|
-
export type BaseViewConfig<TViewSpecific = {}> = TViewSpecific & {
|
|
11
|
-
key: string;
|
|
12
|
-
visible: boolean;
|
|
13
|
-
index: number;
|
|
14
|
-
name?: string;
|
|
15
|
-
};
|
|
6
|
+
import { IGridConfig, BaseViewConfig } from '../../types.helpers';
|
|
16
7
|
/**
|
|
17
8
|
* Configuración extendida genérica con propiedades originales
|
|
18
9
|
* USO INTERNO: El contexto usa esto para el estado interno con propiedades de tracking
|
|
19
10
|
*/
|
|
20
|
-
export type IViewConfig<TViewSpecific =
|
|
11
|
+
export type IViewConfig<TViewSpecific = object, TOriginalViewSpecific = object> = BaseViewConfig<TViewSpecific> & {
|
|
21
12
|
hidden: boolean;
|
|
22
13
|
originalIndex: number;
|
|
23
14
|
originalVisible: boolean;
|
|
@@ -62,15 +53,6 @@ export interface IConfigColumnCards extends Omit<IConfigColumn, 'frozen' | 'orig
|
|
|
62
53
|
originalShowTitle: boolean;
|
|
63
54
|
}
|
|
64
55
|
export type ViewMode = 'table' | 'cards';
|
|
65
|
-
/**
|
|
66
|
-
* Configuración base del Grid (API pública original)
|
|
67
|
-
* USO: Tipo base para defaultUserColumns - mantiene retrocompatibilidad
|
|
68
|
-
* IMPORTANTE: No modificar para mantener retrocompatibilidad con código existente
|
|
69
|
-
*/
|
|
70
|
-
export interface IGridConfig {
|
|
71
|
-
columnsConfig: BaseConfigColumn[];
|
|
72
|
-
columnsWidths: Record<RowKey, number>;
|
|
73
|
-
}
|
|
74
56
|
/**
|
|
75
57
|
* Configuración extendida del Grid para soportar múltiples vistas
|
|
76
58
|
* USO: Para nuevas implementaciones que soporten cards y futuras vistas
|
|
@@ -78,6 +60,7 @@ export interface IGridConfig {
|
|
|
78
60
|
*/
|
|
79
61
|
export interface IGridConfigExtended extends IGridConfig {
|
|
80
62
|
columnsConfigCards?: BaseConfigColumnCards[];
|
|
63
|
+
viewMode?: ViewMode;
|
|
81
64
|
}
|
|
82
65
|
export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
|
|
83
66
|
id: number | string;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ViewMode } from '../../contexts/DataGridContext/types';
|
|
2
|
+
/**
|
|
3
|
+
* Obtiene todos los modos de vista disponibles en el DataGrid.
|
|
4
|
+
*
|
|
5
|
+
* ## Modos disponibles
|
|
6
|
+
*
|
|
7
|
+
* - `table`: Vista de tabla tradicional con filas y columnas
|
|
8
|
+
* - `cards`: Vista de tarjetas para visualización compacta
|
|
9
|
+
*
|
|
10
|
+
* ## Uso
|
|
11
|
+
*
|
|
12
|
+
* Esta función centraliza los modos de vista disponibles,
|
|
13
|
+
* facilitando la extensión futura si se agregan nuevos modos.
|
|
14
|
+
* @returns Array con los modos de vista disponibles
|
|
15
|
+
* @example
|
|
16
|
+
* const modes = getAllViewModes();
|
|
17
|
+
* // ['table', 'cards']
|
|
18
|
+
*/
|
|
19
|
+
export declare const getAllViewModes: () => ViewMode[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getAllViewModes } from './getAllViewModes';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Column } from 'react-data-grid';
|
|
2
|
+
import { Maybe } from '@m4l/core';
|
|
3
|
+
import { RowKey } from '../../types';
|
|
4
|
+
import { IGridConfig } from '../../types.helpers';
|
|
5
|
+
/**
|
|
6
|
+
* Obtiene la configuración de anchos de las columnas del DataGrid.
|
|
7
|
+
*
|
|
8
|
+
* ## Flujo de persistencia
|
|
9
|
+
*
|
|
10
|
+
* Esta función obtiene los anchos de columnas siguiendo una jerarquía de precedencia:
|
|
11
|
+
*
|
|
12
|
+
* 1. **defaultUserColumns** (Backend/API) - Prioridad máxima
|
|
13
|
+
* Configuración que viene del backend cuando el componente se monta.
|
|
14
|
+
* En producción, esta es la fuente principal de datos persistidos.
|
|
15
|
+
*
|
|
16
|
+
* 2. **localStorage** - Fallback local
|
|
17
|
+
* Solo se usa cuando NO hay configuración del backend.
|
|
18
|
+
* Útil para desarrollo o cuando no hay integración con backend.
|
|
19
|
+
*
|
|
20
|
+
* Si no se encuentra configuración en ninguna fuente, la columna no se incluye
|
|
21
|
+
* en el Map resultante y usará el ancho por defecto definido en la columna.
|
|
22
|
+
*
|
|
23
|
+
* ## Relación con saveColumnsWidth
|
|
24
|
+
*
|
|
25
|
+
* - Cuando el usuario modifica anchos, `saveColumnsWidth` envía los cambios al backend
|
|
26
|
+
* mediante el callback `onChangeUserColumns`
|
|
27
|
+
* - En la siguiente carga, esos datos vuelven como `defaultUserColumns`
|
|
28
|
+
* - localStorage es solo un fallback cuando no hay callback configurado
|
|
29
|
+
* @template TRow - Tipo de datos de cada fila del DataGrid
|
|
30
|
+
* @template TSummaryRow - Tipo de datos de la fila de resumen del DataGrid
|
|
31
|
+
* @param id - Identificador único del DataGrid. Se usa como prefijo para la key en localStorage (fallback)
|
|
32
|
+
* @param columns - Array de columnas del DataGrid con su configuración
|
|
33
|
+
* @param defaultUserColumns - Configuración del usuario obtenida del backend/API.
|
|
34
|
+
* Esta es la fuente principal en producción.
|
|
35
|
+
* @returns Map donde la key es el identificador de la columna (column.key) y el value
|
|
36
|
+
* es el ancho configurado (número en píxeles o string con unidad CSS)
|
|
37
|
+
* @example
|
|
38
|
+
* // Sin configuración del backend (usa localStorage como fallback)
|
|
39
|
+
* const columnsWidths = getColumnsWidth('my-grid', columns, null);
|
|
40
|
+
* @example
|
|
41
|
+
* // Con configuración del backend (caso típico en producción)
|
|
42
|
+
* const columnsWidths = getColumnsWidth('my-grid', columns, {
|
|
43
|
+
* columnsWidths: { name: 200, email: 300 }
|
|
44
|
+
* });
|
|
45
|
+
* @see saveColumnsWidth - Función complementaria para persistir la configuración
|
|
46
|
+
*/
|
|
47
|
+
export declare function getColumnsWidth<TRow, TSummaryRow>(id: RowKey, columns: readonly Column<TRow, TSummaryRow>[], defaultUserColumns: Maybe<IGridConfig>): Map<string, Maybe<string | number>>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
function getColumnsWidth(id, columns, defaultUserColumns) {
|
|
2
|
+
const newMap = /* @__PURE__ */ new Map();
|
|
3
|
+
let storeColumnsWidth;
|
|
4
|
+
try {
|
|
5
|
+
const item = window.localStorage.getItem(`${id}_columns_width`);
|
|
6
|
+
storeColumnsWidth = item !== null ? new Map(JSON.parse(item)) : /* @__PURE__ */ new Map();
|
|
7
|
+
} catch (_e) {
|
|
8
|
+
storeColumnsWidth = /* @__PURE__ */ new Map();
|
|
9
|
+
}
|
|
10
|
+
for (let i = 0; i < columns.length; i++) {
|
|
11
|
+
let width;
|
|
12
|
+
if (defaultUserColumns) {
|
|
13
|
+
try {
|
|
14
|
+
width = defaultUserColumns.columnsWidths[columns[i].key];
|
|
15
|
+
} catch (_e) {
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
if (width === void 0) {
|
|
19
|
+
const storeWidth = storeColumnsWidth.get(columns[i].key);
|
|
20
|
+
if (typeof storeWidth === "number") {
|
|
21
|
+
width = storeWidth;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
if (width !== void 0) {
|
|
25
|
+
newMap.set(columns[i].key, width);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return newMap;
|
|
29
|
+
}
|
|
30
|
+
export {
|
|
31
|
+
getColumnsWidth as g
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getColumnsWidth } from './getColumnsWidth';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { RowHeightVariants } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* Obtiene el índice correspondiente a un variant de altura de fila.
|
|
4
|
+
*
|
|
5
|
+
* ## Propósito
|
|
6
|
+
*
|
|
7
|
+
* Mapea el nombre del variant ('compact', 'standard', 'confortable') a su
|
|
8
|
+
* índice en los arrays de alturas (rowHeights y rowHeaderHeights).
|
|
9
|
+
*
|
|
10
|
+
* ## Mapeo de variants a índices
|
|
11
|
+
*
|
|
12
|
+
* | Variant | Índice |
|
|
13
|
+
* |-------------|--------|
|
|
14
|
+
* | compact | 0 |
|
|
15
|
+
* | standard | 1 |
|
|
16
|
+
* | confortable | 2 |
|
|
17
|
+
* @param variant - Variant de altura de fila
|
|
18
|
+
* @returns Índice correspondiente en los arrays de alturas (0, 1 o 2)
|
|
19
|
+
* @example
|
|
20
|
+
* getIndexRowHeightVariant('compact'); // 0
|
|
21
|
+
* getIndexRowHeightVariant('standard'); // 1
|
|
22
|
+
* getIndexRowHeightVariant('confortable'); // 2
|
|
23
|
+
*/
|
|
24
|
+
export declare const getIndexRowHeightVariant: (variant: RowHeightVariants) => number;
|
package/components/DataGrid/helpers/getIndexRowHeightVariant/getIndexRowHeightVariant.test.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getIndexRowHeightVariant } from './getIndexRowHeightVariant';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Column } from 'react-data-grid';
|
|
2
|
+
import { RowKey } from '../../types';
|
|
3
|
+
import { BaseViewConfig } from '../../types.helpers';
|
|
4
|
+
import { IViewConfig, ViewMode } from '../../contexts/DataGridContext/types';
|
|
5
|
+
/**
|
|
6
|
+
* Obtiene la configuración inicial de columnas para cualquier vista.
|
|
7
|
+
*
|
|
8
|
+
* ## Propósito
|
|
9
|
+
*
|
|
10
|
+
* Genera la configuración inicial de columnas combinando:
|
|
11
|
+
* 1. Configuración del usuario (defaultUserConfig) si existe
|
|
12
|
+
* 2. Configuración guardada en localStorage si no hay defaultUserConfig
|
|
13
|
+
* 3. Valores por defecto de las columnas
|
|
14
|
+
*
|
|
15
|
+
* ## Prioridad de configuración
|
|
16
|
+
*
|
|
17
|
+
* 1. defaultUserConfig (del backend/API)
|
|
18
|
+
* 2. localStorage (preferencia guardada del usuario)
|
|
19
|
+
* 3. Valores por defecto de las columnas
|
|
20
|
+
* @param id - Identificador único del DataGrid
|
|
21
|
+
* @param columns - Columnas del DataGrid
|
|
22
|
+
* @param viewMode - Modo de visualización actual ('table' | 'cards')
|
|
23
|
+
* @param defaultUserConfig - Configuración por defecto del usuario (opcional)
|
|
24
|
+
* @param viewSpecificDefaults - Valores por defecto específicos de la vista
|
|
25
|
+
* @param originalViewSpecificDefaults - Valores originales específicos de la vista
|
|
26
|
+
* @returns Array de configuración de columnas ordenado por índice
|
|
27
|
+
* @example
|
|
28
|
+
* // Para vista table
|
|
29
|
+
* getInitialColumnsConfig(
|
|
30
|
+
* 'my-grid',
|
|
31
|
+
* columns,
|
|
32
|
+
* 'table',
|
|
33
|
+
* undefined,
|
|
34
|
+
* { frozen: false },
|
|
35
|
+
* { originalFrozen: false }
|
|
36
|
+
* );
|
|
37
|
+
*
|
|
38
|
+
* // Para vista cards
|
|
39
|
+
* getInitialColumnsConfig(
|
|
40
|
+
* 'my-grid',
|
|
41
|
+
* columns,
|
|
42
|
+
* 'cards',
|
|
43
|
+
* undefined,
|
|
44
|
+
* { showTitle: true },
|
|
45
|
+
* { originalShowTitle: true }
|
|
46
|
+
* );
|
|
47
|
+
*/
|
|
48
|
+
export declare const getInitialColumnsConfig: <TRow, TSummaryRow, TViewSpecific, TOriginalViewSpecific>(id: RowKey, columns: readonly Column<TRow, TSummaryRow>[], viewMode: ViewMode, defaultUserConfig?: BaseViewConfig<TViewSpecific>[], viewSpecificDefaults?: TViewSpecific, originalViewSpecificDefaults?: TOriginalViewSpecific) => IViewConfig<TViewSpecific, TOriginalViewSpecific>[];
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { l as loadViewConfig } from "../loadViewConfig/loadViewConfig.js";
|
|
2
|
+
import { g as getViewSuffix } from "../getViewSuffix/getViewSuffix.js";
|
|
3
|
+
const getInitialColumnsConfig = (id, columns, viewMode, defaultUserConfig, viewSpecificDefaults, originalViewSpecificDefaults) => {
|
|
4
|
+
let columnsConfig;
|
|
5
|
+
if (defaultUserConfig) {
|
|
6
|
+
columnsConfig = defaultUserConfig;
|
|
7
|
+
} else {
|
|
8
|
+
columnsConfig = loadViewConfig(
|
|
9
|
+
id,
|
|
10
|
+
getViewSuffix(viewMode)
|
|
11
|
+
) || [];
|
|
12
|
+
}
|
|
13
|
+
return columns.map((column, index) => {
|
|
14
|
+
const existingConfig = columnsConfig.find((c) => c.key === column.key);
|
|
15
|
+
const columnConfigIndex = existingConfig ? columnsConfig.indexOf(existingConfig) : -1;
|
|
16
|
+
const baseConfig = {
|
|
17
|
+
key: column.key,
|
|
18
|
+
name: typeof column.name === "string" ? column.name : String(column.name),
|
|
19
|
+
hidden: column.hidden === void 0 ? false : column.hidden,
|
|
20
|
+
index: columnConfigIndex > -1 ? columnConfigIndex : index,
|
|
21
|
+
visible: existingConfig?.visible !== void 0 ? existingConfig.visible : column.visible === void 0 ? true : column.visible,
|
|
22
|
+
originalIndex: index,
|
|
23
|
+
originalVisible: column.visible === void 0 ? true : column.visible
|
|
24
|
+
};
|
|
25
|
+
return {
|
|
26
|
+
...baseConfig,
|
|
27
|
+
...viewSpecificDefaults,
|
|
28
|
+
...originalViewSpecificDefaults,
|
|
29
|
+
...existingConfig || {}
|
|
30
|
+
};
|
|
31
|
+
}).sort((a, b) => a.index - b.index);
|
|
32
|
+
};
|
|
33
|
+
export {
|
|
34
|
+
getInitialColumnsConfig as g
|
|
35
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getInitialColumnsConfig } from './getInitialColumnsConfig';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|