es-grid-template 1.8.32 → 1.8.33
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/table-component/TableContainerEdit.js +3 -1
- package/es/table-component/body/TableBodyCellEdit.d.ts +1 -0
- package/es/table-component/body/TableBodyCellEdit.js +10 -2
- package/es/table-component/body/TableBodyRow.js +6 -1
- package/es/table-component/table/Grid.js +2 -2
- package/es/table-component/useContext.d.ts +1 -0
- package/lib/table-component/TableContainerEdit.js +3 -1
- package/lib/table-component/body/TableBodyCellEdit.d.ts +1 -0
- package/lib/table-component/body/TableBodyCellEdit.js +10 -2
- package/lib/table-component/body/TableBodyRow.js +6 -1
- package/lib/table-component/table/Grid.js +2 -2
- package/lib/table-component/useContext.d.ts +1 -0
- package/package.json +1 -1
|
@@ -63,6 +63,7 @@ const TableContainerEdit = props => {
|
|
|
63
63
|
prefix,
|
|
64
64
|
commandClick,
|
|
65
65
|
editAble,
|
|
66
|
+
rowEditable,
|
|
66
67
|
rowKey,
|
|
67
68
|
format,
|
|
68
69
|
dataSource,
|
|
@@ -1835,7 +1836,8 @@ const TableContainerEdit = props => {
|
|
|
1835
1836
|
windowSize,
|
|
1836
1837
|
handleCellClick,
|
|
1837
1838
|
pagination,
|
|
1838
|
-
rowClassName
|
|
1839
|
+
rowClassName,
|
|
1840
|
+
rowEditable
|
|
1839
1841
|
}
|
|
1840
1842
|
}, /*#__PURE__*/React.createElement(TableWrapper, {
|
|
1841
1843
|
contextMenuItems: contextMenuItems,
|
|
@@ -10,6 +10,7 @@ interface TableBodyCellProps<T> {
|
|
|
10
10
|
cell: Cell<T, unknown>;
|
|
11
11
|
commandClick?: (args: CommandClick<T>) => void;
|
|
12
12
|
virtualRow: VirtualItem;
|
|
13
|
+
isRowEditable?: boolean;
|
|
13
14
|
[key: string]: any;
|
|
14
15
|
}
|
|
15
16
|
declare const TableBodyCellEdit: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
|
|
@@ -186,6 +186,7 @@ const TableBodyCellEdit = props => {
|
|
|
186
186
|
// tableId,
|
|
187
187
|
table,
|
|
188
188
|
isEditing,
|
|
189
|
+
isRowEditable,
|
|
189
190
|
columnVirtualizer,
|
|
190
191
|
rowVirtualizer
|
|
191
192
|
// virtualRow
|
|
@@ -242,7 +243,8 @@ const TableBodyCellEdit = props => {
|
|
|
242
243
|
|
|
243
244
|
const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
|
|
244
245
|
const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
|
|
245
|
-
const canEdit = isEditable(cell.column.columnDef.meta, record);
|
|
246
|
+
const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
|
|
247
|
+
|
|
246
248
|
// const allRows = table.getRowModel().rows;
|
|
247
249
|
const allRows = table.getRowModel().flatRows;
|
|
248
250
|
|
|
@@ -975,7 +977,8 @@ const TableBodyCellEdit = props => {
|
|
|
975
977
|
className: classNames(`${prefix}-grid-cell cell-editable editable `, {
|
|
976
978
|
[`${prefix}-grid-cell-ellipsis`]: true,
|
|
977
979
|
'cell-editing': isEditing,
|
|
978
|
-
disable: !isEditable(cell.column.columnDef.meta, record),
|
|
980
|
+
// disable: !isEditable(cell.column.columnDef.meta as any, record),
|
|
981
|
+
disable: !canEdit,
|
|
979
982
|
isValid: !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id,
|
|
980
983
|
[`${prefix}-grid-cell-selected`]: isCellSelected,
|
|
981
984
|
'cell-border-bottom': !isEditing && isInRange && isBottom,
|
|
@@ -1087,6 +1090,11 @@ const TableBodyCellEdit = props => {
|
|
|
1087
1090
|
}
|
|
1088
1091
|
},
|
|
1089
1092
|
onDoubleClick: e => {
|
|
1093
|
+
if (!canEdit) {
|
|
1094
|
+
e.stopPropagation();
|
|
1095
|
+
e.preventDefault();
|
|
1096
|
+
return;
|
|
1097
|
+
}
|
|
1090
1098
|
if (!(record[rowKey] === editingKey && canEdit)) {
|
|
1091
1099
|
handleEdit(e);
|
|
1092
1100
|
}
|
|
@@ -26,7 +26,8 @@ const TableBodyRow = ({
|
|
|
26
26
|
prefix,
|
|
27
27
|
recordDoubleClick,
|
|
28
28
|
focusedCell,
|
|
29
|
-
rowClassName
|
|
29
|
+
rowClassName,
|
|
30
|
+
rowEditable
|
|
30
31
|
} = React.useContext(TableContext);
|
|
31
32
|
const visibleCells = row.getVisibleCells();
|
|
32
33
|
const virtualColumns = columnVirtualizer.getVirtualItems();
|
|
@@ -38,6 +39,7 @@ const TableBodyRow = ({
|
|
|
38
39
|
const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
|
|
39
40
|
const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
|
|
40
41
|
const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
|
|
42
|
+
const isRowEditable = rowEditable ? rowEditable(row.original) : true;
|
|
41
43
|
return /*#__PURE__*/React.createElement("div", {
|
|
42
44
|
"data-index": virtualRow.index //needed for dynamic row height measurement
|
|
43
45
|
,
|
|
@@ -91,6 +93,7 @@ const TableBodyRow = ({
|
|
|
91
93
|
commandClick: commandClick,
|
|
92
94
|
virtualRow: virtualRow,
|
|
93
95
|
isEditing: isEditing,
|
|
96
|
+
isRowEditable: isRowEditable,
|
|
94
97
|
rowVirtualizer: rowVirtualizer,
|
|
95
98
|
columnVirtualizer: columnVirtualizer
|
|
96
99
|
}));
|
|
@@ -124,6 +127,7 @@ const TableBodyRow = ({
|
|
|
124
127
|
cell: cell,
|
|
125
128
|
commandClick: commandClick,
|
|
126
129
|
isEditing: isEditing,
|
|
130
|
+
isRowEditable: isRowEditable,
|
|
127
131
|
rowVirtualizer: rowVirtualizer,
|
|
128
132
|
columnVirtualizer: columnVirtualizer,
|
|
129
133
|
virtualRow: virtualRow
|
|
@@ -150,6 +154,7 @@ const TableBodyRow = ({
|
|
|
150
154
|
cell: row.getVisibleCells().find(c => c.column.id === column.id),
|
|
151
155
|
commandClick: commandClick,
|
|
152
156
|
isEditing: isEditing,
|
|
157
|
+
isRowEditable: isRowEditable,
|
|
153
158
|
rowVirtualizer: rowVirtualizer,
|
|
154
159
|
columnVirtualizer: columnVirtualizer,
|
|
155
160
|
virtualRow: virtualRow
|
|
@@ -133,8 +133,8 @@ const Grid = props => {
|
|
|
133
133
|
// ColumnSorting
|
|
134
134
|
// getSortedRowModel: getSortedRowModel(),
|
|
135
135
|
onSortingChange: setSorting,
|
|
136
|
-
enableMultiSort: sortMultiple,
|
|
137
|
-
isMultiSortEvent: () => sortMultiple ?
|
|
136
|
+
enableMultiSort: sortMultiple !== false,
|
|
137
|
+
isMultiSortEvent: () => sortMultiple === false ? false : true,
|
|
138
138
|
enableSorting: allowSortering !== false,
|
|
139
139
|
// ColumnSorting
|
|
140
140
|
|
|
@@ -77,6 +77,7 @@ export interface IContext<T> {
|
|
|
77
77
|
pagination?: false | PaginationConfig;
|
|
78
78
|
rowClassName?: string | RowClassName<T>;
|
|
79
79
|
table?: Table<T>;
|
|
80
|
+
rowEditable?: (rowData: T) => boolean;
|
|
80
81
|
}
|
|
81
82
|
export declare const TableContext: import("react").Context<IContext<any>>;
|
|
82
83
|
export type ContextCellChange = {
|
|
@@ -70,6 +70,7 @@ const TableContainerEdit = props => {
|
|
|
70
70
|
prefix,
|
|
71
71
|
commandClick,
|
|
72
72
|
editAble,
|
|
73
|
+
rowEditable,
|
|
73
74
|
rowKey,
|
|
74
75
|
format,
|
|
75
76
|
dataSource,
|
|
@@ -1842,7 +1843,8 @@ const TableContainerEdit = props => {
|
|
|
1842
1843
|
windowSize,
|
|
1843
1844
|
handleCellClick,
|
|
1844
1845
|
pagination,
|
|
1845
|
-
rowClassName
|
|
1846
|
+
rowClassName,
|
|
1847
|
+
rowEditable
|
|
1846
1848
|
}
|
|
1847
1849
|
}, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
|
|
1848
1850
|
contextMenuItems: contextMenuItems,
|
|
@@ -10,6 +10,7 @@ interface TableBodyCellProps<T> {
|
|
|
10
10
|
cell: Cell<T, unknown>;
|
|
11
11
|
commandClick?: (args: CommandClick<T>) => void;
|
|
12
12
|
virtualRow: VirtualItem;
|
|
13
|
+
isRowEditable?: boolean;
|
|
13
14
|
[key: string]: any;
|
|
14
15
|
}
|
|
15
16
|
declare const TableBodyCellEdit: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
|
|
@@ -192,6 +192,7 @@ const TableBodyCellEdit = props => {
|
|
|
192
192
|
// tableId,
|
|
193
193
|
table,
|
|
194
194
|
isEditing,
|
|
195
|
+
isRowEditable,
|
|
195
196
|
columnVirtualizer,
|
|
196
197
|
rowVirtualizer
|
|
197
198
|
// virtualRow
|
|
@@ -248,7 +249,8 @@ const TableBodyCellEdit = props => {
|
|
|
248
249
|
|
|
249
250
|
const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
|
|
250
251
|
const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
|
|
251
|
-
const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record);
|
|
252
|
+
const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;
|
|
253
|
+
|
|
252
254
|
// const allRows = table.getRowModel().rows;
|
|
253
255
|
const allRows = table.getRowModel().flatRows;
|
|
254
256
|
|
|
@@ -981,7 +983,8 @@ const TableBodyCellEdit = props => {
|
|
|
981
983
|
className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable editable `, {
|
|
982
984
|
[`${prefix}-grid-cell-ellipsis`]: true,
|
|
983
985
|
'cell-editing': isEditing,
|
|
984
|
-
disable: !
|
|
986
|
+
// disable: !isEditable(cell.column.columnDef.meta as any, record),
|
|
987
|
+
disable: !canEdit,
|
|
985
988
|
isValid: !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id,
|
|
986
989
|
[`${prefix}-grid-cell-selected`]: isCellSelected,
|
|
987
990
|
'cell-border-bottom': !isEditing && isInRange && isBottom,
|
|
@@ -1093,6 +1096,11 @@ const TableBodyCellEdit = props => {
|
|
|
1093
1096
|
}
|
|
1094
1097
|
},
|
|
1095
1098
|
onDoubleClick: e => {
|
|
1099
|
+
if (!canEdit) {
|
|
1100
|
+
e.stopPropagation();
|
|
1101
|
+
e.preventDefault();
|
|
1102
|
+
return;
|
|
1103
|
+
}
|
|
1096
1104
|
if (!(record[rowKey] === editingKey && canEdit)) {
|
|
1097
1105
|
handleEdit(e);
|
|
1098
1106
|
}
|
|
@@ -33,7 +33,8 @@ const TableBodyRow = ({
|
|
|
33
33
|
prefix,
|
|
34
34
|
recordDoubleClick,
|
|
35
35
|
focusedCell,
|
|
36
|
-
rowClassName
|
|
36
|
+
rowClassName,
|
|
37
|
+
rowEditable
|
|
37
38
|
} = _react.default.useContext(_useContext.TableContext);
|
|
38
39
|
const visibleCells = row.getVisibleCells();
|
|
39
40
|
const virtualColumns = columnVirtualizer.getVirtualItems();
|
|
@@ -45,6 +46,7 @@ const TableBodyRow = ({
|
|
|
45
46
|
const virtualRight = virtualPaddingRight ? [virtualPaddingRight] : [];
|
|
46
47
|
const templateColumns = [...leftTemplate, ...virtualLeft, ...centerTemplate, ...virtualRight, ...rightTemplate];
|
|
47
48
|
const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
|
|
49
|
+
const isRowEditable = rowEditable ? rowEditable(row.original) : true;
|
|
48
50
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
49
51
|
"data-index": virtualRow.index //needed for dynamic row height measurement
|
|
50
52
|
,
|
|
@@ -98,6 +100,7 @@ const TableBodyRow = ({
|
|
|
98
100
|
commandClick: commandClick,
|
|
99
101
|
virtualRow: virtualRow,
|
|
100
102
|
isEditing: isEditing,
|
|
103
|
+
isRowEditable: isRowEditable,
|
|
101
104
|
rowVirtualizer: rowVirtualizer,
|
|
102
105
|
columnVirtualizer: columnVirtualizer
|
|
103
106
|
}));
|
|
@@ -131,6 +134,7 @@ const TableBodyRow = ({
|
|
|
131
134
|
cell: cell,
|
|
132
135
|
commandClick: commandClick,
|
|
133
136
|
isEditing: isEditing,
|
|
137
|
+
isRowEditable: isRowEditable,
|
|
134
138
|
rowVirtualizer: rowVirtualizer,
|
|
135
139
|
columnVirtualizer: columnVirtualizer,
|
|
136
140
|
virtualRow: virtualRow
|
|
@@ -157,6 +161,7 @@ const TableBodyRow = ({
|
|
|
157
161
|
cell: row.getVisibleCells().find(c => c.column.id === column.id),
|
|
158
162
|
commandClick: commandClick,
|
|
159
163
|
isEditing: isEditing,
|
|
164
|
+
isRowEditable: isRowEditable,
|
|
160
165
|
rowVirtualizer: rowVirtualizer,
|
|
161
166
|
columnVirtualizer: columnVirtualizer,
|
|
162
167
|
virtualRow: virtualRow
|
|
@@ -135,8 +135,8 @@ const Grid = props => {
|
|
|
135
135
|
// ColumnSorting
|
|
136
136
|
// getSortedRowModel: getSortedRowModel(),
|
|
137
137
|
onSortingChange: setSorting,
|
|
138
|
-
enableMultiSort: sortMultiple,
|
|
139
|
-
isMultiSortEvent: () => sortMultiple ?
|
|
138
|
+
enableMultiSort: sortMultiple !== false,
|
|
139
|
+
isMultiSortEvent: () => sortMultiple === false ? false : true,
|
|
140
140
|
enableSorting: allowSortering !== false,
|
|
141
141
|
// ColumnSorting
|
|
142
142
|
|
|
@@ -77,6 +77,7 @@ export interface IContext<T> {
|
|
|
77
77
|
pagination?: false | PaginationConfig;
|
|
78
78
|
rowClassName?: string | RowClassName<T>;
|
|
79
79
|
table?: Table<T>;
|
|
80
|
+
rowEditable?: (rowData: T) => boolean;
|
|
80
81
|
}
|
|
81
82
|
export declare const TableContext: import("react").Context<IContext<any>>;
|
|
82
83
|
export type ContextCellChange = {
|