es-grid-template 1.8.96 → 1.8.98
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/hooks/utils.d.ts +1 -0
- package/es/grid-component/hooks/utils.js +6 -0
- package/es/grid-component/type.d.ts +1 -0
- package/es/group-component/hook/utils.d.ts +8 -8
- package/es/table-component/TableContainerEdit.js +312 -22
- package/es/table-component/body/TableBodyRow.js +2 -1
- package/es/table-component/table/Grid.js +1 -1
- package/lib/grid-component/hooks/utils.d.ts +1 -0
- package/lib/grid-component/hooks/utils.js +11 -4
- package/lib/grid-component/type.d.ts +1 -0
- package/lib/table-component/TableContainerEdit.js +312 -22
- package/lib/table-component/body/TableBodyRow.js +2 -1
- package/lib/table-component/table/Grid.js +1 -1
- package/package.json +1 -1
|
@@ -48,6 +48,7 @@ export declare const checkFieldKey: (key: string | undefined) => string;
|
|
|
48
48
|
export declare const convertLabelToTitle: (data: any[]) => any[];
|
|
49
49
|
export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
|
|
50
50
|
export declare const getTemplate: (template: any, column?: ColumnTable) => React.ReactNode | React.ReactElement;
|
|
51
|
+
export declare const getToolbarTemplate: (template: any) => React.ReactNode | React.ReactElement;
|
|
51
52
|
export declare const isObjEmpty: (obj: any) => boolean;
|
|
52
53
|
export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
|
|
53
54
|
export declare const updateData: <Record = AnyObject>(initData: Record[], rows: Record[], key: keyof Record) => Record[];
|
|
@@ -391,6 +391,12 @@ export const getTemplate = (template, column) => {
|
|
|
391
391
|
}
|
|
392
392
|
return template;
|
|
393
393
|
};
|
|
394
|
+
export const getToolbarTemplate = template => {
|
|
395
|
+
if (template && typeof template === 'function') {
|
|
396
|
+
return template();
|
|
397
|
+
}
|
|
398
|
+
return template;
|
|
399
|
+
};
|
|
394
400
|
|
|
395
401
|
// export const totalFixedWidth = <T, >(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => {
|
|
396
402
|
// const totalFixedLeftWidth: number = columns
|
|
@@ -466,6 +466,7 @@ export type ToolbarItem = {
|
|
|
466
466
|
template?: React.ReactNode | React.ReactElement | (() => React.ReactNode | React.ReactElement);
|
|
467
467
|
title?: React.ReactNode;
|
|
468
468
|
disabled?: boolean;
|
|
469
|
+
hasMenu?: boolean;
|
|
469
470
|
[key: string]: any;
|
|
470
471
|
};
|
|
471
472
|
export type LoadOptionsArgs = {
|
|
@@ -162,7 +162,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
162
162
|
type?: IColumnType;
|
|
163
163
|
haveSum?: boolean;
|
|
164
164
|
isSummary?: boolean;
|
|
165
|
-
summaryTemplate?: (data: number, key: string) => import("react").
|
|
165
|
+
summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
|
|
166
166
|
format?: IFormat | ((rowData: any) => IFormat);
|
|
167
167
|
allowFiltering?: boolean;
|
|
168
168
|
sorter?: boolean;
|
|
@@ -177,18 +177,18 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
177
177
|
headerText?: string;
|
|
178
178
|
hidden?: boolean;
|
|
179
179
|
visible?: boolean;
|
|
180
|
-
headerTooltip?: string | boolean | (() => import("react").
|
|
180
|
+
headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
181
181
|
columnGroupText?: string;
|
|
182
182
|
align?: import("./../../grid-component/type").ITextAlign;
|
|
183
183
|
textAlign?: import("./../../grid-component/type").ITextAlign;
|
|
184
184
|
headerTextAlign?: import("./../../grid-component/type").ITextAlign;
|
|
185
|
-
template?: import("react").
|
|
185
|
+
template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
186
186
|
showTooltip?: boolean;
|
|
187
187
|
tooltipDescription?: string | ((args: {
|
|
188
188
|
value: any;
|
|
189
189
|
rowData: RecordType;
|
|
190
|
-
}) => import("react").
|
|
191
|
-
headerTemplate?: import("react").
|
|
190
|
+
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
191
|
+
headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
192
192
|
commandItems?: import("./../../grid-component/type").CommandItem[];
|
|
193
193
|
children?: ColumnTable<RecordType>[];
|
|
194
194
|
editType?: EditType | ((rowData?: RecordType) => EditType);
|
|
@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
208
208
|
ellipsis?: boolean;
|
|
209
209
|
allowResizing?: boolean;
|
|
210
210
|
allowSelection?: boolean | ((rowData: RecordType) => boolean);
|
|
211
|
-
onCellStyles?: Omit<CSSProperties, "
|
|
212
|
-
onCellHeaderStyles?: Omit<CSSProperties, "
|
|
213
|
-
onCellFooterStyles?: Omit<CSSProperties, "
|
|
211
|
+
onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
|
|
212
|
+
onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
|
|
213
|
+
onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
|
|
214
214
|
sumGroup?: boolean;
|
|
215
215
|
getValue?: (row: any, rowIndex: number) => any;
|
|
216
216
|
getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
|
|
@@ -19,6 +19,7 @@ import TableWrapper from "./table/TableWrapper";
|
|
|
19
19
|
import withReactContent from "sweetalert2-react-content";
|
|
20
20
|
import Swal from "sweetalert2";
|
|
21
21
|
import { useLocale } from "rc-master-ui/es/locale";
|
|
22
|
+
import { getToolbarTemplate } from "../grid-component/hooks";
|
|
22
23
|
const MySwal = withReactContent(Swal);
|
|
23
24
|
const {
|
|
24
25
|
Paragraph,
|
|
@@ -1215,6 +1216,7 @@ const TableContainerEdit = props => {
|
|
|
1215
1216
|
}
|
|
1216
1217
|
};
|
|
1217
1218
|
const toolbarItemsBottom = React.useMemo(() => {
|
|
1219
|
+
// Chưa có dòng| ô được chọn
|
|
1218
1220
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1219
1221
|
return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1220
1222
|
if (item.key === 'ADD') {
|
|
@@ -1224,7 +1226,15 @@ const TableContainerEdit = props => {
|
|
|
1224
1226
|
template: () => {
|
|
1225
1227
|
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1226
1228
|
className: classNames(`be-toolbar-item`, item?.className)
|
|
1227
|
-
}, /*#__PURE__*/React.createElement(
|
|
1229
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1230
|
+
style: {
|
|
1231
|
+
color: '#28c76f',
|
|
1232
|
+
borderColor: '#28c76f'
|
|
1233
|
+
},
|
|
1234
|
+
variant: 'outlined',
|
|
1235
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1236
|
+
className: "d-flex toolbar-button"
|
|
1237
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1228
1238
|
overlayClassName: 'be-popup-container',
|
|
1229
1239
|
trigger: ['click'],
|
|
1230
1240
|
style: {
|
|
@@ -1241,7 +1251,7 @@ const TableContainerEdit = props => {
|
|
|
1241
1251
|
color: '#28c76f'
|
|
1242
1252
|
},
|
|
1243
1253
|
onClick: () => handleAddMulti(item, 1)
|
|
1244
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1254
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1245
1255
|
}
|
|
1246
1256
|
};
|
|
1247
1257
|
}
|
|
@@ -1260,7 +1270,7 @@ const TableContainerEdit = props => {
|
|
|
1260
1270
|
variant: 'outlined',
|
|
1261
1271
|
onClick: () => handleDeleteAll(item),
|
|
1262
1272
|
className: "d-flex toolbar-button"
|
|
1263
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1273
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1264
1274
|
}
|
|
1265
1275
|
};
|
|
1266
1276
|
}
|
|
@@ -1277,7 +1287,267 @@ const TableContainerEdit = props => {
|
|
|
1277
1287
|
template: () => {
|
|
1278
1288
|
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1279
1289
|
className: classNames(`be-toolbar-item`, item?.className)
|
|
1280
|
-
}, /*#__PURE__*/React.createElement(
|
|
1290
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1291
|
+
style: {
|
|
1292
|
+
color: '#28c76f',
|
|
1293
|
+
borderColor: '#28c76f'
|
|
1294
|
+
},
|
|
1295
|
+
variant: 'outlined',
|
|
1296
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1297
|
+
className: "d-flex toolbar-button"
|
|
1298
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1299
|
+
title: "",
|
|
1300
|
+
overlayClassName: 'be-popup-container',
|
|
1301
|
+
style: {
|
|
1302
|
+
color: '#28c76f',
|
|
1303
|
+
borderColor: '#28c76f'
|
|
1304
|
+
},
|
|
1305
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1306
|
+
menu: {
|
|
1307
|
+
items: itemsAdd,
|
|
1308
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1309
|
+
}
|
|
1310
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1311
|
+
style: {
|
|
1312
|
+
color: '#28c76f'
|
|
1313
|
+
},
|
|
1314
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1315
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1316
|
+
}
|
|
1317
|
+
};
|
|
1318
|
+
}
|
|
1319
|
+
if (item.key === 'DUPLICATE') {
|
|
1320
|
+
return {
|
|
1321
|
+
...item,
|
|
1322
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
|
|
1323
|
+
template: () => {
|
|
1324
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
1325
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1326
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1327
|
+
style: {
|
|
1328
|
+
color: '#28c76f',
|
|
1329
|
+
borderColor: '#28c76f'
|
|
1330
|
+
},
|
|
1331
|
+
variant: 'outlined',
|
|
1332
|
+
onClick: handleDuplicate,
|
|
1333
|
+
className: "d-flex toolbar-button"
|
|
1334
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate'))));
|
|
1335
|
+
}
|
|
1336
|
+
};
|
|
1337
|
+
}
|
|
1338
|
+
if (item.key === 'INSERT_BEFORE') {
|
|
1339
|
+
return {
|
|
1340
|
+
...item,
|
|
1341
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
|
|
1342
|
+
template: () => {
|
|
1343
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1344
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1345
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1346
|
+
style: {
|
|
1347
|
+
color: '#28c76f',
|
|
1348
|
+
borderColor: '#28c76f'
|
|
1349
|
+
},
|
|
1350
|
+
variant: 'outlined',
|
|
1351
|
+
onClick: () => handleInsertBefore(item, 1),
|
|
1352
|
+
className: "d-flex toolbar-button"
|
|
1353
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1354
|
+
overlayClassName: 'be-popup-container',
|
|
1355
|
+
style: {
|
|
1356
|
+
color: '#28c76f',
|
|
1357
|
+
borderColor: '#28c76f'
|
|
1358
|
+
},
|
|
1359
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1360
|
+
menu: {
|
|
1361
|
+
items: itemsAdd,
|
|
1362
|
+
onClick: e => handleInsertBefore(item, Number(e.key))
|
|
1363
|
+
}
|
|
1364
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1365
|
+
style: {
|
|
1366
|
+
color: '#28c76f'
|
|
1367
|
+
},
|
|
1368
|
+
onClick: () => handleInsertBefore(item, 1)
|
|
1369
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')))));
|
|
1370
|
+
}
|
|
1371
|
+
};
|
|
1372
|
+
}
|
|
1373
|
+
if (item.key === 'INSERT_AFTER') {
|
|
1374
|
+
return {
|
|
1375
|
+
...item,
|
|
1376
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
|
|
1377
|
+
template: () => {
|
|
1378
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1379
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1380
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1381
|
+
style: {
|
|
1382
|
+
color: '#28c76f',
|
|
1383
|
+
borderColor: '#28c76f'
|
|
1384
|
+
},
|
|
1385
|
+
variant: 'outlined',
|
|
1386
|
+
onClick: () => handleInsertAfter(item, 1),
|
|
1387
|
+
className: "d-flex toolbar-button"
|
|
1388
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1389
|
+
overlayClassName: 'be-popup-container',
|
|
1390
|
+
style: {
|
|
1391
|
+
color: '#28c76f',
|
|
1392
|
+
borderColor: '#28c76f'
|
|
1393
|
+
},
|
|
1394
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1395
|
+
menu: {
|
|
1396
|
+
items: itemsAdd,
|
|
1397
|
+
onClick: e => handleInsertAfter(item, Number(e.key))
|
|
1398
|
+
}
|
|
1399
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1400
|
+
style: {
|
|
1401
|
+
color: '#28c76f'
|
|
1402
|
+
},
|
|
1403
|
+
onClick: () => handleInsertAfter(item, 1)
|
|
1404
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')))));
|
|
1405
|
+
}
|
|
1406
|
+
};
|
|
1407
|
+
}
|
|
1408
|
+
if (item.key === 'INSERT_CHILDREN') {
|
|
1409
|
+
return {
|
|
1410
|
+
...item,
|
|
1411
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
|
|
1412
|
+
template: () => {
|
|
1413
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1414
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1415
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1416
|
+
style: {
|
|
1417
|
+
color: '#28c76f',
|
|
1418
|
+
borderColor: '#28c76f'
|
|
1419
|
+
},
|
|
1420
|
+
variant: 'outlined',
|
|
1421
|
+
onClick: () => handleInsertChild(item),
|
|
1422
|
+
className: "d-flex toolbar-button"
|
|
1423
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children'))));
|
|
1424
|
+
}
|
|
1425
|
+
};
|
|
1426
|
+
}
|
|
1427
|
+
if (item.key === 'DELETE') {
|
|
1428
|
+
return {
|
|
1429
|
+
...item,
|
|
1430
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1431
|
+
template: () => {
|
|
1432
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1433
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1434
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1435
|
+
style: {
|
|
1436
|
+
color: '#eb4619',
|
|
1437
|
+
borderColor: '#eb4619'
|
|
1438
|
+
},
|
|
1439
|
+
variant: 'outlined',
|
|
1440
|
+
onClick: handleDeleteAll,
|
|
1441
|
+
className: "d-flex toolbar-button"
|
|
1442
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1443
|
+
}
|
|
1444
|
+
};
|
|
1445
|
+
}
|
|
1446
|
+
if (item.key === 'DELETE_ROWS') {
|
|
1447
|
+
return {
|
|
1448
|
+
...item,
|
|
1449
|
+
label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`,
|
|
1450
|
+
template: () => {
|
|
1451
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1452
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1453
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1454
|
+
style: {
|
|
1455
|
+
color: '#eb4619',
|
|
1456
|
+
borderColor: '#eb4619'
|
|
1457
|
+
},
|
|
1458
|
+
variant: 'outlined',
|
|
1459
|
+
onClick: () => handleDeleteRows(item),
|
|
1460
|
+
className: "d-flex toolbar-button"
|
|
1461
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`)));
|
|
1462
|
+
}
|
|
1463
|
+
};
|
|
1464
|
+
}
|
|
1465
|
+
return {
|
|
1466
|
+
...item
|
|
1467
|
+
};
|
|
1468
|
+
});
|
|
1469
|
+
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1470
|
+
const toolbarItemsTop = React.useMemo(() => {
|
|
1471
|
+
// Chưa có dòng| ô được chọn
|
|
1472
|
+
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1473
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1474
|
+
if (item.key === 'ADD') {
|
|
1475
|
+
return {
|
|
1476
|
+
...item,
|
|
1477
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1478
|
+
template: () => {
|
|
1479
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1480
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1481
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1482
|
+
style: {
|
|
1483
|
+
color: '#28c76f',
|
|
1484
|
+
borderColor: '#28c76f'
|
|
1485
|
+
},
|
|
1486
|
+
variant: 'outlined',
|
|
1487
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1488
|
+
className: "d-flex toolbar-button"
|
|
1489
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1490
|
+
overlayClassName: 'be-popup-container',
|
|
1491
|
+
trigger: ['click'],
|
|
1492
|
+
style: {
|
|
1493
|
+
color: '#28c76f',
|
|
1494
|
+
borderColor: '#28c76f'
|
|
1495
|
+
},
|
|
1496
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1497
|
+
menu: {
|
|
1498
|
+
items: itemsAdd,
|
|
1499
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1500
|
+
}
|
|
1501
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
1502
|
+
style: {
|
|
1503
|
+
color: '#28c76f'
|
|
1504
|
+
},
|
|
1505
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1506
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1507
|
+
}
|
|
1508
|
+
};
|
|
1509
|
+
}
|
|
1510
|
+
if (item.key === 'DELETE') {
|
|
1511
|
+
return {
|
|
1512
|
+
...item,
|
|
1513
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1514
|
+
template: () => {
|
|
1515
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1516
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1517
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1518
|
+
style: {
|
|
1519
|
+
color: '#eb4619',
|
|
1520
|
+
borderColor: '#eb4619'
|
|
1521
|
+
},
|
|
1522
|
+
variant: 'outlined',
|
|
1523
|
+
onClick: () => handleDeleteAll(item),
|
|
1524
|
+
className: "d-flex toolbar-button"
|
|
1525
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1526
|
+
}
|
|
1527
|
+
};
|
|
1528
|
+
}
|
|
1529
|
+
return {
|
|
1530
|
+
...item
|
|
1531
|
+
};
|
|
1532
|
+
});
|
|
1533
|
+
}
|
|
1534
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
|
|
1535
|
+
if (item.key === 'ADD') {
|
|
1536
|
+
return {
|
|
1537
|
+
...item,
|
|
1538
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1539
|
+
template: () => {
|
|
1540
|
+
return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
|
|
1541
|
+
className: classNames(`be-toolbar-item`, item?.className)
|
|
1542
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1543
|
+
style: {
|
|
1544
|
+
color: '#28c76f',
|
|
1545
|
+
borderColor: '#28c76f'
|
|
1546
|
+
},
|
|
1547
|
+
variant: 'outlined',
|
|
1548
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1549
|
+
className: "d-flex toolbar-button"
|
|
1550
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1281
1551
|
title: "",
|
|
1282
1552
|
overlayClassName: 'be-popup-container',
|
|
1283
1553
|
style: {
|
|
@@ -1294,7 +1564,7 @@ const TableContainerEdit = props => {
|
|
|
1294
1564
|
color: '#28c76f'
|
|
1295
1565
|
},
|
|
1296
1566
|
onClick: () => handleAddMulti(item, 1)
|
|
1297
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1567
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1298
1568
|
}
|
|
1299
1569
|
};
|
|
1300
1570
|
}
|
|
@@ -1313,7 +1583,7 @@ const TableContainerEdit = props => {
|
|
|
1313
1583
|
variant: 'outlined',
|
|
1314
1584
|
onClick: handleDuplicate,
|
|
1315
1585
|
className: "d-flex toolbar-button"
|
|
1316
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
|
|
1586
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate'))));
|
|
1317
1587
|
}
|
|
1318
1588
|
};
|
|
1319
1589
|
}
|
|
@@ -1324,7 +1594,15 @@ const TableContainerEdit = props => {
|
|
|
1324
1594
|
template: () => {
|
|
1325
1595
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1326
1596
|
className: classNames(`be-toolbar-item`, item?.className)
|
|
1327
|
-
}, /*#__PURE__*/React.createElement(
|
|
1597
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1598
|
+
style: {
|
|
1599
|
+
color: '#28c76f',
|
|
1600
|
+
borderColor: '#28c76f'
|
|
1601
|
+
},
|
|
1602
|
+
variant: 'outlined',
|
|
1603
|
+
onClick: () => handleInsertBefore(item, 1),
|
|
1604
|
+
className: "d-flex toolbar-button"
|
|
1605
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1328
1606
|
overlayClassName: 'be-popup-container',
|
|
1329
1607
|
style: {
|
|
1330
1608
|
color: '#28c76f',
|
|
@@ -1340,7 +1618,7 @@ const TableContainerEdit = props => {
|
|
|
1340
1618
|
color: '#28c76f'
|
|
1341
1619
|
},
|
|
1342
1620
|
onClick: () => handleInsertBefore(item, 1)
|
|
1343
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
|
|
1621
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')))));
|
|
1344
1622
|
}
|
|
1345
1623
|
};
|
|
1346
1624
|
}
|
|
@@ -1351,7 +1629,15 @@ const TableContainerEdit = props => {
|
|
|
1351
1629
|
template: () => {
|
|
1352
1630
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1353
1631
|
className: classNames(`be-toolbar-item`, item?.className)
|
|
1354
|
-
}, /*#__PURE__*/React.createElement(
|
|
1632
|
+
}, item?.hasMenu === false ? /*#__PURE__*/React.createElement(Button, {
|
|
1633
|
+
style: {
|
|
1634
|
+
color: '#28c76f',
|
|
1635
|
+
borderColor: '#28c76f'
|
|
1636
|
+
},
|
|
1637
|
+
variant: 'outlined',
|
|
1638
|
+
onClick: () => handleInsertAfter(item, 1),
|
|
1639
|
+
className: "d-flex toolbar-button"
|
|
1640
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/React.createElement(Dropdown.Button, {
|
|
1355
1641
|
overlayClassName: 'be-popup-container',
|
|
1356
1642
|
style: {
|
|
1357
1643
|
color: '#28c76f',
|
|
@@ -1367,7 +1653,7 @@ const TableContainerEdit = props => {
|
|
|
1367
1653
|
color: '#28c76f'
|
|
1368
1654
|
},
|
|
1369
1655
|
onClick: () => handleInsertAfter(item, 1)
|
|
1370
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
|
|
1656
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')))));
|
|
1371
1657
|
}
|
|
1372
1658
|
};
|
|
1373
1659
|
}
|
|
@@ -1386,7 +1672,7 @@ const TableContainerEdit = props => {
|
|
|
1386
1672
|
variant: 'outlined',
|
|
1387
1673
|
onClick: () => handleInsertChild(item),
|
|
1388
1674
|
className: "d-flex toolbar-button"
|
|
1389
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
|
|
1675
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children'))));
|
|
1390
1676
|
}
|
|
1391
1677
|
};
|
|
1392
1678
|
}
|
|
@@ -1405,7 +1691,7 @@ const TableContainerEdit = props => {
|
|
|
1405
1691
|
variant: 'outlined',
|
|
1406
1692
|
onClick: handleDeleteAll,
|
|
1407
1693
|
className: "d-flex toolbar-button"
|
|
1408
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1694
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1409
1695
|
}
|
|
1410
1696
|
};
|
|
1411
1697
|
}
|
|
@@ -1424,7 +1710,7 @@ const TableContainerEdit = props => {
|
|
|
1424
1710
|
variant: 'outlined',
|
|
1425
1711
|
onClick: () => handleDeleteRows(item),
|
|
1426
1712
|
className: "d-flex toolbar-button"
|
|
1427
|
-
}, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
|
|
1713
|
+
}, item.template ? getToolbarTemplate(item.template) : /*#__PURE__*/React.createElement(React.Fragment, null, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`)));
|
|
1428
1714
|
}
|
|
1429
1715
|
};
|
|
1430
1716
|
}
|
|
@@ -1645,10 +1931,20 @@ const TableContainerEdit = props => {
|
|
|
1645
1931
|
flex: 1,
|
|
1646
1932
|
overflow: 'hidden'
|
|
1647
1933
|
}
|
|
1934
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1935
|
+
className: classNames('ui-rc-toolbar-bottom', {
|
|
1936
|
+
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1937
|
+
})
|
|
1648
1938
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1939
|
+
style: {
|
|
1940
|
+
width: '100%'
|
|
1941
|
+
},
|
|
1942
|
+
items: toolbarItemsTop ?? [],
|
|
1943
|
+
mode: 'scroll',
|
|
1944
|
+
onClick: ({}) => {
|
|
1945
|
+
setEditingKey('');
|
|
1946
|
+
}
|
|
1947
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
1652
1948
|
style: {
|
|
1653
1949
|
display: 'flex',
|
|
1654
1950
|
justifyContent: 'space-between',
|
|
@@ -1790,12 +2086,6 @@ const TableContainerEdit = props => {
|
|
|
1790
2086
|
className: classNames('ui-rc-toolbar-bottom', {
|
|
1791
2087
|
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1792
2088
|
})
|
|
1793
|
-
// style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
|
|
1794
|
-
// style={{
|
|
1795
|
-
// borderBottom: '1px solid #e0e0e0',
|
|
1796
|
-
// borderRight: '1px solid #e0e0e0',
|
|
1797
|
-
// borderLeft: '1px solid #e0e0e0'
|
|
1798
|
-
// }}
|
|
1799
2089
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
1800
2090
|
style: {
|
|
1801
2091
|
width: '100%'
|
|
@@ -52,7 +52,8 @@ const TableBodyRow = ({
|
|
|
52
52
|
className: classNames(`${prefix}-grid-row ${rowClass ?? ''}`, {
|
|
53
53
|
[`${prefix}-grid-row-selected`]: row.getIsSelected(),
|
|
54
54
|
[`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
|
|
55
|
-
[`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || Array.isArray(row.originalSubRows)
|
|
55
|
+
// [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) && row.originalSubRows.length > 0),
|
|
56
|
+
[`${prefix}-grid-row-parent`]: row.getCanExpand()
|
|
56
57
|
}),
|
|
57
58
|
style: {
|
|
58
59
|
// display: 'flex',
|
|
@@ -157,7 +157,7 @@ const Grid = props => {
|
|
|
157
157
|
getGroupedRowModel: getGroupedRowModel(),
|
|
158
158
|
// onExpandedChange: setExpanded,
|
|
159
159
|
getRowCanExpand: row => {
|
|
160
|
-
return Array.isArray(row.original.children);
|
|
160
|
+
return Array.isArray(row.original.children) && row.original.children.length > 0;
|
|
161
161
|
},
|
|
162
162
|
getExpandedRowModel: getExpandedRowModel(),
|
|
163
163
|
getPaginationRowModel: pagination && !infiniteScroll ? getPaginationRowModel() : undefined,
|
|
@@ -48,6 +48,7 @@ export declare const checkFieldKey: (key: string | undefined) => string;
|
|
|
48
48
|
export declare const convertLabelToTitle: (data: any[]) => any[];
|
|
49
49
|
export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
|
|
50
50
|
export declare const getTemplate: (template: any, column?: ColumnTable) => React.ReactNode | React.ReactElement;
|
|
51
|
+
export declare const getToolbarTemplate: (template: any) => React.ReactNode | React.ReactElement;
|
|
51
52
|
export declare const isObjEmpty: (obj: any) => boolean;
|
|
52
53
|
export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
|
|
53
54
|
export declare const updateData: <Record = AnyObject>(initData: Record[], rows: Record[], key: keyof Record) => Record[];
|
|
@@ -24,7 +24,7 @@ exports.getCellsByPosition = getCellsByPosition;
|
|
|
24
24
|
exports.getCellsByPosition2 = getCellsByPosition2;
|
|
25
25
|
exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getDateRangeFormat = exports.getColumnsVisible = void 0;
|
|
26
26
|
exports.getHiddenParentKeys = getHiddenParentKeys;
|
|
27
|
-
exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
|
|
27
|
+
exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getToolbarTemplate = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
|
|
28
28
|
exports.groupAndSum = groupAndSum;
|
|
29
29
|
exports.groupArrayByColumns = groupArrayByColumns;
|
|
30
30
|
exports.hideDraggingPoint = void 0;
|
|
@@ -40,8 +40,8 @@ exports.isRightMostInRegion = isRightMostInRegion;
|
|
|
40
40
|
exports.isTopMostInRegion = exports.isSelectedCell = void 0;
|
|
41
41
|
exports.mergeWithFilter = mergeWithFilter;
|
|
42
42
|
exports.mergeWithFilter2 = mergeWithFilter2;
|
|
43
|
-
exports.
|
|
44
|
-
exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = void 0;
|
|
43
|
+
exports.removeFieldRecursive = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = void 0;
|
|
44
|
+
exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.unFlattenData = exports.sumDataByField = exports.sumByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeVietnameseTones = exports.removeInvisibleColumns = void 0;
|
|
45
45
|
exports.updateDataByFilter = updateDataByFilter;
|
|
46
46
|
exports.updateOrInsert = updateOrInsert;
|
|
47
47
|
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
@@ -466,6 +466,13 @@ const getTemplate = (template, column) => {
|
|
|
466
466
|
}
|
|
467
467
|
return template;
|
|
468
468
|
};
|
|
469
|
+
exports.getTemplate = getTemplate;
|
|
470
|
+
const getToolbarTemplate = template => {
|
|
471
|
+
if (template && typeof template === 'function') {
|
|
472
|
+
return template();
|
|
473
|
+
}
|
|
474
|
+
return template;
|
|
475
|
+
};
|
|
469
476
|
|
|
470
477
|
// export const totalFixedWidth = <T, >(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => {
|
|
471
478
|
// const totalFixedLeftWidth: number = columns
|
|
@@ -481,7 +488,7 @@ const getTemplate = (template, column) => {
|
|
|
481
488
|
// return totalFixedLeftWidth + selectColumnWidth
|
|
482
489
|
|
|
483
490
|
// }
|
|
484
|
-
exports.
|
|
491
|
+
exports.getToolbarTemplate = getToolbarTemplate;
|
|
485
492
|
const isObjEmpty = obj => {
|
|
486
493
|
if (isNullOrUndefined(obj)) {
|
|
487
494
|
return true;
|
|
@@ -466,6 +466,7 @@ export type ToolbarItem = {
|
|
|
466
466
|
template?: React.ReactNode | React.ReactElement | (() => React.ReactNode | React.ReactElement);
|
|
467
467
|
title?: React.ReactNode;
|
|
468
468
|
disabled?: boolean;
|
|
469
|
+
hasMenu?: boolean;
|
|
469
470
|
[key: string]: any;
|
|
470
471
|
};
|
|
471
472
|
export type LoadOptionsArgs = {
|
|
@@ -24,6 +24,7 @@ var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
|
|
|
24
24
|
var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react-content"));
|
|
25
25
|
var _sweetalert = _interopRequireDefault(require("sweetalert2"));
|
|
26
26
|
var _locale = require("rc-master-ui/es/locale");
|
|
27
|
+
var _hooks = require("../grid-component/hooks");
|
|
27
28
|
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); }
|
|
28
29
|
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; }
|
|
29
30
|
const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
|
|
@@ -1222,6 +1223,7 @@ const TableContainerEdit = props => {
|
|
|
1222
1223
|
}
|
|
1223
1224
|
};
|
|
1224
1225
|
const toolbarItemsBottom = _react.default.useMemo(() => {
|
|
1226
|
+
// Chưa có dòng| ô được chọn
|
|
1225
1227
|
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1226
1228
|
return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1227
1229
|
if (item.key === 'ADD') {
|
|
@@ -1231,7 +1233,15 @@ const TableContainerEdit = props => {
|
|
|
1231
1233
|
template: () => {
|
|
1232
1234
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1233
1235
|
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1234
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.
|
|
1236
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1237
|
+
style: {
|
|
1238
|
+
color: '#28c76f',
|
|
1239
|
+
borderColor: '#28c76f'
|
|
1240
|
+
},
|
|
1241
|
+
variant: 'outlined',
|
|
1242
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1243
|
+
className: "d-flex toolbar-button"
|
|
1244
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1235
1245
|
overlayClassName: 'be-popup-container',
|
|
1236
1246
|
trigger: ['click'],
|
|
1237
1247
|
style: {
|
|
@@ -1248,7 +1258,7 @@ const TableContainerEdit = props => {
|
|
|
1248
1258
|
color: '#28c76f'
|
|
1249
1259
|
},
|
|
1250
1260
|
onClick: () => handleAddMulti(item, 1)
|
|
1251
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1261
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1252
1262
|
}
|
|
1253
1263
|
};
|
|
1254
1264
|
}
|
|
@@ -1267,7 +1277,7 @@ const TableContainerEdit = props => {
|
|
|
1267
1277
|
variant: 'outlined',
|
|
1268
1278
|
onClick: () => handleDeleteAll(item),
|
|
1269
1279
|
className: "d-flex toolbar-button"
|
|
1270
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1280
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1271
1281
|
}
|
|
1272
1282
|
};
|
|
1273
1283
|
}
|
|
@@ -1284,7 +1294,267 @@ const TableContainerEdit = props => {
|
|
|
1284
1294
|
template: () => {
|
|
1285
1295
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1286
1296
|
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1287
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.
|
|
1297
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1298
|
+
style: {
|
|
1299
|
+
color: '#28c76f',
|
|
1300
|
+
borderColor: '#28c76f'
|
|
1301
|
+
},
|
|
1302
|
+
variant: 'outlined',
|
|
1303
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1304
|
+
className: "d-flex toolbar-button"
|
|
1305
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1306
|
+
title: "",
|
|
1307
|
+
overlayClassName: 'be-popup-container',
|
|
1308
|
+
style: {
|
|
1309
|
+
color: '#28c76f',
|
|
1310
|
+
borderColor: '#28c76f'
|
|
1311
|
+
},
|
|
1312
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1313
|
+
menu: {
|
|
1314
|
+
items: itemsAdd,
|
|
1315
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1316
|
+
}
|
|
1317
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1318
|
+
style: {
|
|
1319
|
+
color: '#28c76f'
|
|
1320
|
+
},
|
|
1321
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1322
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1323
|
+
}
|
|
1324
|
+
};
|
|
1325
|
+
}
|
|
1326
|
+
if (item.key === 'DUPLICATE') {
|
|
1327
|
+
return {
|
|
1328
|
+
...item,
|
|
1329
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
|
|
1330
|
+
template: () => {
|
|
1331
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
1332
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1333
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1334
|
+
style: {
|
|
1335
|
+
color: '#28c76f',
|
|
1336
|
+
borderColor: '#28c76f'
|
|
1337
|
+
},
|
|
1338
|
+
variant: 'outlined',
|
|
1339
|
+
onClick: handleDuplicate,
|
|
1340
|
+
className: "d-flex toolbar-button"
|
|
1341
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate'))));
|
|
1342
|
+
}
|
|
1343
|
+
};
|
|
1344
|
+
}
|
|
1345
|
+
if (item.key === 'INSERT_BEFORE') {
|
|
1346
|
+
return {
|
|
1347
|
+
...item,
|
|
1348
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
|
|
1349
|
+
template: () => {
|
|
1350
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1351
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1352
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1353
|
+
style: {
|
|
1354
|
+
color: '#28c76f',
|
|
1355
|
+
borderColor: '#28c76f'
|
|
1356
|
+
},
|
|
1357
|
+
variant: 'outlined',
|
|
1358
|
+
onClick: () => handleInsertBefore(item, 1),
|
|
1359
|
+
className: "d-flex toolbar-button"
|
|
1360
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1361
|
+
overlayClassName: 'be-popup-container',
|
|
1362
|
+
style: {
|
|
1363
|
+
color: '#28c76f',
|
|
1364
|
+
borderColor: '#28c76f'
|
|
1365
|
+
},
|
|
1366
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1367
|
+
menu: {
|
|
1368
|
+
items: itemsAdd,
|
|
1369
|
+
onClick: e => handleInsertBefore(item, Number(e.key))
|
|
1370
|
+
}
|
|
1371
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1372
|
+
style: {
|
|
1373
|
+
color: '#28c76f'
|
|
1374
|
+
},
|
|
1375
|
+
onClick: () => handleInsertBefore(item, 1)
|
|
1376
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')))));
|
|
1377
|
+
}
|
|
1378
|
+
};
|
|
1379
|
+
}
|
|
1380
|
+
if (item.key === 'INSERT_AFTER') {
|
|
1381
|
+
return {
|
|
1382
|
+
...item,
|
|
1383
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
|
|
1384
|
+
template: () => {
|
|
1385
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1386
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1387
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1388
|
+
style: {
|
|
1389
|
+
color: '#28c76f',
|
|
1390
|
+
borderColor: '#28c76f'
|
|
1391
|
+
},
|
|
1392
|
+
variant: 'outlined',
|
|
1393
|
+
onClick: () => handleInsertAfter(item, 1),
|
|
1394
|
+
className: "d-flex toolbar-button"
|
|
1395
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1396
|
+
overlayClassName: 'be-popup-container',
|
|
1397
|
+
style: {
|
|
1398
|
+
color: '#28c76f',
|
|
1399
|
+
borderColor: '#28c76f'
|
|
1400
|
+
},
|
|
1401
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1402
|
+
menu: {
|
|
1403
|
+
items: itemsAdd,
|
|
1404
|
+
onClick: e => handleInsertAfter(item, Number(e.key))
|
|
1405
|
+
}
|
|
1406
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1407
|
+
style: {
|
|
1408
|
+
color: '#28c76f'
|
|
1409
|
+
},
|
|
1410
|
+
onClick: () => handleInsertAfter(item, 1)
|
|
1411
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')))));
|
|
1412
|
+
}
|
|
1413
|
+
};
|
|
1414
|
+
}
|
|
1415
|
+
if (item.key === 'INSERT_CHILDREN') {
|
|
1416
|
+
return {
|
|
1417
|
+
...item,
|
|
1418
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
|
|
1419
|
+
template: () => {
|
|
1420
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1421
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1422
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1423
|
+
style: {
|
|
1424
|
+
color: '#28c76f',
|
|
1425
|
+
borderColor: '#28c76f'
|
|
1426
|
+
},
|
|
1427
|
+
variant: 'outlined',
|
|
1428
|
+
onClick: () => handleInsertChild(item),
|
|
1429
|
+
className: "d-flex toolbar-button"
|
|
1430
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children'))));
|
|
1431
|
+
}
|
|
1432
|
+
};
|
|
1433
|
+
}
|
|
1434
|
+
if (item.key === 'DELETE') {
|
|
1435
|
+
return {
|
|
1436
|
+
...item,
|
|
1437
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1438
|
+
template: () => {
|
|
1439
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1440
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1441
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1442
|
+
style: {
|
|
1443
|
+
color: '#eb4619',
|
|
1444
|
+
borderColor: '#eb4619'
|
|
1445
|
+
},
|
|
1446
|
+
variant: 'outlined',
|
|
1447
|
+
onClick: handleDeleteAll,
|
|
1448
|
+
className: "d-flex toolbar-button"
|
|
1449
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1450
|
+
}
|
|
1451
|
+
};
|
|
1452
|
+
}
|
|
1453
|
+
if (item.key === 'DELETE_ROWS') {
|
|
1454
|
+
return {
|
|
1455
|
+
...item,
|
|
1456
|
+
label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`,
|
|
1457
|
+
template: () => {
|
|
1458
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1459
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1460
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1461
|
+
style: {
|
|
1462
|
+
color: '#eb4619',
|
|
1463
|
+
borderColor: '#eb4619'
|
|
1464
|
+
},
|
|
1465
|
+
variant: 'outlined',
|
|
1466
|
+
onClick: () => handleDeleteRows(item),
|
|
1467
|
+
className: "d-flex toolbar-button"
|
|
1468
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`)));
|
|
1469
|
+
}
|
|
1470
|
+
};
|
|
1471
|
+
}
|
|
1472
|
+
return {
|
|
1473
|
+
...item
|
|
1474
|
+
};
|
|
1475
|
+
});
|
|
1476
|
+
}, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
|
|
1477
|
+
const toolbarItemsTop = _react.default.useMemo(() => {
|
|
1478
|
+
// Chưa có dòng| ô được chọn
|
|
1479
|
+
if (!rowsFocus || rowsFocus.length === 0) {
|
|
1480
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
|
|
1481
|
+
if (item.key === 'ADD') {
|
|
1482
|
+
return {
|
|
1483
|
+
...item,
|
|
1484
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1485
|
+
template: () => {
|
|
1486
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1487
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1488
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1489
|
+
style: {
|
|
1490
|
+
color: '#28c76f',
|
|
1491
|
+
borderColor: '#28c76f'
|
|
1492
|
+
},
|
|
1493
|
+
variant: 'outlined',
|
|
1494
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1495
|
+
className: "d-flex toolbar-button"
|
|
1496
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1497
|
+
overlayClassName: 'be-popup-container',
|
|
1498
|
+
trigger: ['click'],
|
|
1499
|
+
style: {
|
|
1500
|
+
color: '#28c76f',
|
|
1501
|
+
borderColor: '#28c76f'
|
|
1502
|
+
},
|
|
1503
|
+
className: 'toolbar-button toolbar-dropdown-button',
|
|
1504
|
+
menu: {
|
|
1505
|
+
items: itemsAdd,
|
|
1506
|
+
onClick: e => handleAddMulti(item, Number(e.key))
|
|
1507
|
+
}
|
|
1508
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
1509
|
+
style: {
|
|
1510
|
+
color: '#28c76f'
|
|
1511
|
+
},
|
|
1512
|
+
onClick: () => handleAddMulti(item, 1)
|
|
1513
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1514
|
+
}
|
|
1515
|
+
};
|
|
1516
|
+
}
|
|
1517
|
+
if (item.key === 'DELETE') {
|
|
1518
|
+
return {
|
|
1519
|
+
...item,
|
|
1520
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
|
|
1521
|
+
template: () => {
|
|
1522
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1523
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1524
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1525
|
+
style: {
|
|
1526
|
+
color: '#eb4619',
|
|
1527
|
+
borderColor: '#eb4619'
|
|
1528
|
+
},
|
|
1529
|
+
variant: 'outlined',
|
|
1530
|
+
onClick: () => handleDeleteAll(item),
|
|
1531
|
+
className: "d-flex toolbar-button"
|
|
1532
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1533
|
+
}
|
|
1534
|
+
};
|
|
1535
|
+
}
|
|
1536
|
+
return {
|
|
1537
|
+
...item
|
|
1538
|
+
};
|
|
1539
|
+
});
|
|
1540
|
+
}
|
|
1541
|
+
return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
|
|
1542
|
+
if (item.key === 'ADD') {
|
|
1543
|
+
return {
|
|
1544
|
+
...item,
|
|
1545
|
+
label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
|
|
1546
|
+
template: () => {
|
|
1547
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
|
|
1548
|
+
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1549
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1550
|
+
style: {
|
|
1551
|
+
color: '#28c76f',
|
|
1552
|
+
borderColor: '#28c76f'
|
|
1553
|
+
},
|
|
1554
|
+
variant: 'outlined',
|
|
1555
|
+
onClick: () => handleAddMulti(item, 1),
|
|
1556
|
+
className: "d-flex toolbar-button"
|
|
1557
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1288
1558
|
title: "",
|
|
1289
1559
|
overlayClassName: 'be-popup-container',
|
|
1290
1560
|
style: {
|
|
@@ -1301,7 +1571,7 @@ const TableContainerEdit = props => {
|
|
|
1301
1571
|
color: '#28c76f'
|
|
1302
1572
|
},
|
|
1303
1573
|
onClick: () => handleAddMulti(item, 1)
|
|
1304
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
|
|
1574
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item')))));
|
|
1305
1575
|
}
|
|
1306
1576
|
};
|
|
1307
1577
|
}
|
|
@@ -1320,7 +1590,7 @@ const TableContainerEdit = props => {
|
|
|
1320
1590
|
variant: 'outlined',
|
|
1321
1591
|
onClick: handleDuplicate,
|
|
1322
1592
|
className: "d-flex toolbar-button"
|
|
1323
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
|
|
1593
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate'))));
|
|
1324
1594
|
}
|
|
1325
1595
|
};
|
|
1326
1596
|
}
|
|
@@ -1331,7 +1601,15 @@ const TableContainerEdit = props => {
|
|
|
1331
1601
|
template: () => {
|
|
1332
1602
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1333
1603
|
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1334
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.
|
|
1604
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1605
|
+
style: {
|
|
1606
|
+
color: '#28c76f',
|
|
1607
|
+
borderColor: '#28c76f'
|
|
1608
|
+
},
|
|
1609
|
+
variant: 'outlined',
|
|
1610
|
+
onClick: () => handleInsertBefore(item, 1),
|
|
1611
|
+
className: "d-flex toolbar-button"
|
|
1612
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1335
1613
|
overlayClassName: 'be-popup-container',
|
|
1336
1614
|
style: {
|
|
1337
1615
|
color: '#28c76f',
|
|
@@ -1347,7 +1625,7 @@ const TableContainerEdit = props => {
|
|
|
1347
1625
|
color: '#28c76f'
|
|
1348
1626
|
},
|
|
1349
1627
|
onClick: () => handleInsertBefore(item, 1)
|
|
1350
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
|
|
1628
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')))));
|
|
1351
1629
|
}
|
|
1352
1630
|
};
|
|
1353
1631
|
}
|
|
@@ -1358,7 +1636,15 @@ const TableContainerEdit = props => {
|
|
|
1358
1636
|
template: () => {
|
|
1359
1637
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
1360
1638
|
className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
|
|
1361
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.
|
|
1639
|
+
}, item?.hasMenu === false ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
1640
|
+
style: {
|
|
1641
|
+
color: '#28c76f',
|
|
1642
|
+
borderColor: '#28c76f'
|
|
1643
|
+
},
|
|
1644
|
+
variant: 'outlined',
|
|
1645
|
+
onClick: () => handleInsertAfter(item, 1),
|
|
1646
|
+
className: "d-flex toolbar-button"
|
|
1647
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')) : /*#__PURE__*/_react.default.createElement(_antd.Dropdown.Button, {
|
|
1362
1648
|
overlayClassName: 'be-popup-container',
|
|
1363
1649
|
style: {
|
|
1364
1650
|
color: '#28c76f',
|
|
@@ -1374,7 +1660,7 @@ const TableContainerEdit = props => {
|
|
|
1374
1660
|
color: '#28c76f'
|
|
1375
1661
|
},
|
|
1376
1662
|
onClick: () => handleInsertAfter(item, 1)
|
|
1377
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
|
|
1663
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')))));
|
|
1378
1664
|
}
|
|
1379
1665
|
};
|
|
1380
1666
|
}
|
|
@@ -1393,7 +1679,7 @@ const TableContainerEdit = props => {
|
|
|
1393
1679
|
variant: 'outlined',
|
|
1394
1680
|
onClick: () => handleInsertChild(item),
|
|
1395
1681
|
className: "d-flex toolbar-button"
|
|
1396
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
|
|
1682
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children'))));
|
|
1397
1683
|
}
|
|
1398
1684
|
};
|
|
1399
1685
|
}
|
|
@@ -1412,7 +1698,7 @@ const TableContainerEdit = props => {
|
|
|
1412
1698
|
variant: 'outlined',
|
|
1413
1699
|
onClick: handleDeleteAll,
|
|
1414
1700
|
className: "d-flex toolbar-button"
|
|
1415
|
-
}, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
|
|
1701
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item')));
|
|
1416
1702
|
}
|
|
1417
1703
|
};
|
|
1418
1704
|
}
|
|
@@ -1431,7 +1717,7 @@ const TableContainerEdit = props => {
|
|
|
1431
1717
|
variant: 'outlined',
|
|
1432
1718
|
onClick: () => handleDeleteRows(item),
|
|
1433
1719
|
className: "d-flex toolbar-button"
|
|
1434
|
-
}, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
|
|
1720
|
+
}, item.template ? (0, _hooks.getToolbarTemplate)(item.template) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`)));
|
|
1435
1721
|
}
|
|
1436
1722
|
};
|
|
1437
1723
|
}
|
|
@@ -1652,10 +1938,20 @@ const TableContainerEdit = props => {
|
|
|
1652
1938
|
flex: 1,
|
|
1653
1939
|
overflow: 'hidden'
|
|
1654
1940
|
}
|
|
1941
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
1942
|
+
className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
|
|
1943
|
+
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1944
|
+
})
|
|
1655
1945
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1946
|
+
style: {
|
|
1947
|
+
width: '100%'
|
|
1948
|
+
},
|
|
1949
|
+
items: toolbarItemsTop ?? [],
|
|
1950
|
+
mode: 'scroll',
|
|
1951
|
+
onClick: ({}) => {
|
|
1952
|
+
setEditingKey('');
|
|
1953
|
+
}
|
|
1954
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
1659
1955
|
style: {
|
|
1660
1956
|
display: 'flex',
|
|
1661
1957
|
justifyContent: 'space-between',
|
|
@@ -1797,12 +2093,6 @@ const TableContainerEdit = props => {
|
|
|
1797
2093
|
className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
|
|
1798
2094
|
'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
|
|
1799
2095
|
})
|
|
1800
|
-
// style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
|
|
1801
|
-
// style={{
|
|
1802
|
-
// borderBottom: '1px solid #e0e0e0',
|
|
1803
|
-
// borderRight: '1px solid #e0e0e0',
|
|
1804
|
-
// borderLeft: '1px solid #e0e0e0'
|
|
1805
|
-
// }}
|
|
1806
2096
|
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
|
|
1807
2097
|
style: {
|
|
1808
2098
|
width: '100%'
|
|
@@ -59,7 +59,8 @@ const TableBodyRow = ({
|
|
|
59
59
|
className: (0, _classnames.default)(`${prefix}-grid-row ${rowClass ?? ''}`, {
|
|
60
60
|
[`${prefix}-grid-row-selected`]: row.getIsSelected(),
|
|
61
61
|
[`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
|
|
62
|
-
[`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || Array.isArray(row.originalSubRows)
|
|
62
|
+
// [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) && row.originalSubRows.length > 0),
|
|
63
|
+
[`${prefix}-grid-row-parent`]: row.getCanExpand()
|
|
63
64
|
}),
|
|
64
65
|
style: {
|
|
65
66
|
// display: 'flex',
|
|
@@ -162,7 +162,7 @@ const Grid = props => {
|
|
|
162
162
|
getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
|
|
163
163
|
// onExpandedChange: setExpanded,
|
|
164
164
|
getRowCanExpand: row => {
|
|
165
|
-
return Array.isArray(row.original.children);
|
|
165
|
+
return Array.isArray(row.original.children) && row.original.children.length > 0;
|
|
166
166
|
},
|
|
167
167
|
getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
|
|
168
168
|
getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
|