@azrico/reactgrid 1.2.35 → 1.2.37
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 +28 -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 +241 -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 +32 -35
|
@@ -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,268 @@
|
|
|
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
|
-
const
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
const onRowClick = React.useCallback((rowProps, event) => {
|
|
118
|
-
const nowDate = Date.now();
|
|
119
|
-
const lastclick = click_data.current[get_row_id(rowProps)];
|
|
120
|
-
if (lastclick) {
|
|
121
|
-
const diffTime = Math.abs(nowDate - lastclick);
|
|
122
|
-
if (diffTime < 400) {
|
|
123
|
-
click_data.current[get_row_id(rowProps)] = null;
|
|
124
|
-
return (props.onRowDoubleClick &&
|
|
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
|
+
/* --------------------------------- events --------------------------------- */
|
|
119
|
+
const onRowClick = _react.default.useCallback((rowProps, event) => {
|
|
120
|
+
const nowDate = Date.now();
|
|
121
|
+
const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
|
|
122
|
+
if (lastclick) {
|
|
123
|
+
const diffTime = Math.abs(nowDate - lastclick);
|
|
124
|
+
if (diffTime < 400) {
|
|
125
|
+
click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
|
|
126
|
+
return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
|
|
127
|
+
}
|
|
167
128
|
}
|
|
129
|
+
click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
|
|
130
|
+
return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
|
|
131
|
+
}, [props.onRowClick, props.onRowDoubleClick]);
|
|
132
|
+
_react.default.useEffect(() => {
|
|
133
|
+
click_data.current = {};
|
|
134
|
+
}, [props.dataSource]);
|
|
135
|
+
/* ------------------------------- ContextMenu ------------------------------ */
|
|
136
|
+
const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
|
|
137
|
+
if (!rowProps || !rowProps.data || _func_child.func_selection.has_selection()) return;
|
|
138
|
+
const anEl = _func_child.func_selection.getVirtualElement(event.clientX, event.clientY);
|
|
139
|
+
update_menuAnchorEl(anEl);
|
|
140
|
+
}, []);
|
|
141
|
+
const renderRowContextMenu = _react.default.useCallback((menuProps, rowProps) => {
|
|
142
|
+
return _react.default.createElement(_controls.ContextMenu, {
|
|
143
|
+
menuAnchorEl: menuAnchorEl,
|
|
144
|
+
set_menuAnchorEl: update_menuAnchorEl,
|
|
145
|
+
menuRow: rowProps.data,
|
|
146
|
+
menu_items: props.contextMenuItems
|
|
147
|
+
});
|
|
148
|
+
}, [props.contextMenuItems]);
|
|
149
|
+
const update_menuAnchorEl = _react.default.useCallback(el => {
|
|
150
|
+
set_menuAnchorEl(el || null);
|
|
151
|
+
}, []);
|
|
152
|
+
/**
|
|
153
|
+
* Merge click events into grid options
|
|
154
|
+
*/
|
|
155
|
+
const static_gridOptions = _react.default.useMemo(() => {
|
|
156
|
+
const events = {
|
|
157
|
+
onRowClick: onRowClick,
|
|
158
|
+
onRowContextMenu: onRowContextMenu
|
|
159
|
+
};
|
|
160
|
+
const contextmenuProps = {
|
|
161
|
+
renderRowContextMenu: renderRowContextMenu
|
|
162
|
+
};
|
|
163
|
+
return {
|
|
164
|
+
...props.static_gridOptions,
|
|
165
|
+
...events,
|
|
166
|
+
...contextmenuProps
|
|
167
|
+
};
|
|
168
|
+
}, [props.static_gridOptions, onRowClick]);
|
|
169
|
+
/* -------------------------------------------------------------------------- */
|
|
170
|
+
if (props.details_dataSource) {
|
|
171
|
+
return _react.default.createElement(DataGridDetailsWrapper, {
|
|
172
|
+
...props,
|
|
173
|
+
static_gridOptions: static_gridOptions
|
|
174
|
+
});
|
|
175
|
+
} else {
|
|
176
|
+
return _react.default.createElement(DataGridSizeWrapper, {
|
|
177
|
+
...props,
|
|
178
|
+
static_gridOptions: static_gridOptions
|
|
179
|
+
});
|
|
180
|
+
}
|
|
168
181
|
}
|
|
169
182
|
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
|
-
|
|
183
|
+
const cached_details_columns = _react.default.useMemo(() => {
|
|
184
|
+
return (0, _func_grid.ApplyColumnData)(props.details_columns);
|
|
185
|
+
}, [props.details_columns]);
|
|
186
|
+
const cached_data = _react.default.useRef();
|
|
187
|
+
const last_cache_info = _react.default.useRef();
|
|
188
|
+
const dataSource = _react.default.useCallback(async dt => {
|
|
189
|
+
const res = await (0, _func_grid.ApplyDataSource)(props.details_dataSource, {
|
|
190
|
+
skip: dt.skip,
|
|
191
|
+
limit: dt.limit,
|
|
192
|
+
cached_data: cached_data,
|
|
193
|
+
last_cache_info: last_cache_info
|
|
194
|
+
});
|
|
195
|
+
return res;
|
|
196
|
+
}, [props.dataSource]);
|
|
197
|
+
const renderDetailsGrid = ({
|
|
198
|
+
data
|
|
199
|
+
}) => {
|
|
200
|
+
return _react.default.createElement(_reactdatagridEnterprise.default, {
|
|
201
|
+
defaultFilterValue: props.details_filter,
|
|
202
|
+
dataSource: dataSource,
|
|
203
|
+
columns: cached_details_columns
|
|
204
|
+
});
|
|
205
|
+
};
|
|
206
|
+
/**
|
|
207
|
+
* Merge details into grid
|
|
208
|
+
*/
|
|
209
|
+
const static_gridOptions = _react.default.useMemo(() => {
|
|
210
|
+
const finalresult = props.static_gridOptions || {};
|
|
211
|
+
finalresult['renderDetailsGrid'] = renderDetailsGrid;
|
|
212
|
+
return finalresult;
|
|
213
|
+
}, [props.static_gridOptions]);
|
|
214
|
+
return _react.default.createElement(DataGridSizeWrapper, {
|
|
215
|
+
...props,
|
|
216
|
+
static_gridOptions: static_gridOptions
|
|
217
|
+
});
|
|
196
218
|
}
|
|
197
219
|
function DataGridSizeWrapper(props) {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
220
|
+
if (props.delayedSize) {
|
|
221
|
+
return _react.default.createElement(DataGridDelayedSizeWrapper, {
|
|
222
|
+
...props
|
|
223
|
+
});
|
|
224
|
+
} else {
|
|
225
|
+
return _react.default.createElement(DataGridCore, {
|
|
226
|
+
...props
|
|
227
|
+
});
|
|
228
|
+
}
|
|
204
229
|
}
|
|
205
230
|
/* -------------------------------------------------------------------------- */
|
|
206
231
|
function DataGridDelayedSizeWrapper(props) {
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
232
|
+
const {
|
|
233
|
+
ref,
|
|
234
|
+
height,
|
|
235
|
+
width
|
|
236
|
+
} = (0, _reactUseSize.useComponentSize)();
|
|
237
|
+
return _react.default.createElement("div", {
|
|
238
|
+
ref: ref,
|
|
239
|
+
className: 'azgrid-filler'
|
|
240
|
+
}, _react.default.createElement("div", {
|
|
241
|
+
className: 'azgrid-delayedresize',
|
|
242
|
+
style: {
|
|
243
|
+
height: height,
|
|
244
|
+
width: width
|
|
245
|
+
}
|
|
246
|
+
}, _react.default.createElement(DataGridCore, {
|
|
247
|
+
...props
|
|
248
|
+
})));
|
|
211
249
|
}
|
|
212
250
|
function DataGridCore(props) {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
251
|
+
return _react.default.createElement("div", {
|
|
252
|
+
className: (0, _clsx.default)(props.className, 'azgrid-filler')
|
|
253
|
+
}, _react.default.createElement(_reactdatagridEnterprise.default, {
|
|
254
|
+
...props.static_gridOptions,
|
|
255
|
+
...props.dynamic_gridOptions,
|
|
256
|
+
handle: ref => props.gridRef.current = ref ? ref.current : null,
|
|
257
|
+
className: 'azgrid-filler',
|
|
258
|
+
columns: props.columns,
|
|
259
|
+
dataSource: props.dataSource
|
|
260
|
+
}), props.children);
|
|
216
261
|
}
|
|
217
262
|
/* -------------------------------------------------------------------------- */
|
|
218
263
|
/* -------------------------------------------------------------------------- */
|
|
219
264
|
/* -------------------------------------------------------------------------- */
|
|
220
265
|
/* -------------------------------------------------------------------------- */
|
|
221
266
|
/* -------------------------------------------------------------------------- */
|
|
222
|
-
|
|
267
|
+
var _default = AzGrid;
|
|
268
|
+
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;
|