es-grid-template 1.9.20 → 1.9.21
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/group-component/hook/utils.d.ts +8 -8
- package/es/table-component/body/EditableCell.js +4 -6
- package/es/table-component/body/TableBodyCell.js +13 -12
- package/es/table-component/body/TableBodyCellEdit.js +21 -5
- package/es/table-component/hook/useColumns.d.ts +1 -0
- package/es/table-component/hook/useColumns.js +56 -1
- package/es/table-virtuoso/body/TableBodyRow.js +0 -1
- package/lib/table-component/body/EditableCell.js +4 -6
- package/lib/table-component/body/TableBodyCell.js +12 -11
- package/lib/table-component/body/TableBodyCellEdit.js +20 -4
- package/lib/table-component/hook/useColumns.d.ts +1 -0
- package/lib/table-component/hook/useColumns.js +58 -2
- package/lib/table-virtuoso/body/TableBodyRow.js +0 -1
- package/package.json +1 -1
|
@@ -166,7 +166,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
166
166
|
haveSum?: boolean;
|
|
167
167
|
isSummary?: boolean;
|
|
168
168
|
sumGroup?: boolean;
|
|
169
|
-
summaryTemplate?: (data: number, key: string) => import("react").
|
|
169
|
+
summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
|
|
170
170
|
sorter?: boolean;
|
|
171
171
|
allowFiltering?: boolean;
|
|
172
172
|
allowSortering?: boolean;
|
|
@@ -178,26 +178,26 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
178
178
|
showFilterSearch?: boolean;
|
|
179
179
|
hidden?: boolean;
|
|
180
180
|
visible?: boolean;
|
|
181
|
-
headerTooltip?: string | boolean | (() => import("react").
|
|
181
|
+
headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
182
182
|
columnGroupText?: string;
|
|
183
183
|
headerTextAlign?: import("./../../grid-component/type").ITextAlign;
|
|
184
|
-
headerTemplate?: import("react").
|
|
184
|
+
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);
|
|
185
185
|
fixedType?: import("./../../grid-component/type").FixedType;
|
|
186
186
|
headerTextWrap?: boolean;
|
|
187
187
|
ellipsis?: boolean;
|
|
188
188
|
allowResizing?: boolean;
|
|
189
189
|
align?: import("./../../grid-component/type").ITextAlign;
|
|
190
190
|
textAlign?: import("./../../grid-component/type").ITextAlign;
|
|
191
|
-
template?: import("react").
|
|
191
|
+
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);
|
|
192
192
|
showTooltip?: boolean;
|
|
193
193
|
tooltipDescription?: string | ((args: {
|
|
194
194
|
value: any;
|
|
195
195
|
rowData: RecordType;
|
|
196
|
-
}) => import("react").
|
|
197
|
-
onCellStyles?: Omit<CSSProperties, "
|
|
198
|
-
onCellHeaderStyles?: Omit<CSSProperties, "
|
|
196
|
+
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
197
|
+
onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
|
|
198
|
+
onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
|
|
199
199
|
onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
|
|
200
|
-
onCellFooterStyles?: Omit<CSSProperties, "
|
|
200
|
+
onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
|
|
201
201
|
getValue?: (row: any, rowIndex: number) => any;
|
|
202
202
|
getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
|
|
203
203
|
headerCellProps?: import("./../../grid-component/type").CellProps;
|
|
@@ -525,9 +525,8 @@ const EditableCell = props => {
|
|
|
525
525
|
placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
|
|
526
526
|
allowClear: column.isClearable ?? false,
|
|
527
527
|
maxTagCount: 'responsive',
|
|
528
|
-
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
|
|
529
|
-
|
|
530
|
-
,
|
|
528
|
+
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
|
|
529
|
+
optionFilterProp: "label",
|
|
531
530
|
popupClassName: 'be-popup-container',
|
|
532
531
|
status: isInvalid ? 'error' : undefined,
|
|
533
532
|
filterOption: filterKey ? (input, option) => {
|
|
@@ -664,9 +663,8 @@ const EditableCell = props => {
|
|
|
664
663
|
placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
|
|
665
664
|
allowClear: column.isClearable ?? false,
|
|
666
665
|
maxTagCount: 'responsive',
|
|
667
|
-
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
|
|
668
|
-
|
|
669
|
-
,
|
|
666
|
+
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
|
|
667
|
+
optionFilterProp: "label",
|
|
670
668
|
popupClassName: 'be-popup-container',
|
|
671
669
|
loadOptions: loadOptions,
|
|
672
670
|
status: isInvalid ? 'error' : undefined,
|
|
@@ -5,7 +5,7 @@ import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
|
|
|
5
5
|
import classNames from "classnames";
|
|
6
6
|
import React from "react";
|
|
7
7
|
import { TableContext } from "../useContext";
|
|
8
|
-
import { renderValueCell, toggleRowSelection } from "../hook/useColumns";
|
|
8
|
+
import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
|
|
9
9
|
const renderCellIndex = props => {
|
|
10
10
|
const {
|
|
11
11
|
parrents,
|
|
@@ -184,17 +184,6 @@ const TableBodyCell = props => {
|
|
|
184
184
|
const record = cell.row.original;
|
|
185
185
|
const columnMeta = cell.column.columnDef.meta ?? {};
|
|
186
186
|
const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
|
|
187
|
-
const tooltipContent = React.useMemo(() => {
|
|
188
|
-
if (isOpenTooltip === false) {
|
|
189
|
-
return '';
|
|
190
|
-
} else {
|
|
191
|
-
const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
|
|
192
|
-
value: cell.getValue(),
|
|
193
|
-
rowData: record
|
|
194
|
-
}) : columnMeta.tooltipDescription : cell.getValue();
|
|
195
|
-
return abc;
|
|
196
|
-
}
|
|
197
|
-
}, [cell, columnMeta, isOpenTooltip, record]);
|
|
198
187
|
|
|
199
188
|
// const tooltipContent: any = (isOpenTooltip === false)
|
|
200
189
|
// ? ''
|
|
@@ -220,6 +209,18 @@ const TableBodyCell = props => {
|
|
|
220
209
|
const cellValue = cell.getValue();
|
|
221
210
|
const rowIndex = cell.row.index;
|
|
222
211
|
const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
|
|
212
|
+
const valueCellString = getValueCellString(columnMeta, cellValue, record, rowIndex, colIndex, format);
|
|
213
|
+
const tooltipContent = React.useMemo(() => {
|
|
214
|
+
if (isOpenTooltip === false) {
|
|
215
|
+
return '';
|
|
216
|
+
} else {
|
|
217
|
+
const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
|
|
218
|
+
value: cell.getValue(),
|
|
219
|
+
rowData: record
|
|
220
|
+
}) : columnMeta.tooltipDescription : valueCellString;
|
|
221
|
+
return abc;
|
|
222
|
+
}
|
|
223
|
+
}, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
|
|
223
224
|
if (cell.column.id === "#") {
|
|
224
225
|
return /*#__PURE__*/React.createElement("div", {
|
|
225
226
|
key: cell.id,
|
|
@@ -7,7 +7,7 @@ import React from "react";
|
|
|
7
7
|
import { TableContext } from "../useContext";
|
|
8
8
|
import EditableCell from "./EditableCell";
|
|
9
9
|
import { nonActionColumn } from "../../grid-component/hooks";
|
|
10
|
-
import { renderValueCell, toggleRowSelection } from "../hook/useColumns";
|
|
10
|
+
import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
|
|
11
11
|
const renderCellIndex = props => {
|
|
12
12
|
const {
|
|
13
13
|
parrents,
|
|
@@ -237,10 +237,13 @@ const TableBodyCellEdit = props => {
|
|
|
237
237
|
const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
|
|
238
238
|
const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
|
|
239
239
|
const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
240
|
+
|
|
241
|
+
// const tooltipContent = (isOpenTooltip === false)
|
|
242
|
+
// ? ''
|
|
243
|
+
// : columnMeta?.tooltipDescription
|
|
244
|
+
// ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
|
|
245
|
+
// : cell.getValue()
|
|
246
|
+
|
|
244
247
|
const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
|
|
245
248
|
|
|
246
249
|
// const allRows = table.getRowModel().rows;
|
|
@@ -292,6 +295,19 @@ const TableBodyCellEdit = props => {
|
|
|
292
295
|
const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
|
|
293
296
|
const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
|
|
294
297
|
const parrents = cell.row.getParentRows();
|
|
298
|
+
const valeOfCell = cell.getValue();
|
|
299
|
+
const valueCellString = getValueCellString(columnMeta, valeOfCell, record, rowNumber, colIndex, format);
|
|
300
|
+
const tooltipContent = React.useMemo(() => {
|
|
301
|
+
if (isOpenTooltip === false) {
|
|
302
|
+
return '';
|
|
303
|
+
} else {
|
|
304
|
+
const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
|
|
305
|
+
value: cell.getValue(),
|
|
306
|
+
rowData: record
|
|
307
|
+
}) : columnMeta.tooltipDescription : valueCellString;
|
|
308
|
+
return abc;
|
|
309
|
+
}
|
|
310
|
+
}, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
|
|
295
311
|
const triggerDragPaste = (pasteState, ctrlKey) => {
|
|
296
312
|
const tmpCols = table.getVisibleLeafColumns();
|
|
297
313
|
const rowPasteIds = getRowIdsBetween(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
|
|
@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
|
|
|
2
2
|
import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
|
|
3
3
|
import type { Cell, ColumnDef } from '@tanstack/react-table';
|
|
4
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 const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
|
|
5
6
|
export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
|
|
6
7
|
t?: any;
|
|
7
8
|
columns: ColumnsTable<T>;
|
|
@@ -41,7 +41,7 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
|
|
|
41
41
|
return value ? value : '';
|
|
42
42
|
case 'year':
|
|
43
43
|
const year = value ? moment(value).format('yyyy') : '';
|
|
44
|
-
return
|
|
44
|
+
return year;
|
|
45
45
|
case 'datetime':
|
|
46
46
|
return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
|
|
47
47
|
case 'boolean':
|
|
@@ -76,6 +76,61 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
|
|
|
76
76
|
return value;
|
|
77
77
|
}
|
|
78
78
|
};
|
|
79
|
+
export const getValueCellString = (column, value, record, rowIndex, colIndex, format) => {
|
|
80
|
+
const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
|
|
81
|
+
const cellFormat = getFormat(colFormat, format);
|
|
82
|
+
switch (column?.type) {
|
|
83
|
+
case 'number':
|
|
84
|
+
// const colFormat = typeof column.format === 'function' ? column.format(record) : column.format
|
|
85
|
+
|
|
86
|
+
// const cellFormat = getFormat(colFormat, format)
|
|
87
|
+
|
|
88
|
+
const thousandSeparator = cellFormat?.thousandSeparator;
|
|
89
|
+
const decimalSeparator = cellFormat?.decimalSeparator;
|
|
90
|
+
const dec = cellFormat?.decimalScale;
|
|
91
|
+
|
|
92
|
+
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
|
|
93
|
+
|
|
94
|
+
const tmpval = typeof value === 'string' ? Number(value) : value;
|
|
95
|
+
const numericFormatProps = {
|
|
96
|
+
thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
|
|
97
|
+
decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
|
|
98
|
+
allowNegative: cellFormat?.allowNegative ?? true,
|
|
99
|
+
prefix: cellFormat?.prefix,
|
|
100
|
+
suffix: cellFormat?.suffix,
|
|
101
|
+
decimalScale: dec,
|
|
102
|
+
fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
// if ( typeof value === "string") {
|
|
106
|
+
// const ttt = removeNumericFormat(value, undefined, numericFormatProps )
|
|
107
|
+
//
|
|
108
|
+
// }
|
|
109
|
+
|
|
110
|
+
const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
|
|
111
|
+
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
|
|
112
|
+
|
|
113
|
+
return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
|
|
114
|
+
case 'date':
|
|
115
|
+
return value ? dayjs(value).format(cellFormat?.dateFormat ?? 'DD/MM/YYYY') : '';
|
|
116
|
+
case 'time':
|
|
117
|
+
return value ? value : '';
|
|
118
|
+
case 'year':
|
|
119
|
+
const year = value ? moment(value).format('yyyy') : '';
|
|
120
|
+
return year;
|
|
121
|
+
case 'datetime':
|
|
122
|
+
return value ? moment(value).format(cellFormat?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
|
|
123
|
+
case 'boolean':
|
|
124
|
+
return value ? 'true' : 'false';
|
|
125
|
+
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(", ") : '';
|
|
126
|
+
return value ? nameFile : '';
|
|
127
|
+
default:
|
|
128
|
+
if (Array.isArray(value)) {
|
|
129
|
+
return value.join(', ');
|
|
130
|
+
}
|
|
131
|
+
return value;
|
|
132
|
+
}
|
|
133
|
+
};
|
|
79
134
|
export function convertToTanStackColumns({
|
|
80
135
|
t,
|
|
81
136
|
columns,
|
|
@@ -533,9 +533,8 @@ const EditableCell = props => {
|
|
|
533
533
|
placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
|
|
534
534
|
allowClear: column.isClearable ?? false,
|
|
535
535
|
maxTagCount: 'responsive',
|
|
536
|
-
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
|
|
537
|
-
|
|
538
|
-
,
|
|
536
|
+
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
|
|
537
|
+
optionFilterProp: "label",
|
|
539
538
|
popupClassName: 'be-popup-container',
|
|
540
539
|
status: isInvalid ? 'error' : undefined,
|
|
541
540
|
filterOption: filterKey ? (input, option) => {
|
|
@@ -672,9 +671,8 @@ const EditableCell = props => {
|
|
|
672
671
|
placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
|
|
673
672
|
allowClear: column.isClearable ?? false,
|
|
674
673
|
maxTagCount: 'responsive',
|
|
675
|
-
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
|
|
676
|
-
|
|
677
|
-
,
|
|
674
|
+
popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
|
|
675
|
+
optionFilterProp: "label",
|
|
678
676
|
popupClassName: 'be-popup-container',
|
|
679
677
|
loadOptions: loadOptions,
|
|
680
678
|
status: isInvalid ? 'error' : undefined,
|
|
@@ -191,17 +191,6 @@ const TableBodyCell = props => {
|
|
|
191
191
|
const record = cell.row.original;
|
|
192
192
|
const columnMeta = cell.column.columnDef.meta ?? {};
|
|
193
193
|
const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
|
|
194
|
-
const tooltipContent = _react.default.useMemo(() => {
|
|
195
|
-
if (isOpenTooltip === false) {
|
|
196
|
-
return '';
|
|
197
|
-
} else {
|
|
198
|
-
const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
|
|
199
|
-
value: cell.getValue(),
|
|
200
|
-
rowData: record
|
|
201
|
-
}) : columnMeta.tooltipDescription : cell.getValue();
|
|
202
|
-
return abc;
|
|
203
|
-
}
|
|
204
|
-
}, [cell, columnMeta, isOpenTooltip, record]);
|
|
205
194
|
|
|
206
195
|
// const tooltipContent: any = (isOpenTooltip === false)
|
|
207
196
|
// ? ''
|
|
@@ -227,6 +216,18 @@ const TableBodyCell = props => {
|
|
|
227
216
|
const cellValue = cell.getValue();
|
|
228
217
|
const rowIndex = cell.row.index;
|
|
229
218
|
const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
|
|
219
|
+
const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, cellValue, record, rowIndex, colIndex, format);
|
|
220
|
+
const tooltipContent = _react.default.useMemo(() => {
|
|
221
|
+
if (isOpenTooltip === false) {
|
|
222
|
+
return '';
|
|
223
|
+
} else {
|
|
224
|
+
const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
|
|
225
|
+
value: cell.getValue(),
|
|
226
|
+
rowData: record
|
|
227
|
+
}) : columnMeta.tooltipDescription : valueCellString;
|
|
228
|
+
return abc;
|
|
229
|
+
}
|
|
230
|
+
}, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
|
|
230
231
|
if (cell.column.id === "#") {
|
|
231
232
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
232
233
|
key: cell.id,
|
|
@@ -244,10 +244,13 @@ const TableBodyCellEdit = props => {
|
|
|
244
244
|
const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
|
|
245
245
|
const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
|
|
246
246
|
const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
247
|
+
|
|
248
|
+
// const tooltipContent = (isOpenTooltip === false)
|
|
249
|
+
// ? ''
|
|
250
|
+
// : columnMeta?.tooltipDescription
|
|
251
|
+
// ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
|
|
252
|
+
// : cell.getValue()
|
|
253
|
+
|
|
251
254
|
const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;
|
|
252
255
|
|
|
253
256
|
// const allRows = table.getRowModel().rows;
|
|
@@ -299,6 +302,19 @@ const TableBodyCellEdit = props => {
|
|
|
299
302
|
const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
|
|
300
303
|
const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
|
|
301
304
|
const parrents = cell.row.getParentRows();
|
|
305
|
+
const valeOfCell = cell.getValue();
|
|
306
|
+
const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, valeOfCell, record, rowNumber, colIndex, format);
|
|
307
|
+
const tooltipContent = _react.default.useMemo(() => {
|
|
308
|
+
if (isOpenTooltip === false) {
|
|
309
|
+
return '';
|
|
310
|
+
} else {
|
|
311
|
+
const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
|
|
312
|
+
value: cell.getValue(),
|
|
313
|
+
rowData: record
|
|
314
|
+
}) : columnMeta.tooltipDescription : valueCellString;
|
|
315
|
+
return abc;
|
|
316
|
+
}
|
|
317
|
+
}, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
|
|
302
318
|
const triggerDragPaste = (pasteState, ctrlKey) => {
|
|
303
319
|
const tmpCols = table.getVisibleLeafColumns();
|
|
304
320
|
const rowPasteIds = (0, _utils.getRowIdsBetween)(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
|
|
@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
|
|
|
2
2
|
import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
|
|
3
3
|
import type { Cell, ColumnDef } from '@tanstack/react-table';
|
|
4
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 const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
|
|
5
6
|
export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
|
|
6
7
|
t?: any;
|
|
7
8
|
columns: ColumnsTable<T>;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.convertToTanStackColumns = convertToTanStackColumns;
|
|
8
|
-
exports.toggleRowSelection = exports.renderValueCell = void 0;
|
|
8
|
+
exports.toggleRowSelection = exports.renderValueCell = exports.getValueCellString = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _ControlCheckbox = _interopRequireDefault(require("../components/ControlCheckbox"));
|
|
11
11
|
var _utils = require("./utils");
|
|
@@ -51,7 +51,7 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
|
|
|
51
51
|
return value ? value : '';
|
|
52
52
|
case 'year':
|
|
53
53
|
const year = value ? (0, _moment.default)(value).format('yyyy') : '';
|
|
54
|
-
return
|
|
54
|
+
return year;
|
|
55
55
|
case 'datetime':
|
|
56
56
|
return value ? (0, _moment.default)(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
|
|
57
57
|
case 'boolean':
|
|
@@ -87,6 +87,62 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
|
|
|
87
87
|
}
|
|
88
88
|
};
|
|
89
89
|
exports.renderValueCell = renderValueCell;
|
|
90
|
+
const getValueCellString = (column, value, record, rowIndex, colIndex, format) => {
|
|
91
|
+
const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
|
|
92
|
+
const cellFormat = (0, _utils.getFormat)(colFormat, format);
|
|
93
|
+
switch (column?.type) {
|
|
94
|
+
case 'number':
|
|
95
|
+
// const colFormat = typeof column.format === 'function' ? column.format(record) : column.format
|
|
96
|
+
|
|
97
|
+
// const cellFormat = getFormat(colFormat, format)
|
|
98
|
+
|
|
99
|
+
const thousandSeparator = cellFormat?.thousandSeparator;
|
|
100
|
+
const decimalSeparator = cellFormat?.decimalSeparator;
|
|
101
|
+
const dec = cellFormat?.decimalScale;
|
|
102
|
+
|
|
103
|
+
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
|
|
104
|
+
|
|
105
|
+
const tmpval = typeof value === 'string' ? Number(value) : value;
|
|
106
|
+
const numericFormatProps = {
|
|
107
|
+
thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
|
|
108
|
+
decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
|
|
109
|
+
allowNegative: cellFormat?.allowNegative ?? true,
|
|
110
|
+
prefix: cellFormat?.prefix,
|
|
111
|
+
suffix: cellFormat?.suffix,
|
|
112
|
+
decimalScale: dec,
|
|
113
|
+
fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
// if ( typeof value === "string") {
|
|
117
|
+
// const ttt = removeNumericFormat(value, undefined, numericFormatProps )
|
|
118
|
+
//
|
|
119
|
+
// }
|
|
120
|
+
|
|
121
|
+
const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
|
|
122
|
+
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
|
|
123
|
+
|
|
124
|
+
return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
|
|
125
|
+
case 'date':
|
|
126
|
+
return value ? (0, _dayjs.default)(value).format(cellFormat?.dateFormat ?? 'DD/MM/YYYY') : '';
|
|
127
|
+
case 'time':
|
|
128
|
+
return value ? value : '';
|
|
129
|
+
case 'year':
|
|
130
|
+
const year = value ? (0, _moment.default)(value).format('yyyy') : '';
|
|
131
|
+
return year;
|
|
132
|
+
case 'datetime':
|
|
133
|
+
return value ? (0, _moment.default)(value).format(cellFormat?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
|
|
134
|
+
case 'boolean':
|
|
135
|
+
return value ? 'true' : 'false';
|
|
136
|
+
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(", ") : '';
|
|
137
|
+
return value ? nameFile : '';
|
|
138
|
+
default:
|
|
139
|
+
if (Array.isArray(value)) {
|
|
140
|
+
return value.join(', ');
|
|
141
|
+
}
|
|
142
|
+
return value;
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
exports.getValueCellString = getValueCellString;
|
|
90
146
|
function convertToTanStackColumns({
|
|
91
147
|
t,
|
|
92
148
|
columns,
|