@stenajs-webui/grid-export 17.4.1 → 17.7.0
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 +12 -0
- package/dist/common/CellFormatters.d.ts +2 -2
- package/dist/features/grid-copy-to-clipboard/components/StandardTableHtmlCopyToClipboardButton.d.ts +12 -12
- package/dist/features/grid-copy-to-clipboard/transformers/AlignmentTransformer.d.ts +1 -1
- package/dist/features/grid-copy-to-clipboard/transformers/CellTransformer.d.ts +3 -3
- package/dist/features/grid-copy-to-clipboard/transformers/ConfigTransformer.d.ts +3 -3
- package/dist/features/grid-copy-to-clipboard/transformers/HeaderTransformer.d.ts +3 -3
- package/dist/features/grid-copy-to-clipboard/transformers/RowTransformer.d.ts +4 -4
- package/dist/features/grid-copy-to-clipboard/transformers/__mocks__/CopyToClipboardTestData.d.ts +12 -12
- package/dist/features/grid-copy-to-clipboard/util/CopyContentToClipboard.d.ts +3 -3
- package/dist/features/grid-copy-to-clipboard/util/HtmlRenderer.d.ts +3 -3
- package/dist/features/grid-excel-export/components/StandardTableExcelExportButton.d.ts +10 -10
- package/dist/features/grid-excel-export/transformers/CellTransformer.d.ts +4 -4
- package/dist/features/grid-excel-export/transformers/ConfigTransformer.d.ts +4 -4
- package/dist/features/grid-excel-export/transformers/HeaderTransformer.d.ts +5 -5
- package/dist/features/grid-excel-export/transformers/RowTransformer.d.ts +5 -5
- package/dist/features/grid-excel-export/transformers/__mocks__/ExcelExportTestData.d.ts +12 -12
- package/dist/features/grid-excel-export/util/ExcelDownloader.d.ts +3 -3
- package/dist/index.d.ts +6 -6
- package/dist/index.es.js +219 -328
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -373
- package/dist/index.js.map +1 -1
- package/package.json +8 -9
- package/dist/features/grid-copy-to-clipboard/stories/StandardTableWithClipboardCopyButton.stories.d.ts +0 -11
- package/dist/features/grid-copy-to-clipboard/transformers/__tests__/CellTransformer.test.d.ts +0 -1
- package/dist/features/grid-copy-to-clipboard/transformers/__tests__/ConfigTransformer.test.d.ts +0 -1
- package/dist/features/grid-copy-to-clipboard/transformers/__tests__/HeaderTransformer.test.d.ts +0 -1
- package/dist/features/grid-copy-to-clipboard/transformers/__tests__/RowTransformer.test.d.ts +0 -1
- package/dist/features/grid-excel-export/stories/StandardTableWithExport.stories.d.ts +0 -9
- package/dist/features/grid-excel-export/transformers/__tests__/CellTransformer.test.d.ts +0 -1
- package/dist/features/grid-excel-export/transformers/__tests__/ConfigTransformer.test.d.ts +0 -1
- package/dist/features/grid-excel-export/transformers/__tests__/HeaderTransformer.test.d.ts +0 -1
- package/dist/features/grid-excel-export/transformers/__tests__/RowTransformer.test.d.ts +0 -1
package/dist/index.es.js
CHANGED
|
@@ -1,343 +1,234 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import * as clipboard from
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
return groupConfig.columnOrder.map(function (_, index) {
|
|
89
|
-
var _a;
|
|
90
|
-
return {
|
|
91
|
-
type: "string",
|
|
92
|
-
value: index === 0 ? (_a = groupConfig.label) !== null && _a !== void 0 ? _a : "" : "",
|
|
93
|
-
};
|
|
94
|
-
});
|
|
95
|
-
}));
|
|
1
|
+
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { useCallback, useState } from "react";
|
|
2
|
+
import zipcelx from "zipcelx";
|
|
3
|
+
import { formatColumnIdToHeaderCellLabel, createGroupConfigAndIdsForRows } from "@stenajs-webui/grid";
|
|
4
|
+
import { flatten } from "lodash";
|
|
5
|
+
import { format } from "date-fns";
|
|
6
|
+
import { FlatButton } from "@stenajs-webui/elements";
|
|
7
|
+
import { faFileDownload } from "@fortawesome/free-solid-svg-icons/faFileDownload";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
import * as clipboard from "clipboard-polyfill";
|
|
10
|
+
const transformTableHeaders$1 = (config, groupConfigs) => {
|
|
11
|
+
return flatten(groupConfigs.map((groupConfig) => groupConfig.columnOrder.map((columnId) => {
|
|
12
|
+
var _a;
|
|
13
|
+
const columnConfig = config.columns[columnId];
|
|
14
|
+
return {
|
|
15
|
+
type: "string",
|
|
16
|
+
value: (_a = columnConfig.columnLabel) != null ? _a : formatColumnIdToHeaderCellLabel(String(columnId))
|
|
17
|
+
};
|
|
18
|
+
})));
|
|
19
|
+
};
|
|
20
|
+
const transformGroupHeaders$1 = (groupConfigs) => {
|
|
21
|
+
return flatten(groupConfigs.map((groupConfig) => groupConfig.columnOrder.map((_, index) => {
|
|
22
|
+
var _a;
|
|
23
|
+
return {
|
|
24
|
+
type: "string",
|
|
25
|
+
value: index === 0 ? (_a = groupConfig.label) != null ? _a : "" : ""
|
|
26
|
+
};
|
|
27
|
+
})));
|
|
28
|
+
};
|
|
29
|
+
const transformItemToCell$1 = (item, itemValueResolver, itemLabelFormatter, formatter) => {
|
|
30
|
+
if (formatter) {
|
|
31
|
+
return createCell$1(formatter(item));
|
|
32
|
+
}
|
|
33
|
+
const value = itemValueResolver(item);
|
|
34
|
+
if (itemLabelFormatter) {
|
|
35
|
+
const label = itemLabelFormatter == null ? void 0 : itemLabelFormatter(value, item);
|
|
36
|
+
return createCell$1(label);
|
|
37
|
+
}
|
|
38
|
+
if (typeof value === "number" || typeof value === "string") {
|
|
39
|
+
return createCell$1(value);
|
|
40
|
+
}
|
|
41
|
+
if (typeof value === "boolean") {
|
|
42
|
+
return createCell$1(value ? "Y" : "");
|
|
43
|
+
}
|
|
44
|
+
if (value instanceof Date) {
|
|
45
|
+
return createCell$1(format(value, "yyyy-MM-dd HH:mm"));
|
|
46
|
+
}
|
|
47
|
+
if (value == null) {
|
|
48
|
+
return createCell$1("");
|
|
49
|
+
}
|
|
50
|
+
return createCell$1(String(value));
|
|
51
|
+
};
|
|
52
|
+
const createCell$1 = (value) => {
|
|
53
|
+
const type = typeof value === "number" ? "number" : "string";
|
|
54
|
+
return {
|
|
55
|
+
type,
|
|
56
|
+
value
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
const transformTableRow$1 = (item, config, groupConfigs, formatters) => {
|
|
60
|
+
return flatten(groupConfigs.map((groupConfig) => groupConfig.columnOrder.map((columnId) => transformCell$1(item, columnId, config, formatters))));
|
|
61
|
+
};
|
|
62
|
+
const transformCell$1 = (item, columnId, config, formatters) => {
|
|
63
|
+
const columnConfig = config.columns[columnId];
|
|
64
|
+
const formatter = formatters == null ? void 0 : formatters[columnId];
|
|
65
|
+
return transformItemToCell$1(item, columnConfig.itemValueResolver, columnConfig.itemLabelFormatter, formatter);
|
|
66
|
+
};
|
|
67
|
+
const createZipcelxConfig = (filename, config, items, formatters) => {
|
|
68
|
+
const groupConfigsAndIds = createGroupConfigAndIdsForRows("columnGroups" in config ? config.columnGroups : void 0, "columnGroupOrder" in config ? config.columnGroupOrder : void 0, "columnOrder" in config ? config.columnOrder : void 0);
|
|
69
|
+
const headerRows = [];
|
|
70
|
+
const groupConfigs = groupConfigsAndIds.map((p) => p.groupConfig);
|
|
71
|
+
if ("columnGroups" in config) {
|
|
72
|
+
headerRows.push(transformGroupHeaders$1(groupConfigs));
|
|
73
|
+
}
|
|
74
|
+
headerRows.push(transformTableHeaders$1(config, groupConfigs));
|
|
75
|
+
return {
|
|
76
|
+
filename,
|
|
77
|
+
sheet: {
|
|
78
|
+
data: [
|
|
79
|
+
...headerRows,
|
|
80
|
+
...items.map((item) => transformTableRow$1(item, config, groupConfigs, formatters))
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
const downloadExcelForStandardTable = async (filename, config, items, formatters) => {
|
|
86
|
+
const excelConfig = createZipcelxConfig(filename, config, items, formatters);
|
|
87
|
+
await zipcelx(excelConfig);
|
|
96
88
|
};
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
if (value == null) {
|
|
117
|
-
return createCell$1("");
|
|
118
|
-
}
|
|
119
|
-
return createCell$1(String(value));
|
|
120
|
-
};
|
|
121
|
-
var createCell$1 = function (value) {
|
|
122
|
-
var type = typeof value === "number" ? "number" : "string";
|
|
123
|
-
return {
|
|
124
|
-
type: type,
|
|
125
|
-
value: value,
|
|
126
|
-
};
|
|
89
|
+
const StandardTableExcelExportButton = function StandardTableExcelExportButton2({
|
|
90
|
+
config,
|
|
91
|
+
size,
|
|
92
|
+
items,
|
|
93
|
+
filename = "exported-spreadsheet",
|
|
94
|
+
formatters
|
|
95
|
+
}) {
|
|
96
|
+
const onClickExportExcel = useCallback(async () => {
|
|
97
|
+
if (items && items.length) {
|
|
98
|
+
await downloadExcelForStandardTable(filename, config, items, formatters);
|
|
99
|
+
}
|
|
100
|
+
}, [config, items, filename, formatters]);
|
|
101
|
+
return /* @__PURE__ */ jsx(FlatButton, {
|
|
102
|
+
size,
|
|
103
|
+
leftIcon: faFileDownload,
|
|
104
|
+
onClick: onClickExportExcel,
|
|
105
|
+
disabled: !items || !items.length
|
|
106
|
+
});
|
|
127
107
|
};
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
108
|
+
const transformJustifyContentToTextAlign = (justifyContent) => {
|
|
109
|
+
switch (justifyContent == null ? void 0 : justifyContent.toLowerCase()) {
|
|
110
|
+
case "left":
|
|
111
|
+
case "start":
|
|
112
|
+
case "flex-start":
|
|
113
|
+
return "text-align: left";
|
|
114
|
+
case "right":
|
|
115
|
+
case "end":
|
|
116
|
+
case "flex-end":
|
|
117
|
+
return "text-align: right";
|
|
118
|
+
case "center":
|
|
119
|
+
return "text-align: center";
|
|
120
|
+
default:
|
|
121
|
+
return void 0;
|
|
122
|
+
}
|
|
140
123
|
};
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
var
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
filename: filename,
|
|
152
|
-
sheet: {
|
|
153
|
-
data: __spreadArray(__spreadArray([], headerRows, true), items.map(function (item) {
|
|
154
|
-
return transformTableRow$1(item, config, groupConfigs, formatters);
|
|
155
|
-
}), true),
|
|
156
|
-
},
|
|
157
|
-
};
|
|
124
|
+
const transformTableHeaders = (config, groupConfigs) => {
|
|
125
|
+
return flatten(groupConfigs.map((groupConfig) => groupConfig.columnOrder.map((columnId) => {
|
|
126
|
+
var _a, _b;
|
|
127
|
+
const columnConfig = config.columns[columnId];
|
|
128
|
+
if (columnConfig.justifyContentHeader) {
|
|
129
|
+
const styleProperty = transformJustifyContentToTextAlign(columnConfig.justifyContentHeader);
|
|
130
|
+
return `<th${styleProperty ? ' style="' + styleProperty + '"' : ""}>${(_a = columnConfig.columnLabel) != null ? _a : formatColumnIdToHeaderCellLabel(String(columnId))}</th>`;
|
|
131
|
+
}
|
|
132
|
+
return `<th>${(_b = columnConfig.columnLabel) != null ? _b : formatColumnIdToHeaderCellLabel(String(columnId))}</th>`;
|
|
133
|
+
})));
|
|
158
134
|
};
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
var
|
|
162
|
-
return
|
|
163
|
-
|
|
164
|
-
case 0:
|
|
165
|
-
excelConfig = createZipcelxConfig(filename, config, items, formatters);
|
|
166
|
-
return [4 /*yield*/, zipcelx(excelConfig)];
|
|
167
|
-
case 1:
|
|
168
|
-
_a.sent();
|
|
169
|
-
return [2 /*return*/];
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
}); };
|
|
173
|
-
|
|
174
|
-
var StandardTableExcelExportButton = function StandardTableExcelExportButton(_a) {
|
|
175
|
-
var _this = this;
|
|
176
|
-
var config = _a.config, size = _a.size, items = _a.items, _b = _a.filename, filename = _b === void 0 ? "exported-spreadsheet" : _b, formatters = _a.formatters;
|
|
177
|
-
var onClickExportExcel = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
178
|
-
return __generator(this, function (_a) {
|
|
179
|
-
switch (_a.label) {
|
|
180
|
-
case 0:
|
|
181
|
-
if (!(items && items.length)) return [3 /*break*/, 2];
|
|
182
|
-
return [4 /*yield*/, downloadExcelForStandardTable(filename, config, items, formatters)];
|
|
183
|
-
case 1:
|
|
184
|
-
_a.sent();
|
|
185
|
-
_a.label = 2;
|
|
186
|
-
case 2: return [2 /*return*/];
|
|
187
|
-
}
|
|
188
|
-
});
|
|
189
|
-
}); }, [config, items, filename, formatters]);
|
|
190
|
-
return (React.createElement(FlatButton, { size: size, leftIcon: faFileDownload, onClick: onClickExportExcel, disabled: !items || !items.length }));
|
|
135
|
+
const transformGroupHeaders = (groupConfigs) => {
|
|
136
|
+
return flatten(groupConfigs.map((groupConfig) => {
|
|
137
|
+
var _a;
|
|
138
|
+
return `<th style="text-align: left" colspan="${groupConfig.columnOrder.length}">${(_a = groupConfig.label) != null ? _a : ""}</th>`;
|
|
139
|
+
}));
|
|
191
140
|
};
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
141
|
+
const transformItemToCell = (item, itemValueResolver, justifyContentCell, itemLabelFormatter, formatter) => {
|
|
142
|
+
if (formatter) {
|
|
143
|
+
return createCell(formatter(item), justifyContentCell);
|
|
144
|
+
}
|
|
145
|
+
const value = itemValueResolver(item);
|
|
146
|
+
if (itemLabelFormatter) {
|
|
147
|
+
const label = itemLabelFormatter == null ? void 0 : itemLabelFormatter(value, item);
|
|
148
|
+
return createCell(label, justifyContentCell);
|
|
149
|
+
}
|
|
150
|
+
if (typeof value === "number" || typeof value === "string") {
|
|
151
|
+
return createCell(value, justifyContentCell);
|
|
152
|
+
}
|
|
153
|
+
if (typeof value === "boolean") {
|
|
154
|
+
return createCell(value ? "Y" : "", justifyContentCell);
|
|
155
|
+
}
|
|
156
|
+
if (value instanceof Date) {
|
|
157
|
+
return createCell(format(value, "yyyy-MM-dd HH:mm"), justifyContentCell);
|
|
158
|
+
}
|
|
159
|
+
if (value == null) {
|
|
160
|
+
return createCell("", justifyContentCell);
|
|
161
|
+
}
|
|
162
|
+
return createCell(String(value), justifyContentCell);
|
|
208
163
|
};
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
if (columnConfig.justifyContentHeader) {
|
|
216
|
-
var styleProperty = transformJustifyContentToTextAlign(columnConfig.justifyContentHeader);
|
|
217
|
-
return "<th".concat(styleProperty ? ' style="' + styleProperty + '"' : "", ">").concat((_a = columnConfig.columnLabel) !== null && _a !== void 0 ? _a : formatColumnIdToHeaderCellLabel(String(columnId)), "</th>");
|
|
218
|
-
}
|
|
219
|
-
return "<th>".concat((_b = columnConfig.columnLabel) !== null && _b !== void 0 ? _b : formatColumnIdToHeaderCellLabel(String(columnId)), "</th>");
|
|
220
|
-
});
|
|
221
|
-
}));
|
|
222
|
-
};
|
|
223
|
-
var transformGroupHeaders = function (groupConfigs) {
|
|
224
|
-
return flatten(groupConfigs.map(function (groupConfig) {
|
|
225
|
-
var _a;
|
|
226
|
-
return "<th style=\"text-align: left\" colspan=\"".concat(groupConfig.columnOrder.length, "\">").concat((_a = groupConfig.label) !== null && _a !== void 0 ? _a : "", "</th>");
|
|
227
|
-
}));
|
|
164
|
+
const createCell = (value, justifyContentCell) => {
|
|
165
|
+
if (justifyContentCell) {
|
|
166
|
+
const styleProperty = transformJustifyContentToTextAlign(justifyContentCell);
|
|
167
|
+
return `<td${styleProperty ? ' style="' + styleProperty + '"' : ""}>${value}</td>`;
|
|
168
|
+
}
|
|
169
|
+
return `<td>${value}</td>`;
|
|
228
170
|
};
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
if (formatter) {
|
|
232
|
-
return createCell(formatter(item), justifyContentCell);
|
|
233
|
-
}
|
|
234
|
-
var value = itemValueResolver(item);
|
|
235
|
-
if (itemLabelFormatter) {
|
|
236
|
-
var label = itemLabelFormatter === null || itemLabelFormatter === void 0 ? void 0 : itemLabelFormatter(value, item);
|
|
237
|
-
return createCell(label, justifyContentCell);
|
|
238
|
-
}
|
|
239
|
-
if (typeof value === "number" || typeof value === "string") {
|
|
240
|
-
return createCell(value, justifyContentCell);
|
|
241
|
-
}
|
|
242
|
-
if (typeof value === "boolean") {
|
|
243
|
-
return createCell(value ? "Y" : "", justifyContentCell);
|
|
244
|
-
}
|
|
245
|
-
if (value instanceof Date) {
|
|
246
|
-
return createCell(format(value, "yyyy-MM-dd HH:mm"), justifyContentCell);
|
|
247
|
-
}
|
|
248
|
-
if (value == null) {
|
|
249
|
-
return createCell("", justifyContentCell);
|
|
250
|
-
}
|
|
251
|
-
return createCell(String(value), justifyContentCell);
|
|
252
|
-
};
|
|
253
|
-
var createCell = function (value, justifyContentCell) {
|
|
254
|
-
if (justifyContentCell) {
|
|
255
|
-
var styleProperty = transformJustifyContentToTextAlign(justifyContentCell);
|
|
256
|
-
return "<td".concat(styleProperty ? ' style="' + styleProperty + '"' : "", ">").concat(value, "</td>");
|
|
257
|
-
}
|
|
258
|
-
return "<td>".concat(value, "</td>");
|
|
171
|
+
const transformTableRow = (item, config, groupConfigs, formatters) => {
|
|
172
|
+
return flatten(groupConfigs.map((groupConfig) => groupConfig.columnOrder.map((columnId) => transformCell(item, columnId, config, formatters)))).join("");
|
|
259
173
|
};
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
return transformCell(item, columnId, config, formatters);
|
|
265
|
-
});
|
|
266
|
-
})).join("");
|
|
267
|
-
};
|
|
268
|
-
var transformCell = function (item, columnId, config, formatters) {
|
|
269
|
-
var columnConfig = config.columns[columnId];
|
|
270
|
-
var formatter = formatters === null || formatters === void 0 ? void 0 : formatters[columnId];
|
|
271
|
-
return transformItemToCell(item, columnConfig.itemValueResolver, columnConfig.justifyContentCell, columnConfig.itemLabelFormatter, formatter);
|
|
174
|
+
const transformCell = (item, columnId, config, formatters) => {
|
|
175
|
+
const columnConfig = config.columns[columnId];
|
|
176
|
+
const formatter = formatters == null ? void 0 : formatters[columnId];
|
|
177
|
+
return transformItemToCell(item, columnConfig.itemValueResolver, columnConfig.justifyContentCell, columnConfig.itemLabelFormatter, formatter);
|
|
272
178
|
};
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
var tbodyRows = items
|
|
286
|
-
.map(function (item) { return transformTableRow(item, config, groupConfigs, formatters); })
|
|
287
|
-
.map(function (row) { return "<tr>".concat(row, "</tr>"); });
|
|
288
|
-
var body = "<tbody>".concat(tbodyRows.join(""), "</tbody>");
|
|
289
|
-
return "<table>".concat(header).concat(body, "</table>");
|
|
179
|
+
const createHtmlConfig = (config, items, formatters) => {
|
|
180
|
+
const groupConfigsAndIds = createGroupConfigAndIdsForRows("columnGroups" in config ? config.columnGroups : void 0, "columnGroupOrder" in config ? config.columnGroupOrder : void 0, "columnOrder" in config ? config.columnOrder : void 0);
|
|
181
|
+
const headerRows = [];
|
|
182
|
+
const groupConfigs = groupConfigsAndIds.map((p) => p.groupConfig);
|
|
183
|
+
if ("columnGroups" in config) {
|
|
184
|
+
headerRows.push(transformGroupHeaders(groupConfigs).join(""));
|
|
185
|
+
}
|
|
186
|
+
headerRows.push(transformTableHeaders(config, groupConfigs).join(""));
|
|
187
|
+
const header = `<thead>${headerRows.map((headerRow) => `<tr>${headerRow}</tr>`).join("")}</thead>`;
|
|
188
|
+
const tbodyRows = items.map((item) => transformTableRow(item, config, groupConfigs, formatters)).map((row) => `<tr>${row}</tr>`);
|
|
189
|
+
const body = `<tbody>${tbodyRows.join("")}</tbody>`;
|
|
190
|
+
return `<table>${header}${body}</table>`;
|
|
290
191
|
};
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
return createHtmlConfig(config, items, formatters);
|
|
192
|
+
const renderHtmlForStandardTable = (config, items, formatters) => {
|
|
193
|
+
return createHtmlConfig(config, items, formatters);
|
|
294
194
|
};
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
if (!htmlToCopy) return [3 /*break*/, 2];
|
|
310
|
-
item = new clipboard.ClipboardItem({
|
|
311
|
-
"text/html": new Blob([htmlToCopy], { type: "text/html" }),
|
|
312
|
-
});
|
|
313
|
-
return [4 /*yield*/, clipboard.write([item])];
|
|
314
|
-
case 1:
|
|
315
|
-
_a.sent();
|
|
316
|
-
_a.label = 2;
|
|
317
|
-
case 2: return [2 /*return*/];
|
|
318
|
-
}
|
|
319
|
-
});
|
|
320
|
-
});
|
|
195
|
+
async function copyContentToClipboard(items, config, formatters, renderContent) {
|
|
196
|
+
let htmlToCopy = "";
|
|
197
|
+
if (items && items.length) {
|
|
198
|
+
htmlToCopy = renderHtmlForStandardTable(config, items, formatters);
|
|
199
|
+
}
|
|
200
|
+
if (renderContent) {
|
|
201
|
+
htmlToCopy = renderContent(htmlToCopy);
|
|
202
|
+
}
|
|
203
|
+
if (htmlToCopy) {
|
|
204
|
+
const item = new clipboard.ClipboardItem({
|
|
205
|
+
"text/html": new Blob([htmlToCopy], { type: "text/html" })
|
|
206
|
+
});
|
|
207
|
+
await clipboard.write([item]);
|
|
208
|
+
}
|
|
321
209
|
}
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
210
|
+
function StandardTableHtmlCopyToClipboardButton({
|
|
211
|
+
config,
|
|
212
|
+
renderContent,
|
|
213
|
+
size,
|
|
214
|
+
items,
|
|
215
|
+
formatters,
|
|
216
|
+
label = "Copy to clipboard",
|
|
217
|
+
labelAfterCopy = "Content copied!",
|
|
218
|
+
numTimeToRevertLabel = 2e3
|
|
219
|
+
}) {
|
|
220
|
+
const [contentCopied, setContentCopied] = useState(false);
|
|
221
|
+
const onClickExportHtml = useCallback(async () => {
|
|
222
|
+
await copyContentToClipboard(items, config, formatters, renderContent);
|
|
223
|
+
setContentCopied(true);
|
|
224
|
+
setTimeout(() => setContentCopied(false), numTimeToRevertLabel);
|
|
225
|
+
}, [config, items, formatters, numTimeToRevertLabel, renderContent]);
|
|
226
|
+
return /* @__PURE__ */ jsx(FlatButton, {
|
|
227
|
+
size,
|
|
228
|
+
onClick: onClickExportHtml,
|
|
229
|
+
disabled: !items || !items.length,
|
|
230
|
+
label: contentCopied ? labelAfterCopy : label
|
|
231
|
+
});
|
|
340
232
|
}
|
|
341
|
-
|
|
342
233
|
export { StandardTableExcelExportButton, StandardTableHtmlCopyToClipboardButton, createHtmlConfig, createZipcelxConfig, downloadExcelForStandardTable };
|
|
343
234
|
//# sourceMappingURL=index.es.js.map
|