@geotab/zenith 3.11.1-beta.0 → 3.11.1
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.
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
const {
|
|
4
|
+
injectString
|
|
5
|
+
} = require("../../utils/localization/translationsDictionary");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
3
9
|
exports.withFlexibleColumns = void 0;
|
|
4
10
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
11
|
const react_1 = require("react");
|
|
@@ -15,141 +21,221 @@ const columnSettingsList_1 = require("./components/columnSettingsList");
|
|
|
15
21
|
const columnSettingsSidePanel_1 = require("./components/columnSettingsSidePanel");
|
|
16
22
|
const emptySearchList_1 = require("../emptySearchList/emptySearchList");
|
|
17
23
|
const zen_1 = require("../../utils/zen");
|
|
24
|
+
const useLanguage_1 = require("../../utils/localization/useLanguage");
|
|
18
25
|
// T - type of entity
|
|
19
26
|
// P - props of wrapped component
|
|
20
27
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
28
|
+
injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
|
|
29
|
+
injectString("da-DK", "Column Settings", "Kolonneindstillinger");
|
|
30
|
+
injectString("de", "Column Settings", "Spalteneinstellungen");
|
|
31
|
+
injectString("en", "Column Settings", "Column Settings");
|
|
32
|
+
injectString("es", "Column Settings", "Configuraci\xF3n de columnas");
|
|
33
|
+
injectString("fi-FI", "Column Settings", "Sarakkeiden asetukset");
|
|
34
|
+
injectString("fr", "Column Settings", "Param\xE8tres des colonnes");
|
|
35
|
+
injectString("fr-FR", "Column Settings", "Param\xE8tres des colonnes");
|
|
36
|
+
injectString("hu-HU", "Column Settings", "Oszlopbe\xE1ll\xEDt\xE1sok");
|
|
37
|
+
injectString("id", "Column Settings", "Pengaturan Kolom");
|
|
38
|
+
injectString("it", "Column Settings", "Impostazioni colonna");
|
|
39
|
+
injectString("ja", "Column Settings", "\u5217\u306E\u8A2D\u5B9A");
|
|
40
|
+
injectString("ko-KR", "Column Settings", "\uC5F4 \uC124\uC815");
|
|
41
|
+
injectString("ms", "Column Settings", "Tetapan Lajur");
|
|
42
|
+
injectString("nb-NO", "Column Settings", "Kolonneinnstillinger");
|
|
43
|
+
injectString("nl", "Column Settings", "Kolominstellingen");
|
|
44
|
+
injectString("pl", "Column Settings", "Ustawienia kolumn");
|
|
45
|
+
injectString("pt-BR", "Column Settings", "Configura\xE7\xF5es da coluna");
|
|
46
|
+
injectString("pt-PT", "Column Settings", "Configura\xE7\xF5es de coluna");
|
|
47
|
+
injectString("sk-SK", "Column Settings", "Nastavenia st\u013Apcov");
|
|
48
|
+
injectString("sv", "Column Settings", "Kolumninst\xE4llningar");
|
|
49
|
+
injectString("th", "Column Settings", "\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
|
|
50
|
+
injectString("tr", "Column Settings", "S\xFCtun Ayarlar\u0131");
|
|
51
|
+
injectString("zh-Hans", "Column Settings", "\u5217\u8BBE\u7F6E");
|
|
52
|
+
injectString("zh-TW", "Column Settings", "\u6B04\u8A2D\u5B9A");
|
|
53
|
+
injectString("ro-RO", "Column Settings", "Set\u0103ri coloane");
|
|
54
|
+
injectString("ar-SA", "Column Settings", "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
|
|
55
|
+
const withFlexibleColumns = DataGridComponent => {
|
|
56
|
+
const FlexibleColumnsComponent = props => {
|
|
57
|
+
var _a, _b;
|
|
58
|
+
const {
|
|
59
|
+
columns,
|
|
60
|
+
options,
|
|
61
|
+
popupTriggerRef,
|
|
62
|
+
onChangeSettings,
|
|
63
|
+
onResetSettings = () => {},
|
|
64
|
+
sortGroups,
|
|
65
|
+
sortColumns
|
|
66
|
+
} = props;
|
|
67
|
+
const {
|
|
68
|
+
translate
|
|
69
|
+
} = (0, useLanguage_1.useLanguage)();
|
|
70
|
+
const settingsStore = (0, react_1.useMemo)(() => {
|
|
71
|
+
var _a, _b;
|
|
72
|
+
return new flexibleColumnsStorage_1.ColumnsSettingsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage);
|
|
73
|
+
}, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
|
|
74
|
+
const [isPanelOpen, setIsPanelOpen] = (0, react_1.useState)(false);
|
|
75
|
+
const allColumns = (0, react_1.useMemo)(() => columns.map(column => Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), {
|
|
76
|
+
visible: column.visible !== false,
|
|
77
|
+
group: column.group || ""
|
|
78
|
+
})), [columns]);
|
|
79
|
+
const columnsSettings = (0, react_1.useMemo)(() => (0, flexibleColumnsStorage_1.mergeColumnsSettings)(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
|
|
80
|
+
const hasConfigurableColumns = (0, react_1.useMemo)(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
|
|
81
|
+
const visibleColumns = (0, react_1.useMemo)(() => {
|
|
82
|
+
const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
|
|
83
|
+
return columnsSettings.map((s, index) => {
|
|
84
|
+
const column = visibleColumnsMap.get(s.name);
|
|
85
|
+
if (column === undefined || !s.visible) {
|
|
86
|
+
return undefined;
|
|
87
|
+
}
|
|
88
|
+
const wrappers = column.wrappers;
|
|
89
|
+
return Object.assign(Object.assign({}, column), {
|
|
90
|
+
meta: Object.assign(Object.assign({}, column.meta), {
|
|
91
|
+
defaultWidth: s.width
|
|
92
|
+
}),
|
|
93
|
+
wrappers: wrappers.some(w => w instanceof flexibleColumnWrapper_1.FlexibleColumnWrapper) ? wrappers : [...wrappers, new flexibleColumnWrapper_1.FlexibleColumnWrapper({
|
|
94
|
+
draggable: !(column.columnComponent instanceof actionsColumn_1.ActionsColumn),
|
|
95
|
+
resizable: index !== 0
|
|
96
|
+
})]
|
|
97
|
+
});
|
|
98
|
+
}).filter(c => c !== undefined);
|
|
99
|
+
}, [allColumns, columnsSettings]);
|
|
100
|
+
const gridRef = (0, react_1.useRef)(null);
|
|
101
|
+
const resizerRef = (0, react_1.useRef)(null);
|
|
102
|
+
const reordererRef = (0, react_1.useRef)(null);
|
|
103
|
+
(0, react_1.useImperativeHandle)(props.ref, () => gridRef.current, []);
|
|
104
|
+
const saveSettingsToTheStore = (0, react_1.useCallback)(newSettings =>
|
|
105
|
+
// not to block main thread this operation can be postponed
|
|
106
|
+
new Promise((resolve, reject) => {
|
|
107
|
+
var _a;
|
|
108
|
+
(_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
|
|
109
|
+
try {
|
|
110
|
+
settingsStore.setItem(newSettings);
|
|
111
|
+
resolve();
|
|
112
|
+
} catch (e) {
|
|
113
|
+
// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
|
|
114
|
+
reject(e);
|
|
115
|
+
}
|
|
116
|
+
}, 0);
|
|
117
|
+
}), [settingsStore]);
|
|
118
|
+
const listOfColumns = (0, react_1.useMemo)(() => {
|
|
119
|
+
const configurableColumnNames = new Set(allColumns.filter(c => c.title).map(c => c.name));
|
|
120
|
+
const visibleConfigurableSettings = columnsSettings.filter(s => s.visible && configurableColumnNames.has(s.name));
|
|
121
|
+
const lastVisibleColumn = visibleConfigurableSettings.length === 1 ? [visibleConfigurableSettings[0].name] : [];
|
|
122
|
+
const disabledColumns = [...allColumns.filter(c => c.alwaysVisible).map(c => c.name), ...lastVisibleColumn];
|
|
123
|
+
const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
|
|
124
|
+
return (0, jsx_runtime_1.jsx)(columnSettingsList_1.ColumnSettingsList, {
|
|
125
|
+
columns: allColumns.filter(c => c.title),
|
|
126
|
+
settings: columnSettingsMap,
|
|
127
|
+
disabledColumns: disabledColumns,
|
|
128
|
+
onChange: async newSettings => {
|
|
129
|
+
const settings = columnsSettings.map(s => {
|
|
130
|
+
const visible = newSettings.get(s.name) !== false;
|
|
131
|
+
return Object.assign(Object.assign({}, s), {
|
|
132
|
+
visible
|
|
114
133
|
});
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
134
|
+
});
|
|
135
|
+
await saveSettingsToTheStore(settings);
|
|
136
|
+
onChangeSettings(settings);
|
|
137
|
+
},
|
|
138
|
+
sortGroups: sortGroups,
|
|
139
|
+
sortColumns: sortColumns
|
|
140
|
+
});
|
|
141
|
+
}, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, sortGroups, sortColumns]);
|
|
142
|
+
const onReorderListener = (0, react_1.useCallback)(async ([from, to]) => {
|
|
143
|
+
if (from === to) {
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
const column = visibleColumns[from];
|
|
147
|
+
// we should avoid moving actions column
|
|
148
|
+
const limitedTo = Math.min(to, visibleColumns.length - 1);
|
|
149
|
+
const where = visibleColumns[limitedTo];
|
|
150
|
+
if (column === undefined) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
// update order in settings
|
|
154
|
+
const settingsWithoutColumn = columnsSettings.filter(s => s.name !== column.name);
|
|
155
|
+
const originalSettings = columnsSettings.filter(s => s.name === column.name)[0];
|
|
156
|
+
const sIndex = settingsWithoutColumn.findIndex(s => s.name === where.name);
|
|
157
|
+
const newColumnSettings = [...settingsWithoutColumn.slice(0, sIndex), originalSettings, ...settingsWithoutColumn.slice(sIndex)];
|
|
158
|
+
await saveSettingsToTheStore(newColumnSettings);
|
|
159
|
+
onChangeSettings(newColumnSettings);
|
|
160
|
+
}, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
|
|
161
|
+
const onResizeColumn = (0, react_1.useCallback)(async ([index, width]) => {
|
|
162
|
+
const column = visibleColumns[index];
|
|
163
|
+
if (column === undefined) {
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
const newColumnSettings = columnsSettings.map(s => {
|
|
167
|
+
if (s.name === column.name) {
|
|
168
|
+
return Object.assign(Object.assign({}, s), {
|
|
169
|
+
width
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
return s;
|
|
173
|
+
});
|
|
174
|
+
await saveSettingsToTheStore(newColumnSettings);
|
|
175
|
+
onChangeSettings(newColumnSettings);
|
|
176
|
+
}, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
|
|
177
|
+
(0, react_1.useEffect)(() => {
|
|
178
|
+
if (!gridRef.current) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
// resizer
|
|
182
|
+
if (!resizerRef.current) {
|
|
183
|
+
const resizer = new flexibleColumnsResizer_1.FlexibleColumnResizer(gridRef.current);
|
|
184
|
+
resizerRef.current = resizer;
|
|
185
|
+
}
|
|
186
|
+
resizerRef.current.detach("resize");
|
|
187
|
+
resizerRef.current.attach("resize", onResizeColumn);
|
|
188
|
+
resizerRef.current.add(visibleColumns);
|
|
189
|
+
// reorder
|
|
190
|
+
if (!reordererRef.current) {
|
|
191
|
+
const reorder = new flexibleColumnsReorder_1.FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
|
|
192
|
+
reordererRef.current = reorder;
|
|
193
|
+
}
|
|
194
|
+
reordererRef.current.detach("reorder");
|
|
195
|
+
reordererRef.current.attach("reorder", onReorderListener);
|
|
196
|
+
reordererRef.current.add();
|
|
197
|
+
}, [columnsSettings, visibleColumns, onResizeColumn, onReorderListener]);
|
|
198
|
+
const onResetListener = (0, react_1.useCallback)(async () => {
|
|
199
|
+
await saveSettingsToTheStore([]);
|
|
200
|
+
onResetSettings();
|
|
201
|
+
setIsPanelOpen(false);
|
|
202
|
+
}, [onResetSettings, saveSettingsToTheStore]);
|
|
203
|
+
(0, react_1.useEffect)(() => {
|
|
204
|
+
if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
|
|
205
|
+
popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
|
|
206
|
+
}
|
|
207
|
+
}, [popupTriggerRef, hasConfigurableColumns]);
|
|
208
|
+
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
|
|
209
|
+
children: [popupTriggerRef && hasConfigurableColumns ? options.isFeed ? (0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, {
|
|
210
|
+
triggerRef: popupTriggerRef,
|
|
211
|
+
isOpen: isPanelOpen,
|
|
212
|
+
onOpen: () => setIsPanelOpen(true),
|
|
213
|
+
onClose: () => setIsPanelOpen(false),
|
|
214
|
+
onReset: onResetListener,
|
|
215
|
+
children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
|
|
216
|
+
onReset: onResetListener,
|
|
217
|
+
showFooter: false,
|
|
218
|
+
children: listOfColumns
|
|
219
|
+
})
|
|
220
|
+
}) : (0, jsx_runtime_1.jsx)(popup_1.Popup, {
|
|
221
|
+
ariaLabel: translate("Column Settings"),
|
|
222
|
+
triggerRef: popupTriggerRef,
|
|
223
|
+
alignment: "bottom-right",
|
|
224
|
+
children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
|
|
225
|
+
onReset: onResetListener,
|
|
226
|
+
children: listOfColumns
|
|
227
|
+
})
|
|
228
|
+
}, "flexible-popup") : null, visibleColumns.length === 0 && hasConfigurableColumns ? (0, jsx_runtime_1.jsx)("div", {
|
|
229
|
+
className: "zen-data-grid__empty",
|
|
230
|
+
children: (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, {})
|
|
231
|
+
}) : (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, {
|
|
232
|
+
columns: [...visibleColumns],
|
|
233
|
+
ref: gridRef
|
|
234
|
+
}), "grid")]
|
|
235
|
+
});
|
|
236
|
+
};
|
|
237
|
+
FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
|
|
238
|
+
return FlexibleColumnsComponent;
|
|
153
239
|
};
|
|
154
240
|
exports.withFlexibleColumns = withFlexibleColumns;
|
|
155
|
-
exports.withFlexibleColumns.translations = [...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];
|
|
241
|
+
exports.withFlexibleColumns.translations = ["Column Settings", ...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];
|
|
@@ -266,7 +266,10 @@ const SelectList = _a => {
|
|
|
266
266
|
var _a, _b;
|
|
267
267
|
if (state.activeIndex >= 0 && listRef.current) {
|
|
268
268
|
const isFocusInList = ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && (0, isChildOf_1.isChildOf)(zen_1.zen.document.activeElement, listRef.current);
|
|
269
|
-
|
|
269
|
+
// In showCheckbox mode the active item starts at index 0 (always visible at top).
|
|
270
|
+
// Calling scrollIntoView before focus is in the list would propagate up to
|
|
271
|
+
// document.body (via the portal) and unexpectedly scroll the page.
|
|
272
|
+
if (isFocusInList || !showCheckbox && !hasScrolledToInitial.current) {
|
|
270
273
|
const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
|
|
271
274
|
itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({
|
|
272
275
|
block: "nearest"
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { injectString } from "../../utils/localization/translationsDictionary";
|
|
1
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
3
4
|
import { ColumnsSettingsStorage, mergeColumnsSettings } from "./flexibleColumnsStorage";
|
|
@@ -12,140 +13,220 @@ import { ColumnSettingsList } from "./components/columnSettingsList";
|
|
|
12
13
|
import { ColumnSettingsSidePanel } from "./components/columnSettingsSidePanel";
|
|
13
14
|
import { EmptySearchList } from "../emptySearchList/emptySearchList";
|
|
14
15
|
import { zen } from "../../utils/zen";
|
|
16
|
+
import { useLanguage } from "../../utils/localization/useLanguage";
|
|
15
17
|
// T - type of entity
|
|
16
18
|
// P - props of wrapped component
|
|
17
19
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
20
|
+
injectString("cs", "Column Settings", "Nastaven\xED sloupc\u016F");
|
|
21
|
+
injectString("da-DK", "Column Settings", "Kolonneindstillinger");
|
|
22
|
+
injectString("de", "Column Settings", "Spalteneinstellungen");
|
|
23
|
+
injectString("en", "Column Settings", "Column Settings");
|
|
24
|
+
injectString("es", "Column Settings", "Configuraci\xF3n de columnas");
|
|
25
|
+
injectString("fi-FI", "Column Settings", "Sarakkeiden asetukset");
|
|
26
|
+
injectString("fr", "Column Settings", "Param\xE8tres des colonnes");
|
|
27
|
+
injectString("fr-FR", "Column Settings", "Param\xE8tres des colonnes");
|
|
28
|
+
injectString("hu-HU", "Column Settings", "Oszlopbe\xE1ll\xEDt\xE1sok");
|
|
29
|
+
injectString("id", "Column Settings", "Pengaturan Kolom");
|
|
30
|
+
injectString("it", "Column Settings", "Impostazioni colonna");
|
|
31
|
+
injectString("ja", "Column Settings", "\u5217\u306E\u8A2D\u5B9A");
|
|
32
|
+
injectString("ko-KR", "Column Settings", "\uC5F4 \uC124\uC815");
|
|
33
|
+
injectString("ms", "Column Settings", "Tetapan Lajur");
|
|
34
|
+
injectString("nb-NO", "Column Settings", "Kolonneinnstillinger");
|
|
35
|
+
injectString("nl", "Column Settings", "Kolominstellingen");
|
|
36
|
+
injectString("pl", "Column Settings", "Ustawienia kolumn");
|
|
37
|
+
injectString("pt-BR", "Column Settings", "Configura\xE7\xF5es da coluna");
|
|
38
|
+
injectString("pt-PT", "Column Settings", "Configura\xE7\xF5es de coluna");
|
|
39
|
+
injectString("sk-SK", "Column Settings", "Nastavenia st\u013Apcov");
|
|
40
|
+
injectString("sv", "Column Settings", "Kolumninst\xE4llningar");
|
|
41
|
+
injectString("th", "Column Settings", "\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32\u0E04\u0E2D\u0E25\u0E31\u0E21\u0E19\u0E4C");
|
|
42
|
+
injectString("tr", "Column Settings", "S\xFCtun Ayarlar\u0131");
|
|
43
|
+
injectString("zh-Hans", "Column Settings", "\u5217\u8BBE\u7F6E");
|
|
44
|
+
injectString("zh-TW", "Column Settings", "\u6B04\u8A2D\u5B9A");
|
|
45
|
+
injectString("ro-RO", "Column Settings", "Set\u0103ri coloane");
|
|
46
|
+
injectString("ar-SA", "Column Settings", "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0623\u0639\u0645\u062F\u0629");
|
|
47
|
+
export const withFlexibleColumns = DataGridComponent => {
|
|
48
|
+
const FlexibleColumnsComponent = props => {
|
|
49
|
+
var _a, _b;
|
|
50
|
+
const {
|
|
51
|
+
columns,
|
|
52
|
+
options,
|
|
53
|
+
popupTriggerRef,
|
|
54
|
+
onChangeSettings,
|
|
55
|
+
onResetSettings = () => {},
|
|
56
|
+
sortGroups,
|
|
57
|
+
sortColumns
|
|
58
|
+
} = props;
|
|
59
|
+
const {
|
|
60
|
+
translate
|
|
61
|
+
} = useLanguage();
|
|
62
|
+
const settingsStore = useMemo(() => {
|
|
63
|
+
var _a, _b;
|
|
64
|
+
return new ColumnsSettingsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage);
|
|
65
|
+
}, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
|
|
66
|
+
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
|
67
|
+
const allColumns = useMemo(() => columns.map(column => Object.assign(Object.assign({}, toBasicColumn(Object.assign({}, column))), {
|
|
68
|
+
visible: column.visible !== false,
|
|
69
|
+
group: column.group || ""
|
|
70
|
+
})), [columns]);
|
|
71
|
+
const columnsSettings = useMemo(() => mergeColumnsSettings(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
|
|
72
|
+
const hasConfigurableColumns = useMemo(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
|
|
73
|
+
const visibleColumns = useMemo(() => {
|
|
74
|
+
const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
|
|
75
|
+
return columnsSettings.map((s, index) => {
|
|
76
|
+
const column = visibleColumnsMap.get(s.name);
|
|
77
|
+
if (column === undefined || !s.visible) {
|
|
78
|
+
return undefined;
|
|
79
|
+
}
|
|
80
|
+
const wrappers = column.wrappers;
|
|
81
|
+
return Object.assign(Object.assign({}, column), {
|
|
82
|
+
meta: Object.assign(Object.assign({}, column.meta), {
|
|
83
|
+
defaultWidth: s.width
|
|
84
|
+
}),
|
|
85
|
+
wrappers: wrappers.some(w => w instanceof FlexibleColumnWrapper) ? wrappers : [...wrappers, new FlexibleColumnWrapper({
|
|
86
|
+
draggable: !(column.columnComponent instanceof ActionsColumn),
|
|
87
|
+
resizable: index !== 0
|
|
88
|
+
})]
|
|
89
|
+
});
|
|
90
|
+
}).filter(c => c !== undefined);
|
|
91
|
+
}, [allColumns, columnsSettings]);
|
|
92
|
+
const gridRef = useRef(null);
|
|
93
|
+
const resizerRef = useRef(null);
|
|
94
|
+
const reordererRef = useRef(null);
|
|
95
|
+
useImperativeHandle(props.ref, () => gridRef.current, []);
|
|
96
|
+
const saveSettingsToTheStore = useCallback(newSettings =>
|
|
97
|
+
// not to block main thread this operation can be postponed
|
|
98
|
+
new Promise((resolve, reject) => {
|
|
99
|
+
var _a;
|
|
100
|
+
(_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => {
|
|
101
|
+
try {
|
|
102
|
+
settingsStore.setItem(newSettings);
|
|
103
|
+
resolve();
|
|
104
|
+
} catch (e) {
|
|
105
|
+
// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
|
|
106
|
+
reject(e);
|
|
107
|
+
}
|
|
108
|
+
}, 0);
|
|
109
|
+
}), [settingsStore]);
|
|
110
|
+
const listOfColumns = useMemo(() => {
|
|
111
|
+
const configurableColumnNames = new Set(allColumns.filter(c => c.title).map(c => c.name));
|
|
112
|
+
const visibleConfigurableSettings = columnsSettings.filter(s => s.visible && configurableColumnNames.has(s.name));
|
|
113
|
+
const lastVisibleColumn = visibleConfigurableSettings.length === 1 ? [visibleConfigurableSettings[0].name] : [];
|
|
114
|
+
const disabledColumns = [...allColumns.filter(c => c.alwaysVisible).map(c => c.name), ...lastVisibleColumn];
|
|
115
|
+
const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
|
|
116
|
+
return _jsx(ColumnSettingsList, {
|
|
117
|
+
columns: allColumns.filter(c => c.title),
|
|
118
|
+
settings: columnSettingsMap,
|
|
119
|
+
disabledColumns: disabledColumns,
|
|
120
|
+
onChange: async newSettings => {
|
|
121
|
+
const settings = columnsSettings.map(s => {
|
|
122
|
+
const visible = newSettings.get(s.name) !== false;
|
|
123
|
+
return Object.assign(Object.assign({}, s), {
|
|
124
|
+
visible
|
|
111
125
|
});
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
126
|
+
});
|
|
127
|
+
await saveSettingsToTheStore(settings);
|
|
128
|
+
onChangeSettings(settings);
|
|
129
|
+
},
|
|
130
|
+
sortGroups: sortGroups,
|
|
131
|
+
sortColumns: sortColumns
|
|
132
|
+
});
|
|
133
|
+
}, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, sortGroups, sortColumns]);
|
|
134
|
+
const onReorderListener = useCallback(async ([from, to]) => {
|
|
135
|
+
if (from === to) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
const column = visibleColumns[from];
|
|
139
|
+
// we should avoid moving actions column
|
|
140
|
+
const limitedTo = Math.min(to, visibleColumns.length - 1);
|
|
141
|
+
const where = visibleColumns[limitedTo];
|
|
142
|
+
if (column === undefined) {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
// update order in settings
|
|
146
|
+
const settingsWithoutColumn = columnsSettings.filter(s => s.name !== column.name);
|
|
147
|
+
const originalSettings = columnsSettings.filter(s => s.name === column.name)[0];
|
|
148
|
+
const sIndex = settingsWithoutColumn.findIndex(s => s.name === where.name);
|
|
149
|
+
const newColumnSettings = [...settingsWithoutColumn.slice(0, sIndex), originalSettings, ...settingsWithoutColumn.slice(sIndex)];
|
|
150
|
+
await saveSettingsToTheStore(newColumnSettings);
|
|
151
|
+
onChangeSettings(newColumnSettings);
|
|
152
|
+
}, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
|
|
153
|
+
const onResizeColumn = useCallback(async ([index, width]) => {
|
|
154
|
+
const column = visibleColumns[index];
|
|
155
|
+
if (column === undefined) {
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
const newColumnSettings = columnsSettings.map(s => {
|
|
159
|
+
if (s.name === column.name) {
|
|
160
|
+
return Object.assign(Object.assign({}, s), {
|
|
161
|
+
width
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
return s;
|
|
165
|
+
});
|
|
166
|
+
await saveSettingsToTheStore(newColumnSettings);
|
|
167
|
+
onChangeSettings(newColumnSettings);
|
|
168
|
+
}, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
|
|
169
|
+
useEffect(() => {
|
|
170
|
+
if (!gridRef.current) {
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
// resizer
|
|
174
|
+
if (!resizerRef.current) {
|
|
175
|
+
const resizer = new FlexibleColumnResizer(gridRef.current);
|
|
176
|
+
resizerRef.current = resizer;
|
|
177
|
+
}
|
|
178
|
+
resizerRef.current.detach("resize");
|
|
179
|
+
resizerRef.current.attach("resize", onResizeColumn);
|
|
180
|
+
resizerRef.current.add(visibleColumns);
|
|
181
|
+
// reorder
|
|
182
|
+
if (!reordererRef.current) {
|
|
183
|
+
const reorder = new FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
|
|
184
|
+
reordererRef.current = reorder;
|
|
185
|
+
}
|
|
186
|
+
reordererRef.current.detach("reorder");
|
|
187
|
+
reordererRef.current.attach("reorder", onReorderListener);
|
|
188
|
+
reordererRef.current.add();
|
|
189
|
+
}, [columnsSettings, visibleColumns, onResizeColumn, onReorderListener]);
|
|
190
|
+
const onResetListener = useCallback(async () => {
|
|
191
|
+
await saveSettingsToTheStore([]);
|
|
192
|
+
onResetSettings();
|
|
193
|
+
setIsPanelOpen(false);
|
|
194
|
+
}, [onResetSettings, saveSettingsToTheStore]);
|
|
195
|
+
useEffect(() => {
|
|
196
|
+
if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
|
|
197
|
+
popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
|
|
198
|
+
}
|
|
199
|
+
}, [popupTriggerRef, hasConfigurableColumns]);
|
|
200
|
+
return _jsxs(_Fragment, {
|
|
201
|
+
children: [popupTriggerRef && hasConfigurableColumns ? options.isFeed ? _jsx(ColumnSettingsSidePanel, {
|
|
202
|
+
triggerRef: popupTriggerRef,
|
|
203
|
+
isOpen: isPanelOpen,
|
|
204
|
+
onOpen: () => setIsPanelOpen(true),
|
|
205
|
+
onClose: () => setIsPanelOpen(false),
|
|
206
|
+
onReset: onResetListener,
|
|
207
|
+
children: _jsx(ColumnSettings, {
|
|
208
|
+
onReset: onResetListener,
|
|
209
|
+
showFooter: false,
|
|
210
|
+
children: listOfColumns
|
|
211
|
+
})
|
|
212
|
+
}) : _jsx(Popup, {
|
|
213
|
+
ariaLabel: translate("Column Settings"),
|
|
214
|
+
triggerRef: popupTriggerRef,
|
|
215
|
+
alignment: "bottom-right",
|
|
216
|
+
children: _jsx(ColumnSettings, {
|
|
217
|
+
onReset: onResetListener,
|
|
218
|
+
children: listOfColumns
|
|
219
|
+
})
|
|
220
|
+
}, "flexible-popup") : null, visibleColumns.length === 0 && hasConfigurableColumns ? _jsx("div", {
|
|
221
|
+
className: "zen-data-grid__empty",
|
|
222
|
+
children: _jsx(EmptySearchList, {})
|
|
223
|
+
}) : _jsx(DataGridComponent, Object.assign({}, props, {
|
|
224
|
+
columns: [...visibleColumns],
|
|
225
|
+
ref: gridRef
|
|
226
|
+
}), "grid")]
|
|
227
|
+
});
|
|
228
|
+
};
|
|
229
|
+
FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
|
|
230
|
+
return FlexibleColumnsComponent;
|
|
150
231
|
};
|
|
151
|
-
withFlexibleColumns.translations = [...ColumnSettings.translations, ...ColumnSettingsSidePanel.translations, ...EmptySearchList.translations];
|
|
232
|
+
withFlexibleColumns.translations = ["Column Settings", ...ColumnSettings.translations, ...ColumnSettingsSidePanel.translations, ...EmptySearchList.translations];
|
|
@@ -258,7 +258,10 @@ export const SelectList = _a => {
|
|
|
258
258
|
var _a, _b;
|
|
259
259
|
if (state.activeIndex >= 0 && listRef.current) {
|
|
260
260
|
const isFocusInList = ((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement) && isChildOf(zen.document.activeElement, listRef.current);
|
|
261
|
-
|
|
261
|
+
// In showCheckbox mode the active item starts at index 0 (always visible at top).
|
|
262
|
+
// Calling scrollIntoView before focus is in the list would propagate up to
|
|
263
|
+
// document.body (via the portal) and unexpectedly scroll the page.
|
|
264
|
+
if (isFocusInList || !showCheckbox && !hasScrolledToInitial.current) {
|
|
262
265
|
const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
|
|
263
266
|
itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({
|
|
264
267
|
block: "nearest"
|