es-grid-template 1.8.51 → 1.8.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/table-component/TableContainer.js +7 -2
- package/es/table-component/TableContainerEdit.js +53 -5
- package/es/table-component/type.d.ts +1 -0
- package/lib/table-component/TableContainer.js +7 -2
- package/lib/table-component/TableContainerEdit.js +53 -5
- package/lib/table-component/type.d.ts +1 -0
- package/package.json +1 -1
|
@@ -75,7 +75,8 @@ const TableContainer = props => {
|
|
|
75
75
|
setColumns,
|
|
76
76
|
columnSizing,
|
|
77
77
|
columnSizingInfo,
|
|
78
|
-
rowClassName
|
|
78
|
+
rowClassName,
|
|
79
|
+
title
|
|
79
80
|
} = props;
|
|
80
81
|
const tableContainerRef = React.useRef(null);
|
|
81
82
|
const containerRef = React.useRef(null);
|
|
@@ -175,10 +176,14 @@ const TableContainer = props => {
|
|
|
175
176
|
return /*#__PURE__*/React.createElement("div", {
|
|
176
177
|
ref: containerRef,
|
|
177
178
|
id: id
|
|
178
|
-
}, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/React.createElement("div", {
|
|
179
|
+
}, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
|
|
179
180
|
ref: topToolbarRef,
|
|
180
181
|
className: classNames(`${prefix}-grid-top-toolbar`, {})
|
|
181
182
|
}, /*#__PURE__*/React.createElement("div", {
|
|
183
|
+
style: {
|
|
184
|
+
textAlign: 'center'
|
|
185
|
+
}
|
|
186
|
+
}, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
|
|
182
187
|
style: {
|
|
183
188
|
display: 'flex',
|
|
184
189
|
justifyContent: 'space-between',
|
|
@@ -59,6 +59,7 @@ const TableContainerEdit = props => {
|
|
|
59
59
|
const {
|
|
60
60
|
t,
|
|
61
61
|
table,
|
|
62
|
+
title,
|
|
62
63
|
id,
|
|
63
64
|
prefix,
|
|
64
65
|
commandClick,
|
|
@@ -558,12 +559,55 @@ const TableContainerEdit = props => {
|
|
|
558
559
|
|
|
559
560
|
const columnOri = columnTarget.columnDef.meta ?? {};
|
|
560
561
|
const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
|
|
562
|
+
|
|
563
|
+
// if (isEdit) {
|
|
564
|
+
|
|
565
|
+
// const columnKey = allCols[targetCol].id
|
|
566
|
+
|
|
567
|
+
// childData[targetRow] = { ...childData[targetRow], [columnKey]: cellValue.trim() }
|
|
568
|
+
|
|
569
|
+
// pastedColumns.add(columnKey)
|
|
570
|
+
// }
|
|
571
|
+
|
|
561
572
|
if (isEdit) {
|
|
562
573
|
const columnKey = allCols[targetCol].id;
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
574
|
+
|
|
575
|
+
// if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
|
|
576
|
+
if (columnOri.type === 'number') {
|
|
577
|
+
if (cellValue.trim() === '') {
|
|
578
|
+
childData[targetRow] = {
|
|
579
|
+
...childData[targetRow],
|
|
580
|
+
[columnKey]: null
|
|
581
|
+
};
|
|
582
|
+
}
|
|
583
|
+
if (isFormattedNumber(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
|
|
584
|
+
const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
|
|
585
|
+
const valuePasteFormat = detectSeparators(cellValue.trim());
|
|
586
|
+
const cellFormat = getFormat(colFormat, format);
|
|
587
|
+
const thousandSeparator = valuePasteFormat?.thousandSeparator;
|
|
588
|
+
const decimalSeparator = valuePasteFormat?.decimalSeparator;
|
|
589
|
+
const dec = cellFormat?.decimalScale;
|
|
590
|
+
const numericFormatProps = {
|
|
591
|
+
thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
|
|
592
|
+
decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
|
|
593
|
+
allowNegative: cellFormat?.allowNegative ?? true,
|
|
594
|
+
prefix: cellFormat?.prefix,
|
|
595
|
+
suffix: cellFormat?.suffix,
|
|
596
|
+
decimalScale: dec,
|
|
597
|
+
fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
|
|
598
|
+
};
|
|
599
|
+
const val = removeNumericFormat(cellValue.trim(), undefined, numericFormatProps);
|
|
600
|
+
childData[targetRow] = {
|
|
601
|
+
...childData[targetRow],
|
|
602
|
+
[columnKey]: Number(val)
|
|
603
|
+
};
|
|
604
|
+
}
|
|
605
|
+
} else {
|
|
606
|
+
childData[targetRow] = {
|
|
607
|
+
...childData[targetRow],
|
|
608
|
+
[columnKey]: cellValue.trim()
|
|
609
|
+
};
|
|
610
|
+
}
|
|
567
611
|
pastedColumns.add(columnKey);
|
|
568
612
|
}
|
|
569
613
|
});
|
|
@@ -1733,10 +1777,14 @@ const TableContainerEdit = props => {
|
|
|
1733
1777
|
return /*#__PURE__*/React.createElement("div", {
|
|
1734
1778
|
ref: containerRef,
|
|
1735
1779
|
id: id
|
|
1736
|
-
}, (showToolbar !== false || fullScreen !== false || showColumnChoose) && /*#__PURE__*/React.createElement("div", {
|
|
1780
|
+
}, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/React.createElement("div", {
|
|
1737
1781
|
ref: topToolbarRef,
|
|
1738
1782
|
className: classNames(`${prefix}-grid-top-toolbar`, {})
|
|
1739
1783
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1784
|
+
style: {
|
|
1785
|
+
textAlign: 'center'
|
|
1786
|
+
}
|
|
1787
|
+
}, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
|
|
1740
1788
|
style: {
|
|
1741
1789
|
display: 'flex',
|
|
1742
1790
|
justifyContent: 'space-between',
|
|
@@ -188,6 +188,7 @@ export type Locale = TableLocale & {
|
|
|
188
188
|
};
|
|
189
189
|
export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
|
|
190
190
|
export type TableProps<RecordType = AnyObject> = {
|
|
191
|
+
title?: ReactNode | ((data: RecordType) => ReactNode);
|
|
191
192
|
editAble?: boolean;
|
|
192
193
|
infiniteScroll?: boolean;
|
|
193
194
|
next?: () => void;
|
|
@@ -85,7 +85,8 @@ const TableContainer = props => {
|
|
|
85
85
|
setColumns,
|
|
86
86
|
columnSizing,
|
|
87
87
|
columnSizingInfo,
|
|
88
|
-
rowClassName
|
|
88
|
+
rowClassName,
|
|
89
|
+
title
|
|
89
90
|
} = props;
|
|
90
91
|
const tableContainerRef = _react.default.useRef(null);
|
|
91
92
|
const containerRef = _react.default.useRef(null);
|
|
@@ -185,10 +186,14 @@ const TableContainer = props => {
|
|
|
185
186
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
186
187
|
ref: containerRef,
|
|
187
188
|
id: id
|
|
188
|
-
}, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/_react.default.createElement("div", {
|
|
189
|
+
}, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
|
|
189
190
|
ref: topToolbarRef,
|
|
190
191
|
className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
|
|
191
192
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
193
|
+
style: {
|
|
194
|
+
textAlign: 'center'
|
|
195
|
+
}
|
|
196
|
+
}, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/_react.default.createElement("div", {
|
|
192
197
|
style: {
|
|
193
198
|
display: 'flex',
|
|
194
199
|
justifyContent: 'space-between',
|
|
@@ -66,6 +66,7 @@ const TableContainerEdit = props => {
|
|
|
66
66
|
const {
|
|
67
67
|
t,
|
|
68
68
|
table,
|
|
69
|
+
title,
|
|
69
70
|
id,
|
|
70
71
|
prefix,
|
|
71
72
|
commandClick,
|
|
@@ -565,12 +566,55 @@ const TableContainerEdit = props => {
|
|
|
565
566
|
|
|
566
567
|
const columnOri = columnTarget.columnDef.meta ?? {};
|
|
567
568
|
const isEdit = typeof columnOri?.editEnable === 'function' ? columnOri.editEnable(childData[targetRow]) : columnOri.editEnable;
|
|
569
|
+
|
|
570
|
+
// if (isEdit) {
|
|
571
|
+
|
|
572
|
+
// const columnKey = allCols[targetCol].id
|
|
573
|
+
|
|
574
|
+
// childData[targetRow] = { ...childData[targetRow], [columnKey]: cellValue.trim() }
|
|
575
|
+
|
|
576
|
+
// pastedColumns.add(columnKey)
|
|
577
|
+
// }
|
|
578
|
+
|
|
568
579
|
if (isEdit) {
|
|
569
580
|
const columnKey = allCols[targetCol].id;
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
581
|
+
|
|
582
|
+
// if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
|
|
583
|
+
if (columnOri.type === 'number') {
|
|
584
|
+
if (cellValue.trim() === '') {
|
|
585
|
+
childData[targetRow] = {
|
|
586
|
+
...childData[targetRow],
|
|
587
|
+
[columnKey]: null
|
|
588
|
+
};
|
|
589
|
+
}
|
|
590
|
+
if ((0, _utils.isFormattedNumber)(cellValue.trim()) || !isNaN(Number(cellValue.trim()))) {
|
|
591
|
+
const colFormat = typeof columnOri.format === 'function' ? columnOri.format(record) : columnOri.format;
|
|
592
|
+
const valuePasteFormat = (0, _utils.detectSeparators)(cellValue.trim());
|
|
593
|
+
const cellFormat = (0, _utils.getFormat)(colFormat, format);
|
|
594
|
+
const thousandSeparator = valuePasteFormat?.thousandSeparator;
|
|
595
|
+
const decimalSeparator = valuePasteFormat?.decimalSeparator;
|
|
596
|
+
const dec = cellFormat?.decimalScale;
|
|
597
|
+
const numericFormatProps = {
|
|
598
|
+
thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
|
|
599
|
+
decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
|
|
600
|
+
allowNegative: cellFormat?.allowNegative ?? true,
|
|
601
|
+
prefix: cellFormat?.prefix,
|
|
602
|
+
suffix: cellFormat?.suffix,
|
|
603
|
+
decimalScale: dec,
|
|
604
|
+
fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
|
|
605
|
+
};
|
|
606
|
+
const val = (0, _reactNumericComponent.removeNumericFormat)(cellValue.trim(), undefined, numericFormatProps);
|
|
607
|
+
childData[targetRow] = {
|
|
608
|
+
...childData[targetRow],
|
|
609
|
+
[columnKey]: Number(val)
|
|
610
|
+
};
|
|
611
|
+
}
|
|
612
|
+
} else {
|
|
613
|
+
childData[targetRow] = {
|
|
614
|
+
...childData[targetRow],
|
|
615
|
+
[columnKey]: cellValue.trim()
|
|
616
|
+
};
|
|
617
|
+
}
|
|
574
618
|
pastedColumns.add(columnKey);
|
|
575
619
|
}
|
|
576
620
|
});
|
|
@@ -1740,10 +1784,14 @@ const TableContainerEdit = props => {
|
|
|
1740
1784
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1741
1785
|
ref: containerRef,
|
|
1742
1786
|
id: id
|
|
1743
|
-
}, (showToolbar !== false || fullScreen !== false || showColumnChoose) && /*#__PURE__*/_react.default.createElement("div", {
|
|
1787
|
+
}, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/_react.default.createElement("div", {
|
|
1744
1788
|
ref: topToolbarRef,
|
|
1745
1789
|
className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
|
|
1746
1790
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
1791
|
+
style: {
|
|
1792
|
+
textAlign: 'center'
|
|
1793
|
+
}
|
|
1794
|
+
}, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/_react.default.createElement("div", {
|
|
1747
1795
|
style: {
|
|
1748
1796
|
display: 'flex',
|
|
1749
1797
|
justifyContent: 'space-between',
|
|
@@ -188,6 +188,7 @@ export type Locale = TableLocale & {
|
|
|
188
188
|
};
|
|
189
189
|
export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
|
|
190
190
|
export type TableProps<RecordType = AnyObject> = {
|
|
191
|
+
title?: ReactNode | ((data: RecordType) => ReactNode);
|
|
191
192
|
editAble?: boolean;
|
|
192
193
|
infiniteScroll?: boolean;
|
|
193
194
|
next?: () => void;
|