es-grid-template 1.8.67 → 1.8.69
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/useLazyKVMap.d.ts +1 -1
- package/es/grid-component/hooks/utils.d.ts +1 -1
- package/es/grid-component/index.d.ts +1 -1
- package/es/grid-component/type.d.ts +570 -0
- package/es/grid-component/type.js +1 -490
- package/es/table-component/ColumnsChoose.d.ts +1 -1
- package/es/table-component/ColumnsChoose.js +0 -2
- package/es/table-component/ContextMenu.d.ts +1 -2
- package/es/table-component/ContextMenu.js +0 -1
- package/es/table-component/InternalTable.d.ts +1 -2
- package/es/table-component/InternalTable.js +1 -32
- package/es/table-component/TableContainer.d.ts +1 -1
- package/es/table-component/TableContainer.js +4 -2
- package/es/table-component/TableContainerEdit.d.ts +1 -1
- package/es/table-component/TableContainerEdit.js +4 -2
- package/es/table-component/body/EditableCell.d.ts +1 -1
- package/es/table-component/body/EditableCell.js +1 -18
- package/es/table-component/body/TableBody.d.ts +1 -1
- package/es/table-component/body/TableBodyCell.d.ts +1 -1
- package/es/table-component/body/TableBodyCellEdit.d.ts +1 -1
- package/es/table-component/body/TableBodyRow.d.ts +1 -1
- package/es/table-component/components/ControlCheckbox.d.ts +1 -1
- package/es/table-component/components/EditForm/EditForm.js +0 -1
- package/es/table-component/components/InputControl/InputControl.js +0 -3
- package/es/table-component/components/async-select/index.d.ts +1 -1
- package/es/table-component/components/async-select/index.js +0 -3
- package/es/table-component/components/async-table-select/index.d.ts +1 -1
- package/es/table-component/components/async-table-select/index.js +0 -4
- package/es/table-component/components/checkbox-filter/CheckboxFilter.js +6 -2
- package/es/table-component/components/checkbox-filter/FilterSearch.d.ts +1 -1
- package/es/table-component/components/checkbox-filter/FilterSearch.js +1 -1
- package/es/table-component/components/command/Command.d.ts +1 -1
- package/es/table-component/components/number/index.d.ts +3 -2
- package/es/table-component/components/number/index.js +0 -8
- package/es/table-component/components/number-range/index.d.ts +3 -2
- package/es/table-component/components/number-range/index.js +0 -3
- package/es/table-component/footer/TableFooterRow.js +1 -22
- package/es/table-component/header/TableHead.js +0 -20
- package/es/table-component/header/TableHeadCell.js +0 -5
- package/es/table-component/header/TableHeadCell2.js +4 -2
- package/es/table-component/header/TableHeadGroupCell.js +0 -23
- package/es/table-component/header/renderFilter.d.ts +1 -1
- package/es/table-component/hook/useColumns.d.ts +1 -1
- package/es/table-component/hook/useFilterOperator.d.ts +2 -2
- package/es/table-component/hook/utils.d.ts +1 -1
- package/es/table-component/hook/utils.js +0 -3
- package/es/table-component/index.d.ts +1 -1
- package/es/table-component/index.js +0 -3
- package/es/table-component/table/Grid.d.ts +1 -1
- package/es/table-component/table/Grid.js +3 -7
- package/es/table-component/table/TableWrapper.d.ts +1 -1
- package/es/table-component/useContext.d.ts +2 -1
- package/es/table-virtuoso/InternalTable.d.ts +1 -1
- package/es/table-virtuoso/InternalTable.js +2 -1
- package/es/table-virtuoso/body/TableBodyCell.d.ts +1 -1
- package/es/table-virtuoso/body/TableBodyCell.js +1 -1
- package/es/table-virtuoso/body/TableBodyRow.d.ts +2 -2
- package/es/table-virtuoso/body/TableBodyRow.js +3 -1
- package/es/table-virtuoso/header/TableHeadCell.js +1 -3
- package/es/table-virtuoso/header/renderFilter.d.ts +1 -1
- package/es/table-virtuoso/header/renderFilter.js +0 -4
- package/es/table-virtuoso/hook/utils.d.ts +1 -1
- package/es/table-virtuoso/style.js +1 -1
- package/es/table-virtuoso/table/Grid.d.ts +1 -1
- package/es/table-virtuoso/table/Grid.js +2 -25
- package/es/table-virtuoso/table/TableContainer.d.ts +1 -1
- package/es/table-virtuoso/table/TableContainer.js +0 -2
- package/es/table-virtuoso/table/TableWrapper.d.ts +1 -1
- package/es/table-virtuoso/table/TableWrapper.js +3 -19
- package/es/table-virtuoso/useContext.d.ts +1 -1
- package/lib/grid-component/hooks/useLazyKVMap.d.ts +1 -1
- package/lib/grid-component/hooks/utils.d.ts +1 -1
- package/lib/grid-component/index.d.ts +1 -1
- package/lib/grid-component/type.d.ts +570 -0
- package/lib/grid-component/type.js +4 -490
- package/lib/table-component/ColumnsChoose.d.ts +1 -1
- package/lib/table-component/ColumnsChoose.js +0 -2
- package/lib/table-component/ContextMenu.d.ts +1 -2
- package/lib/table-component/ContextMenu.js +0 -2
- package/lib/table-component/InternalTable.d.ts +1 -2
- package/lib/table-component/InternalTable.js +1 -28
- package/lib/table-component/TableContainer.d.ts +1 -1
- package/lib/table-component/TableContainer.js +4 -2
- package/lib/table-component/TableContainerEdit.d.ts +1 -1
- package/lib/table-component/TableContainerEdit.js +4 -2
- package/lib/table-component/body/EditableCell.d.ts +1 -1
- package/lib/table-component/body/EditableCell.js +0 -10
- package/lib/table-component/body/TableBody.d.ts +1 -1
- package/lib/table-component/body/TableBodyCell.d.ts +1 -1
- package/lib/table-component/body/TableBodyCellEdit.d.ts +1 -1
- package/lib/table-component/body/TableBodyRow.d.ts +1 -1
- package/lib/table-component/components/ControlCheckbox.d.ts +1 -1
- package/lib/table-component/components/EditForm/EditForm.js +0 -2
- package/lib/table-component/components/InputControl/InputControl.js +0 -4
- package/lib/table-component/components/async-select/index.d.ts +1 -1
- package/lib/table-component/components/async-select/index.js +0 -2
- package/lib/table-component/components/async-table-select/index.d.ts +1 -1
- package/lib/table-component/components/async-table-select/index.js +0 -4
- package/lib/table-component/components/checkbox-filter/CheckboxFilter.js +6 -2
- package/lib/table-component/components/checkbox-filter/FilterSearch.d.ts +1 -1
- package/lib/table-component/components/checkbox-filter/FilterSearch.js +1 -1
- package/lib/table-component/components/command/Command.d.ts +1 -1
- package/lib/table-component/components/number/index.d.ts +3 -2
- package/lib/table-component/components/number/index.js +0 -8
- package/lib/table-component/components/number-range/index.d.ts +3 -2
- package/lib/table-component/components/number-range/index.js +0 -3
- package/lib/table-component/footer/TableFooterRow.js +1 -23
- package/lib/table-component/header/TableHead.js +0 -21
- package/lib/table-component/header/TableHeadCell.js +0 -5
- package/lib/table-component/header/TableHeadCell2.js +4 -2
- package/lib/table-component/header/TableHeadGroupCell.js +0 -23
- package/lib/table-component/header/renderFilter.d.ts +1 -1
- package/lib/table-component/hook/useColumns.d.ts +1 -1
- package/lib/table-component/hook/useFilterOperator.d.ts +2 -2
- package/lib/table-component/hook/utils.d.ts +1 -1
- package/lib/table-component/hook/utils.js +0 -4
- package/lib/table-component/index.d.ts +1 -1
- package/lib/table-component/index.js +0 -1
- package/lib/table-component/table/Grid.d.ts +1 -1
- package/lib/table-component/table/Grid.js +3 -6
- package/lib/table-component/table/TableWrapper.d.ts +1 -1
- package/lib/table-component/useContext.d.ts +2 -1
- package/lib/table-virtuoso/InternalTable.d.ts +1 -1
- package/lib/table-virtuoso/InternalTable.js +3 -1
- package/lib/table-virtuoso/body/TableBodyCell.d.ts +1 -1
- package/lib/table-virtuoso/body/TableBodyCell.js +1 -1
- package/lib/table-virtuoso/body/TableBodyRow.d.ts +2 -2
- package/lib/table-virtuoso/body/TableBodyRow.js +3 -1
- package/lib/table-virtuoso/header/TableHeadCell.js +4 -6
- package/lib/table-virtuoso/header/renderFilter.d.ts +1 -1
- package/lib/table-virtuoso/header/renderFilter.js +0 -4
- package/lib/table-virtuoso/hook/utils.d.ts +1 -1
- package/lib/table-virtuoso/style.js +1 -1
- package/lib/table-virtuoso/table/Grid.d.ts +1 -1
- package/lib/table-virtuoso/table/Grid.js +2 -25
- package/lib/table-virtuoso/table/TableContainer.d.ts +1 -1
- package/lib/table-virtuoso/table/TableContainer.js +0 -2
- package/lib/table-virtuoso/table/TableWrapper.d.ts +1 -1
- package/lib/table-virtuoso/table/TableWrapper.js +3 -19
- package/lib/table-virtuoso/useContext.d.ts +1 -1
- package/package.json +1 -1
- package/es/table-component/type.d.ts +0 -567
- package/es/table-component/type.js +0 -1
- package/es/table-virtuoso/hook/constant.d.ts +0 -73
- package/es/table-virtuoso/hook/constant.js +0 -240
- package/es/table-virtuoso/hook/convert.d.ts +0 -1
- package/es/table-virtuoso/hook/convert.js +0 -28
- package/es/table-virtuoso/hook/useColumns.d.ts +0 -28
- package/es/table-virtuoso/hook/useColumns.js +0 -302
- package/es/table-virtuoso/hook/useFilterOperator.d.ts +0 -7
- package/es/table-virtuoso/hook/useFilterOperator.js +0 -33
- package/es/table-virtuoso/style.scss +0 -1441
- package/es/table-virtuoso/type.d.ts +0 -0
- package/es/table-virtuoso/type.js +0 -785
- package/lib/table-component/type.d.ts +0 -567
- package/lib/table-component/type.js +0 -5
- package/lib/table-virtuoso/hook/constant.d.ts +0 -73
- package/lib/table-virtuoso/hook/constant.js +0 -247
- package/lib/table-virtuoso/hook/convert.d.ts +0 -1
- package/lib/table-virtuoso/hook/convert.js +0 -34
- package/lib/table-virtuoso/hook/useColumns.d.ts +0 -28
- package/lib/table-virtuoso/hook/useColumns.js +0 -315
- package/lib/table-virtuoso/hook/useFilterOperator.d.ts +0 -7
- package/lib/table-virtuoso/hook/useFilterOperator.js +0 -40
- package/lib/table-virtuoso/style.scss +0 -1441
- package/lib/table-virtuoso/type.d.ts +0 -0
- package/lib/table-virtuoso/type.js +0 -786
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
export const defaultWidth = 100;
|
|
2
|
-
export const defaultRowHeight = 35;
|
|
3
|
-
export const numberOperator = [{
|
|
4
|
-
value: 'equal',
|
|
5
|
-
label: 'Equal',
|
|
6
|
-
key: '=='
|
|
7
|
-
}, {
|
|
8
|
-
value: 'greaterthan',
|
|
9
|
-
label: 'Greater than',
|
|
10
|
-
key: '>'
|
|
11
|
-
}, {
|
|
12
|
-
value: 'greaterthanorequal',
|
|
13
|
-
label: 'Greater than or equal',
|
|
14
|
-
key: '>='
|
|
15
|
-
}, {
|
|
16
|
-
value: 'lessthan',
|
|
17
|
-
label: 'Less than',
|
|
18
|
-
key: '<'
|
|
19
|
-
}, {
|
|
20
|
-
value: 'lessthanorequal',
|
|
21
|
-
label: 'Less than or equal',
|
|
22
|
-
key: '<='
|
|
23
|
-
}, {
|
|
24
|
-
value: 'notequal',
|
|
25
|
-
label: 'Not equal',
|
|
26
|
-
key: '!='
|
|
27
|
-
}];
|
|
28
|
-
export const stringOperator = [{
|
|
29
|
-
value: 'startswith',
|
|
30
|
-
key: '_=',
|
|
31
|
-
label: 'Starts with'
|
|
32
|
-
}, {
|
|
33
|
-
value: 'endswith',
|
|
34
|
-
key: '|=',
|
|
35
|
-
label: 'Ends with'
|
|
36
|
-
}, {
|
|
37
|
-
value: 'contains',
|
|
38
|
-
key: '~=',
|
|
39
|
-
label: 'Contains'
|
|
40
|
-
}, {
|
|
41
|
-
value: 'equal',
|
|
42
|
-
key: '==',
|
|
43
|
-
label: 'Equal'
|
|
44
|
-
}, {
|
|
45
|
-
value: 'notequal',
|
|
46
|
-
key: '!=',
|
|
47
|
-
label: 'Not equal'
|
|
48
|
-
}];
|
|
49
|
-
export const dateOperator = [{
|
|
50
|
-
value: 'equal',
|
|
51
|
-
key: '==',
|
|
52
|
-
label: 'Equal'
|
|
53
|
-
}, {
|
|
54
|
-
value: 'notequal',
|
|
55
|
-
key: '!=',
|
|
56
|
-
label: 'Not equal'
|
|
57
|
-
}, {
|
|
58
|
-
value: 'greaterthan',
|
|
59
|
-
key: '>',
|
|
60
|
-
label: 'Greater than'
|
|
61
|
-
}, {
|
|
62
|
-
value: 'lessthan',
|
|
63
|
-
key: '<',
|
|
64
|
-
label: 'Less than'
|
|
65
|
-
}];
|
|
66
|
-
export const dateTimeOperator = [{
|
|
67
|
-
value: 'equal',
|
|
68
|
-
key: '==',
|
|
69
|
-
label: 'Equal'
|
|
70
|
-
}, {
|
|
71
|
-
value: 'notequal',
|
|
72
|
-
key: '!=',
|
|
73
|
-
label: 'Not equal'
|
|
74
|
-
}, {
|
|
75
|
-
value: 'greaterthan',
|
|
76
|
-
key: '>',
|
|
77
|
-
label: 'Greater than'
|
|
78
|
-
}, {
|
|
79
|
-
value: 'lessthan',
|
|
80
|
-
key: '<',
|
|
81
|
-
label: 'Less than'
|
|
82
|
-
}];
|
|
83
|
-
export const booleanOperator = [{
|
|
84
|
-
value: 'equal',
|
|
85
|
-
key: '==',
|
|
86
|
-
label: 'Equal'
|
|
87
|
-
}, {
|
|
88
|
-
value: 'notequal',
|
|
89
|
-
key: '!=',
|
|
90
|
-
label: 'Not equal'
|
|
91
|
-
}];
|
|
92
|
-
export const translateOption = (options, t) => {
|
|
93
|
-
if (!t) {
|
|
94
|
-
return options;
|
|
95
|
-
}
|
|
96
|
-
return options.map(it => ({
|
|
97
|
-
...it,
|
|
98
|
-
label: t(it.label)
|
|
99
|
-
}));
|
|
100
|
-
};
|
|
101
|
-
export const transferFontSize = {
|
|
102
|
-
6: 8,
|
|
103
|
-
7: 9,
|
|
104
|
-
8: 11,
|
|
105
|
-
9: 12,
|
|
106
|
-
10: 13,
|
|
107
|
-
11: 15,
|
|
108
|
-
12: 16,
|
|
109
|
-
13: 17,
|
|
110
|
-
14: 19,
|
|
111
|
-
15: 20,
|
|
112
|
-
16: 21,
|
|
113
|
-
17: 23,
|
|
114
|
-
18: 24,
|
|
115
|
-
19: 25,
|
|
116
|
-
20: 27,
|
|
117
|
-
21: 28,
|
|
118
|
-
22: 29,
|
|
119
|
-
24: 32,
|
|
120
|
-
26: 35,
|
|
121
|
-
27: 36,
|
|
122
|
-
28: 37
|
|
123
|
-
};
|
|
124
|
-
export const defaultDateFormat = 'd/m/Y';
|
|
125
|
-
export const defaultDateTimeFormat = 'd/m/Y H:i';
|
|
126
|
-
export const defaultTimeFormat = 'H:i';
|
|
127
|
-
export const defaultPageSizes = [20, 30, 50, 100];
|
|
128
|
-
export const alignToFlex = {
|
|
129
|
-
center: 'center',
|
|
130
|
-
left: 'start',
|
|
131
|
-
right: 'end'
|
|
132
|
-
};
|
|
133
|
-
export const optionsSize = [{
|
|
134
|
-
label: 'letter',
|
|
135
|
-
value: 'letter',
|
|
136
|
-
width: 21.59,
|
|
137
|
-
height: 27.94
|
|
138
|
-
}, {
|
|
139
|
-
label: 'A3',
|
|
140
|
-
value: 'a3',
|
|
141
|
-
width: 27.94,
|
|
142
|
-
height: 42
|
|
143
|
-
}, {
|
|
144
|
-
label: 'A4',
|
|
145
|
-
value: 'a4',
|
|
146
|
-
width: 21,
|
|
147
|
-
height: 29.7
|
|
148
|
-
}];
|
|
149
|
-
export const paperSize = {
|
|
150
|
-
a4: {
|
|
151
|
-
width: 21,
|
|
152
|
-
height: 29.7
|
|
153
|
-
},
|
|
154
|
-
a3: {
|
|
155
|
-
width: 27.94,
|
|
156
|
-
height: 42
|
|
157
|
-
},
|
|
158
|
-
letter: {
|
|
159
|
-
width: 21.59,
|
|
160
|
-
height: 27.94
|
|
161
|
-
}
|
|
162
|
-
};
|
|
163
|
-
export const optionFont = [{
|
|
164
|
-
value: 'Times New Roman',
|
|
165
|
-
label: 'Times New Roman'
|
|
166
|
-
}, {
|
|
167
|
-
value: 'Calibri',
|
|
168
|
-
label: 'Calibri (Body)'
|
|
169
|
-
}];
|
|
170
|
-
// portrait' | 'landscape'
|
|
171
|
-
export const optionsPaperOrientation = [{
|
|
172
|
-
value: 'portrait',
|
|
173
|
-
label: 'portrait'
|
|
174
|
-
}, {
|
|
175
|
-
value: 'landscape',
|
|
176
|
-
label: 'landscape'
|
|
177
|
-
}];
|
|
178
|
-
export const optionFontSize = [{
|
|
179
|
-
value: 8,
|
|
180
|
-
label: '8'
|
|
181
|
-
}, {
|
|
182
|
-
value: 9,
|
|
183
|
-
label: '9'
|
|
184
|
-
}, {
|
|
185
|
-
value: 10,
|
|
186
|
-
label: '10'
|
|
187
|
-
}, {
|
|
188
|
-
value: 11,
|
|
189
|
-
label: '11'
|
|
190
|
-
}, {
|
|
191
|
-
value: 12,
|
|
192
|
-
label: '12'
|
|
193
|
-
}, {
|
|
194
|
-
value: 13,
|
|
195
|
-
label: '13'
|
|
196
|
-
}, {
|
|
197
|
-
value: 14,
|
|
198
|
-
label: '14'
|
|
199
|
-
}, {
|
|
200
|
-
value: 16,
|
|
201
|
-
label: '16'
|
|
202
|
-
}, {
|
|
203
|
-
value: 18,
|
|
204
|
-
label: '18'
|
|
205
|
-
}, {
|
|
206
|
-
value: 24,
|
|
207
|
-
label: '24'
|
|
208
|
-
}, {
|
|
209
|
-
value: 36,
|
|
210
|
-
label: '36'
|
|
211
|
-
}, {
|
|
212
|
-
value: 48,
|
|
213
|
-
label: '48'
|
|
214
|
-
}];
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* Sort order for BaseTable
|
|
218
|
-
*/
|
|
219
|
-
const SortOrder = {
|
|
220
|
-
/**
|
|
221
|
-
* Sort data in ascending order
|
|
222
|
-
*/
|
|
223
|
-
ascend: 'Ascending',
|
|
224
|
-
/**
|
|
225
|
-
* Sort data in descending order
|
|
226
|
-
*/
|
|
227
|
-
descend: 'Descending'
|
|
228
|
-
};
|
|
229
|
-
export default SortOrder;
|
|
230
|
-
export const valueToBoolean = {
|
|
231
|
-
true: true,
|
|
232
|
-
false: false,
|
|
233
|
-
1: true,
|
|
234
|
-
0: false
|
|
235
|
-
};
|
|
236
|
-
export const booleanToValue = {
|
|
237
|
-
true: 1,
|
|
238
|
-
false: 0
|
|
239
|
-
};
|
|
240
|
-
export const nonActionColumn = ['#', 'command', 'selection_column'];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function convertColumns(columns: any[]): any[];
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { createColumnHelper } from '@tanstack/react-table';
|
|
2
|
-
const columnHelper = createColumnHelper();
|
|
3
|
-
export function convertColumns(columns) {
|
|
4
|
-
return columns.map(col => {
|
|
5
|
-
if (col.columns) {
|
|
6
|
-
// Group column
|
|
7
|
-
return columnHelper.group({
|
|
8
|
-
...col,
|
|
9
|
-
columns: convertColumns(col.columns) // đệ quy
|
|
10
|
-
});
|
|
11
|
-
} else {
|
|
12
|
-
// Accessor column
|
|
13
|
-
let accessor;
|
|
14
|
-
|
|
15
|
-
// Ưu tiên accessorKey nếu có, nếu không thì dùng hàm row => row[col.id]
|
|
16
|
-
if (col.accessorKey) {
|
|
17
|
-
accessor = col.accessorKey;
|
|
18
|
-
} else if (col.id) {
|
|
19
|
-
accessor = row => row[col.id];
|
|
20
|
-
} else {
|
|
21
|
-
throw new Error('Column không có accessorKey hoặc id');
|
|
22
|
-
}
|
|
23
|
-
return columnHelper.accessor(accessor, {
|
|
24
|
-
...col
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { Dispatch, SetStateAction } from "react";
|
|
2
|
-
import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../table-component/type';
|
|
3
|
-
import type { Cell, ColumnDef } from '@tanstack/react-table';
|
|
4
|
-
export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
|
|
5
|
-
export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
|
|
6
|
-
t?: any;
|
|
7
|
-
columns: ColumnsTable<T>;
|
|
8
|
-
format?: IFormat;
|
|
9
|
-
editAble?: boolean;
|
|
10
|
-
}): ColumnDef<T, any>[];
|
|
11
|
-
export type ToggleRow<T> = {
|
|
12
|
-
e: any;
|
|
13
|
-
cell: Cell<T, unknown>;
|
|
14
|
-
selectionSettings?: SelectionSettings;
|
|
15
|
-
isSelectionChange?: {
|
|
16
|
-
isChange: boolean;
|
|
17
|
-
type: string;
|
|
18
|
-
rowData: T;
|
|
19
|
-
rowsData: T[];
|
|
20
|
-
};
|
|
21
|
-
setIsSelectionChange: Dispatch<SetStateAction<{
|
|
22
|
-
isChange: boolean;
|
|
23
|
-
type: string;
|
|
24
|
-
rowData: T;
|
|
25
|
-
rowsData: T[];
|
|
26
|
-
}>>;
|
|
27
|
-
};
|
|
28
|
-
export declare const toggleRowSelection: <T>(props: ToggleRow<T>) => void;
|
|
@@ -1,302 +0,0 @@
|
|
|
1
|
-
import React, { Fragment } from 'react';
|
|
2
|
-
// import ControlCheckbox from '../components/ControlCheckbox'
|
|
3
|
-
import { checkDecimalSeparator, checkThousandSeparator, countUnselectedChildren, excludeItems, getAllChildren, getFormat, isColor, isEmpty, sortByType, toggleRowAndChildren } from "./utils";
|
|
4
|
-
import { numericFormatter } from 'react-numeric-component';
|
|
5
|
-
import dayjs from 'dayjs';
|
|
6
|
-
import moment from 'moment';
|
|
7
|
-
import ControlCheckbox from "../../table-component/components/ControlCheckbox";
|
|
8
|
-
export const renderValueCell = (column, value, record, rowIndex, colIndex, format, editAble) => {
|
|
9
|
-
switch (column?.type) {
|
|
10
|
-
case 'number':
|
|
11
|
-
const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
|
|
12
|
-
const cellFormat = getFormat(colFormat, format);
|
|
13
|
-
const thousandSeparator = cellFormat?.thousandSeparator;
|
|
14
|
-
const decimalSeparator = cellFormat?.decimalSeparator;
|
|
15
|
-
const dec = cellFormat?.decimalScale;
|
|
16
|
-
|
|
17
|
-
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
|
|
18
|
-
|
|
19
|
-
const tmpval = typeof value === 'string' ? Number(value) : value;
|
|
20
|
-
const numericFormatProps = {
|
|
21
|
-
thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
|
|
22
|
-
decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
|
|
23
|
-
allowNegative: cellFormat?.allowNegative ?? true,
|
|
24
|
-
prefix: cellFormat?.prefix,
|
|
25
|
-
suffix: cellFormat?.suffix,
|
|
26
|
-
decimalScale: dec,
|
|
27
|
-
fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
// if ( typeof value === "string") {
|
|
31
|
-
// const ttt = removeNumericFormat(value, undefined, numericFormatProps )
|
|
32
|
-
//
|
|
33
|
-
// }
|
|
34
|
-
|
|
35
|
-
const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
|
|
36
|
-
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
|
|
37
|
-
|
|
38
|
-
return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
|
|
39
|
-
case 'date':
|
|
40
|
-
return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
|
|
41
|
-
case 'time':
|
|
42
|
-
return value ? value : '';
|
|
43
|
-
case 'year':
|
|
44
|
-
const year = value ? moment(value).format('yyyy') : '';
|
|
45
|
-
return /*#__PURE__*/React.createElement(Fragment, null, year);
|
|
46
|
-
case 'datetime':
|
|
47
|
-
return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
|
|
48
|
-
case 'boolean':
|
|
49
|
-
return value ? 'true' : 'false';
|
|
50
|
-
case 'color':
|
|
51
|
-
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
52
|
-
className: 'w-100 h-100',
|
|
53
|
-
style: {
|
|
54
|
-
backgroundColor: isColor(value) ? value : '#fff',
|
|
55
|
-
border: '1px solid #f0f0f0',
|
|
56
|
-
height: '100%',
|
|
57
|
-
minHeight: 20
|
|
58
|
-
}
|
|
59
|
-
}));
|
|
60
|
-
case 'checkbox':
|
|
61
|
-
return /*#__PURE__*/React.createElement(ControlCheckbox, {
|
|
62
|
-
column: column,
|
|
63
|
-
record: record,
|
|
64
|
-
rowIndex: rowIndex,
|
|
65
|
-
colIndex: colIndex,
|
|
66
|
-
checked: !!value,
|
|
67
|
-
checkValue: value,
|
|
68
|
-
editAble: editAble
|
|
69
|
-
});
|
|
70
|
-
case 'file':
|
|
71
|
-
const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
|
|
72
|
-
return value ? nameFile : '';
|
|
73
|
-
default:
|
|
74
|
-
if (Array.isArray(value)) {
|
|
75
|
-
return value.join(', ');
|
|
76
|
-
}
|
|
77
|
-
return value;
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
export function convertToTanStackColumns({
|
|
81
|
-
t,
|
|
82
|
-
columns,
|
|
83
|
-
format,
|
|
84
|
-
editAble
|
|
85
|
-
}) {
|
|
86
|
-
return sortByType(columns).map(col => {
|
|
87
|
-
const {
|
|
88
|
-
headerText,
|
|
89
|
-
headerTemplate,
|
|
90
|
-
field,
|
|
91
|
-
width,
|
|
92
|
-
allowResizing,
|
|
93
|
-
minWidth,
|
|
94
|
-
template,
|
|
95
|
-
allowSortering,
|
|
96
|
-
allowFiltering
|
|
97
|
-
} = col;
|
|
98
|
-
const {
|
|
99
|
-
children,
|
|
100
|
-
...restProps
|
|
101
|
-
} = col;
|
|
102
|
-
const newCol = {
|
|
103
|
-
header: () => {
|
|
104
|
-
if (headerTemplate) {
|
|
105
|
-
if (typeof headerTemplate === 'function') {
|
|
106
|
-
return headerTemplate(col);
|
|
107
|
-
} else {
|
|
108
|
-
return headerTemplate;
|
|
109
|
-
}
|
|
110
|
-
} else {
|
|
111
|
-
return t ? t(headerText) : headerText;
|
|
112
|
-
// return field
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
cell: props => {
|
|
116
|
-
const {
|
|
117
|
-
getValue,
|
|
118
|
-
cell
|
|
119
|
-
} = props;
|
|
120
|
-
const cellValue = props.renderValue() ?? null;
|
|
121
|
-
const record = cell.row.original;
|
|
122
|
-
const colIndex = cell.column.getIndex();
|
|
123
|
-
const rowIndex = cell.row.index;
|
|
124
|
-
if (template) {
|
|
125
|
-
if (typeof template === 'function') {
|
|
126
|
-
return template({
|
|
127
|
-
field: field ?? '',
|
|
128
|
-
index: cell.row.index,
|
|
129
|
-
rowData: cell.row.original,
|
|
130
|
-
value: getValue()
|
|
131
|
-
});
|
|
132
|
-
} else {
|
|
133
|
-
return template;
|
|
134
|
-
}
|
|
135
|
-
} else {
|
|
136
|
-
return /*#__PURE__*/React.createElement(Fragment, null, renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
enableResizing: allowResizing !== false,
|
|
140
|
-
// enableHiding: false,
|
|
141
|
-
// enableResizing: true,
|
|
142
|
-
id: field,
|
|
143
|
-
size: width,
|
|
144
|
-
accessorKey: field,
|
|
145
|
-
sortDescFirst: false,
|
|
146
|
-
minSize: minWidth,
|
|
147
|
-
// maxSize: maxWidth,
|
|
148
|
-
enableSorting: allowSortering !== false,
|
|
149
|
-
// enableSorting: false,
|
|
150
|
-
// enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
|
|
151
|
-
enableColumnFilter: allowFiltering !== false
|
|
152
|
-
};
|
|
153
|
-
if (children) {
|
|
154
|
-
newCol.size = undefined;
|
|
155
|
-
// @ts-ignore
|
|
156
|
-
newCol.columns = convertToTanStackColumns({
|
|
157
|
-
columns: children,
|
|
158
|
-
editAble,
|
|
159
|
-
format,
|
|
160
|
-
t
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
const meta = {
|
|
164
|
-
...restProps
|
|
165
|
-
};
|
|
166
|
-
if (Object.keys(meta).length > 0) {
|
|
167
|
-
newCol.meta = meta;
|
|
168
|
-
}
|
|
169
|
-
return newCol;
|
|
170
|
-
});
|
|
171
|
-
}
|
|
172
|
-
export const toggleRowSelection = props => {
|
|
173
|
-
const {
|
|
174
|
-
selectionSettings,
|
|
175
|
-
cell,
|
|
176
|
-
isSelectionChange,
|
|
177
|
-
e,
|
|
178
|
-
setIsSelectionChange
|
|
179
|
-
} = props;
|
|
180
|
-
const {
|
|
181
|
-
row
|
|
182
|
-
} = cell;
|
|
183
|
-
const {
|
|
184
|
-
rowsData
|
|
185
|
-
} = isSelectionChange ?? {};
|
|
186
|
-
const prevSelected = rowsData && rowsData.length > 0 ? [...rowsData] : [];
|
|
187
|
-
if (selectionSettings?.checkStrictly || selectionSettings?.type === 'single') {
|
|
188
|
-
row.getToggleSelectedHandler()(e);
|
|
189
|
-
if (row.getIsSelected()) {
|
|
190
|
-
// đã chọn
|
|
191
|
-
|
|
192
|
-
// xóa row ra list selected
|
|
193
|
-
const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
|
|
194
|
-
setIsSelectionChange({
|
|
195
|
-
isChange: true,
|
|
196
|
-
type: 'rowSelected',
|
|
197
|
-
rowData: row.original,
|
|
198
|
-
rowsData: newRowsSelected ?? []
|
|
199
|
-
});
|
|
200
|
-
} else {
|
|
201
|
-
// chưa selected
|
|
202
|
-
|
|
203
|
-
const checkedRows = [...prevSelected, row];
|
|
204
|
-
setIsSelectionChange({
|
|
205
|
-
isChange: true,
|
|
206
|
-
type: 'rowSelected',
|
|
207
|
-
rowData: row.original,
|
|
208
|
-
rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
|
|
209
|
-
});
|
|
210
|
-
}
|
|
211
|
-
return;
|
|
212
|
-
}
|
|
213
|
-
if (row.subRows && row.subRows.length > 0) {
|
|
214
|
-
// click vào row cha
|
|
215
|
-
|
|
216
|
-
const allChild = getAllChildren(row);
|
|
217
|
-
toggleRowAndChildren(row, !row.getIsSelected());
|
|
218
|
-
if (row.getIsSelected()) {
|
|
219
|
-
// đã chọn
|
|
220
|
-
|
|
221
|
-
// const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
|
|
222
|
-
|
|
223
|
-
const newRowsSelected = excludeItems(prevSelected, [...allChild, row]);
|
|
224
|
-
setIsSelectionChange({
|
|
225
|
-
isChange: true,
|
|
226
|
-
type: 'rowSelected',
|
|
227
|
-
rowData: row.original,
|
|
228
|
-
rowsData: newRowsSelected ?? []
|
|
229
|
-
});
|
|
230
|
-
} else {
|
|
231
|
-
// chưa selected
|
|
232
|
-
|
|
233
|
-
let checkedRows = [];
|
|
234
|
-
if (row.subRows && row.subRows.length > 0) {
|
|
235
|
-
checkedRows = [...prevSelected, row, ...allChild];
|
|
236
|
-
} else {
|
|
237
|
-
checkedRows = [...prevSelected, row];
|
|
238
|
-
}
|
|
239
|
-
setIsSelectionChange({
|
|
240
|
-
isChange: true,
|
|
241
|
-
type: 'rowSelected',
|
|
242
|
-
rowData: row.original,
|
|
243
|
-
rowsData: checkedRows
|
|
244
|
-
});
|
|
245
|
-
}
|
|
246
|
-
} else {
|
|
247
|
-
// click vào row không có cha
|
|
248
|
-
|
|
249
|
-
row.getToggleSelectedHandler()(e);
|
|
250
|
-
if (row.getIsSelected()) {
|
|
251
|
-
// đã chọn
|
|
252
|
-
|
|
253
|
-
const rowParent = row.getParentRow();
|
|
254
|
-
// const rowParent1 = row.getParentRows()
|
|
255
|
-
|
|
256
|
-
let newCheckedRows = [];
|
|
257
|
-
if (rowParent) {}
|
|
258
|
-
if (rowParent && countUnselectedChildren(row) === 1) {
|
|
259
|
-
newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
|
|
260
|
-
} else {
|
|
261
|
-
// xóa row ra list selected
|
|
262
|
-
// const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
|
|
263
|
-
newCheckedRows = prevSelected.filter(it => it.id !== row.id);
|
|
264
|
-
}
|
|
265
|
-
setIsSelectionChange({
|
|
266
|
-
isChange: true,
|
|
267
|
-
type: 'rowSelected',
|
|
268
|
-
rowData: row.original,
|
|
269
|
-
rowsData: newCheckedRows ?? []
|
|
270
|
-
});
|
|
271
|
-
} else {
|
|
272
|
-
// chưa selected
|
|
273
|
-
|
|
274
|
-
let checkedRows = [];
|
|
275
|
-
const rowParent = row.getParentRow();
|
|
276
|
-
|
|
277
|
-
// nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào
|
|
278
|
-
if (rowParent && !rowParent.getIsSelected() && countUnselectedChildren(row) === 1) {
|
|
279
|
-
rowParent.toggleSelected(!rowParent.getIsSelected());
|
|
280
|
-
checkedRows = [...prevSelected, row, rowParent];
|
|
281
|
-
} else {
|
|
282
|
-
// chỉ thêm vào row hiện tại
|
|
283
|
-
|
|
284
|
-
const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
|
|
285
|
-
if (isInclude > -1) {
|
|
286
|
-
// cập nhật data row hiện tại
|
|
287
|
-
|
|
288
|
-
prevSelected[isInclude] = row;
|
|
289
|
-
checkedRows = [...prevSelected];
|
|
290
|
-
} else {
|
|
291
|
-
checkedRows = [...prevSelected, row];
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
setIsSelectionChange({
|
|
295
|
-
isChange: true,
|
|
296
|
-
type: 'rowSelected',
|
|
297
|
-
rowData: row.original,
|
|
298
|
-
rowsData: checkedRows
|
|
299
|
-
});
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { Table } from '@tanstack/react-table';
|
|
2
|
-
import type { FilterOperator } from '../../table-component/type';
|
|
3
|
-
export declare function useFilterOperator(table: Table<any>): {
|
|
4
|
-
setFilterOperator: (columnId: string, operator: FilterOperator) => void;
|
|
5
|
-
getFilterOperator: (columnId: string) => FilterOperator;
|
|
6
|
-
};
|
|
7
|
-
export declare function customStringFilterFn(row: any, columnId: any, filterValue: any): boolean;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
export function useFilterOperator(table) {
|
|
2
|
-
const setFilterOperator = (columnId, operator) => {
|
|
3
|
-
const filters = table.getState().columnFilters;
|
|
4
|
-
const next = filters.map(f => f.id === columnId ? {
|
|
5
|
-
...f,
|
|
6
|
-
operator
|
|
7
|
-
} : f);
|
|
8
|
-
table.setColumnFilters(next);
|
|
9
|
-
};
|
|
10
|
-
const getFilterOperator = columnId => {
|
|
11
|
-
const filters = table.getState().columnFilters;
|
|
12
|
-
return filters.find(f => f.id === columnId)?.operator ?? 'contains';
|
|
13
|
-
};
|
|
14
|
-
return {
|
|
15
|
-
setFilterOperator,
|
|
16
|
-
getFilterOperator
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
export function customStringFilterFn(row, columnId, filterValue) {
|
|
20
|
-
const filters = row.table.getState().columnFilters;
|
|
21
|
-
const operator = filters.find(f => f.id === columnId)?.operator ?? 'contains';
|
|
22
|
-
const cellValue = String(row.getValue(columnId) ?? '');
|
|
23
|
-
switch (operator) {
|
|
24
|
-
case 'equal':
|
|
25
|
-
return cellValue === filterValue;
|
|
26
|
-
case 'startsWith':
|
|
27
|
-
return cellValue.toLowerCase().startsWith(filterValue.toLowerCase());
|
|
28
|
-
case 'endsWith':
|
|
29
|
-
return cellValue.toLowerCase().endsWith(filterValue.toLowerCase());
|
|
30
|
-
default:
|
|
31
|
-
return cellValue.toLowerCase().includes(filterValue.toLowerCase());
|
|
32
|
-
}
|
|
33
|
-
}
|