es-grid-template 0.1.0 → 0.1.2-1
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/es/grid-component/ColumnsChoose.d.ts +3 -4
- package/es/grid-component/ColumnsChoose.js +28 -15
- package/es/grid-component/Command.d.ts +8 -0
- package/es/grid-component/Command.js +81 -0
- package/es/grid-component/ContextMenu.d.ts +2 -2
- package/es/grid-component/ContextMenu.js +1 -0
- package/es/grid-component/EditableCell.js +300 -314
- package/es/grid-component/GridStyle.js +1 -1
- package/es/grid-component/InternalTable.js +52 -28
- package/es/grid-component/TableGrid.d.ts +2 -1
- package/es/grid-component/TableGrid.js +64 -18
- package/es/grid-component/async-select/index.d.ts +9 -0
- package/es/grid-component/async-select/index.js +35 -0
- package/es/grid-component/hooks/constant.d.ts +10 -0
- package/es/grid-component/hooks/constant.js +11 -1
- package/es/grid-component/hooks/useColumns/index.js +7 -4
- package/es/grid-component/hooks/utils.d.ts +2 -0
- package/es/grid-component/hooks/utils.js +11 -0
- package/es/grid-component/index.d.ts +3 -0
- package/es/grid-component/styles.scss +282 -214
- package/es/grid-component/table/Grid.js +46 -59
- package/es/grid-component/table/GridEdit.d.ts +4 -0
- package/es/grid-component/table/GridEdit.js +106 -19
- package/es/grid-component/type.d.ts +32 -14
- package/es/grid-component/useContext.d.ts +11 -7
- package/es/grid-component/useContext.js +3 -0
- package/es/index.d.ts +1 -0
- package/lib/grid-component/ColumnsChoose.d.ts +3 -4
- package/lib/grid-component/ColumnsChoose.js +27 -14
- package/lib/grid-component/Command.d.ts +8 -0
- package/lib/grid-component/Command.js +90 -0
- package/lib/grid-component/ContextMenu.d.ts +2 -2
- package/lib/grid-component/ContextMenu.js +2 -0
- package/lib/grid-component/EditableCell.js +297 -311
- package/lib/grid-component/GridStyle.js +1 -1
- package/lib/grid-component/InternalTable.js +51 -27
- package/lib/grid-component/TableGrid.d.ts +2 -1
- package/lib/grid-component/TableGrid.js +63 -17
- package/lib/grid-component/async-select/index.d.ts +9 -0
- package/lib/grid-component/async-select/index.js +44 -0
- package/lib/grid-component/hooks/constant.d.ts +10 -0
- package/lib/grid-component/hooks/constant.js +12 -2
- package/lib/grid-component/hooks/useColumns/index.js +7 -4
- package/lib/grid-component/hooks/utils.d.ts +2 -0
- package/lib/grid-component/hooks/utils.js +16 -3
- package/lib/grid-component/index.d.ts +3 -0
- package/lib/grid-component/styles.scss +282 -214
- package/lib/grid-component/table/Grid.js +46 -59
- package/lib/grid-component/table/GridEdit.d.ts +4 -0
- package/lib/grid-component/table/GridEdit.js +106 -19
- package/lib/grid-component/type.d.ts +32 -14
- package/lib/grid-component/useContext.d.ts +11 -7
- package/lib/grid-component/useContext.js +2 -0
- package/lib/index.d.ts +1 -0
- package/package.json +102 -112
- /package/es/{grid-component/Message → Message}/Message.d.ts +0 -0
- /package/es/{grid-component/Message → Message}/Message.js +0 -0
- /package/es/{grid-component/Message → Message}/index.d.ts +0 -0
- /package/es/{grid-component/Message → Message}/index.js +0 -0
- /package/lib/{grid-component/Message → Message}/Message.d.ts +0 -0
- /package/lib/{grid-component/Message → Message}/Message.js +0 -0
- /package/lib/{grid-component/Message → Message}/index.d.ts +0 -0
- /package/lib/{grid-component/Message → Message}/index.js +0 -0
|
@@ -9,7 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _GridStyle = require("../GridStyle");
|
|
11
11
|
var _TableGrid = _interopRequireDefault(require("../TableGrid"));
|
|
12
|
-
var
|
|
12
|
+
var _Command = _interopRequireDefault(require("../Command"));
|
|
13
|
+
var _useColumns = require("../hooks/useColumns");
|
|
13
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
16
|
const Grid = props => {
|
|
@@ -19,74 +20,61 @@ const Grid = props => {
|
|
|
19
20
|
tableRef,
|
|
20
21
|
className,
|
|
21
22
|
components,
|
|
23
|
+
style,
|
|
24
|
+
format,
|
|
22
25
|
...rest
|
|
23
26
|
} = props;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
// return cols.map((column) => {
|
|
27
|
-
//
|
|
28
|
-
// if (column?.children && column?.children.length > 0) {
|
|
29
|
-
// return {
|
|
30
|
-
// ...column,
|
|
31
|
-
// children: transformColumns(column?.children) // Xử lý đệ quy cho cấp con
|
|
32
|
-
// }
|
|
33
|
-
// }
|
|
34
|
-
//
|
|
35
|
-
// if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
|
|
36
|
-
// return {
|
|
37
|
-
// ...column,
|
|
38
|
-
// render: (value: any, record: any, rowIndex: number) => {
|
|
39
|
-
// return rowIndex + 1
|
|
40
|
-
// }
|
|
41
|
-
// }
|
|
42
|
-
// }
|
|
43
|
-
//
|
|
44
|
-
// return {
|
|
45
|
-
// ...column,
|
|
46
|
-
// }
|
|
47
|
-
// })
|
|
48
|
-
// }, [])
|
|
49
|
-
//
|
|
50
|
-
//
|
|
51
|
-
// const mergedColumns = useMemo(() => {
|
|
52
|
-
//
|
|
53
|
-
// // @ts-ignore
|
|
54
|
-
// return transformColumns(columns ?? [])
|
|
55
|
-
//
|
|
56
|
-
// }, [transformColumns, columns])
|
|
57
|
-
|
|
58
|
-
const addFilter = _react.default.useCallback(cols => {
|
|
27
|
+
const transformColumns = _react.default.useCallback(cols => {
|
|
28
|
+
// @ts-ignore
|
|
59
29
|
return cols.map(column => {
|
|
60
|
-
|
|
61
|
-
if (!column?.dataIndex && !column?.key) {
|
|
30
|
+
if (!column?.field && !column?.key) {
|
|
62
31
|
return column;
|
|
63
32
|
}
|
|
64
|
-
|
|
65
|
-
|
|
33
|
+
|
|
34
|
+
// Xử lý đệ quy cho children
|
|
35
|
+
if (column.children?.length) {
|
|
66
36
|
return {
|
|
67
37
|
...column,
|
|
68
|
-
|
|
69
|
-
children: addFilter(column?.children) // Xử lý đệ quy cho cấp con
|
|
38
|
+
children: transformColumns(column.children)
|
|
70
39
|
};
|
|
71
40
|
}
|
|
41
|
+
const transformedColumn = {
|
|
42
|
+
...column,
|
|
43
|
+
dataIndex: column.field ?? column.dataIndex,
|
|
44
|
+
title: column.headerText ?? column.title,
|
|
45
|
+
ellipsis: column.ellipsis !== false,
|
|
46
|
+
align: column.textAlign ?? column.align,
|
|
47
|
+
fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
|
|
48
|
+
};
|
|
72
49
|
// @ts-ignore
|
|
73
|
-
if (
|
|
50
|
+
if (["index", "#"].includes(transformedColumn.dataIndex)) {
|
|
74
51
|
return {
|
|
75
|
-
...
|
|
76
|
-
render: (
|
|
77
|
-
|
|
78
|
-
|
|
52
|
+
...transformedColumn,
|
|
53
|
+
render: (_, __, rowIndex) => rowIndex + 1
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
if (transformedColumn.dataIndex === "command") {
|
|
57
|
+
return {
|
|
58
|
+
...transformedColumn,
|
|
59
|
+
onCell: () => ({
|
|
60
|
+
className: "ui-rc-cell-command"
|
|
61
|
+
}),
|
|
62
|
+
render: () => /*#__PURE__*/_react.default.createElement("div", {
|
|
63
|
+
className: "ui-rc-cell-command__content"
|
|
64
|
+
}, column.commandItems?.map((item, index) => item.visible !== false ? /*#__PURE__*/_react.default.createElement(_Command.default, {
|
|
65
|
+
key: `command-${index}`,
|
|
66
|
+
item: item,
|
|
67
|
+
onClick: e => e.preventDefault()
|
|
68
|
+
}) : null))
|
|
79
69
|
};
|
|
80
70
|
}
|
|
81
71
|
return {
|
|
82
|
-
...
|
|
72
|
+
...transformedColumn,
|
|
73
|
+
render: (value, record, rowIndex) => (0, _useColumns.renderContent)(column, value, record, rowIndex, format)
|
|
83
74
|
};
|
|
84
75
|
});
|
|
85
76
|
}, []);
|
|
86
|
-
const
|
|
87
|
-
// @ts-ignore
|
|
88
|
-
return addFilter(columns ?? []);
|
|
89
|
-
}, [addFilter, columns]);
|
|
77
|
+
const mergedColumns = (0, _react.useMemo)(() => transformColumns(columns ?? []), [transformColumns, columns]);
|
|
90
78
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
|
|
91
79
|
heightTable: height,
|
|
92
80
|
style: {
|
|
@@ -95,14 +83,13 @@ const Grid = props => {
|
|
|
95
83
|
}, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
|
|
96
84
|
tableRef: tableRef,
|
|
97
85
|
components: {
|
|
98
|
-
...components
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
86
|
+
...components
|
|
87
|
+
},
|
|
88
|
+
columns: mergedColumns,
|
|
89
|
+
style: {
|
|
90
|
+
...style,
|
|
91
|
+
minHeight: height
|
|
102
92
|
}
|
|
103
|
-
// columns={mergedColumns}
|
|
104
|
-
,
|
|
105
|
-
columns: tmpColumns
|
|
106
93
|
}))));
|
|
107
94
|
};
|
|
108
95
|
var _default = exports.default = Grid;
|
|
@@ -2,8 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import 'dayjs/locale/es';
|
|
3
3
|
import 'dayjs/locale/vi';
|
|
4
4
|
import type { TableEditProps } from "../type";
|
|
5
|
+
import type { GetRowKey } from "../type";
|
|
5
6
|
type Props<RecordType> = TableEditProps<RecordType> & {
|
|
6
7
|
tableRef: any;
|
|
8
|
+
triggerChangeColumns?: () => void;
|
|
9
|
+
triggerChangeData?: (newData: RecordType[], type: string) => void;
|
|
10
|
+
getRowKey: GetRowKey<RecordType>;
|
|
7
11
|
};
|
|
8
12
|
declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
|
|
9
13
|
export default GridEdit;
|
|
@@ -21,7 +21,8 @@ require("dayjs/locale/es");
|
|
|
21
21
|
require("dayjs/locale/vi");
|
|
22
22
|
var _TableGrid = _interopRequireDefault(require("../TableGrid"));
|
|
23
23
|
var _hooks = require("../hooks");
|
|
24
|
-
var _Message = _interopRequireDefault(require("
|
|
24
|
+
var _Message = _interopRequireDefault(require("../../Message/Message"));
|
|
25
|
+
var _Command = _interopRequireDefault(require("../Command"));
|
|
25
26
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
26
27
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
27
28
|
_dayjs.default.extend(_customParseFormat.default);
|
|
@@ -32,17 +33,23 @@ const GridEdit = props => {
|
|
|
32
33
|
t,
|
|
33
34
|
columns,
|
|
34
35
|
dataSource,
|
|
36
|
+
components,
|
|
35
37
|
allowResizing,
|
|
36
38
|
rowKey = 'id',
|
|
37
39
|
selectionSettings,
|
|
38
40
|
height,
|
|
39
41
|
format,
|
|
40
|
-
onDataChange,
|
|
42
|
+
// onDataChange,
|
|
43
|
+
triggerChangeData,
|
|
41
44
|
onCellPaste,
|
|
42
45
|
onCellChange,
|
|
43
|
-
|
|
46
|
+
style,
|
|
47
|
+
getRowKey,
|
|
44
48
|
...rest
|
|
45
49
|
} = props;
|
|
50
|
+
|
|
51
|
+
// const forceUpdate = useForceUpdate();
|
|
52
|
+
const [updateKey, setUpdateKey] = (0, _react.useState)(0);
|
|
46
53
|
const isSelecting = (0, _react.useRef)(false);
|
|
47
54
|
const startCell = (0, _react.useRef)(null);
|
|
48
55
|
const isSelectingRow = (0, _react.useRef)(false);
|
|
@@ -125,6 +132,30 @@ const GridEdit = props => {
|
|
|
125
132
|
}
|
|
126
133
|
setSelectedCells(newSelectedCells);
|
|
127
134
|
};
|
|
135
|
+
const handleClickRowHeader = (row, col) => {
|
|
136
|
+
const newSelectedCells = new Set();
|
|
137
|
+
for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
|
|
138
|
+
for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
|
|
139
|
+
newSelectedCells.add(`${r}-${c}`);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
setSelectedCells(newSelectedCells);
|
|
143
|
+
};
|
|
144
|
+
const handleClickColHeader = (column, indexColumn) => {
|
|
145
|
+
const newSelectedCells = new Set();
|
|
146
|
+
for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
|
|
147
|
+
for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
|
|
148
|
+
newSelectedCells.add(`${r}-${c}`);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// console.log('newSelectedCells', newSelectedCells)
|
|
153
|
+
// setSelectedCells(newSelectedCells)
|
|
154
|
+
|
|
155
|
+
setSelectedCells(new Set(newSelectedCells));
|
|
156
|
+
// forceUpdate();
|
|
157
|
+
setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
|
|
158
|
+
};
|
|
128
159
|
const handleMouseDownColIndex = (row, col, e) => {
|
|
129
160
|
if (e.button === 2) {
|
|
130
161
|
e.stopPropagation();
|
|
@@ -327,6 +358,7 @@ const GridEdit = props => {
|
|
|
327
358
|
...item,
|
|
328
359
|
...row
|
|
329
360
|
});
|
|
361
|
+
triggerChangeData?.(newData, 'onChange');
|
|
330
362
|
|
|
331
363
|
// trigger DataChange
|
|
332
364
|
// setData(newData);
|
|
@@ -347,14 +379,16 @@ const GridEdit = props => {
|
|
|
347
379
|
record,
|
|
348
380
|
type,
|
|
349
381
|
newState,
|
|
350
|
-
prevState
|
|
382
|
+
prevState,
|
|
383
|
+
option,
|
|
384
|
+
field
|
|
351
385
|
} = args;
|
|
352
386
|
|
|
353
387
|
// console.log('newState', newState)
|
|
354
388
|
//
|
|
355
389
|
// console.log('getValues()', getValues())
|
|
356
390
|
|
|
357
|
-
// const
|
|
391
|
+
// const newRecord = getValues()
|
|
358
392
|
|
|
359
393
|
if (type === 'enter') {
|
|
360
394
|
console.log('aaaaaa enter');
|
|
@@ -366,18 +400,21 @@ const GridEdit = props => {
|
|
|
366
400
|
// const newDataUpdate = updateData(data, callbackData, rowKey as any)
|
|
367
401
|
|
|
368
402
|
console.log('callbackData', callbackData);
|
|
369
|
-
const
|
|
370
|
-
|
|
403
|
+
const callbackRecord = callbackData;
|
|
404
|
+
Object.entries(callbackRecord).forEach(([name, value]) => {
|
|
405
|
+
setValue(name, value);
|
|
406
|
+
});
|
|
407
|
+
onSubmit(callbackRecord);
|
|
371
408
|
};
|
|
372
409
|
if (onCellChange) {
|
|
373
410
|
if (onCellChange.length > 1) {
|
|
374
411
|
console.log('onCellChange Callback');
|
|
375
412
|
onCellChange({
|
|
376
|
-
field
|
|
413
|
+
field,
|
|
377
414
|
indexCol: 1,
|
|
378
415
|
type: 'onChange',
|
|
379
|
-
rows: [],
|
|
380
416
|
value: newState,
|
|
417
|
+
option,
|
|
381
418
|
indexRow: 1,
|
|
382
419
|
rowData: record,
|
|
383
420
|
rowId: '',
|
|
@@ -387,10 +424,10 @@ const GridEdit = props => {
|
|
|
387
424
|
} else {
|
|
388
425
|
console.log('onCellChange');
|
|
389
426
|
onCellChange({
|
|
390
|
-
field
|
|
427
|
+
field,
|
|
391
428
|
indexCol: 1,
|
|
392
429
|
type: 'onChange',
|
|
393
|
-
|
|
430
|
+
option,
|
|
394
431
|
value: newState,
|
|
395
432
|
indexRow: 1,
|
|
396
433
|
rowData: record,
|
|
@@ -555,6 +592,7 @@ const GridEdit = props => {
|
|
|
555
592
|
if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
|
|
556
593
|
return {
|
|
557
594
|
...col,
|
|
595
|
+
className: 'rc-ui-cell-editable',
|
|
558
596
|
render: (value, record, rowIndex) => {
|
|
559
597
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
560
598
|
className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
|
|
@@ -562,13 +600,45 @@ const GridEdit = props => {
|
|
|
562
600
|
focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
|
|
563
601
|
}),
|
|
564
602
|
onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
|
|
565
|
-
onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event)
|
|
603
|
+
onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
|
|
604
|
+
onClick: () => handleClickRowHeader(rowIndex, colIndex)
|
|
566
605
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
567
606
|
className: 'ui-rc_content'
|
|
568
607
|
}, rowIndex + 1));
|
|
569
608
|
}
|
|
570
609
|
};
|
|
571
610
|
}
|
|
611
|
+
if (col.dataIndex === 'command' || col.field === 'command') {
|
|
612
|
+
return {
|
|
613
|
+
...col,
|
|
614
|
+
title: col.headerText ?? col.title,
|
|
615
|
+
ellipsis: col.ellipsis !== false,
|
|
616
|
+
onCell: () => ({
|
|
617
|
+
className: 'ui-rc-cell-command'
|
|
618
|
+
}),
|
|
619
|
+
// render: (value: any, record: any, rowIndex: number) => {
|
|
620
|
+
render: () => {
|
|
621
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
622
|
+
className: (0, _classnames.default)('ui-rc-cell-command__content', {})
|
|
623
|
+
}, col.commandItems && col.commandItems?.map((item, indexComm) => {
|
|
624
|
+
if (item.visible !== false) {
|
|
625
|
+
// return (
|
|
626
|
+
// <span>{item.title}</span>
|
|
627
|
+
// )
|
|
628
|
+
|
|
629
|
+
return /*#__PURE__*/_react.default.createElement(_Command.default, {
|
|
630
|
+
key: `command-${indexComm}`,
|
|
631
|
+
item: item,
|
|
632
|
+
onClick: e => {
|
|
633
|
+
e.preventDefault();
|
|
634
|
+
// handleCommandClick({command: item, rowData: record, index: rowIndex})
|
|
635
|
+
}
|
|
636
|
+
});
|
|
637
|
+
}
|
|
638
|
+
}));
|
|
639
|
+
}
|
|
640
|
+
};
|
|
641
|
+
}
|
|
572
642
|
return {
|
|
573
643
|
...col,
|
|
574
644
|
onCell: (record, rowIndex) => ({
|
|
@@ -628,12 +698,20 @@ const GridEdit = props => {
|
|
|
628
698
|
handleEdit(record, col, col.editType, event);
|
|
629
699
|
}
|
|
630
700
|
},
|
|
701
|
+
// onMouseDown: (event) => {
|
|
702
|
+
// handleMouseDown(rowIndex, colIndex, event)
|
|
703
|
+
// },
|
|
704
|
+
//
|
|
705
|
+
// onMouseEnter: () => {
|
|
706
|
+
// handleMouseEnter(rowIndex, colIndex)
|
|
707
|
+
// },
|
|
708
|
+
|
|
631
709
|
onClick: () => {
|
|
632
710
|
if (record[rowKey] !== editingKey && editingKey !== '') {
|
|
633
711
|
setEditingKey('');
|
|
634
712
|
}
|
|
635
713
|
},
|
|
636
|
-
className: isEditing(record) ? 'cell-editing' : 'cell-editable',
|
|
714
|
+
className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
|
|
637
715
|
record,
|
|
638
716
|
column: col,
|
|
639
717
|
editType: (0, _hooks.getEditType)(col, record),
|
|
@@ -641,23 +719,28 @@ const GridEdit = props => {
|
|
|
641
719
|
title: col.title,
|
|
642
720
|
'data-col-index': colIndex,
|
|
643
721
|
'data-row-index': rowIndex,
|
|
644
|
-
colIndex: colIndex,
|
|
722
|
+
// colIndex: colIndex,
|
|
645
723
|
indexCol: colIndex,
|
|
646
724
|
indexRow: rowIndex,
|
|
647
725
|
editing: isEditing(record),
|
|
648
726
|
tabIndex: (rowIndex ?? 0) * columns.length + colIndex
|
|
649
727
|
}),
|
|
728
|
+
onHeaderCell: data => ({
|
|
729
|
+
...col.onHeaderCell(),
|
|
730
|
+
onClick: () => {
|
|
731
|
+
handleClickColHeader(data, colIndex);
|
|
732
|
+
}
|
|
733
|
+
}),
|
|
650
734
|
render: (value, record, rowIndex) => {
|
|
651
735
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
652
736
|
className: (0, _classnames.default)('ui-rc_cell-content', {
|
|
653
737
|
selected: selectedCells.has(`${rowIndex}-${colIndex}`)
|
|
654
738
|
}),
|
|
655
739
|
onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
|
|
656
|
-
onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
|
|
657
|
-
onMouseLeave: () => {}
|
|
740
|
+
onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
|
|
658
741
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
659
742
|
className: 'ui-rc_content'
|
|
660
|
-
}, (0, _useColumns.renderContent)(col, value, record, rowIndex)));
|
|
743
|
+
}, (0, _useColumns.renderContent)(col, value, record, rowIndex, format)));
|
|
661
744
|
}
|
|
662
745
|
};
|
|
663
746
|
});
|
|
@@ -677,12 +760,14 @@ const GridEdit = props => {
|
|
|
677
760
|
control,
|
|
678
761
|
trigger,
|
|
679
762
|
getValues,
|
|
680
|
-
handleCellChange
|
|
763
|
+
handleCellChange,
|
|
764
|
+
getRowKey
|
|
681
765
|
}
|
|
682
766
|
}, /*#__PURE__*/_react.default.createElement("form", {
|
|
683
767
|
onSubmit: handleSubmit(onSubmit)
|
|
684
768
|
}, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
|
|
685
769
|
t: t,
|
|
770
|
+
key: updateKey,
|
|
686
771
|
tableRef: tableRef,
|
|
687
772
|
dataSource: dataSource,
|
|
688
773
|
components: {
|
|
@@ -703,8 +788,10 @@ const GridEdit = props => {
|
|
|
703
788
|
checkboxOnly: true
|
|
704
789
|
} : undefined,
|
|
705
790
|
style: {
|
|
791
|
+
...style,
|
|
706
792
|
minHeight: height
|
|
707
|
-
}
|
|
793
|
+
},
|
|
794
|
+
rowHoverable: false
|
|
708
795
|
}))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
|
|
709
796
|
position: toast,
|
|
710
797
|
toastOptions: {
|
|
@@ -6,10 +6,13 @@ import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/in
|
|
|
6
6
|
import type { ToolbarItem } from "rc-master-ui/es/toolbar";
|
|
7
7
|
import type { ItemType } from "rc-master-ui/es/menu/interface";
|
|
8
8
|
import type { FieldNames, FilterFunc } from "rc-select/es/Select";
|
|
9
|
+
import type { ColorPickerProps } from "antd";
|
|
9
10
|
export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
|
|
10
11
|
export type AnyObject = Record<PropertyKey, any>;
|
|
11
12
|
export type SelectMode = 'checkbox' | 'radio' | undefined;
|
|
12
13
|
export type ITextAlign = 'center' | 'left' | 'right';
|
|
14
|
+
export type Frozen = 'left' | 'right' | 'Left' | 'Right';
|
|
15
|
+
export type ContextMenuItem = ItemType & {};
|
|
13
16
|
export type ITemplateColumn = {
|
|
14
17
|
value: any;
|
|
15
18
|
column: any;
|
|
@@ -39,6 +42,7 @@ export type ColumnSelectTable = {
|
|
|
39
42
|
};
|
|
40
43
|
export type IEditSelectSettings = {
|
|
41
44
|
fieldKey?: string;
|
|
45
|
+
options: any[];
|
|
42
46
|
/** get value form other field **/
|
|
43
47
|
fieldValue?: string;
|
|
44
48
|
/** get label form other field **/
|
|
@@ -46,7 +50,6 @@ export type IEditSelectSettings = {
|
|
|
46
50
|
inputKey?: string;
|
|
47
51
|
filterKey?: string[];
|
|
48
52
|
selectMode?: SelectMode;
|
|
49
|
-
options: any[];
|
|
50
53
|
getPasteValue?: (value: any) => Record<string, any> | null;
|
|
51
54
|
validateOption?: (rowData: any, field: string) => any[];
|
|
52
55
|
defaultOptions?: any[];
|
|
@@ -84,14 +87,18 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
|
|
|
84
87
|
format?: IFormat;
|
|
85
88
|
allowFiltering?: boolean;
|
|
86
89
|
operator?: FilterOperator;
|
|
90
|
+
hideOperator?: boolean;
|
|
87
91
|
placeholder?: string;
|
|
88
92
|
showInColumnChoose?: boolean;
|
|
89
93
|
typeFilter?: TypeFilter;
|
|
90
94
|
headerText?: string;
|
|
95
|
+
textAlign?: ITextAlign;
|
|
96
|
+
frozen?: Frozen;
|
|
91
97
|
template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
|
|
92
98
|
showTooltip?: boolean;
|
|
93
99
|
tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
|
|
94
100
|
headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
|
|
101
|
+
commandItems?: CommandItem[];
|
|
95
102
|
children?: ColumnType<RecordType>[];
|
|
96
103
|
};
|
|
97
104
|
export type ColumnEditType<RecordType> = ColumnType<RecordType> & {
|
|
@@ -119,7 +126,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
|
|
|
119
126
|
format?: IFormat;
|
|
120
127
|
t?: any;
|
|
121
128
|
lang?: string;
|
|
122
|
-
contextMenuItems?:
|
|
129
|
+
contextMenuItems?: ContextMenuItem[];
|
|
123
130
|
contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
|
|
124
131
|
contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
|
|
125
132
|
contextMenuClick?: (args: ContextInfo<RecordType>) => void;
|
|
@@ -140,7 +147,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
|
|
|
140
147
|
direction: 'Ascending' | 'Descending' | null;
|
|
141
148
|
}) => void;
|
|
142
149
|
selectionSettings?: SelectionSettings;
|
|
143
|
-
rowKey?: string
|
|
150
|
+
rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
|
|
144
151
|
rowSelection?: RowSelection<RecordType>;
|
|
145
152
|
rowSelected?: (args: {
|
|
146
153
|
type: string;
|
|
@@ -148,7 +155,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
|
|
|
148
155
|
selected: RecordType | RecordType[];
|
|
149
156
|
}) => void;
|
|
150
157
|
dataSourceFilter?: SourceFilter[];
|
|
151
|
-
onFilterClick?: (column:
|
|
158
|
+
onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
|
|
152
159
|
loading?: boolean;
|
|
153
160
|
allowResizing?: boolean;
|
|
154
161
|
onDataChange?: (data: RecordType[]) => void;
|
|
@@ -156,18 +163,30 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
|
|
|
156
163
|
export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
|
|
157
164
|
columns: ColumnsTable<RecordType>;
|
|
158
165
|
onCellPaste?: ICellPasteModel<RecordType>;
|
|
159
|
-
onCellChange?: (args: CellChangeArgs
|
|
166
|
+
onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
|
|
160
167
|
}
|
|
161
168
|
export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
|
|
162
|
-
export
|
|
169
|
+
export interface CommandItem {
|
|
170
|
+
id: string;
|
|
171
|
+
type?: string;
|
|
172
|
+
visible?: boolean;
|
|
173
|
+
title: string;
|
|
174
|
+
color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
175
|
+
tooltip?: string;
|
|
176
|
+
icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
|
|
177
|
+
template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
|
|
178
|
+
client?: boolean;
|
|
179
|
+
confirmDialog?: boolean;
|
|
180
|
+
}
|
|
181
|
+
export type CellChangeArgs<T> = {
|
|
163
182
|
type: 'onPaste' | 'onChange' | 'onCellPaste';
|
|
164
183
|
value: any;
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
rowsData:
|
|
184
|
+
option: AnyObject;
|
|
185
|
+
rowData: T;
|
|
186
|
+
rowsData: T[];
|
|
168
187
|
indexRow: number;
|
|
169
188
|
rowId?: string;
|
|
170
|
-
field: string;
|
|
189
|
+
field: string | undefined;
|
|
171
190
|
indexCol: any;
|
|
172
191
|
sumValue?: any[];
|
|
173
192
|
};
|
|
@@ -188,13 +207,10 @@ export type SourceFilter = {
|
|
|
188
207
|
loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
|
|
189
208
|
};
|
|
190
209
|
export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
|
|
191
|
-
export type SelectionSettings = {
|
|
210
|
+
export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
|
|
192
211
|
mode?: 'checkbox' | 'radio';
|
|
193
212
|
type?: 'single' | 'multiple';
|
|
194
213
|
checkboxOnly?: boolean;
|
|
195
|
-
hideSelectAll?: boolean;
|
|
196
|
-
columnWidth?: number | string;
|
|
197
|
-
defaultSelectedRowKeys?: Key[];
|
|
198
214
|
};
|
|
199
215
|
export type RecordDoubleClickEventArgs<RecordType> = {
|
|
200
216
|
rowData: RecordType;
|
|
@@ -223,3 +239,5 @@ export type IFormat = {
|
|
|
223
239
|
monthFormat?: string;
|
|
224
240
|
yearFormat?: string;
|
|
225
241
|
};
|
|
242
|
+
export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
|
|
243
|
+
export type Presets = Required<ColorPickerProps>['presets'][number];
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { IFormat } from "./type";
|
|
2
|
+
import type { AnyObject, IFormat } from "./type";
|
|
3
3
|
import type { SubmitHandler } from "react-hook-form";
|
|
4
|
-
|
|
4
|
+
import type { GetRowKey } from "./type";
|
|
5
|
+
export interface IContext<RecordType> {
|
|
5
6
|
searchValue?: any;
|
|
6
7
|
setSearchValue?: any;
|
|
7
8
|
open?: boolean;
|
|
8
9
|
setOpen?: any;
|
|
9
|
-
rowKey: string
|
|
10
|
+
rowKey: string | keyof RecordType | GetRowKey<RecordType>;
|
|
10
11
|
onSave?: any;
|
|
11
12
|
form?: any;
|
|
12
13
|
format?: IFormat;
|
|
@@ -15,13 +16,16 @@ export interface IContext {
|
|
|
15
16
|
handleSubmit?: any;
|
|
16
17
|
onSubmit?: SubmitHandler<any>;
|
|
17
18
|
getValues?: any;
|
|
18
|
-
handleCellChange?: (
|
|
19
|
+
handleCellChange?: (args: ContextCellChange<RecordType>) => void;
|
|
20
|
+
getRowKey?: GetRowKey<RecordType>;
|
|
19
21
|
}
|
|
20
|
-
export type ContextCellChange = {
|
|
21
|
-
key: string
|
|
22
|
+
export type ContextCellChange<RecordType = AnyObject> = {
|
|
23
|
+
key: string | keyof RecordType | GetRowKey<RecordType>;
|
|
22
24
|
record: any;
|
|
25
|
+
field: string | undefined;
|
|
26
|
+
option: any;
|
|
23
27
|
newState?: any;
|
|
24
28
|
prevState?: any;
|
|
25
29
|
type: 'enter' | 'blur' | 'outClick';
|
|
26
30
|
};
|
|
27
|
-
export declare const TableContext: import("react").Context<IContext
|
|
31
|
+
export declare const TableContext: import("react").Context<IContext<any>>;
|
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.TableContext = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
+
// import {AnyObject} from "antd/es/_util/type";
|
|
9
|
+
|
|
8
10
|
const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
|
|
9
11
|
rowKey: 'id'
|
|
10
12
|
});
|
package/lib/index.d.ts
CHANGED