@snack-uikit/table 0.23.0 → 0.23.1
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.23.1 (2024-09-23)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **PDS-480:** remove direct usage of browser api elements ([1231ff7](https://github.com/cloud-ru-tech/snack-uikit/commit/1231ff7ab7a1b210b579a7b694633ef23bffcf44))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# 0.23.0 (2024-09-12)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
+
import { isBrowser } from '@snack-uikit/utils';
|
|
1
2
|
export function getCurrentlyConfiguredHeaderWidth(id) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
if (isBrowser()) {
|
|
4
|
+
const cell = document.querySelector(`[data-header-id="${id}"]`);
|
|
5
|
+
const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
|
|
6
|
+
if (cell && resizeHandler) {
|
|
7
|
+
const { width } = cell.getBoundingClientRect();
|
|
8
|
+
const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
|
|
9
|
+
return width + offset;
|
|
10
|
+
}
|
|
8
11
|
}
|
|
9
12
|
return 0;
|
|
10
13
|
}
|
package/dist/exportTable.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { utils as xlsxUtils, writeFileXLSX } from 'xlsx';
|
|
2
|
+
import { isBrowser } from '@snack-uikit/utils';
|
|
2
3
|
function getColumnValue(column, key) {
|
|
3
4
|
if (key in column && column[key] && typeof column[key] !== 'object' && typeof column[key] !== 'function') {
|
|
4
5
|
return String(column[key]);
|
|
@@ -33,21 +34,24 @@ function getXlsxFormatTable({ data, columnDefinitions, }) {
|
|
|
33
34
|
});
|
|
34
35
|
}
|
|
35
36
|
export function exportToCSV({ columnDefinitions, fileName = 'Table', data, }) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
if (isBrowser()) {
|
|
38
|
+
const xlsxData = getXlsxFormatTable({ data, columnDefinitions });
|
|
39
|
+
const headers = getFilteredColumnsHeaders(columnDefinitions);
|
|
40
|
+
const table = [headers, ...xlsxData];
|
|
41
|
+
const csv = table.map(line => line.map(el => (el === undefined ? `""` : `"${el}"`)).join(',')).join('\n');
|
|
42
|
+
const utf8Prefix = new Uint8Array([0xef, 0xbb, 0xbf]);
|
|
43
|
+
const blob = new Blob([utf8Prefix, csv], { type: 'text/csv' });
|
|
44
|
+
const url = URL.createObjectURL(blob);
|
|
45
|
+
const tempLink = Object.assign(document.createElement('a'), {
|
|
46
|
+
target: '_blank',
|
|
47
|
+
href: url,
|
|
48
|
+
download: fileName,
|
|
49
|
+
});
|
|
50
|
+
tempLink.click();
|
|
51
|
+
tempLink.remove();
|
|
52
|
+
return csv;
|
|
53
|
+
}
|
|
54
|
+
return '';
|
|
51
55
|
}
|
|
52
56
|
export function exportToXLSX({ columnDefinitions, fileName = 'Table', data, }) {
|
|
53
57
|
const xlsxData = getXlsxFormatTable({ data, columnDefinitions });
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
background-color:var(--sys-blue-accent-default, #5388d1);
|
|
63
63
|
}
|
|
64
64
|
.statusCellIndicator[data-appearance=violet]::after{
|
|
65
|
-
background-color:var(--sys-violet-accent-default, #
|
|
65
|
+
background-color:var(--sys-violet-accent-default, #aa6cc1);
|
|
66
66
|
}
|
|
67
67
|
.statusCellIndicator[data-appearance=pink]::after{
|
|
68
68
|
background-color:var(--sys-pink-accent-default, #d1668e);
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Table",
|
|
7
|
-
"version": "0.23.
|
|
7
|
+
"version": "0.23.1",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -32,20 +32,20 @@
|
|
|
32
32
|
"license": "Apache-2.0",
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@snack-uikit/button": "0.17.
|
|
36
|
-
"@snack-uikit/chips": "0.15.
|
|
37
|
-
"@snack-uikit/icon-predefined": "0.5.
|
|
38
|
-
"@snack-uikit/icons": "0.22.
|
|
39
|
-
"@snack-uikit/info-block": "0.4.
|
|
40
|
-
"@snack-uikit/list": "0.16.
|
|
41
|
-
"@snack-uikit/pagination": "0.7.
|
|
42
|
-
"@snack-uikit/scroll": "0.6.
|
|
43
|
-
"@snack-uikit/skeleton": "0.3.
|
|
44
|
-
"@snack-uikit/toggles": "0.10.
|
|
45
|
-
"@snack-uikit/toolbar": "0.7.
|
|
46
|
-
"@snack-uikit/truncate-string": "0.4.
|
|
47
|
-
"@snack-uikit/typography": "0.6.
|
|
48
|
-
"@snack-uikit/utils": "3.
|
|
35
|
+
"@snack-uikit/button": "0.17.5",
|
|
36
|
+
"@snack-uikit/chips": "0.15.2",
|
|
37
|
+
"@snack-uikit/icon-predefined": "0.5.2",
|
|
38
|
+
"@snack-uikit/icons": "0.22.1",
|
|
39
|
+
"@snack-uikit/info-block": "0.4.8",
|
|
40
|
+
"@snack-uikit/list": "0.16.2",
|
|
41
|
+
"@snack-uikit/pagination": "0.7.1",
|
|
42
|
+
"@snack-uikit/scroll": "0.6.1",
|
|
43
|
+
"@snack-uikit/skeleton": "0.3.5",
|
|
44
|
+
"@snack-uikit/toggles": "0.10.4",
|
|
45
|
+
"@snack-uikit/toolbar": "0.7.57",
|
|
46
|
+
"@snack-uikit/truncate-string": "0.4.22",
|
|
47
|
+
"@snack-uikit/typography": "0.6.3",
|
|
48
|
+
"@snack-uikit/utils": "3.4.0",
|
|
49
49
|
"@tanstack/match-sorter-utils": "8.11.8",
|
|
50
50
|
"@tanstack/react-table": "8.12.0",
|
|
51
51
|
"classnames": "2.3.2",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@snack-uikit/locale": "*"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
|
|
61
61
|
}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { isBrowser } from '@snack-uikit/utils';
|
|
2
|
+
|
|
3
|
+
export function getCurrentlyConfiguredHeaderWidth(id: string): number {
|
|
4
|
+
if (isBrowser()) {
|
|
5
|
+
const cell = document.querySelector<HTMLDivElement>(`[data-header-id="${id}"]`);
|
|
6
|
+
const resizeHandler = cell?.querySelector<HTMLDivElement>(
|
|
7
|
+
'[data-test-id="table__header-cell-resize-handle-moving-part"]',
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
if (cell && resizeHandler) {
|
|
11
|
+
const { width } = cell.getBoundingClientRect();
|
|
12
|
+
const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
|
|
13
|
+
return width + offset;
|
|
14
|
+
}
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
return 0;
|
package/src/exportTable.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { utils as xlsxUtils, writeFileXLSX } from 'xlsx';
|
|
2
2
|
|
|
3
|
+
import { isBrowser } from '@snack-uikit/utils';
|
|
4
|
+
|
|
3
5
|
import { ColumnDefinition } from './types';
|
|
4
6
|
|
|
5
7
|
type ExportTableData<TData> = {
|
|
@@ -61,23 +63,27 @@ export function exportToCSV<TData extends object>({
|
|
|
61
63
|
fileName = 'Table',
|
|
62
64
|
data,
|
|
63
65
|
}: ExportTableData<TData>) {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
if (isBrowser()) {
|
|
67
|
+
const xlsxData = getXlsxFormatTable({ data, columnDefinitions });
|
|
68
|
+
const headers = getFilteredColumnsHeaders(columnDefinitions);
|
|
69
|
+
const table = [headers, ...xlsxData];
|
|
70
|
+
const csv = table.map(line => line.map(el => (el === undefined ? `""` : `"${el}"`)).join(',')).join('\n');
|
|
71
|
+
|
|
72
|
+
const utf8Prefix = new Uint8Array([0xef, 0xbb, 0xbf]);
|
|
73
|
+
const blob = new Blob([utf8Prefix, csv], { type: 'text/csv' });
|
|
74
|
+
const url = URL.createObjectURL(blob);
|
|
75
|
+
const tempLink = Object.assign(document.createElement('a'), {
|
|
76
|
+
target: '_blank',
|
|
77
|
+
href: url,
|
|
78
|
+
download: fileName,
|
|
79
|
+
});
|
|
80
|
+
tempLink.click();
|
|
81
|
+
tempLink.remove();
|
|
82
|
+
|
|
83
|
+
return csv;
|
|
84
|
+
}
|
|
79
85
|
|
|
80
|
-
return
|
|
86
|
+
return '';
|
|
81
87
|
}
|
|
82
88
|
|
|
83
89
|
export function exportToXLSX<TData extends object>({
|