@azrico/reactgrid 1.0.2 → 1.0.3
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.d.ts +3 -0
- package/dist/index.js +21 -0
- package/dist/src/example.d.ts +4 -0
- package/dist/src/example.js +99 -0
- package/dist/src/index.d.ts +3 -0
- package/dist/src/index.js +29 -0
- package/dist/src/views/DataGrid.d.ts +54 -0
- package/dist/src/views/DataGrid.js +270 -0
- package/dist/src/views/func/helpers.d.ts +29 -0
- package/dist/src/views/func/helpers.js +71 -0
- package/dist/src/views/index.d.ts +3 -0
- package/dist/src/views/index.js +23 -0
- package/package.json +2 -2
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {};
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _src = require("./src");
|
|
9
|
+
Object.keys(_src).forEach(function (key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
12
|
+
if (key in exports && exports[key] === _src[key]) return;
|
|
13
|
+
Object.defineProperty(exports, key, {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _src[key];
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
var _default = _src.AzGrid;
|
|
21
|
+
exports.default = _default;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
ExampleGrid: true
|
|
8
|
+
};
|
|
9
|
+
exports.ExampleGrid = ExampleGrid;
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
var _DataGrid = _interopRequireWildcard(require("./views/DataGrid"));
|
|
12
|
+
Object.keys(_DataGrid).forEach(function (key) {
|
|
13
|
+
if (key === "default" || key === "__esModule") return;
|
|
14
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
15
|
+
if (key in exports && exports[key] === _DataGrid[key]) return;
|
|
16
|
+
Object.defineProperty(exports, key, {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () {
|
|
19
|
+
return _DataGrid[key];
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
var _react = _interopRequireDefault(require("react"));
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
+
const columns = [{
|
|
28
|
+
name: 'username',
|
|
29
|
+
title: 'Username',
|
|
30
|
+
editor: 'input'
|
|
31
|
+
}, {
|
|
32
|
+
name: 'job',
|
|
33
|
+
title: 'Job'
|
|
34
|
+
}, {
|
|
35
|
+
name: 'age',
|
|
36
|
+
title: 'Age',
|
|
37
|
+
editor: 'input'
|
|
38
|
+
}, {
|
|
39
|
+
title: 'Example',
|
|
40
|
+
field: 'example',
|
|
41
|
+
editor: 'input'
|
|
42
|
+
}];
|
|
43
|
+
const leftColumns = ['username', 'row'];
|
|
44
|
+
const customColumns = [{
|
|
45
|
+
name: 'job',
|
|
46
|
+
render: () => {
|
|
47
|
+
return _react.default.createElement("div", null, "test");
|
|
48
|
+
}
|
|
49
|
+
}];
|
|
50
|
+
const contextMenuItems = ['test'];
|
|
51
|
+
function getData() {
|
|
52
|
+
const fd = [];
|
|
53
|
+
for (let index = 0; index < 5; index++) {
|
|
54
|
+
fd.push({
|
|
55
|
+
__table_id: String(index),
|
|
56
|
+
username: 'user-' + index,
|
|
57
|
+
age: 20
|
|
58
|
+
});
|
|
59
|
+
if (index % 5 == 0) {
|
|
60
|
+
fd.push({
|
|
61
|
+
__table_id: 's' + index,
|
|
62
|
+
__parent__table_id: String(index),
|
|
63
|
+
username: 'sub-user-' + index,
|
|
64
|
+
age: 20
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return fd;
|
|
69
|
+
}
|
|
70
|
+
function ExampleGrid() {
|
|
71
|
+
const renderContactsGrid = ({
|
|
72
|
+
data
|
|
73
|
+
}) => {
|
|
74
|
+
return _react.default.createElement("div", null, _react.default.createElement("div", null, 'Test'));
|
|
75
|
+
};
|
|
76
|
+
const [selected, setSelected] = _react.default.useState(null);
|
|
77
|
+
const onSelectionChange = _react.default.useCallback(({
|
|
78
|
+
selected
|
|
79
|
+
}) => {
|
|
80
|
+
setSelected(selected);
|
|
81
|
+
}, []);
|
|
82
|
+
return _react.default.createElement(_DataGrid.default, {
|
|
83
|
+
dark: true,
|
|
84
|
+
allowChildRows: true,
|
|
85
|
+
onSelectionChange: onSelectionChange,
|
|
86
|
+
selected: selected,
|
|
87
|
+
contextMenuItems: contextMenuItems,
|
|
88
|
+
customColumns: customColumns,
|
|
89
|
+
columns: columns,
|
|
90
|
+
rows: getData(),
|
|
91
|
+
leftColumns: leftColumns,
|
|
92
|
+
gridOptions: {
|
|
93
|
+
rowIndexColumn: true,
|
|
94
|
+
checkboxColumn: true
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
var _default = ExampleGrid;
|
|
99
|
+
exports.default = _default;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {};
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _DataGrid = _interopRequireWildcard(require("./views/DataGrid"));
|
|
9
|
+
Object.keys(_DataGrid).forEach(function (key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
12
|
+
if (key in exports && exports[key] === _DataGrid[key]) return;
|
|
13
|
+
Object.defineProperty(exports, key, {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _DataGrid[key];
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
var _example = _interopRequireDefault(require("./example"));
|
|
21
|
+
var _react = _interopRequireDefault(require("react"));
|
|
22
|
+
var _client = _interopRequireDefault(require("react-dom/client"));
|
|
23
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
26
|
+
var _default = _DataGrid.default;
|
|
27
|
+
exports.default = _default;
|
|
28
|
+
const root = _client.default.createRoot(document.getElementById('root'));
|
|
29
|
+
root.render(_react.default.createElement(_example.default, null));
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import '@inovua/reactdatagrid-enterprise/index.css';
|
|
2
|
+
import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
|
|
3
|
+
import './theme/styles.css';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { TypeColumn, TypeDataGridProps, TypeDataSource, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
|
|
6
|
+
import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
|
|
7
|
+
export type ColumnDefinition = TypeColumn;
|
|
8
|
+
export type CellDefinition = any;
|
|
9
|
+
export type RowDefinition = any;
|
|
10
|
+
export type RowProps = TypeRowProps;
|
|
11
|
+
export type RowSelectionValue = TypeRowSelection;
|
|
12
|
+
export type DataRowDefinition = any;
|
|
13
|
+
export type DataSourceDefinition = TypeDataSource;
|
|
14
|
+
export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
|
|
15
|
+
export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
|
|
16
|
+
type loose_column_fields = {
|
|
17
|
+
title: string;
|
|
18
|
+
key: string;
|
|
19
|
+
field: string;
|
|
20
|
+
columnName: string;
|
|
21
|
+
name: string;
|
|
22
|
+
};
|
|
23
|
+
export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
|
|
24
|
+
type columnOrString = string | LooseColumnDefinition;
|
|
25
|
+
type customColumnData = {
|
|
26
|
+
name: string;
|
|
27
|
+
render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode;
|
|
28
|
+
};
|
|
29
|
+
type GridOptions = Partial<TypeDataGridProps>;
|
|
30
|
+
type AzGridProps = {
|
|
31
|
+
columns?: columnOrString[];
|
|
32
|
+
rows?: any[];
|
|
33
|
+
licenseKey?: string;
|
|
34
|
+
gridOptions?: GridOptions;
|
|
35
|
+
tableColumnExtensions?: any[];
|
|
36
|
+
editableColumns?: string[];
|
|
37
|
+
leftColumns?: string[];
|
|
38
|
+
rightColumns?: string[];
|
|
39
|
+
customColumns?: customColumnData[];
|
|
40
|
+
contextMenuItems?: any[];
|
|
41
|
+
highlightedRow?: any;
|
|
42
|
+
RowDetail?: RowDetailsFunc;
|
|
43
|
+
get_rows?: () => any[];
|
|
44
|
+
selected?: RowSelectionValue;
|
|
45
|
+
onSelectionChange?: OnSelectionChangeFunc;
|
|
46
|
+
onRowsChange?: (rows: any[], options: any) => void;
|
|
47
|
+
onRowClick?: (rowIndex: number, row: any) => void;
|
|
48
|
+
onRowDoubleClick?: (rowIndex: number, row: any) => void;
|
|
49
|
+
dark?: boolean;
|
|
50
|
+
allowChildRows?: boolean;
|
|
51
|
+
className?: string;
|
|
52
|
+
};
|
|
53
|
+
export declare function AzGrid(props: AzGridProps): JSX.Element;
|
|
54
|
+
export default AzGrid;
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.AzGrid = AzGrid;
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
require("@inovua/reactdatagrid-enterprise/index.css");
|
|
9
|
+
require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
|
|
10
|
+
require("./theme/styles.css");
|
|
11
|
+
var _react = _interopRequireDefault(require("react"));
|
|
12
|
+
var _helpers = require("./func/helpers");
|
|
13
|
+
var _controls = require("@azrico/controls");
|
|
14
|
+
var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
|
|
15
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
/* -------------------------------------------------------------------------- */
|
|
18
|
+
const defaultOptions = {
|
|
19
|
+
rowReorderColumn: false,
|
|
20
|
+
resizable: true,
|
|
21
|
+
rowIndexColumn: true
|
|
22
|
+
};
|
|
23
|
+
const forcedOptions = {
|
|
24
|
+
idProperty: '__table_id',
|
|
25
|
+
nodesProperty: '__children'
|
|
26
|
+
};
|
|
27
|
+
const defaultColumnOptions = {
|
|
28
|
+
draggable: false,
|
|
29
|
+
lockable: false
|
|
30
|
+
};
|
|
31
|
+
/* -------------------------------------------------------------------------- */
|
|
32
|
+
function AzGrid(props) {
|
|
33
|
+
const [pendingChanges, set_pendingChanges] = _react.default.useState(1);
|
|
34
|
+
const [cached_rows, set_cached_rows] = _react.default.useState([]);
|
|
35
|
+
/* -------------------------------------------------------------------------- */
|
|
36
|
+
/* Columns */
|
|
37
|
+
/* -------------------------------------------------------------------------- */
|
|
38
|
+
const cached_columns = _react.default.useMemo(() => {
|
|
39
|
+
const final_columns = [];
|
|
40
|
+
let mcols = props.columns || [];
|
|
41
|
+
let mcolExts = props.tableColumnExtensions || [];
|
|
42
|
+
let rightColumns = props.rightColumns || [];
|
|
43
|
+
let leftColumns = props.leftColumns || [];
|
|
44
|
+
let editableColumns = props.editableColumns || [];
|
|
45
|
+
let customColumns = props.customColumns || [];
|
|
46
|
+
if (!Array.isArray(mcols)) return [];
|
|
47
|
+
/* ------------------------------- fix columns ------------------------------ */
|
|
48
|
+
mcols.map(r => {
|
|
49
|
+
if (typeof r === 'string') return {
|
|
50
|
+
field: r,
|
|
51
|
+
header: r
|
|
52
|
+
};
|
|
53
|
+
if (typeof r === 'object') {
|
|
54
|
+
let final_cl = {
|
|
55
|
+
name: r.field || r.name || r.key || r.columnName,
|
|
56
|
+
header: r.header || r.title || r.name || '-',
|
|
57
|
+
width: r.width || undefined
|
|
58
|
+
};
|
|
59
|
+
delete r.field;
|
|
60
|
+
delete r.key;
|
|
61
|
+
delete r.columnName;
|
|
62
|
+
final_cl = {
|
|
63
|
+
...defaultColumnOptions,
|
|
64
|
+
...r,
|
|
65
|
+
...final_cl
|
|
66
|
+
};
|
|
67
|
+
return final_cl;
|
|
68
|
+
}
|
|
69
|
+
return null;
|
|
70
|
+
}).forEach(r => {
|
|
71
|
+
if (r != null) final_columns.push(r);
|
|
72
|
+
});
|
|
73
|
+
/* ---------------------------- apply extensions ---------------------------- */
|
|
74
|
+
if (mcolExts && Array.isArray(mcolExts)) for (let index = 0; index < mcolExts.length; index++) {
|
|
75
|
+
const ext = mcolExts[index];
|
|
76
|
+
const ext_cl = ext.columnName || ext.name || ext.field;
|
|
77
|
+
const mcol = final_columns.find(s => s.name === ext_cl);
|
|
78
|
+
if (!mcol) continue;
|
|
79
|
+
// if (ext.width) mcol.width = ext.width;
|
|
80
|
+
// if (ext.widthGrow) mcol.widthGrow = ext.widthGrow;
|
|
81
|
+
}
|
|
82
|
+
/* ------------------------------- frozen cols ------------------------------ */
|
|
83
|
+
if (Array.isArray(leftColumns)) {
|
|
84
|
+
for (let index = 0; index < leftColumns.length; index++) {
|
|
85
|
+
const r = leftColumns[index];
|
|
86
|
+
const mcol = final_columns.find(s => s.name === r);
|
|
87
|
+
if (mcol) {
|
|
88
|
+
mcol.locked = 'start';
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
if (Array.isArray(rightColumns)) {
|
|
93
|
+
for (let index = 0; index < rightColumns.length; index++) {
|
|
94
|
+
const r = rightColumns[index];
|
|
95
|
+
const mcol = final_columns.find(s => s.name === r);
|
|
96
|
+
if (mcol) {
|
|
97
|
+
mcol.locked = 'end';
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
/* -------------------------------- ediatable ------------------------------- */
|
|
102
|
+
if (Array.isArray(editableColumns)) {
|
|
103
|
+
for (let index = 0; index < editableColumns.length; index++) {
|
|
104
|
+
const r = editableColumns[index];
|
|
105
|
+
const mcol = final_columns.find(s => s.name === r);
|
|
106
|
+
if (mcol) {
|
|
107
|
+
// mcol.editor = editorWrapper;
|
|
108
|
+
// mcol.editorOptions = {
|
|
109
|
+
// editOnClick: true,
|
|
110
|
+
// };
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
if (Array.isArray(customColumns)) {
|
|
115
|
+
for (let index = 0; index < customColumns.length; index++) {
|
|
116
|
+
const r = customColumns[index];
|
|
117
|
+
const mcol = final_columns.find(s => s.name === r.name);
|
|
118
|
+
if (mcol) {
|
|
119
|
+
//@ts-ignore
|
|
120
|
+
mcol.render = r.render;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
return final_columns;
|
|
125
|
+
}, [props.columns, props.leftColumns, props.editableColumns, props.tableColumnExtensions]);
|
|
126
|
+
/* -------------------------------------------------------------------------- */
|
|
127
|
+
/* -------------------------------------------------------------------------- */
|
|
128
|
+
/* Row changes */
|
|
129
|
+
/* -------------------------------------------------------------------------- */
|
|
130
|
+
_react.default.useEffect(() => {
|
|
131
|
+
if (pendingChanges <= 0) return;
|
|
132
|
+
let new_rows = [];
|
|
133
|
+
if (typeof props.get_rows === 'function') {
|
|
134
|
+
new_rows = props.get_rows();
|
|
135
|
+
} else new_rows = props.rows || [];
|
|
136
|
+
/* -------------------------------------------------------------------------- */
|
|
137
|
+
if (!Array.isArray(new_rows)) new_rows = [];
|
|
138
|
+
/* -------------------------- fix child parent rel -------------------------- */
|
|
139
|
+
if (props.allowChildRows) new_rows = (0, _helpers.fix_parent_child_relations)(new_rows);
|
|
140
|
+
set_cached_rows(new_rows);
|
|
141
|
+
set_pendingChanges(0);
|
|
142
|
+
}, [pendingChanges]);
|
|
143
|
+
_react.default.useEffect(() => {
|
|
144
|
+
set_pendingChanges(r => r + 1);
|
|
145
|
+
}, [props.rows]);
|
|
146
|
+
function onRowsChange(rows, options) {
|
|
147
|
+
if (props.onRowsChange) props.onRowsChange(rows, options);
|
|
148
|
+
set_pendingChanges(r => r + 1); //notify the cache to update rows after we made changes to them
|
|
149
|
+
}
|
|
150
|
+
/* -------------------------------------------------------------------------- */
|
|
151
|
+
/* -------------------------------------------------------------------------- */
|
|
152
|
+
return _react.default.createElement(DataGrid, {
|
|
153
|
+
...props,
|
|
154
|
+
columns: cached_columns,
|
|
155
|
+
rows: cached_rows,
|
|
156
|
+
onRowsChange: onRowsChange,
|
|
157
|
+
highlightedRow: props.highlightedRow
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
/* -------------------------------------------------------------------------- */
|
|
161
|
+
function DataGrid(props) {
|
|
162
|
+
const {
|
|
163
|
+
columns,
|
|
164
|
+
rows,
|
|
165
|
+
highlightedRow,
|
|
166
|
+
dark,
|
|
167
|
+
contextMenuItems,
|
|
168
|
+
onRowsChange
|
|
169
|
+
} = props;
|
|
170
|
+
/* -------------------------------------------------------------------------- */
|
|
171
|
+
const gridRef = _react.default.useRef(null);
|
|
172
|
+
const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
|
|
173
|
+
const [menuRow, set_menuRow] = _react.default.useState(null);
|
|
174
|
+
const gridID = _react.default.useMemo(() => 'table-' + Date.now().valueOf(), []);
|
|
175
|
+
/* -------------------------------------------------------------------------- */
|
|
176
|
+
/* Create the grid */
|
|
177
|
+
/* -------------------------------------------------------------------------- */
|
|
178
|
+
const static_gridOptions = _react.default.useMemo(() => {
|
|
179
|
+
const firstcolumn = columns[0];
|
|
180
|
+
const licenseKey = props.licenseKey || get_default_key();
|
|
181
|
+
const events = {
|
|
182
|
+
onRowClick: onRowClick,
|
|
183
|
+
onRowDoubleClick: onRowDoubleClick,
|
|
184
|
+
onRowContextMenu: onRowContextMenu
|
|
185
|
+
};
|
|
186
|
+
const extra_ops = {
|
|
187
|
+
onSelectionChange: props.onSelectionChange,
|
|
188
|
+
licenseKey: licenseKey,
|
|
189
|
+
treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
|
|
190
|
+
renderRowDetails: props.RowDetail,
|
|
191
|
+
theme: dark ? 'default-dark' : 'default-light'
|
|
192
|
+
};
|
|
193
|
+
return {
|
|
194
|
+
...defaultOptions,
|
|
195
|
+
...events,
|
|
196
|
+
...extra_ops,
|
|
197
|
+
...props.gridOptions,
|
|
198
|
+
...forcedOptions
|
|
199
|
+
};
|
|
200
|
+
}, [props.gridOptions]);
|
|
201
|
+
const dynamic_gridOptions = _react.default.useMemo(() => {
|
|
202
|
+
return {
|
|
203
|
+
selected: props.selected
|
|
204
|
+
};
|
|
205
|
+
}, [props.selected]);
|
|
206
|
+
/* ------------------------------- load events ------------------------------ */
|
|
207
|
+
function onCellEdit(cell) {}
|
|
208
|
+
function onRowContextMenu(row, ev) {
|
|
209
|
+
if (_helpers.func_selection.has_selection()) return;
|
|
210
|
+
update_menuAnchorEl(_helpers.func_selection.getVirtualElement(ev.clientX, ev.clientY));
|
|
211
|
+
update_menuRow(row.data);
|
|
212
|
+
ev.preventDefault();
|
|
213
|
+
}
|
|
214
|
+
function onRowClick(row, event) {
|
|
215
|
+
props.onRowClick && props.onRowClick(row.rowIndex, row.data);
|
|
216
|
+
}
|
|
217
|
+
function onRowDoubleClick(event, row) {
|
|
218
|
+
props.onRowDoubleClick && props.onRowDoubleClick(row.rowIndex, row.data);
|
|
219
|
+
}
|
|
220
|
+
/* ------------------------- update the selected row ------------------------ */
|
|
221
|
+
_react.default.useEffect(() => {
|
|
222
|
+
if (highlightedRow) gridRef.current.scrollToRow(getRowIndex(highlightedRow, rows));
|
|
223
|
+
}, [highlightedRow]);
|
|
224
|
+
/* ------------------------------- ContextMenu ------------------------------ */
|
|
225
|
+
function update_menuAnchorEl(el) {
|
|
226
|
+
if (!el) {
|
|
227
|
+
set_menuAnchorEl(el);
|
|
228
|
+
} else if (menuAnchorEl) set_menuAnchorEl(null);
|
|
229
|
+
}
|
|
230
|
+
function update_menuRow(r) {
|
|
231
|
+
if (!r) {
|
|
232
|
+
set_menuRow(r);
|
|
233
|
+
} else if (menuRow) set_menuRow(null);
|
|
234
|
+
}
|
|
235
|
+
/* -------------------------------------------------------------------------- */
|
|
236
|
+
// const { width, height, ref: resize_ref } = useResizeDetector();
|
|
237
|
+
return _react.default.createElement("div", {
|
|
238
|
+
className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
|
|
239
|
+
}, _react.default.createElement(_reactdatagridEnterprise.default, {
|
|
240
|
+
...static_gridOptions,
|
|
241
|
+
...dynamic_gridOptions,
|
|
242
|
+
className: 'azgrid-filler',
|
|
243
|
+
columns: columns,
|
|
244
|
+
dataSource: rows
|
|
245
|
+
}), _react.default.createElement(_controls.ContextMenu, {
|
|
246
|
+
menuAnchorEl: menuAnchorEl,
|
|
247
|
+
set_menuAnchorEl: update_menuAnchorEl,
|
|
248
|
+
menuRow: menuRow,
|
|
249
|
+
items: contextMenuItems
|
|
250
|
+
}));
|
|
251
|
+
}
|
|
252
|
+
/* -------------------------------------------------------------------------- */
|
|
253
|
+
function get_default_key() {
|
|
254
|
+
return 'ExpiryDate=2999-01-01,Z=1040577552';
|
|
255
|
+
}
|
|
256
|
+
function getRowIndex(row, allrows) {
|
|
257
|
+
if (!allrows) return -1;
|
|
258
|
+
return allrows.findIndex(s => rowKeyGetter(s) === rowKeyGetter(row)) || -1;
|
|
259
|
+
}
|
|
260
|
+
function rowKeyGetter(row) {
|
|
261
|
+
return row.__uid;
|
|
262
|
+
}
|
|
263
|
+
function isRowSelected(row, highlightedRow) {
|
|
264
|
+
const rid = rowKeyGetter(row);
|
|
265
|
+
const highLight = rowKeyGetter(highlightedRow);
|
|
266
|
+
return rid != null && rid === highLight;
|
|
267
|
+
}
|
|
268
|
+
/* -------------------------------------------------------------------------- */
|
|
269
|
+
var _default = AzGrid;
|
|
270
|
+
exports.default = _default;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
type mrow = {
|
|
2
|
+
__parent__table_id: any;
|
|
3
|
+
__table_id: any;
|
|
4
|
+
__children?: any[];
|
|
5
|
+
};
|
|
6
|
+
export declare function fix_parent_child_relations<T extends mrow>(rows: T[]): T[];
|
|
7
|
+
export declare class func_selection {
|
|
8
|
+
static getVirtualElement(x?: number, y?: number): () => {
|
|
9
|
+
getBoundingClientRect: () => {
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
top: number;
|
|
13
|
+
right: number;
|
|
14
|
+
bottom: number;
|
|
15
|
+
left: number;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
static generateGetBoundingClientRect(x?: number, y?: number): () => {
|
|
19
|
+
width: number;
|
|
20
|
+
height: number;
|
|
21
|
+
top: number;
|
|
22
|
+
right: number;
|
|
23
|
+
bottom: number;
|
|
24
|
+
left: number;
|
|
25
|
+
};
|
|
26
|
+
static get_selectedText(): string;
|
|
27
|
+
static has_selection(): boolean;
|
|
28
|
+
}
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.fix_parent_child_relations = fix_parent_child_relations;
|
|
7
|
+
exports.func_selection = void 0;
|
|
8
|
+
//given an array of rows, fixes parent,child relations
|
|
9
|
+
function fix_parent_child_relations(rows) {
|
|
10
|
+
if (!Array.isArray(rows)) rows = [];
|
|
11
|
+
const child_rows = [];
|
|
12
|
+
const parent_rows = [];
|
|
13
|
+
for (let index = 0; index < rows.length; index++) {
|
|
14
|
+
const r = rows[index];
|
|
15
|
+
if (r.__parent__table_id != undefined) child_rows.push(r);else parent_rows.push(r);
|
|
16
|
+
}
|
|
17
|
+
for (let index = 0; index < parent_rows.length; index++) {
|
|
18
|
+
const pr = parent_rows[index];
|
|
19
|
+
pr.__children = [];
|
|
20
|
+
}
|
|
21
|
+
//find parent for these children !
|
|
22
|
+
for (let index = 0; index < child_rows.length; index++) {
|
|
23
|
+
const child = child_rows[index];
|
|
24
|
+
const parentOfChild = parent_rows.find(s => s.__table_id == child.__parent__table_id);
|
|
25
|
+
if (!parentOfChild) continue; //no parent :(
|
|
26
|
+
//@ts-ignore
|
|
27
|
+
parentOfChild.__children.push(child);
|
|
28
|
+
}
|
|
29
|
+
for (let index = 0; index < parent_rows.length; index++) {
|
|
30
|
+
const pr = parent_rows[index];
|
|
31
|
+
//@ts-ignore
|
|
32
|
+
if (pr.__children.length == 0) pr.__children = undefined;
|
|
33
|
+
}
|
|
34
|
+
return parent_rows;
|
|
35
|
+
}
|
|
36
|
+
class func_selection {
|
|
37
|
+
static getVirtualElement(x = 0, y = 0) {
|
|
38
|
+
return () => ({
|
|
39
|
+
getBoundingClientRect: func_selection.generateGetBoundingClientRect(x, y)
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
static generateGetBoundingClientRect(x = 0, y = 0) {
|
|
43
|
+
return () => ({
|
|
44
|
+
width: 0,
|
|
45
|
+
height: 0,
|
|
46
|
+
top: y,
|
|
47
|
+
right: x,
|
|
48
|
+
bottom: y,
|
|
49
|
+
left: x
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
static get_selectedText() {
|
|
53
|
+
var text = '';
|
|
54
|
+
if (window.getSelection) {
|
|
55
|
+
var _window$getSelection;
|
|
56
|
+
text = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
|
|
57
|
+
} else if (document.selection && document.selection.type != 'Control') {
|
|
58
|
+
var _document$selection$c;
|
|
59
|
+
text = (_document$selection$c = document.selection.createRange()) === null || _document$selection$c === void 0 ? void 0 : _document$selection$c.text;
|
|
60
|
+
}
|
|
61
|
+
return text || '';
|
|
62
|
+
}
|
|
63
|
+
static has_selection() {
|
|
64
|
+
const slct = window.getSelection();
|
|
65
|
+
if (slct == null) return false;
|
|
66
|
+
if (slct.type == null) return func_selection.get_selectedText().length !== 0;
|
|
67
|
+
if (slct.type === 'Range') return true;
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
exports.func_selection = func_selection;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {};
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _DataGrid = _interopRequireWildcard(require("./DataGrid"));
|
|
9
|
+
Object.keys(_DataGrid).forEach(function (key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
12
|
+
if (key in exports && exports[key] === _DataGrid[key]) return;
|
|
13
|
+
Object.defineProperty(exports, key, {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _DataGrid[key];
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
22
|
+
var _default = _DataGrid.default;
|
|
23
|
+
exports.default = _default;
|