@azrico/reactgrid 1.2.0 → 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 +13 -1
- package/dist/src/views/DataGrid.js +457 -467
- package/dist/src/views/index.js +3 -23
- package/package.json +2 -2
- package/src/index.tsx +3 -3
- package/src/views/DataGrid.tsx +3 -3
- package/dist/src/themes/base_styles.css +0 -30
- package/dist/src/themes/grid.css +0 -20
|
@@ -1,491 +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
|
-
const
|
|
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
|
-
static_gridOptions: static_gridOptions,
|
|
153
|
-
dynamic_gridOptions: dynamic_gridOptions,
|
|
154
|
-
columns: cached_columns,
|
|
155
|
-
dataSource: dataSource,
|
|
156
|
-
highlightedRow: props.highlightedRow
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
/* -------------------------------------------------------------------------- */
|
|
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
|
+
/* -------------------------------------------------------------------------- */
|
|
160
152
|
/**
|
|
161
153
|
* Wrapper for menu events
|
|
162
154
|
* @param props
|
|
163
155
|
* @returns
|
|
164
|
-
*/
|
|
165
|
-
function DataGridEventsWrapper(props) {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
const
|
|
179
|
-
|
|
180
|
-
|
|
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
|
-
static_gridOptions
|
|
220
|
-
|
|
221
|
-
|
|
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
|
-
className: 'azgrid-delayedresize',
|
|
254
|
-
style: {
|
|
255
|
-
height: height,
|
|
256
|
-
width: width
|
|
257
|
-
},
|
|
258
|
-
columns: props.columns,
|
|
259
|
-
dataSource: props.dataSource
|
|
260
|
-
}), props.children);
|
|
261
|
-
}
|
|
262
|
-
function DataGridFlexSize(props) {
|
|
263
|
-
const gridRef = _react.default.useRef(null);
|
|
264
|
-
return _react.default.createElement("div", {
|
|
265
|
-
className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
|
|
266
|
-
}, _react.default.createElement(_reactdatagridEnterprise.default, {
|
|
267
|
-
...props.static_gridOptions,
|
|
268
|
-
...props.dynamic_gridOptions,
|
|
269
|
-
handle: ref => gridRef.current = ref ? ref.current : null,
|
|
270
|
-
className: 'azgrid-filler',
|
|
271
|
-
columns: props.columns,
|
|
272
|
-
dataSource: props.dataSource
|
|
273
|
-
}), props.children);
|
|
274
|
-
}
|
|
275
|
-
/* -------------------------------------------------------------------------- */
|
|
276
|
-
/* -------------------------------------------------------------------------- */
|
|
277
|
-
/* -------------------------------------------------------------------------- */
|
|
278
|
-
/* -------------------------------------------------------------------------- */
|
|
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
|
+
/* -------------------------------------------------------------------------- */
|
|
279
245
|
/**
|
|
280
246
|
* merges together all different props for columns
|
|
281
247
|
* to build a single final column data array
|
|
282
248
|
* @param props
|
|
283
249
|
* @returns
|
|
284
|
-
*/
|
|
285
|
-
function ApplyColumnData(props) {
|
|
286
|
-
|
|
287
|
-
|
|
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
|
-
if (
|
|
323
|
-
|
|
324
|
-
|
|
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
|
-
|
|
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
|
+
}
|
|
442
421
|
/**
|
|
443
422
|
* Gets name of a column from its column object
|
|
444
423
|
* @param obj
|
|
445
424
|
* @returns
|
|
446
|
-
*/
|
|
447
|
-
function get_col_name(obj) {
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
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
|
+
}
|
|
453
435
|
/**
|
|
454
436
|
* Gets header of a column
|
|
455
437
|
* @param obj
|
|
456
438
|
* @returns
|
|
457
|
-
*/
|
|
458
|
-
function get_col_header(obj) {
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
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
|
+
}
|
|
464
449
|
/**
|
|
465
450
|
* Gets name of a column from its column object
|
|
466
451
|
* @param obj
|
|
467
452
|
* @returns
|
|
468
|
-
*/
|
|
469
|
-
function get_row_id(obj) {
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
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
|
+
}
|
|
475
463
|
/**
|
|
476
464
|
* Gets default activation key for grid plugin
|
|
477
465
|
* @returns
|
|
478
|
-
*/
|
|
479
|
-
function get_default_key() {
|
|
480
|
-
|
|
481
|
-
}
|
|
482
|
-
//check if two cache objects are the same
|
|
483
|
-
function validateCache(current, old, looseCheck = false) {
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
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;
|