@azrico/reactgrid 1.2.35 → 1.2.36
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/CHANGELOG.md +14 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.js +21 -3
- package/dist/src/example.d.ts +4 -4
- package/dist/src/example.js +155 -112
- package/dist/src/func/func_child.d.ts +29 -29
- package/dist/src/func/func_child.js +73 -70
- package/dist/src/func/func_grid.d.ts +39 -39
- package/dist/src/func/func_grid.js +261 -275
- package/dist/src/index.d.ts +4 -4
- package/dist/src/index.js +60 -10
- package/dist/src/views/DataGrid.d.ts +79 -79
- package/dist/src/views/DataGrid.js +243 -195
- package/dist/src/views/index.d.ts +3 -3
- package/dist/src/views/index.js +23 -3
- package/package.json +1 -1
- package/src/views/DataGrid.tsx +4 -7
|
@@ -1,79 +1,79 @@
|
|
|
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 { ConvertableToMenuItem } from '@azrico/controls';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import { TypeCellSelection, TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeFilterValue, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
|
|
9
|
-
import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
|
|
10
|
-
export type ColumnDefinition = TypeColumn;
|
|
11
|
-
export type CellDefinition = any;
|
|
12
|
-
export type RowDefinition = any;
|
|
13
|
-
export type RowProps = TypeRowProps;
|
|
14
|
-
export type RowSelectionValue = TypeRowSelection;
|
|
15
|
-
export type CellSelectionValue = TypeCellSelection;
|
|
16
|
-
export type DataRowDefinition = any;
|
|
17
|
-
export type FilterTypes = TypeFilterTypes;
|
|
18
|
-
export type FilterValues = TypeFilterValue;
|
|
19
|
-
export type DataSourceDefinition = TypeDataSource;
|
|
20
|
-
export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
|
|
21
|
-
export type OnCellSelectionChangeFunc = (s: {
|
|
22
|
-
[key: string]: boolean;
|
|
23
|
-
}) => void;
|
|
24
|
-
export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
|
|
25
|
-
type loose_column_names = {
|
|
26
|
-
key: string;
|
|
27
|
-
field: string;
|
|
28
|
-
columnName: string;
|
|
29
|
-
name: string;
|
|
30
|
-
};
|
|
31
|
-
type loose_column_fields = loose_column_names & {
|
|
32
|
-
title: string;
|
|
33
|
-
type: string;
|
|
34
|
-
items: any[];
|
|
35
|
-
};
|
|
36
|
-
export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
|
|
37
|
-
type customColumnData = {
|
|
38
|
-
name: string;
|
|
39
|
-
render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode | undefined | null;
|
|
40
|
-
};
|
|
41
|
-
export type AzGridOptions = Partial<TypeDataGridProps>;
|
|
42
|
-
export type AzGridProps = {
|
|
43
|
-
dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
|
|
44
|
-
details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
|
|
45
|
-
details_columns?: LooseColumnDefinition[];
|
|
46
|
-
details_filter?: FilterValues;
|
|
47
|
-
licenseKey?: string;
|
|
48
|
-
gridRef?: any;
|
|
49
|
-
gridOptions?: AzGridOptions;
|
|
50
|
-
columns?: LooseColumnDefinition[];
|
|
51
|
-
columnExtensions?: Partial<LooseColumnDefinition>;
|
|
52
|
-
editableColumns?: string[];
|
|
53
|
-
leftColumns?: string[];
|
|
54
|
-
rightColumns?: string[];
|
|
55
|
-
customColumns?: customColumnData[];
|
|
56
|
-
contextMenuItems?: ConvertableToMenuItem;
|
|
57
|
-
highlightedRow?: any;
|
|
58
|
-
RowDetail?: RowDetailsFunc;
|
|
59
|
-
selected?: RowSelectionValue;
|
|
60
|
-
cellSelection?: CellSelectionValue;
|
|
61
|
-
onEditComplete?: (editInfo: TypeEditInfo) => void;
|
|
62
|
-
onSelectionChange?: OnSelectionChangeFunc;
|
|
63
|
-
onCellSelectionChange?: OnCellSelectionChangeFunc;
|
|
64
|
-
onRowClick?: (rowIndex: number, row: any) => void;
|
|
65
|
-
onRowDoubleClick?: (rowIndex: number, row: any) => void;
|
|
66
|
-
onLimitChange?: (v: number) => void;
|
|
67
|
-
onSkipChange?: (v: number) => void;
|
|
68
|
-
skip?: number;
|
|
69
|
-
limit?: number;
|
|
70
|
-
editable?: boolean | ((editValue: any, cellProps: any) => boolean);
|
|
71
|
-
loading?: boolean;
|
|
72
|
-
dark?: boolean;
|
|
73
|
-
delayedSize?: boolean;
|
|
74
|
-
allowChildRows?: boolean;
|
|
75
|
-
looseCacheCheck?: boolean;
|
|
76
|
-
className?: string;
|
|
77
|
-
};
|
|
78
|
-
export declare function AzGrid(props: AzGridProps): React.JSX.Element;
|
|
79
|
-
export default AzGrid;
|
|
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 { ConvertableToMenuItem } from '@azrico/controls';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { TypeCellSelection, TypeColumn, TypeDataGridProps, TypeDataSource, TypeEditInfo, TypeFilterTypes, TypeFilterValue, TypeRowDetailsInfo, TypeRowProps, TypeRowSelection } from '@inovua/reactdatagrid-community/types';
|
|
9
|
+
import { TypeOnSelectionChangeArg } from '@inovua/reactdatagrid-community/types/TypeDataGridProps';
|
|
10
|
+
export type ColumnDefinition = TypeColumn;
|
|
11
|
+
export type CellDefinition = any;
|
|
12
|
+
export type RowDefinition = any;
|
|
13
|
+
export type RowProps = TypeRowProps;
|
|
14
|
+
export type RowSelectionValue = TypeRowSelection;
|
|
15
|
+
export type CellSelectionValue = TypeCellSelection;
|
|
16
|
+
export type DataRowDefinition = any;
|
|
17
|
+
export type FilterTypes = TypeFilterTypes;
|
|
18
|
+
export type FilterValues = TypeFilterValue;
|
|
19
|
+
export type DataSourceDefinition = TypeDataSource;
|
|
20
|
+
export type OnSelectionChangeFunc = (config: TypeOnSelectionChangeArg) => void;
|
|
21
|
+
export type OnCellSelectionChangeFunc = (s: {
|
|
22
|
+
[key: string]: boolean;
|
|
23
|
+
}) => void;
|
|
24
|
+
export type RowDetailsFunc = (rowDetailsInfo: TypeRowDetailsInfo) => React.ReactNode;
|
|
25
|
+
type loose_column_names = {
|
|
26
|
+
key: string;
|
|
27
|
+
field: string;
|
|
28
|
+
columnName: string;
|
|
29
|
+
name: string;
|
|
30
|
+
};
|
|
31
|
+
type loose_column_fields = loose_column_names & {
|
|
32
|
+
title: string;
|
|
33
|
+
type: string;
|
|
34
|
+
items: any[];
|
|
35
|
+
};
|
|
36
|
+
export type LooseColumnDefinition = Partial<loose_column_fields & ColumnDefinition>;
|
|
37
|
+
type customColumnData = {
|
|
38
|
+
name: string;
|
|
39
|
+
render: (cell: any, formatterParams: any, onRendered: any) => React.ReactNode | undefined | null;
|
|
40
|
+
};
|
|
41
|
+
export type AzGridOptions = Partial<TypeDataGridProps>;
|
|
42
|
+
export type AzGridProps = {
|
|
43
|
+
dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
|
|
44
|
+
details_dataSource?: any[] | ((args: any) => any[] | Promise<any[] | any>);
|
|
45
|
+
details_columns?: LooseColumnDefinition[];
|
|
46
|
+
details_filter?: FilterValues;
|
|
47
|
+
licenseKey?: string;
|
|
48
|
+
gridRef?: any;
|
|
49
|
+
gridOptions?: AzGridOptions;
|
|
50
|
+
columns?: LooseColumnDefinition[];
|
|
51
|
+
columnExtensions?: Partial<LooseColumnDefinition>;
|
|
52
|
+
editableColumns?: string[];
|
|
53
|
+
leftColumns?: string[];
|
|
54
|
+
rightColumns?: string[];
|
|
55
|
+
customColumns?: customColumnData[];
|
|
56
|
+
contextMenuItems?: ConvertableToMenuItem;
|
|
57
|
+
highlightedRow?: any;
|
|
58
|
+
RowDetail?: RowDetailsFunc;
|
|
59
|
+
selected?: RowSelectionValue;
|
|
60
|
+
cellSelection?: CellSelectionValue;
|
|
61
|
+
onEditComplete?: (editInfo: TypeEditInfo) => void;
|
|
62
|
+
onSelectionChange?: OnSelectionChangeFunc;
|
|
63
|
+
onCellSelectionChange?: OnCellSelectionChangeFunc;
|
|
64
|
+
onRowClick?: (rowIndex: number, row: any) => void;
|
|
65
|
+
onRowDoubleClick?: (rowIndex: number, row: any) => void;
|
|
66
|
+
onLimitChange?: (v: number) => void;
|
|
67
|
+
onSkipChange?: (v: number) => void;
|
|
68
|
+
skip?: number;
|
|
69
|
+
limit?: number;
|
|
70
|
+
editable?: boolean | ((editValue: any, cellProps: any) => boolean);
|
|
71
|
+
loading?: boolean;
|
|
72
|
+
dark?: boolean;
|
|
73
|
+
delayedSize?: boolean;
|
|
74
|
+
allowChildRows?: boolean;
|
|
75
|
+
looseCacheCheck?: boolean;
|
|
76
|
+
className?: string;
|
|
77
|
+
};
|
|
78
|
+
export declare function AzGrid(props: AzGridProps): React.JSX.Element;
|
|
79
|
+
export default AzGrid;
|
|
@@ -1,222 +1,270 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
|
|
11
|
+
require("../themes/base_styles.css");
|
|
12
|
+
require("../themes/grid.css");
|
|
13
|
+
var _func_grid = require("../func/func_grid");
|
|
14
|
+
var _controls = require("@azrico/controls");
|
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
|
+
var _func_child = require("../func/func_child");
|
|
17
|
+
var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
|
|
18
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
19
|
+
var _reactUseSize = require("react-use-size");
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
21
|
/* -------------------------------------------------------------------------- */
|
|
14
22
|
const defaultOptions = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
//filterTypes: defaultfilterTypes,
|
|
24
|
+
remoteFilter: false,
|
|
25
|
+
remoteSort: false,
|
|
26
|
+
editStartEvent: 'click',
|
|
27
|
+
rowReorderColumn: false,
|
|
28
|
+
resizable: true,
|
|
29
|
+
columnUserSelect: true,
|
|
30
|
+
rowIndexColumn: true,
|
|
31
|
+
rowHeight: 35
|
|
24
32
|
};
|
|
25
33
|
const forcedOptions = {
|
|
26
|
-
|
|
27
|
-
|
|
34
|
+
idProperty: '__table_id',
|
|
35
|
+
nodesProperty: '__children'
|
|
28
36
|
};
|
|
29
37
|
const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
|
|
30
38
|
/* -------------------------------------------------------------------------- */
|
|
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
|
-
|
|
39
|
+
function AzGrid(props) {
|
|
40
|
+
const gridRefBackup = _react.default.useRef(null);
|
|
41
|
+
const gridRef = props.gridRef || gridRefBackup;
|
|
42
|
+
/* -------------------------------------------------------------------------- */
|
|
43
|
+
/* Columns */
|
|
44
|
+
/* -------------------------------------------------------------------------- */
|
|
45
|
+
const cached_columns = _react.default.useMemo(() => {
|
|
46
|
+
return (0, _func_grid.ApplyColumnData)(props);
|
|
47
|
+
}, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
|
|
48
|
+
/* -------------------------------------------------------------------------- */
|
|
49
|
+
/* Row changes */
|
|
50
|
+
/* -------------------------------------------------------------------------- */
|
|
51
|
+
const cached_data = _react.default.useRef();
|
|
52
|
+
const last_cache_info = _react.default.useRef();
|
|
53
|
+
const dataSource = _react.default.useCallback(async dt => {
|
|
54
|
+
return await (0, _func_grid.ApplyDataSource)(props.dataSource, {
|
|
55
|
+
skip: dt.skip,
|
|
56
|
+
limit: dt.limit,
|
|
57
|
+
cached_data: cached_data,
|
|
58
|
+
last_cache_info: last_cache_info
|
|
59
|
+
});
|
|
60
|
+
}, [props.dataSource]);
|
|
61
|
+
const base_gridOptions = _react.default.useMemo(() => {
|
|
62
|
+
const firstcolumn = cached_columns[0];
|
|
63
|
+
const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
|
|
64
|
+
const events = {
|
|
65
|
+
onSkipChange: props.onSkipChange,
|
|
66
|
+
onLimitChange: props.onLimitChange,
|
|
67
|
+
onEditComplete: props.onEditComplete
|
|
68
|
+
};
|
|
69
|
+
const extra_ops = {
|
|
70
|
+
onSelectionChange: props.onSelectionChange,
|
|
71
|
+
onCellSelectionChange: props.onCellSelectionChange,
|
|
72
|
+
licenseKey: licenseKey,
|
|
73
|
+
editable: props.editable,
|
|
74
|
+
treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
|
|
75
|
+
renderRowDetails: props.RowDetail,
|
|
76
|
+
theme: props.dark ? 'amber-dark' : 'default-light'
|
|
77
|
+
};
|
|
78
|
+
return {
|
|
79
|
+
...defaultOptions,
|
|
80
|
+
...events,
|
|
81
|
+
...extra_ops
|
|
82
|
+
};
|
|
83
|
+
}, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
|
|
84
|
+
const static_gridOptions = _react.default.useMemo(() => {
|
|
85
|
+
return {
|
|
86
|
+
...base_gridOptions,
|
|
87
|
+
...props.gridOptions,
|
|
88
|
+
...forcedOptions
|
|
89
|
+
};
|
|
90
|
+
}, [props.gridOptions, base_gridOptions, forcedOptions]);
|
|
91
|
+
const dynamic_gridOptions = _react.default.useMemo(() => {
|
|
92
|
+
const res = {};
|
|
93
|
+
dynamic_option_names.map(r => {
|
|
94
|
+
res[r] = props[r];
|
|
95
|
+
});
|
|
96
|
+
return res;
|
|
97
|
+
}, dynamic_option_names.map(r => props[r]));
|
|
98
|
+
return _react.default.createElement(DataGridEventsWrapper, {
|
|
99
|
+
...props,
|
|
100
|
+
gridRef: gridRef,
|
|
101
|
+
static_gridOptions: static_gridOptions,
|
|
102
|
+
dynamic_gridOptions: dynamic_gridOptions,
|
|
103
|
+
columns: cached_columns,
|
|
104
|
+
dataSource: dataSource,
|
|
105
|
+
highlightedRow: props.highlightedRow
|
|
106
|
+
});
|
|
96
107
|
}
|
|
97
108
|
/* -------------------------------------------------------------------------- */
|
|
98
|
-
/**
|
|
99
|
-
* Wrapper for menu events
|
|
100
|
-
* @param props
|
|
101
|
-
* @returns
|
|
109
|
+
/**
|
|
110
|
+
* Wrapper for menu events
|
|
111
|
+
* @param props
|
|
112
|
+
* @returns
|
|
102
113
|
*/
|
|
103
114
|
function DataGridEventsWrapper(props) {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
props.onRowDoubleClick(rowProps.rowIndex, rowProps.data));
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
click_data.current[get_row_id(rowProps)] = nowDate;
|
|
129
|
-
return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
130
|
-
}, [props.onRowClick, props.onRowDoubleClick]);
|
|
131
|
-
React.useEffect(() => {
|
|
132
|
-
click_data.current = {};
|
|
133
|
-
}, [props.dataSource]);
|
|
134
|
-
/* ------------------------------- ContextMenu ------------------------------ */
|
|
135
|
-
const update_menuAnchorEl = React.useCallback((el) => {
|
|
136
|
-
if (el) {
|
|
137
|
-
set_menuAnchorEl(el);
|
|
138
|
-
}
|
|
139
|
-
else
|
|
140
|
-
set_menuAnchorEl(null);
|
|
141
|
-
}, []);
|
|
142
|
-
const update_menuRow = React.useCallback((r) => {
|
|
143
|
-
if (r) {
|
|
144
|
-
set_menuRow(r);
|
|
145
|
-
}
|
|
146
|
-
else
|
|
147
|
-
set_menuRow(null);
|
|
148
|
-
}, []);
|
|
149
|
-
/**
|
|
150
|
-
* Merge click events into grid options
|
|
151
|
-
*/
|
|
152
|
-
const static_gridOptions = React.useMemo(() => {
|
|
153
|
-
const events = {
|
|
154
|
-
onRowClick: onRowClick,
|
|
155
|
-
onRowContextMenu: onRowContextMenu,
|
|
156
|
-
};
|
|
157
|
-
return { ...props.static_gridOptions, ...events };
|
|
158
|
-
}, [props.static_gridOptions, onRowClick]);
|
|
159
|
-
const contextMenu = React.useMemo(() => {
|
|
160
|
-
return (React.createElement(ContextMenu, { menuAnchorEl: menuAnchorEl, set_menuAnchorEl: update_menuAnchorEl, menuRow: menuRow, menu_items: props.contextMenuItems }));
|
|
161
|
-
}, [menuAnchorEl, menuRow, props.contextMenuItems]);
|
|
162
|
-
if (props.details_dataSource) {
|
|
163
|
-
return (React.createElement(DataGridDetailsWrapper, { ...props, static_gridOptions: static_gridOptions }, contextMenu));
|
|
164
|
-
}
|
|
165
|
-
else {
|
|
166
|
-
return (React.createElement(DataGridSizeWrapper, { ...props, static_gridOptions: static_gridOptions }, contextMenu));
|
|
115
|
+
/* -------------------------------------------------------------------------- */
|
|
116
|
+
const click_data = _react.default.useRef(null);
|
|
117
|
+
const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
|
|
118
|
+
const [menuRow, set_menuRow] = _react.default.useState(null);
|
|
119
|
+
/* --------------------------------- events --------------------------------- */
|
|
120
|
+
const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
|
|
121
|
+
if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) return;
|
|
122
|
+
const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
|
|
123
|
+
update_menuRow(rowProps.data);
|
|
124
|
+
update_menuAnchorEl(anEl);
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
}, []);
|
|
127
|
+
const onRowClick = _react.default.useCallback((rowProps, event) => {
|
|
128
|
+
const nowDate = Date.now();
|
|
129
|
+
const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
|
|
130
|
+
if (lastclick) {
|
|
131
|
+
const diffTime = Math.abs(nowDate - lastclick);
|
|
132
|
+
if (diffTime < 400) {
|
|
133
|
+
click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
|
|
134
|
+
return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
|
|
135
|
+
}
|
|
167
136
|
}
|
|
137
|
+
click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
|
|
138
|
+
return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
139
|
+
}, [props.onRowClick, props.onRowDoubleClick]);
|
|
140
|
+
_react.default.useEffect(() => {
|
|
141
|
+
click_data.current = {};
|
|
142
|
+
}, [props.dataSource]);
|
|
143
|
+
/* ------------------------------- ContextMenu ------------------------------ */
|
|
144
|
+
const update_menuAnchorEl = _react.default.useCallback(el => {
|
|
145
|
+
set_menuAnchorEl(el || null);
|
|
146
|
+
}, []);
|
|
147
|
+
const update_menuRow = _react.default.useCallback(r => {
|
|
148
|
+
set_menuRow(r || null);
|
|
149
|
+
}, []);
|
|
150
|
+
/**
|
|
151
|
+
* Merge click events into grid options
|
|
152
|
+
*/
|
|
153
|
+
const static_gridOptions = _react.default.useMemo(() => {
|
|
154
|
+
const events = {
|
|
155
|
+
onRowClick: onRowClick,
|
|
156
|
+
onRowContextMenu: onRowContextMenu
|
|
157
|
+
};
|
|
158
|
+
return {
|
|
159
|
+
...props.static_gridOptions,
|
|
160
|
+
...events
|
|
161
|
+
};
|
|
162
|
+
}, [props.static_gridOptions, onRowClick]);
|
|
163
|
+
/* -------------------------------------------------------------------------- */
|
|
164
|
+
const contextMenu = _react.default.useMemo(() => {
|
|
165
|
+
return _react.default.createElement(_controls.ContextMenu, {
|
|
166
|
+
menuAnchorEl: menuAnchorEl,
|
|
167
|
+
set_menuAnchorEl: update_menuAnchorEl,
|
|
168
|
+
menuRow: menuRow,
|
|
169
|
+
menu_items: props.contextMenuItems
|
|
170
|
+
});
|
|
171
|
+
}, [menuRow, menuAnchorEl, props.contextMenuItems]);
|
|
172
|
+
if (props.details_dataSource) {
|
|
173
|
+
return _react.default.createElement(DataGridDetailsWrapper, {
|
|
174
|
+
...props,
|
|
175
|
+
static_gridOptions: static_gridOptions
|
|
176
|
+
}, contextMenu);
|
|
177
|
+
} else {
|
|
178
|
+
return _react.default.createElement(DataGridSizeWrapper, {
|
|
179
|
+
...props,
|
|
180
|
+
static_gridOptions: static_gridOptions
|
|
181
|
+
}, contextMenu);
|
|
182
|
+
}
|
|
168
183
|
}
|
|
169
184
|
function DataGridDetailsWrapper(props) {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
185
|
+
const cached_details_columns = _react.default.useMemo(() => {
|
|
186
|
+
return (0, _func_grid.ApplyColumnData)(props.details_columns);
|
|
187
|
+
}, [props.details_columns]);
|
|
188
|
+
const cached_data = _react.default.useRef();
|
|
189
|
+
const last_cache_info = _react.default.useRef();
|
|
190
|
+
const dataSource = _react.default.useCallback(async dt => {
|
|
191
|
+
const res = await (0, _func_grid.ApplyDataSource)(props.details_dataSource, {
|
|
192
|
+
skip: dt.skip,
|
|
193
|
+
limit: dt.limit,
|
|
194
|
+
cached_data: cached_data,
|
|
195
|
+
last_cache_info: last_cache_info
|
|
196
|
+
});
|
|
197
|
+
return res;
|
|
198
|
+
}, [props.dataSource]);
|
|
199
|
+
const renderDetailsGrid = ({
|
|
200
|
+
data
|
|
201
|
+
}) => {
|
|
202
|
+
return _react.default.createElement(_reactdatagridEnterprise.default, {
|
|
203
|
+
defaultFilterValue: props.details_filter,
|
|
204
|
+
dataSource: dataSource,
|
|
205
|
+
columns: cached_details_columns
|
|
206
|
+
});
|
|
207
|
+
};
|
|
208
|
+
/**
|
|
209
|
+
* Merge details into grid
|
|
210
|
+
*/
|
|
211
|
+
const static_gridOptions = _react.default.useMemo(() => {
|
|
212
|
+
const finalresult = props.static_gridOptions || {};
|
|
213
|
+
finalresult['renderDetailsGrid'] = renderDetailsGrid;
|
|
214
|
+
return finalresult;
|
|
215
|
+
}, [props.static_gridOptions]);
|
|
216
|
+
return _react.default.createElement(DataGridSizeWrapper, {
|
|
217
|
+
...props,
|
|
218
|
+
static_gridOptions: static_gridOptions
|
|
219
|
+
});
|
|
196
220
|
}
|
|
197
221
|
function DataGridSizeWrapper(props) {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
222
|
+
if (props.delayedSize) {
|
|
223
|
+
return _react.default.createElement(DataGridDelayedSizeWrapper, {
|
|
224
|
+
...props
|
|
225
|
+
});
|
|
226
|
+
} else {
|
|
227
|
+
return _react.default.createElement(DataGridCore, {
|
|
228
|
+
...props
|
|
229
|
+
});
|
|
230
|
+
}
|
|
204
231
|
}
|
|
205
232
|
/* -------------------------------------------------------------------------- */
|
|
206
233
|
function DataGridDelayedSizeWrapper(props) {
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
234
|
+
const {
|
|
235
|
+
ref,
|
|
236
|
+
height,
|
|
237
|
+
width
|
|
238
|
+
} = (0, _reactUseSize.useComponentSize)();
|
|
239
|
+
return _react.default.createElement("div", {
|
|
240
|
+
ref: ref,
|
|
241
|
+
className: 'azgrid-filler'
|
|
242
|
+
}, _react.default.createElement("div", {
|
|
243
|
+
className: 'azgrid-delayedresize',
|
|
244
|
+
style: {
|
|
245
|
+
height: height,
|
|
246
|
+
width: width
|
|
247
|
+
}
|
|
248
|
+
}, _react.default.createElement(DataGridCore, {
|
|
249
|
+
...props
|
|
250
|
+
})));
|
|
211
251
|
}
|
|
212
252
|
function DataGridCore(props) {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
253
|
+
return _react.default.createElement("div", {
|
|
254
|
+
className: (0, _clsx.default)(props.className, 'azgrid-filler')
|
|
255
|
+
}, _react.default.createElement(_reactdatagridEnterprise.default, {
|
|
256
|
+
...props.static_gridOptions,
|
|
257
|
+
...props.dynamic_gridOptions,
|
|
258
|
+
handle: ref => props.gridRef.current = ref ? ref.current : null,
|
|
259
|
+
className: 'azgrid-filler',
|
|
260
|
+
columns: props.columns,
|
|
261
|
+
dataSource: props.dataSource
|
|
262
|
+
}), props.children);
|
|
216
263
|
}
|
|
217
264
|
/* -------------------------------------------------------------------------- */
|
|
218
265
|
/* -------------------------------------------------------------------------- */
|
|
219
266
|
/* -------------------------------------------------------------------------- */
|
|
220
267
|
/* -------------------------------------------------------------------------- */
|
|
221
268
|
/* -------------------------------------------------------------------------- */
|
|
222
|
-
|
|
269
|
+
var _default = AzGrid;
|
|
270
|
+
exports.default = _default;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './DataGrid';
|
|
2
|
-
import AzGrid from './DataGrid';
|
|
3
|
-
export default AzGrid;
|
|
1
|
+
export * from './DataGrid';
|
|
2
|
+
import AzGrid from './DataGrid';
|
|
3
|
+
export default AzGrid;
|