react-table-edit 1.4.17 → 1.4.18
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/dist/component/edit-form/select-table/index.d.ts +1 -1
- package/dist/component/edit-form-inline/select-table/index.d.ts +1 -1
- package/dist/component/table/command.d.ts +1 -1
- package/dist/component/type/index.d.ts +65 -0
- package/dist/component/utils.d.ts +25 -0
- package/dist/component/virtualized-table/content.d.ts +22 -0
- package/dist/component/virtualized-table/group-col.d.ts +6 -0
- package/dist/component/virtualized-table/header.d.ts +31 -0
- package/dist/component/virtualized-table/index.d.ts +25 -0
- package/dist/component/virtualized-table/loading-item.d.ts +4 -0
- package/dist/index.d.ts +91 -1
- package/dist/index.js +77 -22
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +77 -23
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ type IFDataProps = {
|
|
|
5
5
|
rowData: any;
|
|
6
6
|
indexRow: number;
|
|
7
7
|
indexFocus?: number;
|
|
8
|
-
setIndexFocus
|
|
8
|
+
setIndexFocus?: Dispatch<SetStateAction<number>>;
|
|
9
9
|
handleCommandClick: any;
|
|
10
10
|
};
|
|
11
11
|
declare const CommandElement: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,6 +4,10 @@ import { UseFormGetValues, UseFormReset, UseFormSetValue } from "react-hook-form
|
|
|
4
4
|
type ITextAlign = 'center' | 'left' | 'right';
|
|
5
5
|
/** Loại chỉnh sửa của cột */
|
|
6
6
|
type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'formInline' | 'color';
|
|
7
|
+
/** Loại hiển thị của cột */
|
|
8
|
+
type IViewType = 'text' | 'numeric' | 'datetime' | 'date' | 'checkbox' | '#' | 'command';
|
|
9
|
+
/** Loại loc của cột */
|
|
10
|
+
type IFilterType = 'text' | 'numeric' | 'date' | 'select';
|
|
7
11
|
/** Cấu hình thao tác trên cột */
|
|
8
12
|
export type ICommandItem = {
|
|
9
13
|
/** ID thao tác */
|
|
@@ -343,4 +347,65 @@ export type FromItemsField = {
|
|
|
343
347
|
/** Danh sách lựa chọn (chỉ áp dụng với loại 'select' và 'selectCreatable') */
|
|
344
348
|
options?: any[];
|
|
345
349
|
};
|
|
350
|
+
export type IColumnsVirtualizedAgg = {
|
|
351
|
+
field: string;
|
|
352
|
+
value: any;
|
|
353
|
+
/** Kiểu xem cột */
|
|
354
|
+
type?: string;
|
|
355
|
+
};
|
|
356
|
+
/** Định nghĩa cột bảng ciew ảo*/
|
|
357
|
+
export type IColumnVirtualizedTable = {
|
|
358
|
+
/** Tên thuộc tính */
|
|
359
|
+
field: string;
|
|
360
|
+
/** Tiêu đề hiển thị ở header */
|
|
361
|
+
headerText?: string;
|
|
362
|
+
/** Khóa chính */
|
|
363
|
+
isPrimarykey?: boolean;
|
|
364
|
+
/** Có tính tổng */
|
|
365
|
+
haveSum?: boolean;
|
|
366
|
+
/** Có tooltip */
|
|
367
|
+
haveToolTip?: boolean;
|
|
368
|
+
/** Chiều rộng cột */
|
|
369
|
+
width?: number | string;
|
|
370
|
+
/** Chiều rộng tối thiểu */
|
|
371
|
+
minWidth?: number | string;
|
|
372
|
+
/** Chiều rộng tối đa */
|
|
373
|
+
maxWidth?: number | string;
|
|
374
|
+
/** Có hiển thị không */
|
|
375
|
+
visible?: boolean;
|
|
376
|
+
/** Kiểu xem cột */
|
|
377
|
+
type?: IViewType;
|
|
378
|
+
settingFilter?: IFSettingFilterColumn;
|
|
379
|
+
/** Căn lề */
|
|
380
|
+
textAlign?: ITextAlign;
|
|
381
|
+
/** Cố định trái/phải */
|
|
382
|
+
fixedType?: 'left' | 'right' | undefined;
|
|
383
|
+
/** Danh sách thao tác */
|
|
384
|
+
commandItems?: ICommandItem[];
|
|
385
|
+
/** Cấu hình cho kiểu numeric */
|
|
386
|
+
numericSettings?: ISettingNumericElement;
|
|
387
|
+
/** Danh sách cột con */
|
|
388
|
+
columns?: IColumnTable[];
|
|
389
|
+
/** Điều kiện disable cột */
|
|
390
|
+
disabledCondition?: (row: any) => boolean;
|
|
391
|
+
/** Template hiển thị khi không ở chế độ edit */
|
|
392
|
+
template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
|
|
393
|
+
/** Số dòng chiếm (rowspan) */
|
|
394
|
+
rowspan?: number;
|
|
395
|
+
};
|
|
396
|
+
export type IFSettingFilterColumn = {
|
|
397
|
+
/** Kiểu lọc cột */
|
|
398
|
+
filterType?: IFilterType;
|
|
399
|
+
allowFilter?: boolean;
|
|
400
|
+
options: any[];
|
|
401
|
+
};
|
|
402
|
+
export type IFOrderTable = {
|
|
403
|
+
key: string;
|
|
404
|
+
direction: 'asc' | 'desc';
|
|
405
|
+
};
|
|
406
|
+
export type IFFilterTable = {
|
|
407
|
+
key: string;
|
|
408
|
+
value: any;
|
|
409
|
+
ope: 'startswith' | 'endswith' | 'contains' | 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal';
|
|
410
|
+
};
|
|
346
411
|
export {};
|
|
@@ -21,3 +21,28 @@ export declare const FindNodeByPath: (tree: any[], path: string) => {
|
|
|
21
21
|
firstIndex: number;
|
|
22
22
|
node: any;
|
|
23
23
|
} | null;
|
|
24
|
+
/**
|
|
25
|
+
* Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
|
|
26
|
+
* - Tạo header dạng nhiều cấp (header theo chiều dọc)
|
|
27
|
+
* - Chuyển cột thành dạng phẳng để render nội dung
|
|
28
|
+
* - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
|
|
29
|
+
*
|
|
30
|
+
* @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
|
|
31
|
+
* @returns {
|
|
32
|
+
* levels: IHeaderColumnTable[][] // Các hàng header theo cấp
|
|
33
|
+
* flat: IColumnVirtualizedTable[] // Danh sách cột phẳng
|
|
34
|
+
* objWidthFixLeft: Record<number, number> // Offset trái cho cột fixed left
|
|
35
|
+
* objWidthFixRight: Record<number, number> // Offset phải cho cột fixed right
|
|
36
|
+
* lastObjWidthFixLeft: number // Chỉ số cột cuối cùng fixed left
|
|
37
|
+
* fisrtObjWidthFixRight: number // Chỉ số cột đầu tiên fixed right
|
|
38
|
+
* }
|
|
39
|
+
*/
|
|
40
|
+
export declare const calculateTableStructure: (columns: any[]) => {
|
|
41
|
+
levels: any[][];
|
|
42
|
+
flat: any[];
|
|
43
|
+
flatVisble: any[];
|
|
44
|
+
objWidthFixLeft: Record<number, number>;
|
|
45
|
+
objWidthFixRight: Record<number, number>;
|
|
46
|
+
lastObjWidthFixLeft: number;
|
|
47
|
+
fisrtObjWidthFixRight: number;
|
|
48
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { IColumnVirtualizedTable, IFTableEditFormat } from "../type";
|
|
2
|
+
type IContentColProps = {
|
|
3
|
+
col: IColumnVirtualizedTable;
|
|
4
|
+
row: any;
|
|
5
|
+
indexRow: number;
|
|
6
|
+
indexCol: number;
|
|
7
|
+
isSelected: boolean;
|
|
8
|
+
formatSetting?: IFTableEditFormat;
|
|
9
|
+
idTable: string;
|
|
10
|
+
selectedRows: any[];
|
|
11
|
+
objWidthFixLeft: any;
|
|
12
|
+
objWidthFixRight: any;
|
|
13
|
+
lastObjWidthFixLeft: number;
|
|
14
|
+
fisrtObjWidthFixRight: number;
|
|
15
|
+
selectEnable?: boolean;
|
|
16
|
+
isMulti?: boolean;
|
|
17
|
+
fieldKey: string;
|
|
18
|
+
setSelectedRows: (value: any[]) => void;
|
|
19
|
+
handleCommandClick: (id: string, rowData: any, index: number) => void;
|
|
20
|
+
};
|
|
21
|
+
export declare const RenderContentCol: (props: IContentColProps) => false | import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { IColumnVirtualizedTable, IFFilterTable, IFOrderTable } from "../type";
|
|
3
|
+
import 'react-resizable/css/styles.css';
|
|
4
|
+
import { IFTableEditFormat } from 'react-table-edit';
|
|
5
|
+
type IFDataProps = {
|
|
6
|
+
selectEnable: boolean;
|
|
7
|
+
dataSource: any[];
|
|
8
|
+
setSelectedRows: Dispatch<SetStateAction<any[]>>;
|
|
9
|
+
col: IColumnVirtualizedTable;
|
|
10
|
+
columns: IColumnVirtualizedTable[];
|
|
11
|
+
setColumns?: (columns: IColumnVirtualizedTable[]) => void;
|
|
12
|
+
changeFilter: (data: IFFilterTable[]) => void;
|
|
13
|
+
changeOrder: (data: IFOrderTable[]) => void;
|
|
14
|
+
indexCol: number;
|
|
15
|
+
indexParent: number;
|
|
16
|
+
objWidthFixLeft: any;
|
|
17
|
+
objWidthFixRight: any;
|
|
18
|
+
totalCount: number;
|
|
19
|
+
lastObjWidthFixLeft: number;
|
|
20
|
+
fisrtObjWidthFixRight: number;
|
|
21
|
+
selectedRows: any[];
|
|
22
|
+
isMulti: boolean;
|
|
23
|
+
allowFilter?: boolean;
|
|
24
|
+
allowOrder?: boolean;
|
|
25
|
+
filterBy: IFFilterTable[];
|
|
26
|
+
orderBy: IFOrderTable[];
|
|
27
|
+
container: any;
|
|
28
|
+
formatSetting?: IFTableEditFormat;
|
|
29
|
+
};
|
|
30
|
+
declare const HeaderTableCol: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export default HeaderTableCol;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IColumnsVirtualizedAgg, IColumnVirtualizedTable, IFFilterTable, IFOrderTable, IFTableEditFormat, IFTableEditPaging, IFTableEditSearchSetting, IFTableEditToolbar } from '../type';
|
|
3
|
+
type VirtualTableProps = {
|
|
4
|
+
idTable: string;
|
|
5
|
+
dataSource: any[];
|
|
6
|
+
rowHeight?: number;
|
|
7
|
+
height?: number;
|
|
8
|
+
columns: IColumnVirtualizedTable[];
|
|
9
|
+
selectEnable?: boolean;
|
|
10
|
+
isMutil?: boolean;
|
|
11
|
+
isLoading?: boolean;
|
|
12
|
+
formatSetting?: IFTableEditFormat;
|
|
13
|
+
allowFilter?: boolean;
|
|
14
|
+
allowOrder?: boolean;
|
|
15
|
+
pagingSetting?: IFTableEditPaging;
|
|
16
|
+
toolbarSetting?: IFTableEditToolbar;
|
|
17
|
+
searchSetting?: IFTableEditSearchSetting;
|
|
18
|
+
columnsAggregate?: IColumnsVirtualizedAgg[];
|
|
19
|
+
setColumns?: (columns: IColumnVirtualizedTable[]) => void;
|
|
20
|
+
commandClick?: (data: any) => void;
|
|
21
|
+
changeFilter?: (data: IFFilterTable[]) => void;
|
|
22
|
+
changeOrder?: (data: IFOrderTable[]) => void;
|
|
23
|
+
};
|
|
24
|
+
declare const VirtualTable: React.FC<VirtualTableProps>;
|
|
25
|
+
export default VirtualTable;
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
8
8
|
type ITextAlign = 'center' | 'left' | 'right';
|
|
9
9
|
/** Loại chỉnh sửa của cột */
|
|
10
10
|
type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'formInline' | 'color';
|
|
11
|
+
/** Loại hiển thị của cột */
|
|
12
|
+
type IViewType = 'text' | 'numeric' | 'datetime' | 'date' | 'checkbox' | '#' | 'command';
|
|
13
|
+
/** Loại loc của cột */
|
|
14
|
+
type IFilterType = 'text' | 'numeric' | 'date' | 'select';
|
|
11
15
|
/** Cấu hình thao tác trên cột */
|
|
12
16
|
type ICommandItem = {
|
|
13
17
|
/** ID thao tác */
|
|
@@ -347,6 +351,67 @@ type FromItemsField = {
|
|
|
347
351
|
/** Danh sách lựa chọn (chỉ áp dụng với loại 'select' và 'selectCreatable') */
|
|
348
352
|
options?: any[];
|
|
349
353
|
};
|
|
354
|
+
type IColumnsVirtualizedAgg = {
|
|
355
|
+
field: string;
|
|
356
|
+
value: any;
|
|
357
|
+
/** Kiểu xem cột */
|
|
358
|
+
type?: string;
|
|
359
|
+
};
|
|
360
|
+
/** Định nghĩa cột bảng ciew ảo*/
|
|
361
|
+
type IColumnVirtualizedTable = {
|
|
362
|
+
/** Tên thuộc tính */
|
|
363
|
+
field: string;
|
|
364
|
+
/** Tiêu đề hiển thị ở header */
|
|
365
|
+
headerText?: string;
|
|
366
|
+
/** Khóa chính */
|
|
367
|
+
isPrimarykey?: boolean;
|
|
368
|
+
/** Có tính tổng */
|
|
369
|
+
haveSum?: boolean;
|
|
370
|
+
/** Có tooltip */
|
|
371
|
+
haveToolTip?: boolean;
|
|
372
|
+
/** Chiều rộng cột */
|
|
373
|
+
width?: number | string;
|
|
374
|
+
/** Chiều rộng tối thiểu */
|
|
375
|
+
minWidth?: number | string;
|
|
376
|
+
/** Chiều rộng tối đa */
|
|
377
|
+
maxWidth?: number | string;
|
|
378
|
+
/** Có hiển thị không */
|
|
379
|
+
visible?: boolean;
|
|
380
|
+
/** Kiểu xem cột */
|
|
381
|
+
type?: IViewType;
|
|
382
|
+
settingFilter?: IFSettingFilterColumn;
|
|
383
|
+
/** Căn lề */
|
|
384
|
+
textAlign?: ITextAlign;
|
|
385
|
+
/** Cố định trái/phải */
|
|
386
|
+
fixedType?: 'left' | 'right' | undefined;
|
|
387
|
+
/** Danh sách thao tác */
|
|
388
|
+
commandItems?: ICommandItem[];
|
|
389
|
+
/** Cấu hình cho kiểu numeric */
|
|
390
|
+
numericSettings?: ISettingNumericElement;
|
|
391
|
+
/** Danh sách cột con */
|
|
392
|
+
columns?: IColumnTable[];
|
|
393
|
+
/** Điều kiện disable cột */
|
|
394
|
+
disabledCondition?: (row: any) => boolean;
|
|
395
|
+
/** Template hiển thị khi không ở chế độ edit */
|
|
396
|
+
template?: (row: any, indexRow: number) => JSX.Element | string | number | undefined;
|
|
397
|
+
/** Số dòng chiếm (rowspan) */
|
|
398
|
+
rowspan?: number;
|
|
399
|
+
};
|
|
400
|
+
type IFSettingFilterColumn = {
|
|
401
|
+
/** Kiểu lọc cột */
|
|
402
|
+
filterType?: IFilterType;
|
|
403
|
+
allowFilter?: boolean;
|
|
404
|
+
options: any[];
|
|
405
|
+
};
|
|
406
|
+
type IFOrderTable = {
|
|
407
|
+
key: string;
|
|
408
|
+
direction: 'asc' | 'desc';
|
|
409
|
+
};
|
|
410
|
+
type IFFilterTable = {
|
|
411
|
+
key: string;
|
|
412
|
+
value: any;
|
|
413
|
+
ope: 'startswith' | 'endswith' | 'contains' | 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal';
|
|
414
|
+
};
|
|
350
415
|
|
|
351
416
|
type IFTableEditProps = {
|
|
352
417
|
idTable?: string;
|
|
@@ -415,6 +480,31 @@ declare const FindNodeByPath: (tree: any[], path: string) => {
|
|
|
415
480
|
firstIndex: number;
|
|
416
481
|
node: any;
|
|
417
482
|
} | null;
|
|
483
|
+
/**
|
|
484
|
+
* Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
|
|
485
|
+
* - Tạo header dạng nhiều cấp (header theo chiều dọc)
|
|
486
|
+
* - Chuyển cột thành dạng phẳng để render nội dung
|
|
487
|
+
* - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
|
|
488
|
+
*
|
|
489
|
+
* @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
|
|
490
|
+
* @returns {
|
|
491
|
+
* levels: IHeaderColumnTable[][] // Các hàng header theo cấp
|
|
492
|
+
* flat: IColumnVirtualizedTable[] // Danh sách cột phẳng
|
|
493
|
+
* objWidthFixLeft: Record<number, number> // Offset trái cho cột fixed left
|
|
494
|
+
* objWidthFixRight: Record<number, number> // Offset phải cho cột fixed right
|
|
495
|
+
* lastObjWidthFixLeft: number // Chỉ số cột cuối cùng fixed left
|
|
496
|
+
* fisrtObjWidthFixRight: number // Chỉ số cột đầu tiên fixed right
|
|
497
|
+
* }
|
|
498
|
+
*/
|
|
499
|
+
declare const calculateTableStructure: (columns: any[]) => {
|
|
500
|
+
levels: any[][];
|
|
501
|
+
flat: any[];
|
|
502
|
+
flatVisble: any[];
|
|
503
|
+
objWidthFixLeft: Record<number, number>;
|
|
504
|
+
objWidthFixRight: Record<number, number>;
|
|
505
|
+
lastObjWidthFixLeft: number;
|
|
506
|
+
fisrtObjWidthFixRight: number;
|
|
507
|
+
};
|
|
418
508
|
|
|
419
509
|
type IFDataProps$1 = {
|
|
420
510
|
buttonWidth?: number;
|
|
@@ -623,4 +713,4 @@ type IFProps = {
|
|
|
623
713
|
};
|
|
624
714
|
declare const Wizard: React.ForwardRefExoticComponent<IFProps & React.RefAttributes<unknown>>;
|
|
625
715
|
|
|
626
|
-
export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFPropsDetail, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
|
|
716
|
+
export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type IColumnVirtualizedTable, type IColumnsVirtualizedAgg, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFFilterTable, type IFOrderTable, type IFPageSize, type IFPropsDetail, type IFSettingFilterColumn, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
|
package/dist/index.js
CHANGED
|
@@ -19297,6 +19297,77 @@ const FindNodeByPath = (tree, path) => {
|
|
|
19297
19297
|
}
|
|
19298
19298
|
return { parent: current, lastIndex: levels.at(-1), firstIndex: levels.length === 1 ? levels[0] : -1, node };
|
|
19299
19299
|
};
|
|
19300
|
+
/**
|
|
19301
|
+
* Tính toán cấu trúc bảng từ dữ liệu column dạng cây:
|
|
19302
|
+
* - Tạo header dạng nhiều cấp (header theo chiều dọc)
|
|
19303
|
+
* - Chuyển cột thành dạng phẳng để render nội dung
|
|
19304
|
+
* - Tính toán vị trí cố định trái/phải (fixed column) để hiển thị sticky
|
|
19305
|
+
*
|
|
19306
|
+
* @param columns Mảng cấu trúc cây đại diện cho các cột của bảng
|
|
19307
|
+
* @returns {
|
|
19308
|
+
* levels: IHeaderColumnTable[][] // Các hàng header theo cấp
|
|
19309
|
+
* flat: IColumnVirtualizedTable[] // Danh sách cột phẳng
|
|
19310
|
+
* objWidthFixLeft: Record<number, number> // Offset trái cho cột fixed left
|
|
19311
|
+
* objWidthFixRight: Record<number, number> // Offset phải cho cột fixed right
|
|
19312
|
+
* lastObjWidthFixLeft: number // Chỉ số cột cuối cùng fixed left
|
|
19313
|
+
* fisrtObjWidthFixRight: number // Chỉ số cột đầu tiên fixed right
|
|
19314
|
+
* }
|
|
19315
|
+
*/
|
|
19316
|
+
const calculateTableStructure = (columns) => {
|
|
19317
|
+
const levels = [];
|
|
19318
|
+
const flat = [];
|
|
19319
|
+
const objWidthFixLeft = {};
|
|
19320
|
+
const objWidthFixRight = {};
|
|
19321
|
+
let maxDepth = 0;
|
|
19322
|
+
// Tính depth tối đa
|
|
19323
|
+
const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
|
|
19324
|
+
maxDepth = calculateDepth(columns);
|
|
19325
|
+
let leftTotal = 0;
|
|
19326
|
+
let rightTotal = 0;
|
|
19327
|
+
const traverse = (cols, level = 0) => {
|
|
19328
|
+
levels[level] = levels[level] || [];
|
|
19329
|
+
return cols.reduce((colspanSum, col) => {
|
|
19330
|
+
const hasChildren = (col.columns?.length ?? 0) > 0;
|
|
19331
|
+
const colspan = hasChildren ? traverse(col.columns, level + 1) : 1;
|
|
19332
|
+
const cell = {
|
|
19333
|
+
...col,
|
|
19334
|
+
columns: col.columns ?? [],
|
|
19335
|
+
colspan,
|
|
19336
|
+
rowspan: hasChildren ? 1 : maxDepth - level
|
|
19337
|
+
};
|
|
19338
|
+
levels[level].push(cell);
|
|
19339
|
+
if (!hasChildren) {
|
|
19340
|
+
const visible = col.visible !== false;
|
|
19341
|
+
const index = flat.length;
|
|
19342
|
+
const width = col.width ?? 40;
|
|
19343
|
+
cell.index = index;
|
|
19344
|
+
flat.push(cell);
|
|
19345
|
+
if (col.fixedType === 'left' && visible) {
|
|
19346
|
+
objWidthFixLeft[index] = leftTotal;
|
|
19347
|
+
leftTotal += width;
|
|
19348
|
+
}
|
|
19349
|
+
if (col.fixedType === 'right' && visible) {
|
|
19350
|
+
objWidthFixRight[index] = rightTotal;
|
|
19351
|
+
rightTotal += width;
|
|
19352
|
+
}
|
|
19353
|
+
}
|
|
19354
|
+
return colspanSum + colspan;
|
|
19355
|
+
}, 0);
|
|
19356
|
+
};
|
|
19357
|
+
traverse(columns);
|
|
19358
|
+
const flatVisble = flat.filter((e) => e.visible !== false);
|
|
19359
|
+
const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
|
|
19360
|
+
const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
|
|
19361
|
+
return {
|
|
19362
|
+
levels,
|
|
19363
|
+
flat,
|
|
19364
|
+
flatVisble,
|
|
19365
|
+
objWidthFixLeft,
|
|
19366
|
+
objWidthFixRight,
|
|
19367
|
+
lastObjWidthFixLeft,
|
|
19368
|
+
fisrtObjWidthFixRight
|
|
19369
|
+
};
|
|
19370
|
+
};
|
|
19300
19371
|
|
|
19301
19372
|
var isCheckBoxInput = (element) => element.type === 'checkbox';
|
|
19302
19373
|
|
|
@@ -23065,7 +23136,6 @@ const EditForm = React$5.forwardRef((props, ref) => {
|
|
|
23065
23136
|
const { innerWidth } = window;
|
|
23066
23137
|
const inputRef = React$5.useRef(null);
|
|
23067
23138
|
const editFormRef = React$5.useRef(null);
|
|
23068
|
-
const buttonRef = React$5.useRef(null);
|
|
23069
23139
|
const [dropdownOpen, setDropdownOpen] = React$5.useState(false);
|
|
23070
23140
|
const [isFocus, setIsFocus] = React$5.useState(false);
|
|
23071
23141
|
const [itemsField, setItemsField] = React$5.useState([]);
|
|
@@ -23251,7 +23321,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
|
|
|
23251
23321
|
}, children: jsxRuntime.jsxs(DropdownItem$1, { className: 'p-0', style: { borderRadius: '6px' }, tag: 'div', header: true, children: [jsxRuntime.jsx("div", { onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), className: 'p-1', style: {
|
|
23252
23322
|
maxHeight: menuHeight ? menuHeight : 300,
|
|
23253
23323
|
overflow: "auto"
|
|
23254
|
-
}, children: itemsField ? renderForm(itemsField) : '' }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsxRuntime.jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsxRuntime.jsx(Button$1, {
|
|
23324
|
+
}, children: itemsField ? renderForm(itemsField) : '' }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [jsxRuntime.jsx("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : '' }), !onChangeField ? jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [isClearable && jsxRuntime.jsx(Button$1, { className: 'btn me-50 py-25 px-50', outline: true, onClick: () => {
|
|
23255
23325
|
itemsField.forEach((e) => {
|
|
23256
23326
|
if (e.type === 'numeric') {
|
|
23257
23327
|
setValue(e.name, 0);
|
|
@@ -23264,7 +23334,7 @@ const EditForm = React$5.forwardRef((props, ref) => {
|
|
|
23264
23334
|
if (e.code === 'Tab') {
|
|
23265
23335
|
closeMenu();
|
|
23266
23336
|
}
|
|
23267
|
-
}, children: t('Clear') }), jsxRuntime.jsx(Button$1, {
|
|
23337
|
+
}, children: t('Clear') }), jsxRuntime.jsx(Button$1, { color: 'primary', className: 'btn btn-primary py-25 px-50', onClick: handleSubmit(handleOnSubmit), onKeyDown: (e) => {
|
|
23268
23338
|
if (e.code === 'Tab') {
|
|
23269
23339
|
closeMenu();
|
|
23270
23340
|
}
|
|
@@ -23518,7 +23588,9 @@ const CommandElement = (props) => {
|
|
|
23518
23588
|
}), color: item.color ? item.color : '#000', onClick: (e) => {
|
|
23519
23589
|
handleCommandClick(item.id, rowData, indexRow);
|
|
23520
23590
|
if (indexRow === indexFocus) {
|
|
23521
|
-
setIndexFocus
|
|
23591
|
+
if (setIndexFocus) {
|
|
23592
|
+
setIndexFocus(-1);
|
|
23593
|
+
}
|
|
23522
23594
|
}
|
|
23523
23595
|
e.preventDefault();
|
|
23524
23596
|
}, children: [item.icon && jsxRuntime.jsx(IconCustom, { iconName: item.icon, size: 16 }), jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? '') })] }, `command-${index}`));
|
|
@@ -42630,24 +42702,6 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
42630
42702
|
setHeaderColumns(arrHeaderColumns);
|
|
42631
42703
|
setContentColumns(arrContentColumns);
|
|
42632
42704
|
}, [columns]);
|
|
42633
|
-
React$5.useEffect(() => {
|
|
42634
|
-
const arrHeaderColumns = [];
|
|
42635
|
-
const arrContentColumns = [];
|
|
42636
|
-
let headerLevelRow = 0;
|
|
42637
|
-
if (levelCol) {
|
|
42638
|
-
headerLevelRow = levelCol;
|
|
42639
|
-
}
|
|
42640
|
-
else {
|
|
42641
|
-
headerLevelRow = stretchColumn(columns, 0);
|
|
42642
|
-
setLevelCol(headerLevelRow);
|
|
42643
|
-
}
|
|
42644
|
-
for (let i = 0; i < headerLevelRow; i++) {
|
|
42645
|
-
arrHeaderColumns.push([]);
|
|
42646
|
-
}
|
|
42647
|
-
getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
|
|
42648
|
-
setHeaderColumns(arrHeaderColumns);
|
|
42649
|
-
setContentColumns(arrContentColumns);
|
|
42650
|
-
}, [columns]);
|
|
42651
42705
|
const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
|
|
42652
42706
|
array.forEach((item) => {
|
|
42653
42707
|
const ele = { ...item, visible: item.visible, rowspan: 1, index: 0 };
|
|
@@ -65360,6 +65414,7 @@ exports.SelectTable = SelectTable;
|
|
|
65360
65414
|
exports.SelectTableTree = SelectTableTree;
|
|
65361
65415
|
exports.TabsMenuComponent = TabsMenuComponent;
|
|
65362
65416
|
exports.Wizard = Wizard;
|
|
65417
|
+
exports.calculateTableStructure = calculateTableStructure;
|
|
65363
65418
|
exports.checkDecimalSeparator = checkDecimalSeparator;
|
|
65364
65419
|
exports.checkThousandSeparator = checkThousandSeparator;
|
|
65365
65420
|
exports["default"] = TableEdit;
|