es-grid-template 1.5.14 → 1.5.15
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/collapse/index.d.ts +4 -0
- package/es/collapse/index.js +2 -0
- package/es/date-range-picker/index.d.ts +4 -0
- package/es/date-range-picker/index.js +2 -0
- package/es/datepicker/index.d.ts +4 -0
- package/es/datepicker/index.js +2 -0
- package/es/grid-component/InternalTable.js +12 -4
- package/es/grid-component/TableGrid.js +19 -6
- package/es/grid-component/hooks/columns/index.js +12 -2
- package/es/grid-component/hooks/content/HeaderContent.d.ts +2 -0
- package/es/grid-component/hooks/content/HeaderContent.js +16 -5
- package/es/grid-component/hooks/utils.d.ts +5 -0
- package/es/grid-component/hooks/utils.js +60 -1
- package/es/grid-component/styles.scss +27 -0
- package/es/grid-component/table/GridEdit.js +278 -239
- package/es/grid-component/type.d.ts +25 -2
- package/es/index.d.ts +10 -0
- package/es/index.js +6 -1
- package/es/select/index.d.ts +4 -0
- package/es/select/index.js +2 -0
- package/es/select-table/index.d.ts +4 -0
- package/es/select-table/index.js +2 -0
- package/es/splitter/index.d.ts +4 -0
- package/es/splitter/index.js +2 -0
- package/es/tree-select/index.d.ts +4 -0
- package/es/tree-select/index.js +2 -0
- package/lib/collapse/index.d.ts +4 -0
- package/lib/collapse/index.js +8 -0
- package/lib/date-range-picker/index.d.ts +4 -0
- package/lib/date-range-picker/index.js +9 -0
- package/lib/datepicker/index.d.ts +4 -0
- package/lib/datepicker/index.js +9 -0
- package/lib/grid-component/InternalTable.js +12 -4
- package/lib/grid-component/TableGrid.js +19 -6
- package/lib/grid-component/hooks/columns/index.js +12 -2
- package/lib/grid-component/hooks/content/HeaderContent.d.ts +2 -0
- package/lib/grid-component/hooks/content/HeaderContent.js +16 -5
- package/lib/grid-component/hooks/utils.d.ts +5 -0
- package/lib/grid-component/hooks/utils.js +66 -5
- package/lib/grid-component/styles.scss +27 -0
- package/lib/grid-component/table/GridEdit.js +277 -238
- package/lib/grid-component/type.d.ts +25 -2
- package/lib/index.d.ts +10 -0
- package/lib/index.js +36 -1
- package/lib/select/index.d.ts +4 -0
- package/lib/select/index.js +8 -0
- package/lib/select-table/index.d.ts +4 -0
- package/lib/select-table/index.js +9 -0
- package/lib/splitter/index.d.ts +4 -0
- package/lib/splitter/index.js +8 -0
- package/lib/tree-select/index.d.ts +4 -0
- package/lib/tree-select/index.js +8 -0
- package/package.json +2 -2
|
@@ -179,6 +179,7 @@ const InternalTable = props => {
|
|
|
179
179
|
height: propsHeight,
|
|
180
180
|
summary,
|
|
181
181
|
infiniteScroll,
|
|
182
|
+
wrapSettings,
|
|
182
183
|
...rest
|
|
183
184
|
} = props;
|
|
184
185
|
const id = React.useMemo(() => {
|
|
@@ -377,7 +378,8 @@ const InternalTable = props => {
|
|
|
377
378
|
...column
|
|
378
379
|
},
|
|
379
380
|
t: t,
|
|
380
|
-
id: id
|
|
381
|
+
id: id,
|
|
382
|
+
wrapSettings: wrapSettings
|
|
381
383
|
})),
|
|
382
384
|
ellipsis: column.ellipsis !== false,
|
|
383
385
|
align: column.textAlign ?? column.align,
|
|
@@ -392,7 +394,9 @@ const InternalTable = props => {
|
|
|
392
394
|
column: {
|
|
393
395
|
...column
|
|
394
396
|
},
|
|
395
|
-
t: t
|
|
397
|
+
t: t,
|
|
398
|
+
id: id,
|
|
399
|
+
wrapSettings: wrapSettings
|
|
396
400
|
}),
|
|
397
401
|
onCell: data => ({
|
|
398
402
|
// className: 'cell-number',
|
|
@@ -415,7 +419,9 @@ const InternalTable = props => {
|
|
|
415
419
|
column: {
|
|
416
420
|
...column
|
|
417
421
|
},
|
|
418
|
-
t: t
|
|
422
|
+
t: t,
|
|
423
|
+
id: id,
|
|
424
|
+
wrapSettings: wrapSettings
|
|
419
425
|
}),
|
|
420
426
|
onCell: data => ({
|
|
421
427
|
// className: 'cell-number',
|
|
@@ -536,7 +542,9 @@ const InternalTable = props => {
|
|
|
536
542
|
column: {
|
|
537
543
|
...column
|
|
538
544
|
},
|
|
539
|
-
t: t
|
|
545
|
+
t: t,
|
|
546
|
+
id: id,
|
|
547
|
+
wrapSettings: wrapSettings
|
|
540
548
|
})),
|
|
541
549
|
ellipsis: column.ellipsis !== false,
|
|
542
550
|
align: column.textAlign ?? column.align,
|
|
@@ -322,13 +322,26 @@ const TableGrid = props => {
|
|
|
322
322
|
rowData: selectedRow
|
|
323
323
|
});
|
|
324
324
|
} else {
|
|
325
|
+
const keySet = new Set(keys);
|
|
326
|
+
|
|
325
327
|
// @ts-ignore
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
328
|
+
if (!keySet.has(selectedRow[rowKey])) {
|
|
329
|
+
setMergedSelectedKeys([]);
|
|
330
|
+
rowSelected?.({
|
|
331
|
+
selected: [],
|
|
332
|
+
type: 'rowSelected',
|
|
333
|
+
rowData: selectedRow
|
|
334
|
+
});
|
|
335
|
+
} else {
|
|
336
|
+
// @ts-ignore
|
|
337
|
+
setMergedSelectedKeys([selectedRow[rowKey]]);
|
|
338
|
+
rowSelected?.({
|
|
339
|
+
// @ts-ignore
|
|
340
|
+
selected: [selectedRow[rowKey]],
|
|
341
|
+
type: 'rowSelected',
|
|
342
|
+
rowData: selectedRow
|
|
343
|
+
});
|
|
344
|
+
}
|
|
332
345
|
}
|
|
333
346
|
}
|
|
334
347
|
};
|
|
@@ -67,8 +67,8 @@ export const getValueCell = (column, value, record, format) => {
|
|
|
67
67
|
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
|
|
68
68
|
|
|
69
69
|
const tmpval = typeof value === 'string' ? Number(value) : value;
|
|
70
|
-
|
|
71
|
-
//
|
|
70
|
+
|
|
71
|
+
// console.log('aaaaa', Number(value))
|
|
72
72
|
|
|
73
73
|
const numericFormatProps = {
|
|
74
74
|
thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
|
|
@@ -79,6 +79,16 @@ export const getValueCell = (column, value, record, format) => {
|
|
|
79
79
|
decimalScale: dec,
|
|
80
80
|
fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
|
|
81
81
|
};
|
|
82
|
+
|
|
83
|
+
// if ( typeof value === "string") {
|
|
84
|
+
// const ttt = removeNumericFormat(value, undefined, numericFormatProps )
|
|
85
|
+
//
|
|
86
|
+
// console.log('ttt', ttt)
|
|
87
|
+
// }
|
|
88
|
+
|
|
89
|
+
const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
|
|
90
|
+
// const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
|
|
91
|
+
|
|
82
92
|
return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
|
|
83
93
|
case 'date':
|
|
84
94
|
return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { ColumnTable } from "../../type";
|
|
3
|
+
import type { IWrapSettings } from "../../type";
|
|
3
4
|
type Props = {
|
|
4
5
|
t?: any;
|
|
5
6
|
id?: string;
|
|
6
7
|
content?: string;
|
|
8
|
+
wrapSettings?: IWrapSettings;
|
|
7
9
|
column?: ColumnTable;
|
|
8
10
|
template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
|
|
9
11
|
tooltip?: string | number | React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
|
|
@@ -1,25 +1,36 @@
|
|
|
1
1
|
import React, { Fragment } from "react";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import { getTemplate } from "../utils";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
const HeaderStyle = styled.div.withConfig({
|
|
6
|
+
displayName: "HeaderStyle",
|
|
7
|
+
componentId: "es-grid-template__sc-ibhq66-0"
|
|
8
|
+
})([""]);
|
|
4
9
|
const HeaderContent = props => {
|
|
5
10
|
const {
|
|
6
11
|
t,
|
|
7
|
-
id
|
|
12
|
+
id,
|
|
13
|
+
wrapSettings
|
|
8
14
|
} = props;
|
|
9
15
|
const {
|
|
10
16
|
headerTooltip,
|
|
11
17
|
headerText,
|
|
12
18
|
columnGroupText,
|
|
13
|
-
headerTemplate
|
|
19
|
+
headerTemplate,
|
|
20
|
+
headerTextWrap,
|
|
21
|
+
ellipsis
|
|
14
22
|
} = props.column ?? {};
|
|
15
23
|
const text = React.useMemo(() => {
|
|
16
24
|
return columnGroupText ?? headerText;
|
|
17
25
|
}, [columnGroupText, headerText]);
|
|
18
26
|
const tooltip = React.useMemo(() => {
|
|
19
|
-
return
|
|
27
|
+
return t ? t?.(headerTooltip ?? columnGroupText ?? headerText) : headerTooltip ?? columnGroupText ?? headerText;
|
|
20
28
|
}, [columnGroupText, headerText, headerTooltip, t]);
|
|
21
|
-
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(
|
|
22
|
-
className: classnames('', {
|
|
29
|
+
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeaderStyle, {
|
|
30
|
+
className: classnames('', {
|
|
31
|
+
'ui-rc-table-cell-ellipsis': ellipsis !== false && headerTextWrap !== true,
|
|
32
|
+
'header-text-wrap': headerTextWrap ?? (wrapSettings?.wrapMode === 'Header' || wrapSettings?.wrapMode === 'Both')
|
|
33
|
+
}),
|
|
23
34
|
"data-tooltip-id": `${id}-tooltip-header`,
|
|
24
35
|
"data-tooltip-content": tooltip,
|
|
25
36
|
"data-tooltip-offset": 16
|
|
@@ -144,3 +144,8 @@ export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
|
|
|
144
144
|
export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
|
|
145
145
|
export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;
|
|
146
146
|
export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
|
|
147
|
+
export declare const isFormattedNumber: (str: string) => boolean;
|
|
148
|
+
export declare const detectSeparators: (str: string) => {
|
|
149
|
+
thousandSeparator: string;
|
|
150
|
+
decimalSeparator: string;
|
|
151
|
+
};
|
|
@@ -2062,4 +2062,63 @@ export function groupArrayByColumns(arr, columns) {
|
|
|
2062
2062
|
} else {
|
|
2063
2063
|
return arr;
|
|
2064
2064
|
}
|
|
2065
|
-
}
|
|
2065
|
+
}
|
|
2066
|
+
export const isFormattedNumber = str => {
|
|
2067
|
+
if (!str) return false;
|
|
2068
|
+
if (typeof str !== 'string') return false;
|
|
2069
|
+
const regexUS = /^\d{1,3}(,\d{3})*(\.\d+)?$/; // 100,000.111
|
|
2070
|
+
const regexEU = /^\d{1,3}(\.\d{3})*(,\d+)?$/; // 100.000,111
|
|
2071
|
+
|
|
2072
|
+
// Không có dấu hàng nghìn, chỉ dấu thập phân: 100000.1 hoặc 100000,01
|
|
2073
|
+
const regexDecimalOnly = /^\d+([.,]\d{1,})$/;
|
|
2074
|
+
return regexUS.test(str) || regexEU.test(str) || regexDecimalOnly.test(str);
|
|
2075
|
+
};
|
|
2076
|
+
export const detectSeparators = str => {
|
|
2077
|
+
if (typeof str !== 'string') return null;
|
|
2078
|
+
const hasComma = str.includes(',');
|
|
2079
|
+
const hasDot = str.includes('.');
|
|
2080
|
+
|
|
2081
|
+
// Trường hợp có cả dấu , và .
|
|
2082
|
+
if (hasComma && hasDot) {
|
|
2083
|
+
const lastComma = str.lastIndexOf(',');
|
|
2084
|
+
const lastDot = str.lastIndexOf('.');
|
|
2085
|
+
return lastComma > lastDot ? {
|
|
2086
|
+
thousandSeparator: '.',
|
|
2087
|
+
decimalSeparator: ','
|
|
2088
|
+
} : {
|
|
2089
|
+
thousandSeparator: ',',
|
|
2090
|
+
decimalSeparator: '.'
|
|
2091
|
+
};
|
|
2092
|
+
}
|
|
2093
|
+
|
|
2094
|
+
// Trường hợp chỉ có dấu phẩy
|
|
2095
|
+
if (hasComma && !hasDot) {
|
|
2096
|
+
const parts = str.split(',');
|
|
2097
|
+
if (parts.length === 2) {
|
|
2098
|
+
return parts[1].length === 3 ? {
|
|
2099
|
+
thousandSeparator: ',',
|
|
2100
|
+
decimalSeparator: null
|
|
2101
|
+
} : {
|
|
2102
|
+
thousandSeparator: null,
|
|
2103
|
+
decimalSeparator: ','
|
|
2104
|
+
};
|
|
2105
|
+
}
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
// Trường hợp chỉ có dấu chấm
|
|
2109
|
+
if (hasDot && !hasComma) {
|
|
2110
|
+
const parts = str.split('.');
|
|
2111
|
+
if (parts.length === 2) {
|
|
2112
|
+
return parts[1].length === 3 ? {
|
|
2113
|
+
thousandSeparator: '.',
|
|
2114
|
+
decimalSeparator: null
|
|
2115
|
+
} : {
|
|
2116
|
+
thousandSeparator: null,
|
|
2117
|
+
decimalSeparator: '.'
|
|
2118
|
+
};
|
|
2119
|
+
}
|
|
2120
|
+
}
|
|
2121
|
+
|
|
2122
|
+
// Không có dấu hoặc không hợp lệ
|
|
2123
|
+
return null;
|
|
2124
|
+
};
|
|
@@ -317,6 +317,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
|
|
|
317
317
|
//overflow: visible;
|
|
318
318
|
}
|
|
319
319
|
}
|
|
320
|
+
|
|
320
321
|
.#{$prefix}-table-column-title {
|
|
321
322
|
//display: flex;
|
|
322
323
|
}
|
|
@@ -324,9 +325,18 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
|
|
|
324
325
|
&.head-align-center {
|
|
325
326
|
text-align: center;
|
|
326
327
|
}
|
|
328
|
+
|
|
327
329
|
&.head-align-right {
|
|
328
330
|
text-align: right;
|
|
329
331
|
}
|
|
332
|
+
|
|
333
|
+
.ui-rc-table-column-title {
|
|
334
|
+
.header-text-wrap {
|
|
335
|
+
white-space: normal !important;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
|
|
330
340
|
}
|
|
331
341
|
}
|
|
332
342
|
|
|
@@ -1085,6 +1095,23 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
|
|
|
1085
1095
|
}
|
|
1086
1096
|
}
|
|
1087
1097
|
|
|
1098
|
+
|
|
1099
|
+
// -------------- radio ----------
|
|
1100
|
+
|
|
1101
|
+
.ui-rc-radio-wrapper {
|
|
1102
|
+
.ui-rc-radio-checked {
|
|
1103
|
+
.ui-rc-radio-inner {
|
|
1104
|
+
background-color: $primary;
|
|
1105
|
+
border-color: $primary;
|
|
1106
|
+
}
|
|
1107
|
+
}
|
|
1108
|
+
&:hover {
|
|
1109
|
+
.ui-rc-radio-inner {
|
|
1110
|
+
border-color: $primary;
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1088
1115
|
// ------------ Tree ---------------
|
|
1089
1116
|
|
|
1090
1117
|
.#{$prefix}-tree {
|