@azrico/reactgrid 1.2.1 → 1.2.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/dist/index.js +3 -21
- package/dist/src/example.js +113 -150
- package/dist/src/func/helpers.js +75 -80
- package/dist/src/index.js +9 -25
- package/dist/src/views/DataGrid.d.ts +1 -1
- package/dist/src/views/DataGrid.js +457 -469
- package/dist/src/views/index.js +3 -23
- package/package.json +2 -2
- package/src/index.tsx +3 -3
- package/src/views/DataGrid.tsx +1 -1
- package/dist/src/themes/base_styles.css +0 -30
- package/dist/src/themes/grid.css +0 -20
|
@@ -1,493 +1,481 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
|
|
111
|
-
|
|
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
|
-
});
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
return _react.default.createElement(DataGridEventsWrapper, {
|
|
153
|
-
...props,
|
|
154
|
-
static_gridOptions: static_gridOptions,
|
|
155
|
-
dynamic_gridOptions: dynamic_gridOptions,
|
|
156
|
-
columns: cached_columns,
|
|
157
|
-
dataSource: dataSource,
|
|
158
|
-
highlightedRow: props.highlightedRow
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
/* -------------------------------------------------------------------------- */
|
|
1
|
+
import '@inovua/reactdatagrid-enterprise/index.css';
|
|
2
|
+
import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
|
|
3
|
+
import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
|
|
4
|
+
import '../themes/base_styles.css';
|
|
5
|
+
import '../themes/grid.css';
|
|
6
|
+
import { ContextMenu } from '@azrico/controls';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { fix_parent_child_relations, func_selection } from '../func/helpers';
|
|
9
|
+
import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor';
|
|
10
|
+
import NumericEditor from '@inovua/reactdatagrid-community/NumericEditor';
|
|
11
|
+
import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
|
|
12
|
+
import SelectEditor from '@inovua/reactdatagrid-community/SelectEditor';
|
|
13
|
+
import clsx from 'clsx';
|
|
14
|
+
import { object_equals } from '@azrico/object';
|
|
15
|
+
import { useComponentSize } from 'react-use-size';
|
|
16
|
+
/* -------------------------------------------------------------------------- */
|
|
17
|
+
// const defaultfilterTypes: FilterTypes = {
|
|
18
|
+
// string: {
|
|
19
|
+
// type: 'string',
|
|
20
|
+
// emptyValue: '',
|
|
21
|
+
// operators: [
|
|
22
|
+
// {
|
|
23
|
+
// name: 'contains',
|
|
24
|
+
// fn: ({ value, filterValue, data }) => {
|
|
25
|
+
// console.log('fn');
|
|
26
|
+
// return !filterValue ? true : value.indexOf(filterValue) != -1;
|
|
27
|
+
// },
|
|
28
|
+
// },
|
|
29
|
+
// ],
|
|
30
|
+
// },
|
|
31
|
+
// };
|
|
32
|
+
const defaultOptions = {
|
|
33
|
+
//filterTypes: defaultfilterTypes,
|
|
34
|
+
remoteFilter: false,
|
|
35
|
+
remoteSort: false,
|
|
36
|
+
editStartEvent: 'click',
|
|
37
|
+
rowReorderColumn: false,
|
|
38
|
+
resizable: true,
|
|
39
|
+
columnUserSelect: true,
|
|
40
|
+
rowIndexColumn: true,
|
|
41
|
+
rowHeight: 35,
|
|
42
|
+
maxRowHeight: 40,
|
|
43
|
+
minRowHeight: 30,
|
|
44
|
+
};
|
|
45
|
+
const forcedOptions = {
|
|
46
|
+
idProperty: '__table_id',
|
|
47
|
+
nodesProperty: '__children',
|
|
48
|
+
};
|
|
49
|
+
const defaultColumnOptions = {
|
|
50
|
+
draggable: false,
|
|
51
|
+
lockable: false,
|
|
52
|
+
editable: false,
|
|
53
|
+
};
|
|
54
|
+
const dynamic_option_names = ['selected', 'loading', 'limit', 'skip'];
|
|
55
|
+
/* -------------------------------------------------------------------------- */
|
|
56
|
+
export function AzGrid(props) {
|
|
57
|
+
/* -------------------------------------------------------------------------- */
|
|
58
|
+
/* Columns */
|
|
59
|
+
/* -------------------------------------------------------------------------- */
|
|
60
|
+
const cached_columns = React.useMemo(() => {
|
|
61
|
+
return ApplyColumnData(props);
|
|
62
|
+
}, [
|
|
63
|
+
props.columns,
|
|
64
|
+
props.leftColumns,
|
|
65
|
+
props.rightColumns,
|
|
66
|
+
props.editableColumns,
|
|
67
|
+
props.columnExtensions,
|
|
68
|
+
props.customColumns,
|
|
69
|
+
]);
|
|
70
|
+
/* -------------------------------------------------------------------------- */
|
|
71
|
+
/* Row changes */
|
|
72
|
+
/* -------------------------------------------------------------------------- */
|
|
73
|
+
const cached_data = React.useRef();
|
|
74
|
+
const last_cache_info = React.useRef();
|
|
75
|
+
const dataSource = React.useCallback(async (dt) => {
|
|
76
|
+
let result_data = undefined;
|
|
77
|
+
let isUsingCache = false;
|
|
78
|
+
const cacheInfo = { ds: props.dataSource, skip: dt.skip, limit: dt.limit };
|
|
79
|
+
//check if we can used cached data
|
|
80
|
+
//if the datasource is changed since last render, we should invalidate cache
|
|
81
|
+
if (!validateCache(last_cache_info.current, cacheInfo, props.looseCacheCheck)) {
|
|
82
|
+
cached_data.current = undefined;
|
|
83
|
+
last_cache_info.current = cacheInfo;
|
|
84
|
+
}
|
|
85
|
+
if (cached_data.current) {
|
|
86
|
+
//cache is valid, use the cache
|
|
87
|
+
isUsingCache = true;
|
|
88
|
+
result_data = cached_data.current;
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
//cache is invalid, use the datasource again
|
|
92
|
+
isUsingCache = false;
|
|
93
|
+
if (typeof props.dataSource === 'function') {
|
|
94
|
+
result_data = await props.dataSource(dt);
|
|
95
|
+
}
|
|
96
|
+
else
|
|
97
|
+
result_data = props.dataSource;
|
|
98
|
+
}
|
|
99
|
+
//making sure the datasource is a valid object :
|
|
100
|
+
if (!result_data)
|
|
101
|
+
result_data = [];
|
|
102
|
+
if (Array.isArray(result_data) || typeof result_data !== 'object')
|
|
103
|
+
result_data = { data: result_data };
|
|
104
|
+
if (!Array.isArray(result_data.data))
|
|
105
|
+
result_data.data = [result_data.data];
|
|
106
|
+
//no need to fix parent/child when using cache (it should be already fixed)
|
|
107
|
+
if (!isUsingCache && props.allowChildRows)
|
|
108
|
+
result_data.data = fix_parent_child_relations(result_data.data);
|
|
109
|
+
if (!result_data.count)
|
|
110
|
+
result_data.count = result_data.data.length;
|
|
111
|
+
//update cache
|
|
112
|
+
cached_data.current = result_data;
|
|
113
|
+
return result_data;
|
|
114
|
+
}, [props.dataSource]);
|
|
115
|
+
const base_gridOptions = React.useMemo(() => {
|
|
116
|
+
const firstcolumn = cached_columns[0];
|
|
117
|
+
const licenseKey = props.licenseKey || get_default_key();
|
|
118
|
+
const events = {
|
|
119
|
+
onSkipChange: props.onSkipChange,
|
|
120
|
+
onLimitChange: props.onLimitChange,
|
|
121
|
+
onEditComplete: props.onEditComplete,
|
|
122
|
+
};
|
|
123
|
+
const extra_ops = {
|
|
124
|
+
onSelectionChange: props.onSelectionChange,
|
|
125
|
+
licenseKey: licenseKey,
|
|
126
|
+
editable: props.editable,
|
|
127
|
+
treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
|
|
128
|
+
renderRowDetails: props.RowDetail,
|
|
129
|
+
theme: props.dark ? 'amber-dark' : 'default-light',
|
|
130
|
+
};
|
|
131
|
+
return { ...defaultOptions, ...events, ...extra_ops };
|
|
132
|
+
}, [
|
|
133
|
+
cached_columns,
|
|
134
|
+
props.allowChildRows,
|
|
135
|
+
props.editable,
|
|
136
|
+
props.RowDetail,
|
|
137
|
+
props.onEditComplete,
|
|
138
|
+
]);
|
|
139
|
+
const static_gridOptions = React.useMemo(() => {
|
|
140
|
+
return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
|
|
141
|
+
}, [props.gridOptions, base_gridOptions, forcedOptions]);
|
|
142
|
+
const dynamic_gridOptions = React.useMemo(() => {
|
|
143
|
+
const res = {};
|
|
144
|
+
dynamic_option_names.map((r) => {
|
|
145
|
+
res[r] = props[r];
|
|
146
|
+
});
|
|
147
|
+
return res;
|
|
148
|
+
}, dynamic_option_names.map((r) => props[r]));
|
|
149
|
+
return (React.createElement(DataGridEventsWrapper, { ...props, static_gridOptions: static_gridOptions, dynamic_gridOptions: dynamic_gridOptions, columns: cached_columns, dataSource: dataSource, highlightedRow: props.highlightedRow }));
|
|
150
|
+
}
|
|
151
|
+
/* -------------------------------------------------------------------------- */
|
|
162
152
|
/**
|
|
163
153
|
* Wrapper for menu events
|
|
164
154
|
* @param props
|
|
165
155
|
* @returns
|
|
166
|
-
*/
|
|
167
|
-
function DataGridEventsWrapper(props) {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
const
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
static_gridOptions
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
className: 'azgrid-delayedresize',
|
|
256
|
-
style: {
|
|
257
|
-
height: height,
|
|
258
|
-
width: width
|
|
259
|
-
},
|
|
260
|
-
columns: props.columns,
|
|
261
|
-
dataSource: props.dataSource
|
|
262
|
-
}), props.children);
|
|
263
|
-
}
|
|
264
|
-
function DataGridFlexSize(props) {
|
|
265
|
-
const gridRef = _react.default.useRef(null);
|
|
266
|
-
return _react.default.createElement("div", {
|
|
267
|
-
className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
|
|
268
|
-
}, _react.default.createElement(_reactdatagridEnterprise.default, {
|
|
269
|
-
...props.static_gridOptions,
|
|
270
|
-
...props.dynamic_gridOptions,
|
|
271
|
-
handle: ref => gridRef.current = ref ? ref.current : null,
|
|
272
|
-
className: 'azgrid-filler',
|
|
273
|
-
columns: props.columns,
|
|
274
|
-
dataSource: props.dataSource
|
|
275
|
-
}), props.children);
|
|
276
|
-
}
|
|
277
|
-
/* -------------------------------------------------------------------------- */
|
|
278
|
-
/* -------------------------------------------------------------------------- */
|
|
279
|
-
/* -------------------------------------------------------------------------- */
|
|
280
|
-
/* -------------------------------------------------------------------------- */
|
|
156
|
+
*/
|
|
157
|
+
function DataGridEventsWrapper(props) {
|
|
158
|
+
/* -------------------------------------------------------------------------- */
|
|
159
|
+
const click_data = React.useRef(null);
|
|
160
|
+
const [menuAnchorEl, set_menuAnchorEl] = React.useState(null);
|
|
161
|
+
const [menuRow, set_menuRow] = React.useState(null);
|
|
162
|
+
/* --------------------------------- events --------------------------------- */
|
|
163
|
+
const onRowContextMenu = React.useCallback((rowProps, event) => {
|
|
164
|
+
if (func_selection.has_selection())
|
|
165
|
+
return;
|
|
166
|
+
update_menuRow(rowProps.data);
|
|
167
|
+
update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
}, []);
|
|
170
|
+
const onRowClick = React.useCallback((rowProps, event) => {
|
|
171
|
+
const nowDate = Date.now();
|
|
172
|
+
const lastclick = click_data.current[get_row_id(rowProps)];
|
|
173
|
+
if (lastclick) {
|
|
174
|
+
const diffTime = Math.abs(nowDate - lastclick);
|
|
175
|
+
if (diffTime < 400) {
|
|
176
|
+
click_data.current[get_row_id(rowProps)] = null;
|
|
177
|
+
return (props.onRowDoubleClick &&
|
|
178
|
+
props.onRowDoubleClick(rowProps.rowIndex, rowProps.data));
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
click_data.current[get_row_id(rowProps)] = nowDate;
|
|
182
|
+
return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
183
|
+
}, [props.onRowClick, props.onRowDoubleClick]);
|
|
184
|
+
React.useEffect(() => {
|
|
185
|
+
click_data.current = {};
|
|
186
|
+
}, [props.dataSource]);
|
|
187
|
+
/* ------------------------------- ContextMenu ------------------------------ */
|
|
188
|
+
const update_menuAnchorEl = React.useCallback((el) => {
|
|
189
|
+
if (el) {
|
|
190
|
+
set_menuAnchorEl(el);
|
|
191
|
+
}
|
|
192
|
+
else
|
|
193
|
+
set_menuAnchorEl(null);
|
|
194
|
+
}, []);
|
|
195
|
+
const update_menuRow = React.useCallback((r) => {
|
|
196
|
+
if (r) {
|
|
197
|
+
set_menuRow(r);
|
|
198
|
+
}
|
|
199
|
+
else
|
|
200
|
+
set_menuRow(null);
|
|
201
|
+
}, []);
|
|
202
|
+
/**
|
|
203
|
+
* Merge click events into grid options
|
|
204
|
+
*/
|
|
205
|
+
const static_gridOptions = React.useMemo(() => {
|
|
206
|
+
const events = {
|
|
207
|
+
onRowClick: onRowClick,
|
|
208
|
+
onRowContextMenu: onRowContextMenu,
|
|
209
|
+
};
|
|
210
|
+
return { ...props.static_gridOptions, ...events };
|
|
211
|
+
}, [props.static_gridOptions, onRowClick]);
|
|
212
|
+
return (React.createElement(DataGridSizeWrapper, { ...props, static_gridOptions: static_gridOptions },
|
|
213
|
+
React.createElement(ContextMenu, { menuAnchorEl: menuAnchorEl, set_menuAnchorEl: update_menuAnchorEl, menuRow: menuRow, items: props.contextMenuItems }),
|
|
214
|
+
props.children));
|
|
215
|
+
}
|
|
216
|
+
function DataGridSizeWrapper(props) {
|
|
217
|
+
// console.log(props);
|
|
218
|
+
if (props.delayedSize) {
|
|
219
|
+
return React.createElement(DataGridDelayedSize, { ...props });
|
|
220
|
+
}
|
|
221
|
+
else {
|
|
222
|
+
return React.createElement(DataGridFlexSize, { ...props });
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
function DataGridDelayedSize(props) {
|
|
226
|
+
const gridRef = React.useRef(null);
|
|
227
|
+
const { ref, height, width } = useComponentSize();
|
|
228
|
+
return (React.createElement("div", { ref: ref, className: clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler') },
|
|
229
|
+
React.createElement(ReactDataGrid, { ...props.static_gridOptions, ...props.dynamic_gridOptions, handle: (ref) => (gridRef.current = ref ? ref.current : null), className: 'azgrid-delayedresize', style: {
|
|
230
|
+
height: height,
|
|
231
|
+
width: width,
|
|
232
|
+
}, columns: props.columns, dataSource: props.dataSource }),
|
|
233
|
+
props.children));
|
|
234
|
+
}
|
|
235
|
+
function DataGridFlexSize(props) {
|
|
236
|
+
const gridRef = React.useRef(null);
|
|
237
|
+
return (React.createElement("div", { className: clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler') },
|
|
238
|
+
React.createElement(ReactDataGrid, { ...props.static_gridOptions, ...props.dynamic_gridOptions, handle: (ref) => (gridRef.current = ref ? ref.current : null), className: 'azgrid-filler', columns: props.columns, dataSource: props.dataSource }),
|
|
239
|
+
props.children));
|
|
240
|
+
}
|
|
241
|
+
/* -------------------------------------------------------------------------- */
|
|
242
|
+
/* -------------------------------------------------------------------------- */
|
|
243
|
+
/* -------------------------------------------------------------------------- */
|
|
244
|
+
/* -------------------------------------------------------------------------- */
|
|
281
245
|
/**
|
|
282
246
|
* merges together all different props for columns
|
|
283
247
|
* to build a single final column data array
|
|
284
248
|
* @param props
|
|
285
249
|
* @returns
|
|
286
|
-
*/
|
|
287
|
-
function ApplyColumnData(props) {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
if (
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
250
|
+
*/
|
|
251
|
+
function ApplyColumnData(props) {
|
|
252
|
+
const final_columns = [];
|
|
253
|
+
let mcols = props.columns || [];
|
|
254
|
+
let mcolExts = props.columnExtensions || [];
|
|
255
|
+
let rightColumns = props.rightColumns || [];
|
|
256
|
+
let leftColumns = props.leftColumns || [];
|
|
257
|
+
let editableColumns = props.editableColumns || [];
|
|
258
|
+
let customColumns = props.customColumns || [];
|
|
259
|
+
if (!Array.isArray(mcols))
|
|
260
|
+
return [];
|
|
261
|
+
/* ------------------------------- fix columns ------------------------------ */
|
|
262
|
+
mcols
|
|
263
|
+
.map((r) => {
|
|
264
|
+
if (r == null)
|
|
265
|
+
return null;
|
|
266
|
+
if (typeof r === 'string')
|
|
267
|
+
return { field: r, header: r };
|
|
268
|
+
if (typeof r === 'object') {
|
|
269
|
+
let final_cl = {
|
|
270
|
+
name: get_col_name(r),
|
|
271
|
+
header: get_col_header(r),
|
|
272
|
+
width: r.width || undefined,
|
|
273
|
+
};
|
|
274
|
+
final_cl = {
|
|
275
|
+
...defaultColumnOptions,
|
|
276
|
+
...r,
|
|
277
|
+
...final_cl,
|
|
278
|
+
};
|
|
279
|
+
return final_cl;
|
|
280
|
+
}
|
|
281
|
+
return null;
|
|
282
|
+
})
|
|
283
|
+
.forEach((r) => {
|
|
284
|
+
if (r != null)
|
|
285
|
+
final_columns.push(r);
|
|
286
|
+
});
|
|
287
|
+
/* ---------------------------- apply extensions ---------------------------- */
|
|
288
|
+
if (mcolExts && Array.isArray(mcolExts))
|
|
289
|
+
for (let index = 0; index < mcolExts.length; index++) {
|
|
290
|
+
const ext = mcolExts[index];
|
|
291
|
+
const ext_cl = get_col_name(ext);
|
|
292
|
+
if (!ext_cl) {
|
|
293
|
+
console.warn('ColumnExtension must have a name');
|
|
294
|
+
continue;
|
|
295
|
+
}
|
|
296
|
+
const mcol = final_columns.find((s) => get_col_name(s) === ext_cl);
|
|
297
|
+
if (mcol) {
|
|
298
|
+
for (const key in ext) {
|
|
299
|
+
if (!mcol[key] && key != 'name')
|
|
300
|
+
mcol[key] = ext[key];
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
// if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
|
|
304
|
+
}
|
|
305
|
+
/* ------------------------------- frozen cols ------------------------------ */
|
|
306
|
+
if (Array.isArray(leftColumns)) {
|
|
307
|
+
for (let index = 0; index < leftColumns.length; index++) {
|
|
308
|
+
const r = get_col_name(leftColumns[index]);
|
|
309
|
+
const mcol = final_columns.find((s) => get_col_name(s) === r);
|
|
310
|
+
if (mcol) {
|
|
311
|
+
mcol.locked = 'start';
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
if (Array.isArray(rightColumns)) {
|
|
316
|
+
for (let index = 0; index < rightColumns.length; index++) {
|
|
317
|
+
const r = get_col_name(rightColumns[index]);
|
|
318
|
+
const mcol = final_columns.find((s) => get_col_name(s) === r);
|
|
319
|
+
if (mcol) {
|
|
320
|
+
mcol.locked = 'end';
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
/* -------------------------------- ediatable ------------------------------- */
|
|
325
|
+
if (Array.isArray(editableColumns)) {
|
|
326
|
+
for (let index = 0; index < editableColumns.length; index++) {
|
|
327
|
+
const r = get_col_name(editableColumns[index]);
|
|
328
|
+
const mcol = final_columns.find((s) => get_col_name(s) === r);
|
|
329
|
+
if (mcol) {
|
|
330
|
+
mcol.editable = true;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
for (let index = 0; index < final_columns.length; index++) {
|
|
335
|
+
const col = final_columns[index];
|
|
336
|
+
if (col.type) {
|
|
337
|
+
switch (col.type) {
|
|
338
|
+
case 'combo':
|
|
339
|
+
case 'select':
|
|
340
|
+
//@ts-ignore
|
|
341
|
+
col.editor = SelectEditor;
|
|
342
|
+
break;
|
|
343
|
+
case 'number':
|
|
344
|
+
case 'numberic':
|
|
345
|
+
//@ts-ignore
|
|
346
|
+
col.editor = NumericEditor;
|
|
347
|
+
break;
|
|
348
|
+
case 'truefalse':
|
|
349
|
+
case 'bool':
|
|
350
|
+
//@ts-ignore
|
|
351
|
+
col.editor = BoolEditor;
|
|
352
|
+
break;
|
|
353
|
+
}
|
|
354
|
+
if (col.editable != false)
|
|
355
|
+
col.editable = true;
|
|
356
|
+
delete col.type;
|
|
357
|
+
}
|
|
358
|
+
//@ts-ignore
|
|
359
|
+
if (!col.editorProps)
|
|
360
|
+
col.editorProps = {};
|
|
361
|
+
if (col.items) {
|
|
362
|
+
//@ts-ignore
|
|
363
|
+
if (!col.editorProps.idProperty)
|
|
364
|
+
col.editorProps.idProperty = 'id';
|
|
365
|
+
//@ts-ignore
|
|
366
|
+
if (!col.editorProps.collapseOnSelect)
|
|
367
|
+
col.editorProps.collapseOnSelect = true;
|
|
368
|
+
//@ts-ignore
|
|
369
|
+
col.editorProps.dataSource = to_datasource(col.items, col.editorProps.idProperty);
|
|
370
|
+
delete col.items;
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
/* -------------------------------------------------------------------------- */
|
|
374
|
+
if (Array.isArray(customColumns)) {
|
|
375
|
+
for (let index = 0; index < customColumns.length; index++) {
|
|
376
|
+
const r = customColumns[index];
|
|
377
|
+
const rn = get_col_name(r);
|
|
378
|
+
const mcol = final_columns.find((s) => get_col_name(s) === rn);
|
|
379
|
+
if (mcol) {
|
|
380
|
+
//@ts-ignore
|
|
381
|
+
mcol.render = r.render;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
/* ------------------------------ apply renames ----------------------------- */
|
|
386
|
+
for (let index = 0; index < final_columns.length; index++) {
|
|
387
|
+
const col = final_columns[index];
|
|
388
|
+
if (!col.name) {
|
|
389
|
+
col.name = get_col_name(col);
|
|
390
|
+
delete col.field;
|
|
391
|
+
delete col.key;
|
|
392
|
+
delete col.columnName;
|
|
393
|
+
if (col.flex && !col.defaultFlex)
|
|
394
|
+
col.defaultFlex = col.flex;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
/* -------------------------------------------------------------------------- */
|
|
398
|
+
//console.log(final_columns);
|
|
399
|
+
return final_columns;
|
|
400
|
+
}
|
|
401
|
+
function to_datasource(arr, idProperty, valueAsID = true) {
|
|
402
|
+
const res = [];
|
|
403
|
+
let index = 0;
|
|
404
|
+
if (Array.isArray(arr)) {
|
|
405
|
+
arr.map((s) => {
|
|
406
|
+
let elem = {};
|
|
407
|
+
if (valueAsID)
|
|
408
|
+
elem[idProperty] = String(s).toLowerCase();
|
|
409
|
+
else
|
|
410
|
+
elem[idProperty] = '_cid_' + index;
|
|
411
|
+
if (typeof s === 'object')
|
|
412
|
+
elem = { ...elem, ...s };
|
|
413
|
+
else
|
|
414
|
+
elem['label'] = s;
|
|
415
|
+
res.push(elem);
|
|
416
|
+
index++;
|
|
417
|
+
});
|
|
418
|
+
}
|
|
419
|
+
return res;
|
|
420
|
+
}
|
|
444
421
|
/**
|
|
445
422
|
* Gets name of a column from its column object
|
|
446
423
|
* @param obj
|
|
447
424
|
* @returns
|
|
448
|
-
*/
|
|
449
|
-
function get_col_name(obj) {
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
425
|
+
*/
|
|
426
|
+
export function get_col_name(obj) {
|
|
427
|
+
if (!obj)
|
|
428
|
+
return '';
|
|
429
|
+
if (typeof obj == 'string')
|
|
430
|
+
return obj;
|
|
431
|
+
if (typeof obj != 'object')
|
|
432
|
+
return '';
|
|
433
|
+
return obj.name || obj.field || obj.key || obj.columnName || '';
|
|
434
|
+
}
|
|
455
435
|
/**
|
|
456
436
|
* Gets header of a column
|
|
457
437
|
* @param obj
|
|
458
438
|
* @returns
|
|
459
|
-
*/
|
|
460
|
-
function get_col_header(obj) {
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
439
|
+
*/
|
|
440
|
+
export function get_col_header(obj) {
|
|
441
|
+
if (!obj)
|
|
442
|
+
return '';
|
|
443
|
+
if (typeof obj == 'string')
|
|
444
|
+
return obj;
|
|
445
|
+
if (typeof obj != 'object')
|
|
446
|
+
return '';
|
|
447
|
+
return obj.header || obj.title || get_col_name(obj);
|
|
448
|
+
}
|
|
466
449
|
/**
|
|
467
450
|
* Gets name of a column from its column object
|
|
468
451
|
* @param obj
|
|
469
452
|
* @returns
|
|
470
|
-
*/
|
|
471
|
-
function get_row_id(obj) {
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
453
|
+
*/
|
|
454
|
+
function get_row_id(obj) {
|
|
455
|
+
if (!obj)
|
|
456
|
+
return '-1';
|
|
457
|
+
if (typeof obj == 'string')
|
|
458
|
+
return obj;
|
|
459
|
+
if (typeof obj != 'object')
|
|
460
|
+
return '-1';
|
|
461
|
+
return obj.__table_id || obj.id || '-1';
|
|
462
|
+
}
|
|
477
463
|
/**
|
|
478
464
|
* Gets default activation key for grid plugin
|
|
479
465
|
* @returns
|
|
480
|
-
*/
|
|
481
|
-
function get_default_key() {
|
|
482
|
-
|
|
483
|
-
}
|
|
484
|
-
//check if two cache objects are the same
|
|
485
|
-
function validateCache(current, old, looseCheck = false) {
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
466
|
+
*/
|
|
467
|
+
function get_default_key() {
|
|
468
|
+
return 'ExpiryDate=2999-01-01,Z=1040577552';
|
|
469
|
+
}
|
|
470
|
+
//check if two cache objects are the same
|
|
471
|
+
function validateCache(current, old, looseCheck = false) {
|
|
472
|
+
if (!old || !object_equals(current, old))
|
|
473
|
+
return false;
|
|
474
|
+
if (looseCheck)
|
|
475
|
+
return true;
|
|
476
|
+
if (current.ds != old.ds)
|
|
477
|
+
return false;
|
|
478
|
+
return true;
|
|
479
|
+
}
|
|
480
|
+
/* -------------------------------------------------------------------------- */
|
|
481
|
+
export default AzGrid;
|