@pdg/react-table 1.1.9 → 1.1.11
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/dist/index.esm.js +690 -696
- package/dist/index.js +690 -696
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -6,54 +6,7 @@
|
|
|
6
6
|
style.innerHTML = css;
|
|
7
7
|
document.head.appendChild(style);
|
|
8
8
|
return css;
|
|
9
|
-
}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.PTable .PTableHead .PTableHeadRow th{position:relative;transform:translateY(-100%)}.PTable.sticky-header .PTableHead .PTableHeadRow th{position:sticky;transform:none}")
|
|
10
|
-
Copyright (c) Microsoft Corporation.
|
|
11
|
-
|
|
12
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
13
|
-
purpose with or without fee is hereby granted.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
16
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
17
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
18
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
19
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
20
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
21
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
22
|
-
***************************************************************************** */
|
|
23
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var __assign$2 = function() {
|
|
27
|
-
__assign$2 = Object.assign || function __assign(t) {
|
|
28
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
29
|
-
s = arguments[i];
|
|
30
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
31
|
-
}
|
|
32
|
-
return t;
|
|
33
|
-
};
|
|
34
|
-
return __assign$2.apply(this, arguments);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
function __rest$1(s, e) {
|
|
38
|
-
var t = {};
|
|
39
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
40
|
-
t[p] = s[p];
|
|
41
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
42
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
43
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
44
|
-
t[p[i]] = s[p[i]];
|
|
45
|
-
}
|
|
46
|
-
return t;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function __makeTemplateObject(cooked, raw) {
|
|
50
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
51
|
-
return cooked;
|
|
52
|
-
}
|
|
53
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
54
|
-
var e = new Error(message);
|
|
55
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
56
|
-
};var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
9
|
+
}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.PTable .PTableHead .PTableHeadRow th{position:relative;transform:translateY(-100%)}.PTable.sticky-header .PTableHead .PTableHeadRow th{position:sticky;transform:none}");var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
57
10
|
|
|
58
11
|
function getDefaultExportFromCjs (x) {
|
|
59
12
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -138,14 +91,36 @@ function requireClassnames () {
|
|
|
138
91
|
} (classnames));
|
|
139
92
|
return classnames.exports;
|
|
140
93
|
}var classnamesExports = requireClassnames();
|
|
141
|
-
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
94
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);const Label = material.styled(material.Box) `
|
|
95
|
+
font-size: 12px;
|
|
96
|
+
font-weight: bold;
|
|
97
|
+
`;
|
|
98
|
+
const ValueWrap = material.styled(material.Box) `
|
|
99
|
+
margin-top: 3px;
|
|
100
|
+
position: relative;
|
|
101
|
+
display: flex;
|
|
102
|
+
flex-direction: row;
|
|
103
|
+
`;
|
|
104
|
+
const Value = material.styled('div') `
|
|
105
|
+
flex: 1;
|
|
106
|
+
`;
|
|
107
|
+
const ValueEllipsis = material.styled('div') `
|
|
108
|
+
flex: 1;
|
|
109
|
+
position: relative;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
text-overflow: ellipsis;
|
|
112
|
+
white-space: nowrap;
|
|
113
|
+
`;
|
|
114
|
+
const ValueClipboard = material.styled('div') ``;
|
|
115
|
+
const ClipboardIconButton = material.styled(material.IconButton) `
|
|
116
|
+
margin-top: -10px;
|
|
117
|
+
margin-bottom: -10px;
|
|
118
|
+
`;
|
|
119
|
+
const Line = material.styled('div') `
|
|
120
|
+
border-top: 1px solid #efefef;
|
|
121
|
+
height: 1px;
|
|
122
|
+
flex: 1;
|
|
123
|
+
`;function getTableColumnAlign(column, defaultAlign) {
|
|
149
124
|
switch (column.type) {
|
|
150
125
|
case 'number':
|
|
151
126
|
return column.align ? column.align : 'right';
|
|
@@ -153,21 +128,17 @@ var templateObject_1$4, templateObject_2, templateObject_3, templateObject_4, te
|
|
|
153
128
|
return column.align || defaultAlign;
|
|
154
129
|
}
|
|
155
130
|
}
|
|
156
|
-
function combineSx() {
|
|
157
|
-
|
|
158
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
159
|
-
sx[_i] = arguments[_i];
|
|
160
|
-
}
|
|
161
|
-
var finalSx = [];
|
|
131
|
+
function combineSx(...sx) {
|
|
132
|
+
const finalSx = [];
|
|
162
133
|
if (Array.isArray(finalSx)) {
|
|
163
|
-
sx.forEach(
|
|
134
|
+
sx.forEach((v) => v && finalSx.push(...(Array.isArray(v) ? v : [v])));
|
|
164
135
|
}
|
|
165
136
|
return finalSx;
|
|
166
137
|
}
|
|
167
138
|
function typographyColorToSxColor(color) {
|
|
168
139
|
if (typeof color === 'string') {
|
|
169
140
|
if (['primary', 'secondary', 'info', 'warning', 'error'].includes(color)) {
|
|
170
|
-
return
|
|
141
|
+
return `${color}.main`;
|
|
171
142
|
}
|
|
172
143
|
else if (color === 'text') {
|
|
173
144
|
return 'text.primary';
|
|
@@ -191,179 +162,173 @@ function requireDayjs_min () {
|
|
|
191
162
|
} (dayjs_min$1));
|
|
192
163
|
return dayjs_min$1.exports;
|
|
193
164
|
}var dayjs_minExports = requireDayjs_min();
|
|
194
|
-
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
165
|
+
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);const PInfoTable = ({ cols, spacing = 2, columnSpacing, rowSpacing = 3, className, style, sx, labelClassName, labelColor = 'primary', labelStyle, labelSx, dividerColor = 'gray', valueClassName, valueStyle, valueSx, ellipsis, valueUnderline, info, items, onCopyToClipboard, }) => {
|
|
195
166
|
/********************************************************************************************************************
|
|
196
167
|
* Memo
|
|
197
168
|
* ******************************************************************************************************************/
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
else {
|
|
212
|
-
data = info[item.name];
|
|
213
|
-
}
|
|
169
|
+
const renderItems = React.useMemo(() => items.filter((item) => !!item && (!item.onHide || !item.onHide(info))).map((item) => {
|
|
170
|
+
/** data */
|
|
171
|
+
let data = undefined;
|
|
172
|
+
if (item.name !== undefined) {
|
|
173
|
+
if (info[item.name] !== undefined) {
|
|
174
|
+
if (info[item.name] instanceof Date) {
|
|
175
|
+
data = dayjs(info[item.name]).format('YYYY-MM-DD HH:mm:ss');
|
|
176
|
+
}
|
|
177
|
+
else if (info[item.name] instanceof dayjs) {
|
|
178
|
+
data = info[item.name].format('YYYY-MM-DD HH:mm:ss');
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
data = info[item.name];
|
|
214
182
|
}
|
|
215
183
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
React.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
|
|
227
|
-
data));
|
|
228
|
-
}
|
|
229
|
-
if (item.numberSuffix) {
|
|
230
|
-
data = (React.createElement(React.Fragment, null,
|
|
231
|
-
data,
|
|
232
|
-
React.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
break;
|
|
236
|
-
case 'tel':
|
|
237
|
-
if (typeof data === 'string') {
|
|
238
|
-
data = formatting.formatTelNo(data);
|
|
239
|
-
}
|
|
240
|
-
break;
|
|
241
|
-
case 'email':
|
|
242
|
-
if (typeof data === 'string') {
|
|
243
|
-
data = (React.createElement(React.Fragment, null,
|
|
244
|
-
React.createElement("a", { href: "mailto:".concat(data) }, data)));
|
|
245
|
-
}
|
|
246
|
-
break;
|
|
247
|
-
case 'url':
|
|
248
|
-
if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
|
|
249
|
-
data = (React.createElement(React.Fragment, null,
|
|
250
|
-
React.createElement("a", { href: data, target: '_blank' }, data)));
|
|
251
|
-
}
|
|
252
|
-
break;
|
|
253
|
-
case 'business_no':
|
|
254
|
-
if (typeof data === 'string') {
|
|
255
|
-
data = formatting.formatBusinessNo(data);
|
|
256
|
-
}
|
|
257
|
-
break;
|
|
258
|
-
case 'personal_no':
|
|
259
|
-
if (typeof data === 'string') {
|
|
260
|
-
data = formatting.formatPersonalNo(data);
|
|
261
|
-
}
|
|
262
|
-
break;
|
|
263
|
-
case 'date':
|
|
264
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
265
|
-
data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
|
|
266
|
-
}
|
|
267
|
-
break;
|
|
268
|
-
case 'datetime':
|
|
269
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
270
|
-
var dt = dayjs(data, item.dateFormat);
|
|
271
|
-
data = (React.createElement(React.Fragment, null,
|
|
272
|
-
React.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
273
|
-
item.dateTwoLine ? React.createElement("br", null) : ' ',
|
|
274
|
-
React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
|
|
275
|
-
}
|
|
276
|
-
break;
|
|
277
|
-
case 'date-hour':
|
|
278
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
279
|
-
var dt = dayjs(data, item.dateFormat);
|
|
184
|
+
}
|
|
185
|
+
if (item.onRender) {
|
|
186
|
+
data = item.onRender(info);
|
|
187
|
+
}
|
|
188
|
+
else if (compare.notEmpty(data)) {
|
|
189
|
+
switch (item.type) {
|
|
190
|
+
case 'number':
|
|
191
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
192
|
+
data = formatting.formatNumber(data);
|
|
193
|
+
if (item.numberPrefix) {
|
|
280
194
|
data = (React.createElement(React.Fragment, null,
|
|
281
|
-
React.createElement("span",
|
|
282
|
-
|
|
283
|
-
React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
|
|
195
|
+
React.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
|
|
196
|
+
data));
|
|
284
197
|
}
|
|
285
|
-
|
|
286
|
-
case 'date-minute':
|
|
287
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
288
|
-
var dt = dayjs(data, item.dateFormat);
|
|
198
|
+
if (item.numberSuffix) {
|
|
289
199
|
data = (React.createElement(React.Fragment, null,
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
|
|
200
|
+
data,
|
|
201
|
+
React.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
|
|
293
202
|
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
203
|
+
}
|
|
204
|
+
break;
|
|
205
|
+
case 'tel':
|
|
206
|
+
if (typeof data === 'string') {
|
|
207
|
+
data = formatting.formatTelNo(data);
|
|
208
|
+
}
|
|
209
|
+
break;
|
|
210
|
+
case 'email':
|
|
211
|
+
if (typeof data === 'string') {
|
|
212
|
+
data = (React.createElement(React.Fragment, null,
|
|
213
|
+
React.createElement("a", { href: `mailto:${data}` }, data)));
|
|
214
|
+
}
|
|
215
|
+
break;
|
|
216
|
+
case 'url':
|
|
217
|
+
if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
|
|
218
|
+
data = (React.createElement(React.Fragment, null,
|
|
219
|
+
React.createElement("a", { href: data, target: '_blank' }, data)));
|
|
220
|
+
}
|
|
221
|
+
break;
|
|
222
|
+
case 'business_no':
|
|
223
|
+
if (typeof data === 'string') {
|
|
224
|
+
data = formatting.formatBusinessNo(data);
|
|
225
|
+
}
|
|
226
|
+
break;
|
|
227
|
+
case 'personal_no':
|
|
228
|
+
if (typeof data === 'string') {
|
|
229
|
+
data = formatting.formatPersonalNo(data);
|
|
230
|
+
}
|
|
231
|
+
break;
|
|
232
|
+
case 'date':
|
|
233
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
234
|
+
data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
|
|
235
|
+
}
|
|
236
|
+
break;
|
|
237
|
+
case 'datetime':
|
|
238
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
239
|
+
const dt = dayjs(data, item.dateFormat);
|
|
240
|
+
data = (React.createElement(React.Fragment, null,
|
|
241
|
+
React.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
242
|
+
item.dateTwoLine ? React.createElement("br", null) : ' ',
|
|
243
|
+
React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
|
|
244
|
+
}
|
|
245
|
+
break;
|
|
246
|
+
case 'date-hour':
|
|
247
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
248
|
+
const dt = dayjs(data, item.dateFormat);
|
|
249
|
+
data = (React.createElement(React.Fragment, null,
|
|
250
|
+
React.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
251
|
+
item.dateTwoLine ? React.createElement("br", null) : ' ',
|
|
252
|
+
React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
|
|
253
|
+
}
|
|
254
|
+
break;
|
|
255
|
+
case 'date-minute':
|
|
256
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
257
|
+
const dt = dayjs(data, item.dateFormat);
|
|
258
|
+
data = (React.createElement(React.Fragment, null,
|
|
259
|
+
React.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
260
|
+
item.dateTwoLine ? React.createElement("br", null) : ' ',
|
|
261
|
+
React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
|
|
262
|
+
}
|
|
263
|
+
break;
|
|
317
264
|
}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
265
|
+
}
|
|
266
|
+
if (compare.empty(data))
|
|
267
|
+
data = item.onRenderEmpty ? item.onRenderEmpty(info) : React.createElement(React.Fragment, null, "\u00A0");
|
|
268
|
+
/** copyToClipboardText */
|
|
269
|
+
const copyToClipboardText = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
|
|
270
|
+
/** sizeProps */
|
|
271
|
+
const sizeProps = {};
|
|
272
|
+
if (typeof cols === 'number') {
|
|
273
|
+
sizeProps.xs = 12 / cols;
|
|
274
|
+
}
|
|
275
|
+
else {
|
|
276
|
+
if (cols.xs)
|
|
277
|
+
sizeProps.xs = 12 / cols.xs;
|
|
278
|
+
if (cols.sm)
|
|
279
|
+
sizeProps.sm = 12 / cols.sm;
|
|
280
|
+
if (cols.md)
|
|
281
|
+
sizeProps.md = 12 / cols.md;
|
|
282
|
+
if (cols.lg)
|
|
283
|
+
sizeProps.lg = 12 / cols.lg;
|
|
284
|
+
if (cols.xl)
|
|
285
|
+
sizeProps.xl = 12 / cols.xl;
|
|
286
|
+
}
|
|
287
|
+
if (item.xs)
|
|
288
|
+
sizeProps.xs = item.xs;
|
|
289
|
+
if (item.sm)
|
|
290
|
+
sizeProps.sm = item.sm;
|
|
291
|
+
if (item.md)
|
|
292
|
+
sizeProps.md = item.md;
|
|
293
|
+
if (item.lg)
|
|
294
|
+
sizeProps.lg = item.lg;
|
|
295
|
+
if (item.xl)
|
|
296
|
+
sizeProps.xl = item.xl;
|
|
297
|
+
if (item.onXs)
|
|
298
|
+
sizeProps.xs = item.onXs(info);
|
|
299
|
+
if (item.onSm)
|
|
300
|
+
sizeProps.sm = item.onSm(info);
|
|
301
|
+
if (item.onMd)
|
|
302
|
+
sizeProps.md = item.onMd(info);
|
|
303
|
+
if (item.onLg)
|
|
304
|
+
sizeProps.lg = item.onLg(info);
|
|
305
|
+
if (item.onXl)
|
|
306
|
+
sizeProps.xl = item.onXl(info);
|
|
307
|
+
return { item, data, copyToClipboardText, sizeProps };
|
|
308
|
+
}), [info, items, cols]);
|
|
309
|
+
const content = React.useMemo(() => renderItems.map(({ item, data, copyToClipboardText, sizeProps }, idx) => {
|
|
310
|
+
const finalLabelColor = typographyColorToSxColor(item.type === 'divider' ? item.dividerColor || dividerColor : item.labelColor || labelColor);
|
|
311
|
+
const finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
|
|
312
|
+
const finalValueSx = combineSx(valueSx, item.valueSx);
|
|
313
|
+
const valueUnderlineStyle = valueUnderline
|
|
314
|
+
? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
|
|
315
|
+
: undefined;
|
|
316
|
+
return item.type === 'divider' ? (React.createElement(material.Grid, { key: idx, size: { xs: 12 } },
|
|
317
|
+
React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
318
|
+
item.icon && (React.createElement(reactComponent.PIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
|
|
319
|
+
item.label && (React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: Object.assign(Object.assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
320
|
+
item.dividerLine && (React.createElement(React.Fragment, null, item.icon || item.label ? (React.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
|
|
321
|
+
React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(material.Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
|
|
322
|
+
React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
323
|
+
item.icon && (React.createElement(reactComponent.PIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
|
|
324
|
+
React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: Object.assign(Object.assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
325
|
+
React.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: Object.assign(Object.assign(Object.assign({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
|
|
326
|
+
item.ellipsis || ellipsis ? React.createElement(ValueEllipsis, null, data) : React.createElement(Value, null, data),
|
|
327
|
+
item.clipboard && compare.notEmpty(copyToClipboardText) && (React.createElement(ValueClipboard, null,
|
|
328
|
+
React.createElement(reactComponent.PCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? () => onCopyToClipboard(item, copyToClipboardText) : undefined },
|
|
329
|
+
React.createElement(ClipboardIconButton, Object.assign({ size: 'small', color: 'primary' }, item.clipboardProps),
|
|
330
|
+
React.createElement(reactComponent.PIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
|
|
331
|
+
}), [
|
|
367
332
|
dividerColor,
|
|
368
333
|
ellipsis,
|
|
369
334
|
labelClassName,
|
|
@@ -1251,48 +1216,63 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
|
|
|
1251
1216
|
};
|
|
1252
1217
|
}, [resizeHandler, refElement]);
|
|
1253
1218
|
return Object.assign({ ref: refProxy }, size);
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1219
|
+
}const StyledBodyRow = material.styled(material.TableRow)(({ theme }) => ({
|
|
1220
|
+
'&.odd-color:nth-of-type(odd):not(:hover)': {
|
|
1221
|
+
backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
|
|
1222
|
+
},
|
|
1223
|
+
'&.even-color:nth-of-type(even):not(:hover)': {
|
|
1224
|
+
backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
|
|
1225
|
+
},
|
|
1226
|
+
}));
|
|
1227
|
+
const StyledNoDataDiv = material.styled('div') `
|
|
1228
|
+
text-align: center;
|
|
1229
|
+
padding: 30px 0;
|
|
1230
|
+
font-weight: 500;
|
|
1231
|
+
font-size: 13px;
|
|
1232
|
+
color: #94a0b2;
|
|
1233
|
+
opacity: 0.8;
|
|
1234
|
+
|
|
1235
|
+
.material-icons {
|
|
1236
|
+
font-size: 40px;
|
|
1237
|
+
margin-bottom: 5px;
|
|
1238
|
+
}
|
|
1239
|
+
`;const PTableContext = React.createContext({});function useTableState() {
|
|
1240
|
+
const value = React.useContext(PTableContext);
|
|
1268
1241
|
if (compare.empty(value)) {
|
|
1269
|
-
throw new Error('
|
|
1242
|
+
throw new Error('useTableState should be used within TableContext.Provider');
|
|
1270
1243
|
}
|
|
1271
1244
|
return value;
|
|
1272
|
-
}
|
|
1273
|
-
|
|
1245
|
+
}const StyledTableCell = material.styled(material.TableCell) `
|
|
1246
|
+
&.ellipsis {
|
|
1247
|
+
position: relative;
|
|
1248
|
+
max-width: 0;
|
|
1249
|
+
overflow: hidden;
|
|
1250
|
+
text-overflow: ellipsis;
|
|
1251
|
+
white-space: nowrap;
|
|
1252
|
+
}
|
|
1253
|
+
`;
|
|
1254
|
+
const PTableCommonCell = React.forwardRef(({ children, className: initClassName, style: initStyle, sx: initSx, type, column, defaultAlign, defaultEllipsis: initDefaultEllipsis, index, item, onClick, }, ref) => {
|
|
1274
1255
|
/********************************************************************************************************************
|
|
1275
1256
|
* Use
|
|
1276
1257
|
* ******************************************************************************************************************/
|
|
1277
|
-
|
|
1278
|
-
var menuOpen = useTableState().menuOpen;
|
|
1258
|
+
const { menuOpen } = useTableState();
|
|
1279
1259
|
/********************************************************************************************************************
|
|
1280
1260
|
* Memo
|
|
1281
1261
|
* ******************************************************************************************************************/
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1262
|
+
const { align, ellipsis } = React.useMemo(() => {
|
|
1263
|
+
const align = getTableColumnAlign(column, defaultAlign);
|
|
1264
|
+
const ellipsis = type !== 'head' &&
|
|
1285
1265
|
(column.ellipsis ||
|
|
1286
1266
|
(column.type !== 'img' &&
|
|
1287
1267
|
column.type !== 'button' &&
|
|
1288
1268
|
column.type !== 'buttons' &&
|
|
1289
1269
|
(column.ellipsis == null ? !!initDefaultEllipsis : false)));
|
|
1290
|
-
return { align
|
|
1291
|
-
}, [column, defaultAlign, initDefaultEllipsis, type])
|
|
1292
|
-
|
|
1270
|
+
return { align, ellipsis };
|
|
1271
|
+
}, [column, defaultAlign, initDefaultEllipsis, type]);
|
|
1272
|
+
const className = React.useMemo(() => {
|
|
1293
1273
|
var _a, _b, _c, _d, _e, _f;
|
|
1294
|
-
|
|
1295
|
-
|
|
1274
|
+
let className;
|
|
1275
|
+
let getClassName;
|
|
1296
1276
|
switch (type) {
|
|
1297
1277
|
case 'head':
|
|
1298
1278
|
className = (_a = column.head) === null || _a === void 0 ? void 0 : _a.className;
|
|
@@ -1316,35 +1296,35 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
|
|
|
1316
1296
|
return initClassName;
|
|
1317
1297
|
}
|
|
1318
1298
|
}, [column, index, initClassName, item, type]);
|
|
1319
|
-
|
|
1299
|
+
const style = React.useMemo(() => {
|
|
1320
1300
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1321
|
-
|
|
1322
|
-
|
|
1301
|
+
let style;
|
|
1302
|
+
let getStyle;
|
|
1323
1303
|
switch (type) {
|
|
1324
1304
|
case 'head':
|
|
1325
1305
|
style = ((_a = column.head) === null || _a === void 0 ? void 0 : _a.backgroundColor)
|
|
1326
|
-
?
|
|
1306
|
+
? Object.assign(Object.assign({}, (_b = column.head) === null || _b === void 0 ? void 0 : _b.style), { backgroundColor: column.head.backgroundColor }) : (_c = column.head) === null || _c === void 0 ? void 0 : _c.style;
|
|
1327
1307
|
getStyle = ((_d = column.head) === null || _d === void 0 ? void 0 : _d.onGetStyle) ? (_e = column.head) === null || _e === void 0 ? void 0 : _e.onGetStyle() : undefined;
|
|
1328
1308
|
break;
|
|
1329
1309
|
case 'body':
|
|
1330
|
-
style = column.backgroundColor ?
|
|
1310
|
+
style = column.backgroundColor ? Object.assign(Object.assign({}, column.style), { backgroundColor: column.backgroundColor }) : column.style;
|
|
1331
1311
|
if (item != null && index != null) {
|
|
1332
1312
|
getStyle = column.onGetStyle ? column.onGetStyle(item, index) : undefined;
|
|
1333
1313
|
}
|
|
1334
1314
|
break;
|
|
1335
1315
|
case 'footer':
|
|
1336
1316
|
style = ((_f = column.footer) === null || _f === void 0 ? void 0 : _f.backgroundColor)
|
|
1337
|
-
?
|
|
1317
|
+
? Object.assign(Object.assign({}, (_g = column.footer) === null || _g === void 0 ? void 0 : _g.style), { backgroundColor: column.footer.backgroundColor }) : (_h = column.footer) === null || _h === void 0 ? void 0 : _h.style;
|
|
1338
1318
|
getStyle = ((_j = column.footer) === null || _j === void 0 ? void 0 : _j.onGetStyle) ? (_k = column.footer) === null || _k === void 0 ? void 0 : _k.onGetStyle() : undefined;
|
|
1339
1319
|
break;
|
|
1340
1320
|
}
|
|
1341
|
-
return
|
|
1321
|
+
return Object.assign(Object.assign(Object.assign(Object.assign({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined, paddingLeft: column.paddingLeft, paddingRight: column.paddingRight }), style), getStyle);
|
|
1342
1322
|
}, [column, index, initStyle, item, onClick, type]);
|
|
1343
|
-
|
|
1323
|
+
const sx = React.useMemo(() => {
|
|
1344
1324
|
var _a, _b, _c, _d, _e, _f;
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1325
|
+
let sx;
|
|
1326
|
+
let getSx;
|
|
1327
|
+
let displaySx;
|
|
1348
1328
|
switch (type) {
|
|
1349
1329
|
case 'head':
|
|
1350
1330
|
sx = (_a = column.head) === null || _a === void 0 ? void 0 : _a.sx;
|
|
@@ -1362,7 +1342,7 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
|
|
|
1362
1342
|
break;
|
|
1363
1343
|
}
|
|
1364
1344
|
if (column.display) {
|
|
1365
|
-
|
|
1345
|
+
const display = {};
|
|
1366
1346
|
if (column.display.xs !== undefined)
|
|
1367
1347
|
display.xs = column.display.xs ? 'table-cell' : 'none';
|
|
1368
1348
|
if (column.display.sm !== undefined)
|
|
@@ -1373,9 +1353,9 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
|
|
|
1373
1353
|
display.lg = column.display.lg ? 'table-cell' : 'none';
|
|
1374
1354
|
if (column.display.xl !== undefined)
|
|
1375
1355
|
display.xl = column.display.xl ? 'table-cell' : 'none';
|
|
1376
|
-
displaySx = { display
|
|
1356
|
+
displaySx = { display };
|
|
1377
1357
|
}
|
|
1378
|
-
|
|
1358
|
+
const sxList = [];
|
|
1379
1359
|
if (getSx)
|
|
1380
1360
|
sxList.push(getSx);
|
|
1381
1361
|
if (sx)
|
|
@@ -1389,9 +1369,9 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
|
|
|
1389
1369
|
return sxList[0];
|
|
1390
1370
|
}
|
|
1391
1371
|
else {
|
|
1392
|
-
if (!sxList.find(
|
|
1393
|
-
return sxList.reduce(
|
|
1394
|
-
res =
|
|
1372
|
+
if (!sxList.find((sx) => typeof sx !== 'object')) {
|
|
1373
|
+
return sxList.reduce((res, sx) => {
|
|
1374
|
+
res = Object.assign(Object.assign({}, res), sx);
|
|
1395
1375
|
return res;
|
|
1396
1376
|
}, {});
|
|
1397
1377
|
}
|
|
@@ -1401,7 +1381,7 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
|
|
|
1401
1381
|
/********************************************************************************************************************
|
|
1402
1382
|
* Event Handler
|
|
1403
1383
|
* ******************************************************************************************************************/
|
|
1404
|
-
|
|
1384
|
+
const handleClick = React.useCallback((e) => {
|
|
1405
1385
|
if (!menuOpen &&
|
|
1406
1386
|
column.type !== 'check' &&
|
|
1407
1387
|
column.type !== 'button' &&
|
|
@@ -1424,14 +1404,12 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
|
|
|
1424
1404
|
/********************************************************************************************************************
|
|
1425
1405
|
* Render
|
|
1426
1406
|
* ******************************************************************************************************************/
|
|
1427
|
-
return (React.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', ellipsis && 'ellipsis', column.type ?
|
|
1428
|
-
});
|
|
1429
|
-
var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
1407
|
+
return (React.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', ellipsis && 'ellipsis', column.type ? `column-type-${column.type}` : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
|
|
1408
|
+
});const PTableFooterCell = ({ column, items, defaultAlign }) => {
|
|
1430
1409
|
/********************************************************************************************************************
|
|
1431
1410
|
* Memo
|
|
1432
1411
|
* ******************************************************************************************************************/
|
|
1433
|
-
|
|
1434
|
-
var data = React.useMemo(function () {
|
|
1412
|
+
const data = React.useMemo(() => {
|
|
1435
1413
|
var _a, _b, _c;
|
|
1436
1414
|
if ((_a = column.footer) === null || _a === void 0 ? void 0 : _a.onRender) {
|
|
1437
1415
|
return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender(items);
|
|
@@ -1444,52 +1422,46 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1444
1422
|
* Render
|
|
1445
1423
|
* ******************************************************************************************************************/
|
|
1446
1424
|
return (React.createElement(PTableCommonCell, { type: 'head', className: 'PTableFooterCell', column: column, defaultAlign: defaultAlign }, data));
|
|
1447
|
-
};
|
|
1448
|
-
var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
|
|
1425
|
+
};const PTablePagination = ({ className, style, sx, paging, align, onChange }) => {
|
|
1449
1426
|
return (React.createElement(material.Stack, { alignItems: align },
|
|
1450
|
-
React.createElement(material.Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('PTablePagination', className), style: style, sx: sx, onChange:
|
|
1427
|
+
React.createElement(material.Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('PTablePagination', className), style: style, sx: sx, onChange: (e, page) => {
|
|
1451
1428
|
if (onChange)
|
|
1452
1429
|
onChange(page);
|
|
1453
1430
|
} })));
|
|
1454
|
-
};
|
|
1455
|
-
var children = _a.children, value = _a.value;
|
|
1431
|
+
};const PTableContextProvider = ({ children, value }) => {
|
|
1456
1432
|
return React.createElement(PTableContext.Provider, { value: value }, children);
|
|
1457
|
-
};
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
},
|
|
1465
|
-
});
|
|
1466
|
-
});var PTableHeadCell = function (_a) {
|
|
1433
|
+
};const PTableTopHeadCaptionRow = material.styled(material.TableRow)(({ theme }) => ({
|
|
1434
|
+
'> th': {
|
|
1435
|
+
backgroundColor: theme.palette.grey.A100,
|
|
1436
|
+
textAlign: 'center',
|
|
1437
|
+
fontWeight: 700,
|
|
1438
|
+
},
|
|
1439
|
+
}));const PTableHeadCell = ({ column, items, defaultAlign, top, onCheckChange }) => {
|
|
1467
1440
|
/********************************************************************************************************************
|
|
1468
1441
|
* Use
|
|
1469
1442
|
* ******************************************************************************************************************/
|
|
1470
|
-
|
|
1471
|
-
var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
|
|
1443
|
+
const { setHeadColumnChecked, setHeadColumnCommands } = useTableState();
|
|
1472
1444
|
/********************************************************************************************************************
|
|
1473
1445
|
* State
|
|
1474
1446
|
* ******************************************************************************************************************/
|
|
1475
|
-
|
|
1476
|
-
|
|
1447
|
+
const [checked, setChecked] = React.useState(false);
|
|
1448
|
+
const [checkDisabled, setCheckDisabled] = React.useState(false);
|
|
1477
1449
|
/********************************************************************************************************************
|
|
1478
1450
|
* Effect
|
|
1479
1451
|
* ******************************************************************************************************************/
|
|
1480
|
-
React.useEffect(
|
|
1452
|
+
React.useEffect(() => {
|
|
1481
1453
|
if (column.type === 'check') {
|
|
1482
1454
|
setHeadColumnChecked(column, checked);
|
|
1483
1455
|
}
|
|
1484
1456
|
}, [column, checked, setHeadColumnChecked]);
|
|
1485
|
-
React.useEffect(
|
|
1457
|
+
React.useEffect(() => {
|
|
1486
1458
|
setHeadColumnCommands(column, {
|
|
1487
|
-
setChecked
|
|
1459
|
+
setChecked(checked) {
|
|
1488
1460
|
if (column.type === 'check') {
|
|
1489
1461
|
setChecked(checked);
|
|
1490
1462
|
}
|
|
1491
1463
|
},
|
|
1492
|
-
setCheckDisabled
|
|
1464
|
+
setCheckDisabled(checkDisabled) {
|
|
1493
1465
|
if (column.type === 'check') {
|
|
1494
1466
|
setCheckDisabled(checkDisabled);
|
|
1495
1467
|
}
|
|
@@ -1499,7 +1471,7 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1499
1471
|
/********************************************************************************************************************
|
|
1500
1472
|
* Memo
|
|
1501
1473
|
* ******************************************************************************************************************/
|
|
1502
|
-
|
|
1474
|
+
const data = React.useMemo(() => {
|
|
1503
1475
|
var _a, _b, _c, _d;
|
|
1504
1476
|
if (column.type === 'check') {
|
|
1505
1477
|
if (column.hideAllCheck) {
|
|
@@ -1516,7 +1488,7 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1516
1488
|
}
|
|
1517
1489
|
}
|
|
1518
1490
|
else {
|
|
1519
|
-
return (React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange:
|
|
1491
|
+
return (React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: (e, newChecked) => {
|
|
1520
1492
|
setChecked(newChecked);
|
|
1521
1493
|
onCheckChange && onCheckChange(column, newChecked);
|
|
1522
1494
|
} }));
|
|
@@ -1539,63 +1511,68 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1539
1511
|
/********************************************************************************************************************
|
|
1540
1512
|
* Render
|
|
1541
1513
|
* ******************************************************************************************************************/
|
|
1542
|
-
return (React.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', style: top !== undefined ? { top
|
|
1543
|
-
};
|
|
1544
|
-
|
|
1514
|
+
return (React.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', style: top !== undefined ? { top } : undefined, column: column, defaultAlign: defaultAlign }, data));
|
|
1515
|
+
};const BottomLine = material.styled('div') `
|
|
1516
|
+
height: 1px;
|
|
1517
|
+
position: absolute;
|
|
1518
|
+
left: 3px;
|
|
1519
|
+
right: 3px;
|
|
1520
|
+
bottom: 0;
|
|
1521
|
+
`;
|
|
1522
|
+
const PTableTopHead = ({ columns, items, rows, caption, defaultAlign, onCheckChange }) => {
|
|
1545
1523
|
/********************************************************************************************************************
|
|
1546
1524
|
* Use
|
|
1547
1525
|
* ******************************************************************************************************************/
|
|
1548
|
-
|
|
1549
|
-
var theme = material.useTheme();
|
|
1526
|
+
const theme = material.useTheme();
|
|
1550
1527
|
/********************************************************************************************************************
|
|
1551
1528
|
* Ref
|
|
1552
1529
|
* ******************************************************************************************************************/
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1530
|
+
const captionRef = React.useRef(null);
|
|
1531
|
+
const row1Ref = React.useRef(null);
|
|
1532
|
+
const row2Ref = React.useRef(null);
|
|
1533
|
+
const row3Ref = React.useRef(null);
|
|
1557
1534
|
/********************************************************************************************************************
|
|
1558
1535
|
* ResizeDetector
|
|
1559
1536
|
* ******************************************************************************************************************/
|
|
1560
|
-
|
|
1537
|
+
const { height: captionHeight } = useResizeDetector({
|
|
1561
1538
|
targetRef: captionRef,
|
|
1562
1539
|
handleWidth: false,
|
|
1563
1540
|
handleHeight: true,
|
|
1564
|
-
})
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1541
|
+
});
|
|
1542
|
+
const { height: row1Height } = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true });
|
|
1543
|
+
const { height: row2Height } = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true });
|
|
1544
|
+
const { height: row3Height } = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true });
|
|
1568
1545
|
/********************************************************************************************************************
|
|
1569
1546
|
* Function
|
|
1570
1547
|
* ******************************************************************************************************************/
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
.map(
|
|
1548
|
+
const makeRowCells = React.useCallback((row, top) => {
|
|
1549
|
+
let totalColumns = 0;
|
|
1550
|
+
const cells = row
|
|
1551
|
+
.map((info, idx) => {
|
|
1575
1552
|
if (info) {
|
|
1576
1553
|
totalColumns += info.colSpan || 1;
|
|
1577
1554
|
return (React.createElement(material.TableCell, { key: idx, colSpan: info.colSpan, align: info.align, style: {
|
|
1578
|
-
top
|
|
1555
|
+
top,
|
|
1579
1556
|
borderBottom: 0,
|
|
1580
1557
|
} },
|
|
1581
1558
|
info.label,
|
|
1582
1559
|
info.label != null && React.createElement(BottomLine, { style: { backgroundColor: theme.palette.divider } })));
|
|
1583
1560
|
}
|
|
1584
1561
|
})
|
|
1585
|
-
.filter(
|
|
1562
|
+
.filter((cell) => !!cell);
|
|
1586
1563
|
if (totalColumns < columns.length) {
|
|
1587
|
-
cells.push(React.createElement(material.TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top
|
|
1564
|
+
cells.push(React.createElement(material.TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top, borderBottom: 0 } }));
|
|
1588
1565
|
}
|
|
1589
1566
|
return cells;
|
|
1590
1567
|
}, [columns, theme.palette.divider]);
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
return (React.createElement(material.TableRow, null, columns.map(
|
|
1568
|
+
const columnRow = React.useMemo(() => {
|
|
1569
|
+
const top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
|
|
1570
|
+
return (React.createElement(material.TableRow, null, columns.map((column, idx) => (React.createElement(PTableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })))));
|
|
1594
1571
|
}, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
|
|
1595
1572
|
/********************************************************************************************************************
|
|
1596
1573
|
* Variable
|
|
1597
1574
|
* ******************************************************************************************************************/
|
|
1598
|
-
|
|
1575
|
+
const captionRow = !!caption && (React.createElement(PTableTopHeadCaptionRow, { ref: captionRef, className: 'PTableTopHeadCaptionRow' },
|
|
1599
1576
|
React.createElement(material.TableCell, { colSpan: columns.length }, caption)));
|
|
1600
1577
|
/********************************************************************************************************************
|
|
1601
1578
|
* Render
|
|
@@ -1604,9 +1581,9 @@ var PTableTopHead = function (_a) {
|
|
|
1604
1581
|
if (Array.isArray(rows[0])) {
|
|
1605
1582
|
return (React.createElement(material.TableHead, { className: 'PTableHead' },
|
|
1606
1583
|
captionRow,
|
|
1607
|
-
rows.map(
|
|
1608
|
-
|
|
1609
|
-
|
|
1584
|
+
rows.map((row, idx) => {
|
|
1585
|
+
let ref = undefined;
|
|
1586
|
+
let top = undefined;
|
|
1610
1587
|
switch (idx) {
|
|
1611
1588
|
case 0:
|
|
1612
1589
|
ref = row1Ref;
|
|
@@ -1638,8 +1615,7 @@ var PTableTopHead = function (_a) {
|
|
|
1638
1615
|
captionRow,
|
|
1639
1616
|
columnRow));
|
|
1640
1617
|
}
|
|
1641
|
-
}
|
|
1642
|
-
var templateObject_1$1;/**
|
|
1618
|
+
};/**
|
|
1643
1619
|
* Checks if `value` is the
|
|
1644
1620
|
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
|
|
1645
1621
|
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
@@ -3115,7 +3091,7 @@ var __assign = function() {
|
|
|
3115
3091
|
return __assign.apply(this, arguments);
|
|
3116
3092
|
};
|
|
3117
3093
|
|
|
3118
|
-
function __rest(s, e) {
|
|
3094
|
+
function __rest$1(s, e) {
|
|
3119
3095
|
var t = {};
|
|
3120
3096
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
3121
3097
|
t[p] = s[p];
|
|
@@ -3128,7 +3104,7 @@ function __rest(s, e) {
|
|
|
3128
3104
|
}
|
|
3129
3105
|
|
|
3130
3106
|
var SimpleBar = React__namespace.forwardRef(function (_a, ref) {
|
|
3131
|
-
var children = _a.children, _b = _a.scrollableNodeProps, scrollableNodeProps = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["children", "scrollableNodeProps"]);
|
|
3107
|
+
var children = _a.children, _b = _a.scrollableNodeProps, scrollableNodeProps = _b === void 0 ? {} : _b, otherProps = __rest$1(_a, ["children", "scrollableNodeProps"]);
|
|
3132
3108
|
var elRef = React__namespace.useRef();
|
|
3133
3109
|
var scrollableNodeRef = React__namespace.useRef();
|
|
3134
3110
|
var contentNodeRef = React__namespace.useRef();
|
|
@@ -3191,10 +3167,42 @@ var SimpleBar = React__namespace.forwardRef(function (_a, ref) {
|
|
|
3191
3167
|
React__namespace.createElement("div", { className: "".concat(classNames.track, " ").concat(classNames.vertical) },
|
|
3192
3168
|
React__namespace.createElement("div", { className: classNames.scrollbar }))));
|
|
3193
3169
|
});
|
|
3194
|
-
SimpleBar.displayName = 'SimpleBar'
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3170
|
+
SimpleBar.displayName = 'SimpleBar';/******************************************************************************
|
|
3171
|
+
Copyright (c) Microsoft Corporation.
|
|
3172
|
+
|
|
3173
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
3174
|
+
purpose with or without fee is hereby granted.
|
|
3175
|
+
|
|
3176
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
3177
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
3178
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
3179
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
3180
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
3181
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
3182
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
3183
|
+
***************************************************************************** */
|
|
3184
|
+
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
3185
|
+
|
|
3186
|
+
|
|
3187
|
+
function __rest(s, e) {
|
|
3188
|
+
var t = {};
|
|
3189
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
3190
|
+
t[p] = s[p];
|
|
3191
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
3192
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
3193
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
3194
|
+
t[p[i]] = s[p[i]];
|
|
3195
|
+
}
|
|
3196
|
+
return t;
|
|
3197
|
+
}
|
|
3198
|
+
|
|
3199
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
3200
|
+
var e = new Error(message);
|
|
3201
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
3202
|
+
};const makeSortableItems = (items) => {
|
|
3203
|
+
return items === null || items === void 0 ? void 0 : items.map((_a, index) => {
|
|
3204
|
+
var { id } = _a, item = __rest(_a, ["id"]);
|
|
3205
|
+
return Object.assign({ id: id == null ? `${uuid.v4()}_${index}` : id }, item);
|
|
3198
3206
|
});
|
|
3199
3207
|
};const CSS = /*#__PURE__*/Object.freeze({
|
|
3200
3208
|
Translate: {
|
|
@@ -3246,46 +3254,49 @@ SimpleBar.displayName = 'SimpleBar';var makeSortableItems = function (items) {
|
|
|
3246
3254
|
}
|
|
3247
3255
|
|
|
3248
3256
|
}
|
|
3249
|
-
});
|
|
3250
|
-
|
|
3257
|
+
});const StyledButtonsBox = material.styled(material.Box) `
|
|
3258
|
+
display: flex;
|
|
3259
|
+
flex-wrap: wrap;
|
|
3260
|
+
gap: 5px;
|
|
3261
|
+
`;
|
|
3262
|
+
const PTableBodyCell = React.forwardRef(({ className, style, sx, item, index, column, defaultAlign, defaultEllipsis, onClick, onCheckChange }, ref) => {
|
|
3251
3263
|
/********************************************************************************************************************
|
|
3252
3264
|
* Use
|
|
3253
3265
|
* ******************************************************************************************************************/
|
|
3254
|
-
|
|
3255
|
-
var _b = useTableState(), menuOpen = _b.menuOpen, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
|
|
3266
|
+
const { menuOpen, setItemColumnChecked, setItemColumnCheckDisabled, setItemColumnCommands } = useTableState();
|
|
3256
3267
|
/********************************************************************************************************************
|
|
3257
3268
|
* State
|
|
3258
3269
|
* ******************************************************************************************************************/
|
|
3259
|
-
|
|
3260
|
-
|
|
3270
|
+
const [checked, setChecked] = React.useState(false);
|
|
3271
|
+
const [checkDisabled, setCheckDisabled] = React.useState(false);
|
|
3261
3272
|
/********************************************************************************************************************
|
|
3262
3273
|
* Effect
|
|
3263
3274
|
* ******************************************************************************************************************/
|
|
3264
|
-
React.useEffect(
|
|
3275
|
+
React.useEffect(() => {
|
|
3265
3276
|
if (column.type === 'check') {
|
|
3266
3277
|
setChecked(column.onInitChecked ? column.onInitChecked(item) : false);
|
|
3267
3278
|
setCheckDisabled(column.onCheckDisabled ? column.onCheckDisabled(item) : false);
|
|
3268
3279
|
}
|
|
3269
3280
|
setItemColumnCommands(item, column, {
|
|
3270
|
-
setChecked
|
|
3281
|
+
setChecked(checked) {
|
|
3271
3282
|
if (column.type === 'check') {
|
|
3272
3283
|
setChecked(checked);
|
|
3273
3284
|
}
|
|
3274
3285
|
},
|
|
3275
|
-
setCheckDisabled
|
|
3286
|
+
setCheckDisabled(disabled) {
|
|
3276
3287
|
if (column.type === 'check') {
|
|
3277
3288
|
setCheckDisabled(disabled);
|
|
3278
3289
|
}
|
|
3279
3290
|
},
|
|
3280
3291
|
});
|
|
3281
3292
|
}, [column, item, setItemColumnCommands]);
|
|
3282
|
-
React.useEffect(
|
|
3293
|
+
React.useEffect(() => {
|
|
3283
3294
|
if (column.type === 'check') {
|
|
3284
3295
|
setItemColumnChecked(item, column, checked);
|
|
3285
3296
|
}
|
|
3286
3297
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3287
3298
|
}, [checked]);
|
|
3288
|
-
React.useEffect(
|
|
3299
|
+
React.useEffect(() => {
|
|
3289
3300
|
if (column.type === 'check') {
|
|
3290
3301
|
setItemColumnCheckDisabled(item, column, checkDisabled);
|
|
3291
3302
|
column.onCheckDisabledChange && column.onCheckDisabledChange(item, checkDisabled);
|
|
@@ -3295,8 +3306,8 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3295
3306
|
/********************************************************************************************************************
|
|
3296
3307
|
* Memo
|
|
3297
3308
|
* ******************************************************************************************************************/
|
|
3298
|
-
|
|
3299
|
-
|
|
3309
|
+
const isHidden = React.useMemo(() => (column.onHide ? column.onHide(item, index) : false), [column, index, item]);
|
|
3310
|
+
const buttonsBoxJustifyContent = React.useMemo(() => {
|
|
3300
3311
|
switch (getTableColumnAlign(column, defaultAlign)) {
|
|
3301
3312
|
case 'center':
|
|
3302
3313
|
return 'center';
|
|
@@ -3306,9 +3317,9 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3306
3317
|
return 'start';
|
|
3307
3318
|
}
|
|
3308
3319
|
}, [column, defaultAlign]);
|
|
3309
|
-
|
|
3320
|
+
const data = React.useMemo(() => {
|
|
3310
3321
|
var _a, _b;
|
|
3311
|
-
|
|
3322
|
+
let data;
|
|
3312
3323
|
if (column.type !== 'check') {
|
|
3313
3324
|
if (column.onRender) {
|
|
3314
3325
|
data = column.onRender(item, index);
|
|
@@ -3352,29 +3363,29 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3352
3363
|
}
|
|
3353
3364
|
break;
|
|
3354
3365
|
case 'check':
|
|
3355
|
-
data = (React.createElement(material.Box, { className: 'PTableBoxyCell-check-box', onClick: menuOpen ? undefined :
|
|
3356
|
-
React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange:
|
|
3366
|
+
data = (React.createElement(material.Box, { className: 'PTableBoxyCell-check-box', onClick: menuOpen ? undefined : (e) => e.stopPropagation() },
|
|
3367
|
+
React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: (e, newChecked) => {
|
|
3357
3368
|
setChecked(newChecked);
|
|
3358
3369
|
column.onCheckChange && column.onCheckChange(item, newChecked);
|
|
3359
3370
|
onCheckChange && onCheckChange(item, column, newChecked);
|
|
3360
3371
|
} })));
|
|
3361
3372
|
break;
|
|
3362
3373
|
case 'button':
|
|
3363
|
-
data = (React.createElement(material.Box, { className: 'PTableBoxyCell-button-box', onClick: menuOpen ? undefined :
|
|
3374
|
+
data = (React.createElement(material.Box, { className: 'PTableBoxyCell-button-box', onClick: menuOpen ? undefined : (e) => e.stopPropagation() }, data));
|
|
3364
3375
|
break;
|
|
3365
3376
|
case 'buttons':
|
|
3366
|
-
data = (React.createElement(StyledButtonsBox, { className: 'PTableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined :
|
|
3377
|
+
data = (React.createElement(StyledButtonsBox, { className: 'PTableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined : (e) => e.stopPropagation() }, data));
|
|
3367
3378
|
break;
|
|
3368
3379
|
case 'img':
|
|
3369
3380
|
{
|
|
3370
|
-
|
|
3371
|
-
|
|
3381
|
+
const img = React.createElement("img", { src: data, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' });
|
|
3382
|
+
const placement = ((_a = column.tooltipProps) === null || _a === void 0 ? void 0 : _a.placement) ? (_b = column.tooltipProps) === null || _b === void 0 ? void 0 : _b.placement : 'left';
|
|
3372
3383
|
data = (React.createElement("a", { href: data, target: '_blank', onClick: menuOpen
|
|
3373
3384
|
? undefined
|
|
3374
|
-
:
|
|
3385
|
+
: (e) => {
|
|
3375
3386
|
e.stopPropagation();
|
|
3376
3387
|
} },
|
|
3377
|
-
React.createElement(material.Tooltip,
|
|
3388
|
+
React.createElement(material.Tooltip, Object.assign({ className: 'PTableBodyCell-tooltip', title: React.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
|
|
3378
3389
|
}
|
|
3379
3390
|
break;
|
|
3380
3391
|
case 'date':
|
|
@@ -3384,7 +3395,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3384
3395
|
break;
|
|
3385
3396
|
case 'datetime':
|
|
3386
3397
|
if (data) {
|
|
3387
|
-
|
|
3398
|
+
const dt = dayjs(data, column.dateFormat);
|
|
3388
3399
|
data = (React.createElement(React.Fragment, null,
|
|
3389
3400
|
React.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
3390
3401
|
column.dateTwoLine ? React.createElement("br", null) : ' ',
|
|
@@ -3393,7 +3404,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3393
3404
|
break;
|
|
3394
3405
|
case 'date-hour':
|
|
3395
3406
|
if (data) {
|
|
3396
|
-
|
|
3407
|
+
const dt = dayjs(data, column.dateFormat);
|
|
3397
3408
|
data = (React.createElement(React.Fragment, null,
|
|
3398
3409
|
React.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
3399
3410
|
column.dateTwoLine ? React.createElement("br", null) : ' ',
|
|
@@ -3402,7 +3413,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3402
3413
|
break;
|
|
3403
3414
|
case 'date-minute':
|
|
3404
3415
|
if (data) {
|
|
3405
|
-
|
|
3416
|
+
const dt = dayjs(data, column.dateFormat);
|
|
3406
3417
|
data = (React.createElement(React.Fragment, null,
|
|
3407
3418
|
React.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
3408
3419
|
column.dateTwoLine ? React.createElement("br", null) : ' ',
|
|
@@ -3411,12 +3422,12 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3411
3422
|
break;
|
|
3412
3423
|
}
|
|
3413
3424
|
if (column.type !== 'img') {
|
|
3414
|
-
|
|
3425
|
+
let tooltip;
|
|
3415
3426
|
if (column.onGetTooltip) {
|
|
3416
3427
|
tooltip = column.onGetTooltip(item, index);
|
|
3417
3428
|
}
|
|
3418
3429
|
if (tooltip) {
|
|
3419
|
-
data = (React.createElement(material.Tooltip,
|
|
3430
|
+
data = (React.createElement(material.Tooltip, Object.assign({ className: 'PTableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React.isValidElement(data) ? (data.type === React.Fragment ? (React.createElement("span", null, data)) : (data)) : (React.createElement("span", null, data))));
|
|
3420
3431
|
}
|
|
3421
3432
|
}
|
|
3422
3433
|
return data;
|
|
@@ -3424,7 +3435,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3424
3435
|
/********************************************************************************************************************
|
|
3425
3436
|
* Event Handler
|
|
3426
3437
|
* ******************************************************************************************************************/
|
|
3427
|
-
|
|
3438
|
+
const handleClick = React.useCallback((item, index) => {
|
|
3428
3439
|
if (column.onClick) {
|
|
3429
3440
|
column.onClick(item, index);
|
|
3430
3441
|
}
|
|
@@ -3437,52 +3448,47 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
|
|
|
3437
3448
|
* Render
|
|
3438
3449
|
* ******************************************************************************************************************/
|
|
3439
3450
|
return (React.createElement(PTableCommonCell, { ref: ref, type: 'body', className: classNames('PTableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
|
|
3440
|
-
});
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
},
|
|
3450
|
-
});
|
|
3451
|
-
});
|
|
3452
|
-
var PTableBodyRow = function (_a) {
|
|
3451
|
+
});const PStyledBodyRow = material.styled(material.TableRow)(({ theme }) => ({
|
|
3452
|
+
'&.odd-color:nth-of-type(odd):not(:hover)': {
|
|
3453
|
+
backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
|
|
3454
|
+
},
|
|
3455
|
+
'&.even-color:nth-of-type(even):not(:hover)': {
|
|
3456
|
+
backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
|
|
3457
|
+
},
|
|
3458
|
+
}));
|
|
3459
|
+
const PTableBodyRow = (_a) => {
|
|
3453
3460
|
/********************************************************************************************************************
|
|
3454
3461
|
* Use
|
|
3455
3462
|
* ******************************************************************************************************************/
|
|
3456
|
-
var
|
|
3457
|
-
|
|
3463
|
+
var { className, style, id, index, defaultAlign, defaultEllipsis, sortable: sortable$1, columns, item, onClick, onCheckChange, onGetColumnClassName, onGetColumnStyle, onGetColumnSx } = _a, props = __rest(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange", "onGetColumnClassName", "onGetColumnStyle", "onGetColumnSx"]);
|
|
3464
|
+
const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id });
|
|
3458
3465
|
/********************************************************************************************************************
|
|
3459
3466
|
* Variable
|
|
3460
3467
|
* ******************************************************************************************************************/
|
|
3461
|
-
|
|
3462
|
-
?
|
|
3468
|
+
const sortableProps = sortable$1
|
|
3469
|
+
? Object.assign(Object.assign({ ref: setNodeRef }, attributes), listeners) : {};
|
|
3463
3470
|
/********************************************************************************************************************
|
|
3464
3471
|
* Render
|
|
3465
3472
|
* ******************************************************************************************************************/
|
|
3466
3473
|
return (React.createElement(React.Fragment, null,
|
|
3467
|
-
React.createElement(PStyledBodyRow,
|
|
3468
|
-
?
|
|
3469
|
-
};
|
|
3470
|
-
|
|
3471
|
-
var progressiveVisible = useTableState().progressiveVisible;
|
|
3474
|
+
React.createElement(PStyledBodyRow, Object.assign({ className: classNames('PTableBodyRow', className), style: sortable$1
|
|
3475
|
+
? Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition }) : style }, props, sortableProps), columns.map((column, columnIdx) => (React.createElement(PTableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange }))))));
|
|
3476
|
+
};const PTableSortableBodyBlock = ({ items, baseIndex, columns, showOddColor, showEvenColor, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyRowClassName, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, defaultAlign, defaultEllipsis, sortable, onClick, onCheckChange, }) => {
|
|
3477
|
+
const { progressiveVisible } = useTableState();
|
|
3472
3478
|
/********************************************************************************************************************
|
|
3473
3479
|
* Use
|
|
3474
3480
|
* ******************************************************************************************************************/
|
|
3475
|
-
|
|
3481
|
+
const { ref, inView } = reactIntersectionObserver.useInView({ threshold: 0, triggerOnce: true });
|
|
3476
3482
|
/********************************************************************************************************************
|
|
3477
3483
|
* State
|
|
3478
3484
|
* ******************************************************************************************************************/
|
|
3479
|
-
|
|
3485
|
+
const [canInView, setCanInView] = React.useState(baseIndex === 0);
|
|
3480
3486
|
/********************************************************************************************************************
|
|
3481
3487
|
* Effect
|
|
3482
3488
|
* ******************************************************************************************************************/
|
|
3483
|
-
React.useEffect(
|
|
3489
|
+
React.useEffect(() => {
|
|
3484
3490
|
if (progressiveVisible && baseIndex > 0) {
|
|
3485
|
-
setTimeout(
|
|
3491
|
+
setTimeout(() => {
|
|
3486
3492
|
setCanInView(true);
|
|
3487
3493
|
}, baseIndex * compare.ifUndefined(progressiveVisible.delay, 300));
|
|
3488
3494
|
}
|
|
@@ -3491,10 +3497,8 @@ var PTableBodyRow = function (_a) {
|
|
|
3491
3497
|
/********************************************************************************************************************
|
|
3492
3498
|
* Memo
|
|
3493
3499
|
* ******************************************************************************************************************/
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
React.createElement(material.TableCell, { colSpan: columns.length, style: { height: progressiveVisible.rowHeight * items.length, border: 'none' } })));
|
|
3497
|
-
}, [
|
|
3500
|
+
const renderItems = React.useMemo(() => !progressiveVisible || inView ? (items.map((item, idx) => (React.createElement(PTableBodyRow, { key: item.id, id: item.id, index: baseIndex + idx, className: classNames(showOddColor && 'odd-color', showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, baseIndex + idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, baseIndex + idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, baseIndex + idx) : undefined, hover: true, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: columns, item: item, onClick: onClick, onCheckChange: onCheckChange })))) : (React.createElement(material.TableRow, { ref: canInView ? ref : undefined },
|
|
3501
|
+
React.createElement(material.TableCell, { colSpan: columns.length, style: { height: progressiveVisible.rowHeight * items.length, border: 'none' } }))), [
|
|
3498
3502
|
baseIndex,
|
|
3499
3503
|
canInView,
|
|
3500
3504
|
columns,
|
|
@@ -3520,24 +3524,23 @@ var PTableBodyRow = function (_a) {
|
|
|
3520
3524
|
* Render
|
|
3521
3525
|
* ******************************************************************************************************************/
|
|
3522
3526
|
return React.createElement(React.Fragment, null, renderItems);
|
|
3523
|
-
};
|
|
3524
|
-
|
|
3525
|
-
for (
|
|
3527
|
+
};const chunkArray = (array, size) => {
|
|
3528
|
+
const result = [];
|
|
3529
|
+
for (let i = 0; i < array.length; i += size) {
|
|
3526
3530
|
result.push(array.slice(i, i + size));
|
|
3527
3531
|
}
|
|
3528
3532
|
return result;
|
|
3529
|
-
};
|
|
3533
|
+
};const PTableSortableBody = ({ items, columns, showOddColor, showEvenColor, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyRowClassName, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, defaultAlign, defaultEllipsis, sortable: sortable$1, onClick, onCheckChange, }) => {
|
|
3530
3534
|
/********************************************************************************************************************
|
|
3531
3535
|
* Use
|
|
3532
3536
|
* ******************************************************************************************************************/
|
|
3533
|
-
|
|
3534
|
-
var progressiveVisible = useTableState().progressiveVisible;
|
|
3537
|
+
const { progressiveVisible } = useTableState();
|
|
3535
3538
|
/********************************************************************************************************************
|
|
3536
3539
|
* Memo
|
|
3537
3540
|
* ******************************************************************************************************************/
|
|
3538
|
-
|
|
3541
|
+
const renderBlock = React.useMemo(() => {
|
|
3539
3542
|
if (progressiveVisible) {
|
|
3540
|
-
return (React.createElement(React.Fragment, null, chunkArray(items, compare.ifUndefined(progressiveVisible.blockSize, 20)).map(
|
|
3543
|
+
return (React.createElement(React.Fragment, null, chunkArray(items, compare.ifUndefined(progressiveVisible.blockSize, 20)).map((bItems, index) => (React.createElement(PTableSortableBodyBlock, { key: index, items: bItems, baseIndex: index, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: onCheckChange })))));
|
|
3541
3544
|
}
|
|
3542
3545
|
else {
|
|
3543
3546
|
return (React.createElement(PTableSortableBodyBlock, { items: items, baseIndex: 0, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: onCheckChange }));
|
|
@@ -3567,22 +3570,21 @@ var PTableBodyRow = function (_a) {
|
|
|
3567
3570
|
};function columnFilter(v) {
|
|
3568
3571
|
return v !== undefined && v !== null && v !== false;
|
|
3569
3572
|
}
|
|
3570
|
-
|
|
3571
|
-
|
|
3573
|
+
let _columnId = 0;
|
|
3574
|
+
const PTable = React.forwardRef(({ className, style: initStyle, sx, caption, topHeadRows, columns: initColumns, items: initItems, paging: initPaging, pagingAlign = 'center', defaultAlign = 'left', defaultEllipsis, stickyHeader: initStickyHeader, height, minHeight, maxHeight, fullHeight, showOddColor, showEvenColor, cellPadding = 13, footer, noData, pagination, sortable: sortable$1, progressiveVisible, onClick, onGetBodyRowClassName, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, onPageChange, onSortChange, onCheckChange, }, ref) => {
|
|
3572
3575
|
/********************************************************************************************************************
|
|
3573
3576
|
* Ref
|
|
3574
3577
|
* ******************************************************************************************************************/
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
var finalColumnsIdRef = React.useRef([]);
|
|
3578
|
+
const localHeaderDataRef = React.useRef({});
|
|
3579
|
+
const localBodyDataRef = React.useRef({});
|
|
3580
|
+
const updateHeadCheckTimer = React.useRef(undefined);
|
|
3581
|
+
const fireOnCheckChangeTimer = React.useRef({});
|
|
3582
|
+
const simpleBarRef = React.useRef(null);
|
|
3583
|
+
const finalColumnsIdRef = React.useRef([]);
|
|
3582
3584
|
/********************************************************************************************************************
|
|
3583
3585
|
* sortable
|
|
3584
3586
|
* ******************************************************************************************************************/
|
|
3585
|
-
|
|
3587
|
+
const sensors = core.useSensors(core.useSensor(core.MouseSensor, {
|
|
3586
3588
|
// Require the mouse to move by 10 pixels before activating
|
|
3587
3589
|
activationConstraint: {
|
|
3588
3590
|
distance: 10,
|
|
@@ -3599,21 +3601,21 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3599
3601
|
/********************************************************************************************************************
|
|
3600
3602
|
* State
|
|
3601
3603
|
* ******************************************************************************************************************/
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3604
|
+
const [menuOpen, setMenuOpen] = React.useState(false);
|
|
3605
|
+
const [openMenuId, setOpenMenuId] = React.useState(undefined);
|
|
3606
|
+
const [columns, setColumns] = reactHook.useAutoUpdateState(initColumns);
|
|
3607
|
+
const [finalColumns, setFinalColumns] = React.useState();
|
|
3608
|
+
const [items, setItems] = reactHook.useAutoUpdateState(initItems);
|
|
3609
|
+
const [sortableItems, setSortableItems] = React.useState();
|
|
3610
|
+
const [paging, setPaging] = reactHook.useAutoUpdateState(initPaging);
|
|
3609
3611
|
/********************************************************************************************************************
|
|
3610
3612
|
* containerHeight
|
|
3611
3613
|
* ******************************************************************************************************************/
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
+
const [containerHeight, setContainerHeight] = React.useState();
|
|
3615
|
+
const { ref: containerHeightDetector } = useResizeDetector({
|
|
3614
3616
|
handleHeight: true,
|
|
3615
3617
|
handleWidth: false,
|
|
3616
|
-
onResize
|
|
3618
|
+
onResize() {
|
|
3617
3619
|
if (containerHeightDetector.current) {
|
|
3618
3620
|
setContainerHeight(containerHeightDetector.current.getBoundingClientRect().height);
|
|
3619
3621
|
}
|
|
@@ -3621,15 +3623,15 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3621
3623
|
setContainerHeight(undefined);
|
|
3622
3624
|
}
|
|
3623
3625
|
},
|
|
3624
|
-
})
|
|
3626
|
+
});
|
|
3625
3627
|
/********************************************************************************************************************
|
|
3626
3628
|
* footerHeight
|
|
3627
3629
|
* ******************************************************************************************************************/
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
+
const [pagingHeight, setPagingHeight] = React.useState();
|
|
3631
|
+
const { ref: pagingHeightResizeDetector } = useResizeDetector({
|
|
3630
3632
|
handleHeight: true,
|
|
3631
3633
|
handleWidth: false,
|
|
3632
|
-
onResize
|
|
3634
|
+
onResize() {
|
|
3633
3635
|
if (pagingHeightResizeDetector.current) {
|
|
3634
3636
|
setPagingHeight(pagingHeightResizeDetector.current.getBoundingClientRect().height);
|
|
3635
3637
|
}
|
|
@@ -3637,41 +3639,41 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3637
3639
|
setPagingHeight(undefined);
|
|
3638
3640
|
}
|
|
3639
3641
|
},
|
|
3640
|
-
})
|
|
3642
|
+
});
|
|
3641
3643
|
/********************************************************************************************************************
|
|
3642
3644
|
* Function
|
|
3643
3645
|
* ******************************************************************************************************************/
|
|
3644
|
-
|
|
3646
|
+
const getFinalColumnId = React.useCallback((column) => {
|
|
3645
3647
|
if (finalColumns && finalColumnsIdRef.current) {
|
|
3646
|
-
|
|
3648
|
+
const idx = finalColumns.indexOf(column);
|
|
3647
3649
|
return finalColumnsIdRef.current[idx];
|
|
3648
3650
|
}
|
|
3649
3651
|
else {
|
|
3650
3652
|
return '';
|
|
3651
3653
|
}
|
|
3652
3654
|
}, [finalColumns]);
|
|
3653
|
-
|
|
3655
|
+
const updateHeadCheck = React.useCallback((column) => {
|
|
3654
3656
|
if (updateHeadCheckTimer.current) {
|
|
3655
3657
|
clearTimeout(updateHeadCheckTimer.current);
|
|
3656
3658
|
updateHeadCheckTimer.current = undefined;
|
|
3657
3659
|
}
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
+
const columnId = getFinalColumnId(column);
|
|
3661
|
+
const headColumnData = localHeaderDataRef.current[columnId];
|
|
3660
3662
|
if (headColumnData) {
|
|
3661
|
-
updateHeadCheckTimer.current = setTimeout(
|
|
3663
|
+
updateHeadCheckTimer.current = setTimeout(() => {
|
|
3662
3664
|
var _a, _b;
|
|
3663
3665
|
updateHeadCheckTimer.current = undefined;
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
+
const enabledCheckExists = !!Object.keys(localBodyDataRef.current).find((key) => {
|
|
3667
|
+
const columnData = localBodyDataRef.current[key].columns[columnId];
|
|
3666
3668
|
if (columnData) {
|
|
3667
3669
|
if (!columnData.checkDisabled) {
|
|
3668
3670
|
return true;
|
|
3669
3671
|
}
|
|
3670
3672
|
}
|
|
3671
3673
|
});
|
|
3672
|
-
|
|
3673
|
-
!Object.keys(localBodyDataRef.current).find(
|
|
3674
|
-
|
|
3674
|
+
const allChecked = enabledCheckExists &&
|
|
3675
|
+
!Object.keys(localBodyDataRef.current).find((key) => {
|
|
3676
|
+
const columnData = localBodyDataRef.current[key].columns[columnId];
|
|
3675
3677
|
if (columnData) {
|
|
3676
3678
|
if (!columnData.checkDisabled) {
|
|
3677
3679
|
return !columnData.checked;
|
|
@@ -3683,24 +3685,24 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3683
3685
|
}, 100);
|
|
3684
3686
|
}
|
|
3685
3687
|
}, [getFinalColumnId]);
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
Object.keys(localBodyDataRef.current).find(
|
|
3689
|
-
|
|
3688
|
+
const getChecked = React.useCallback((itemKey, itemValue, columnId) => {
|
|
3689
|
+
let checked = false;
|
|
3690
|
+
Object.keys(localBodyDataRef.current).find((key) => {
|
|
3691
|
+
const itemData = localBodyDataRef.current[key];
|
|
3690
3692
|
if (itemData.item[itemKey] === itemValue) {
|
|
3691
|
-
|
|
3693
|
+
const columnData = itemData.columns[columnId];
|
|
3692
3694
|
checked = !!(columnData === null || columnData === void 0 ? void 0 : columnData.checked);
|
|
3693
3695
|
return true;
|
|
3694
3696
|
}
|
|
3695
3697
|
});
|
|
3696
3698
|
return checked;
|
|
3697
3699
|
}, []);
|
|
3698
|
-
|
|
3699
|
-
Object.keys(localBodyDataRef.current).find(
|
|
3700
|
+
const setChecked = React.useCallback((itemKey, itemValue, columnId, checked) => {
|
|
3701
|
+
Object.keys(localBodyDataRef.current).find((key) => {
|
|
3700
3702
|
var _a;
|
|
3701
|
-
|
|
3703
|
+
const itemData = localBodyDataRef.current[key];
|
|
3702
3704
|
if (itemData.item[itemKey] === itemValue) {
|
|
3703
|
-
|
|
3705
|
+
const columnData = itemData.columns[columnId];
|
|
3704
3706
|
if (columnData) {
|
|
3705
3707
|
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
3706
3708
|
updateHeadCheck(columnData.column);
|
|
@@ -3709,12 +3711,12 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3709
3711
|
}
|
|
3710
3712
|
});
|
|
3711
3713
|
}, [updateHeadCheck]);
|
|
3712
|
-
|
|
3713
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3714
|
+
const toggleChecked = React.useCallback((itemKey, itemValue, columnId) => {
|
|
3715
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3714
3716
|
var _a;
|
|
3715
|
-
|
|
3717
|
+
const itemData = localBodyDataRef.current[key];
|
|
3716
3718
|
if (itemData.item[itemKey] === itemValue) {
|
|
3717
|
-
|
|
3719
|
+
const columnData = itemData.columns[columnId];
|
|
3718
3720
|
if (columnData) {
|
|
3719
3721
|
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(!columnData.checked);
|
|
3720
3722
|
updateHeadCheck(columnData.column);
|
|
@@ -3723,23 +3725,23 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3723
3725
|
}
|
|
3724
3726
|
});
|
|
3725
3727
|
}, [updateHeadCheck]);
|
|
3726
|
-
|
|
3728
|
+
const setCheckedAll = React.useCallback((columnId, checked) => {
|
|
3727
3729
|
var _a, _b;
|
|
3728
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3730
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3729
3731
|
var _a;
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
+
const itemData = localBodyDataRef.current[key];
|
|
3733
|
+
const columnData = itemData.columns[columnId];
|
|
3732
3734
|
if (columnData) {
|
|
3733
3735
|
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
3734
3736
|
}
|
|
3735
3737
|
});
|
|
3736
3738
|
(_b = (_a = localHeaderDataRef.current[columnId]) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.setChecked(checked);
|
|
3737
3739
|
}, []);
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3741
|
-
|
|
3742
|
-
|
|
3740
|
+
const getCheckedItems = React.useCallback((columnId) => {
|
|
3741
|
+
const checkedItems = [];
|
|
3742
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3743
|
+
const itemData = localBodyDataRef.current[key];
|
|
3744
|
+
const columnData = itemData.columns[columnId];
|
|
3743
3745
|
if (columnData) {
|
|
3744
3746
|
if (columnData.checked) {
|
|
3745
3747
|
checkedItems.push(itemData.item);
|
|
@@ -3748,57 +3750,57 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3748
3750
|
});
|
|
3749
3751
|
return checkedItems;
|
|
3750
3752
|
}, []);
|
|
3751
|
-
|
|
3753
|
+
const stopHeadCheckTimer = React.useCallback(() => {
|
|
3752
3754
|
if (updateHeadCheckTimer.current) {
|
|
3753
3755
|
clearTimeout(updateHeadCheckTimer.current);
|
|
3754
3756
|
updateHeadCheckTimer.current = undefined;
|
|
3755
3757
|
}
|
|
3756
3758
|
}, []);
|
|
3757
|
-
|
|
3758
|
-
Object.keys(fireOnCheckChangeTimer.current).forEach(
|
|
3759
|
+
const clearFireOnCheckChangeTimer = React.useCallback(() => {
|
|
3760
|
+
Object.keys(fireOnCheckChangeTimer.current).forEach((key) => {
|
|
3759
3761
|
if (fireOnCheckChangeTimer.current[key]) {
|
|
3760
3762
|
clearTimeout(fireOnCheckChangeTimer.current[key]);
|
|
3761
3763
|
}
|
|
3762
3764
|
});
|
|
3763
3765
|
fireOnCheckChangeTimer.current = {};
|
|
3764
3766
|
}, []);
|
|
3765
|
-
|
|
3767
|
+
const fireOnCheckChange = React.useCallback((columnId) => {
|
|
3766
3768
|
if (fireOnCheckChangeTimer.current[columnId]) {
|
|
3767
3769
|
clearTimeout(fireOnCheckChangeTimer.current[columnId]);
|
|
3768
3770
|
fireOnCheckChangeTimer.current[columnId] = undefined;
|
|
3769
3771
|
}
|
|
3770
3772
|
if (onCheckChange) {
|
|
3771
|
-
fireOnCheckChangeTimer.current[columnId] = setTimeout(
|
|
3773
|
+
fireOnCheckChangeTimer.current[columnId] = setTimeout(() => {
|
|
3772
3774
|
fireOnCheckChangeTimer.current[columnId] = undefined;
|
|
3773
3775
|
onCheckChange && onCheckChange(columnId, getCheckedItems(columnId));
|
|
3774
3776
|
}, 100);
|
|
3775
3777
|
}
|
|
3776
3778
|
}, [getCheckedItems, onCheckChange]);
|
|
3777
|
-
|
|
3779
|
+
const simpleBarScrollToTop = React.useCallback(() => {
|
|
3778
3780
|
var _a, _b;
|
|
3779
3781
|
(_b = (_a = simpleBarRef.current) === null || _a === void 0 ? void 0 : _a.getScrollElement()) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
|
|
3780
3782
|
}, []);
|
|
3781
3783
|
/********************************************************************************************************************
|
|
3782
3784
|
* Effect
|
|
3783
3785
|
* ******************************************************************************************************************/
|
|
3784
|
-
React.useEffect(
|
|
3785
|
-
return
|
|
3786
|
+
React.useEffect(() => {
|
|
3787
|
+
return () => {
|
|
3786
3788
|
stopHeadCheckTimer();
|
|
3787
3789
|
clearFireOnCheckChangeTimer();
|
|
3788
3790
|
};
|
|
3789
3791
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3790
3792
|
}, []);
|
|
3791
|
-
React.useEffect(
|
|
3793
|
+
React.useEffect(() => {
|
|
3792
3794
|
stopHeadCheckTimer();
|
|
3793
3795
|
clearFireOnCheckChangeTimer();
|
|
3794
|
-
Object.keys(localHeaderDataRef.current).forEach(
|
|
3796
|
+
Object.keys(localHeaderDataRef.current).forEach((key) => {
|
|
3795
3797
|
var _a;
|
|
3796
3798
|
if (localHeaderDataRef.current[key].column.type === 'check') {
|
|
3797
3799
|
(_a = localHeaderDataRef.current[key].commands) === null || _a === void 0 ? void 0 : _a.setChecked(false);
|
|
3798
3800
|
}
|
|
3799
3801
|
});
|
|
3800
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3801
|
-
Object.keys(localBodyDataRef.current[key].columns).forEach(
|
|
3802
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3803
|
+
Object.keys(localBodyDataRef.current[key].columns).forEach((cKey) => {
|
|
3802
3804
|
var _a;
|
|
3803
3805
|
(_a = localBodyDataRef.current[key].columns[cKey].commands) === null || _a === void 0 ? void 0 : _a.setChecked(false);
|
|
3804
3806
|
});
|
|
@@ -3806,34 +3808,34 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3806
3808
|
setSortableItems(makeSortableItems(items));
|
|
3807
3809
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3808
3810
|
}, [items]);
|
|
3809
|
-
React.useEffect(
|
|
3811
|
+
React.useEffect(() => {
|
|
3810
3812
|
stopHeadCheckTimer();
|
|
3811
3813
|
clearFireOnCheckChangeTimer();
|
|
3812
|
-
|
|
3814
|
+
const newFinalColumns = columns === null || columns === void 0 ? void 0 : columns.filter(columnFilter);
|
|
3813
3815
|
setFinalColumns(newFinalColumns);
|
|
3814
|
-
finalColumnsIdRef.current = newFinalColumns === null || newFinalColumns === void 0 ? void 0 : newFinalColumns.map(
|
|
3816
|
+
finalColumnsIdRef.current = newFinalColumns === null || newFinalColumns === void 0 ? void 0 : newFinalColumns.map((col) => {
|
|
3815
3817
|
if (col.id) {
|
|
3816
3818
|
return col.id;
|
|
3817
3819
|
}
|
|
3818
3820
|
else {
|
|
3819
3821
|
_columnId += 1;
|
|
3820
|
-
return
|
|
3822
|
+
return `$c$${_columnId}$`;
|
|
3821
3823
|
}
|
|
3822
3824
|
});
|
|
3823
3825
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3824
3826
|
}, [columns]);
|
|
3825
|
-
React.useLayoutEffect(
|
|
3827
|
+
React.useLayoutEffect(() => {
|
|
3826
3828
|
clearFireOnCheckChangeTimer();
|
|
3827
3829
|
if (sortableItems) {
|
|
3828
|
-
localBodyDataRef.current = sortableItems.reduce(
|
|
3830
|
+
localBodyDataRef.current = sortableItems.reduce((res, item) => {
|
|
3829
3831
|
res[item.id] = {
|
|
3830
|
-
item
|
|
3832
|
+
item,
|
|
3831
3833
|
columns: {},
|
|
3832
3834
|
};
|
|
3833
3835
|
if (finalColumns) {
|
|
3834
|
-
finalColumns.forEach(
|
|
3836
|
+
finalColumns.forEach((c) => {
|
|
3835
3837
|
var _a;
|
|
3836
|
-
|
|
3838
|
+
const columnId = getFinalColumnId(c);
|
|
3837
3839
|
if ((_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId]) {
|
|
3838
3840
|
res[item.id].columns[columnId] = localBodyDataRef.current[item.id].columns[columnId];
|
|
3839
3841
|
}
|
|
@@ -3853,9 +3855,9 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3853
3855
|
localBodyDataRef.current = {};
|
|
3854
3856
|
}
|
|
3855
3857
|
}, [sortableItems, finalColumns, clearFireOnCheckChangeTimer, getFinalColumnId]);
|
|
3856
|
-
React.useLayoutEffect(
|
|
3858
|
+
React.useLayoutEffect(() => {
|
|
3857
3859
|
if (finalColumns) {
|
|
3858
|
-
localHeaderDataRef.current = finalColumns.reduce(
|
|
3860
|
+
localHeaderDataRef.current = finalColumns.reduce((res, c) => {
|
|
3859
3861
|
res[getFinalColumnId(c)] = { column: c, checked: false };
|
|
3860
3862
|
return res;
|
|
3861
3863
|
}, {});
|
|
@@ -3867,36 +3869,36 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3867
3869
|
/********************************************************************************************************************
|
|
3868
3870
|
* Commands
|
|
3869
3871
|
* ******************************************************************************************************************/
|
|
3870
|
-
reactHook.useForwardLayoutRef(ref, React.useMemo(
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3872
|
+
reactHook.useForwardLayoutRef(ref, React.useMemo(() => {
|
|
3873
|
+
let lastColumns = columns;
|
|
3874
|
+
let lastItems = items;
|
|
3875
|
+
let lastPaging = paging;
|
|
3874
3876
|
return {
|
|
3875
|
-
getColumns:
|
|
3876
|
-
setColumns:
|
|
3877
|
+
getColumns: () => lastColumns,
|
|
3878
|
+
setColumns: (columns) => {
|
|
3877
3879
|
lastColumns = columns;
|
|
3878
3880
|
setColumns(lastColumns);
|
|
3879
3881
|
},
|
|
3880
|
-
getItems:
|
|
3881
|
-
setItems:
|
|
3882
|
+
getItems: () => lastItems,
|
|
3883
|
+
setItems: (items) => {
|
|
3882
3884
|
lastItems = items;
|
|
3883
3885
|
setItems(items);
|
|
3884
3886
|
},
|
|
3885
|
-
getPaging:
|
|
3886
|
-
setItemsPaging:
|
|
3887
|
+
getPaging: () => lastPaging,
|
|
3888
|
+
setItemsPaging: (items, paging) => {
|
|
3887
3889
|
lastItems = items;
|
|
3888
3890
|
lastPaging = paging;
|
|
3889
3891
|
setItems(lastItems);
|
|
3890
3892
|
setPaging(lastPaging);
|
|
3891
3893
|
},
|
|
3892
|
-
resetSort
|
|
3894
|
+
resetSort() {
|
|
3893
3895
|
setSortableItems(makeSortableItems(lastItems));
|
|
3894
3896
|
},
|
|
3895
|
-
getCheckedItems
|
|
3896
|
-
getChecked
|
|
3897
|
-
setChecked
|
|
3898
|
-
toggleChecked
|
|
3899
|
-
setCheckedAll
|
|
3897
|
+
getCheckedItems,
|
|
3898
|
+
getChecked,
|
|
3899
|
+
setChecked,
|
|
3900
|
+
toggleChecked,
|
|
3901
|
+
setCheckedAll,
|
|
3900
3902
|
scrollToTop: simpleBarScrollToTop,
|
|
3901
3903
|
};
|
|
3902
3904
|
}, [
|
|
@@ -3916,24 +3918,24 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3916
3918
|
/********************************************************************************************************************
|
|
3917
3919
|
* Event Handler
|
|
3918
3920
|
* ******************************************************************************************************************/
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
+
const handleDragEnd = React.useCallback((event) => {
|
|
3922
|
+
const { active, over } = event;
|
|
3921
3923
|
if (active && over) {
|
|
3922
|
-
setSortableItems(
|
|
3924
|
+
setSortableItems((items) => {
|
|
3923
3925
|
if (items) {
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
items.find(
|
|
3926
|
+
let oldIndex = null;
|
|
3927
|
+
let newIndex = null;
|
|
3928
|
+
items.find((item, idx) => {
|
|
3927
3929
|
if (item.id === active.id) {
|
|
3928
|
-
|
|
3930
|
+
oldIndex = idx;
|
|
3929
3931
|
}
|
|
3930
3932
|
else if (item.id === over.id) {
|
|
3931
|
-
|
|
3933
|
+
newIndex = idx;
|
|
3932
3934
|
}
|
|
3933
|
-
return
|
|
3935
|
+
return oldIndex != null && newIndex != null;
|
|
3934
3936
|
});
|
|
3935
|
-
if (
|
|
3936
|
-
|
|
3937
|
+
if (oldIndex != null && newIndex != null) {
|
|
3938
|
+
const finalItems = sortable.arrayMove(items, oldIndex, newIndex);
|
|
3937
3939
|
onSortChange && onSortChange(finalItems);
|
|
3938
3940
|
return finalItems;
|
|
3939
3941
|
}
|
|
@@ -3947,10 +3949,10 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3947
3949
|
});
|
|
3948
3950
|
}
|
|
3949
3951
|
}, [onSortChange]);
|
|
3950
|
-
|
|
3951
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3952
|
+
const handleHeadCheckChange = React.useCallback((column, checked) => {
|
|
3953
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3952
3954
|
var _a;
|
|
3953
|
-
|
|
3955
|
+
const data = localBodyDataRef.current[key].columns[getFinalColumnId(column)];
|
|
3954
3956
|
if (data) {
|
|
3955
3957
|
if (!data.checkDisabled) {
|
|
3956
3958
|
(_a = data.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
@@ -3958,17 +3960,17 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3958
3960
|
}
|
|
3959
3961
|
});
|
|
3960
3962
|
}, [getFinalColumnId]);
|
|
3961
|
-
|
|
3963
|
+
const handleBodyCheckChange = React.useCallback((item, column) => {
|
|
3962
3964
|
updateHeadCheck(column);
|
|
3963
3965
|
}, [updateHeadCheck]);
|
|
3964
|
-
|
|
3966
|
+
const handlePageChange = React.useCallback((page) => {
|
|
3965
3967
|
simpleBarScrollToTop();
|
|
3966
3968
|
onPageChange && onPageChange(page);
|
|
3967
3969
|
}, [onPageChange, simpleBarScrollToTop]);
|
|
3968
3970
|
/********************************************************************************************************************
|
|
3969
3971
|
* TableContext Function
|
|
3970
3972
|
* ******************************************************************************************************************/
|
|
3971
|
-
|
|
3973
|
+
const TableContextSetMenuOpen = React.useCallback((newMenuOpen, newOpenMenuId) => {
|
|
3972
3974
|
if (newMenuOpen) {
|
|
3973
3975
|
setMenuOpen(newMenuOpen);
|
|
3974
3976
|
setOpenMenuId(newOpenMenuId);
|
|
@@ -3980,38 +3982,38 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
3980
3982
|
}
|
|
3981
3983
|
}
|
|
3982
3984
|
}, [openMenuId]);
|
|
3983
|
-
|
|
3985
|
+
const TableContextSetItemColumnChecked = React.useCallback((item, column, checked) => {
|
|
3984
3986
|
var _a;
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
+
const columnId = getFinalColumnId(column);
|
|
3988
|
+
const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId];
|
|
3987
3989
|
if (data) {
|
|
3988
3990
|
data.checked = checked;
|
|
3989
3991
|
fireOnCheckChange(columnId);
|
|
3990
3992
|
}
|
|
3991
3993
|
}, [fireOnCheckChange, getFinalColumnId]);
|
|
3992
|
-
|
|
3994
|
+
const TableContextSetItemColumnCheckDisabled = React.useCallback((item, column, disabled) => {
|
|
3993
3995
|
var _a;
|
|
3994
|
-
|
|
3996
|
+
const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
|
|
3995
3997
|
if (data) {
|
|
3996
3998
|
data.checkDisabled = disabled;
|
|
3997
3999
|
updateHeadCheck(column);
|
|
3998
4000
|
}
|
|
3999
4001
|
}, [getFinalColumnId, updateHeadCheck]);
|
|
4000
|
-
|
|
4002
|
+
const TableContextSetItemColumnCommands = React.useCallback((item, column, commands) => {
|
|
4001
4003
|
var _a;
|
|
4002
|
-
|
|
4004
|
+
const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
|
|
4003
4005
|
if (data) {
|
|
4004
4006
|
data.commands = commands;
|
|
4005
4007
|
}
|
|
4006
4008
|
}, [getFinalColumnId]);
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
+
const TableContextSetHeadColumnChecked = React.useCallback((column, checked) => {
|
|
4010
|
+
const data = localHeaderDataRef.current[getFinalColumnId(column)];
|
|
4009
4011
|
if (data) {
|
|
4010
4012
|
data.checked = checked;
|
|
4011
4013
|
}
|
|
4012
4014
|
}, [getFinalColumnId]);
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
+
const TableContextSetHeadColumnCommands = React.useCallback((column, commands) => {
|
|
4016
|
+
const data = localHeaderDataRef.current[getFinalColumnId(column)];
|
|
4015
4017
|
if (data) {
|
|
4016
4018
|
data.commands = commands;
|
|
4017
4019
|
}
|
|
@@ -4019,27 +4021,27 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
4019
4021
|
/********************************************************************************************************************
|
|
4020
4022
|
* Memo
|
|
4021
4023
|
* ******************************************************************************************************************/
|
|
4022
|
-
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
?
|
|
4028
|
-
|
|
4029
|
-
|
|
4024
|
+
const isNoData = !!sortableItems && sortableItems.length <= 0;
|
|
4025
|
+
const finalPagingHeight = paging && paging.total > 0 ? pagingHeight || 0 : 0;
|
|
4026
|
+
const stickyHeader = !isNoData && initStickyHeader;
|
|
4027
|
+
const { style, tableSx, pagingStyle } = React.useMemo(() => {
|
|
4028
|
+
const style = fullHeight
|
|
4029
|
+
? Object.assign(Object.assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : Object.assign({ width: '100%' }, initStyle);
|
|
4030
|
+
const sx = { padding: typeof cellPadding === 'number' ? `${cellPadding}px` : cellPadding };
|
|
4031
|
+
const tableSx = {
|
|
4030
4032
|
'> .MuiTableHead-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
|
|
4031
4033
|
'> .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
|
|
4032
4034
|
'> .MuiTableFooter-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
|
|
4033
4035
|
};
|
|
4034
4036
|
// pageStyle
|
|
4035
|
-
|
|
4037
|
+
const pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
|
|
4036
4038
|
if (fullHeight) {
|
|
4037
4039
|
pagingStyle.position = 'sticky';
|
|
4038
4040
|
}
|
|
4039
|
-
return { style
|
|
4040
|
-
}, [cellPadding, fullHeight, initStyle])
|
|
4041
|
-
|
|
4042
|
-
|
|
4041
|
+
return { style, tableSx, pagingStyle };
|
|
4042
|
+
}, [cellPadding, fullHeight, initStyle]);
|
|
4043
|
+
const { contentContainerStyle, tableStyle } = React.useMemo(() => {
|
|
4044
|
+
const contentContainerStyle = fullHeight
|
|
4043
4045
|
? {
|
|
4044
4046
|
height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
|
|
4045
4047
|
flex: 1,
|
|
@@ -4049,20 +4051,16 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
4049
4051
|
right: 0,
|
|
4050
4052
|
marginBottom: finalPagingHeight || 0,
|
|
4051
4053
|
}
|
|
4052
|
-
: { height
|
|
4053
|
-
|
|
4054
|
-
return { contentContainerStyle
|
|
4055
|
-
}, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight])
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
React.createElement(
|
|
4062
|
-
React.createElement("div", null,
|
|
4063
|
-
React.createElement(material.Icon, null, "error")),
|
|
4064
|
-
React.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined));
|
|
4065
|
-
}, [
|
|
4054
|
+
: { height, minHeight, maxHeight, marginBottom: -1 };
|
|
4055
|
+
const tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
|
|
4056
|
+
return { contentContainerStyle, tableStyle };
|
|
4057
|
+
}, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight]);
|
|
4058
|
+
const tableTopHead = React.useMemo(() => finalColumns && (React.createElement(PTableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange })), [caption, defaultAlign, finalColumns, handleHeadCheckChange, items, topHeadRows]);
|
|
4059
|
+
const tableBody = React.useMemo(() => finalColumns && (React.createElement(material.TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(PTableSortableBody, { items: sortableItems, columns: finalColumns, showOddColor: showOddColor, showEvenColor: showEvenColor, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: handleBodyCheckChange, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnSx: onGetBodyColumnSx, onGetBodyColumnStyle: onGetBodyColumnStyle })) : (React.createElement(StyledBodyRow, null,
|
|
4060
|
+
React.createElement(material.TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
|
|
4061
|
+
React.createElement("div", null,
|
|
4062
|
+
React.createElement(material.Icon, null, "error")),
|
|
4063
|
+
React.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined)), [
|
|
4066
4064
|
defaultAlign,
|
|
4067
4065
|
defaultEllipsis,
|
|
4068
4066
|
finalColumns,
|
|
@@ -4080,19 +4078,17 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
4080
4078
|
sortable$1,
|
|
4081
4079
|
sortableItems,
|
|
4082
4080
|
]);
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
React.createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(PTableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })); }))));
|
|
4088
|
-
}, [defaultAlign, finalColumns, footer, isNoData, items]);
|
|
4081
|
+
const tableFooter = React.useMemo(() => finalColumns &&
|
|
4082
|
+
!isNoData &&
|
|
4083
|
+
footer && (React.createElement(material.TableFooter, null,
|
|
4084
|
+
React.createElement(material.TableRow, null, finalColumns.map((column, idx) => (React.createElement(PTableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })))))), [defaultAlign, finalColumns, footer, isNoData, items]);
|
|
4089
4085
|
/********************************************************************************************************************
|
|
4090
4086
|
* Render
|
|
4091
4087
|
* ******************************************************************************************************************/
|
|
4092
4088
|
return finalColumns ? (React.createElement(PTableContextProvider, { value: {
|
|
4093
|
-
menuOpen
|
|
4094
|
-
openMenuId
|
|
4095
|
-
progressiveVisible
|
|
4089
|
+
menuOpen,
|
|
4090
|
+
openMenuId,
|
|
4091
|
+
progressiveVisible,
|
|
4096
4092
|
setMenuOpen: TableContextSetMenuOpen,
|
|
4097
4093
|
setItemColumnChecked: TableContextSetItemColumnChecked,
|
|
4098
4094
|
setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
|
|
@@ -4114,53 +4110,52 @@ var PTable = React.forwardRef(function (_a, ref) {
|
|
|
4114
4110
|
tableFooter)))),
|
|
4115
4111
|
finalColumns && paging && paging.total > 0 && (React.createElement(material.Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
|
|
4116
4112
|
React.createElement(PTablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })))))) : null;
|
|
4117
|
-
});
|
|
4118
|
-
|
|
4113
|
+
});const getSearchInfo = (search) => {
|
|
4114
|
+
const searchInfo = {};
|
|
4119
4115
|
if (search) {
|
|
4120
|
-
|
|
4116
|
+
const { ref, searchGroups } = search, props = __rest(search, ["ref", "searchGroups"]);
|
|
4121
4117
|
searchInfo.ref = ref;
|
|
4122
4118
|
searchInfo.searchGroups = searchGroups;
|
|
4123
4119
|
searchInfo.props = props;
|
|
4124
4120
|
}
|
|
4125
4121
|
return searchInfo;
|
|
4126
4122
|
};
|
|
4127
|
-
|
|
4128
|
-
|
|
4123
|
+
const getTableInfo = (table) => {
|
|
4124
|
+
const tableInfo = {};
|
|
4129
4125
|
if (table) {
|
|
4130
|
-
|
|
4126
|
+
const { ref } = table, props = __rest(table, ["ref"]);
|
|
4131
4127
|
tableInfo.ref = ref;
|
|
4132
4128
|
tableInfo.props = props;
|
|
4133
4129
|
}
|
|
4134
4130
|
return tableInfo;
|
|
4135
4131
|
};
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
hash.replace(/([^=&]+)=([^&]*)/g,
|
|
4132
|
+
const deHash = () => {
|
|
4133
|
+
const values = {};
|
|
4134
|
+
const hash = window.location.hash.substring(1);
|
|
4135
|
+
hash.replace(/([^=&]+)=([^&]*)/g, (substring, key, value) => {
|
|
4140
4136
|
values[decodeURIComponent(key)] = decodeURIComponent(value);
|
|
4141
4137
|
return substring;
|
|
4142
4138
|
});
|
|
4143
4139
|
return values;
|
|
4144
|
-
};
|
|
4140
|
+
};const PSearchTable = React.forwardRef(({ className, style: initStyle, sx, color, hash, stickyHeader, fullHeight, search, table, betweenSearchTableComponent, onGetData, onRequestHashChange, }, ref) => {
|
|
4145
4141
|
/********************************************************************************************************************
|
|
4146
4142
|
* Ref
|
|
4147
4143
|
* ******************************************************************************************************************/
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
|
|
4152
|
-
var lastGetDataDataRef = React.useRef({});
|
|
4144
|
+
const initPathRef = React.useRef(window.location.pathname);
|
|
4145
|
+
const searchRef = React.useRef(undefined);
|
|
4146
|
+
const tableRef = React.useRef(undefined);
|
|
4147
|
+
const lastGetDataDataRef = React.useRef({});
|
|
4153
4148
|
/********************************************************************************************************************
|
|
4154
4149
|
* State
|
|
4155
4150
|
* ******************************************************************************************************************/
|
|
4156
|
-
|
|
4157
|
-
|
|
4151
|
+
const [isFirstSearchSubmit, setIsFirstSearchSubmit] = React.useState(true);
|
|
4152
|
+
const [tableData, setTableData] = React.useState();
|
|
4158
4153
|
/********************************************************************************************************************
|
|
4159
4154
|
* searchInfo
|
|
4160
4155
|
* ******************************************************************************************************************/
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
React.useEffect(
|
|
4156
|
+
const searchInfoFirstUseEffect = React.useRef(true);
|
|
4157
|
+
const [searchInfo, setSearchInfo] = React.useState(() => getSearchInfo(search));
|
|
4158
|
+
React.useEffect(() => {
|
|
4164
4159
|
if (searchInfoFirstUseEffect.current) {
|
|
4165
4160
|
searchInfoFirstUseEffect.current = false;
|
|
4166
4161
|
}
|
|
@@ -4171,9 +4166,9 @@ var deHash = function () {
|
|
|
4171
4166
|
/********************************************************************************************************************
|
|
4172
4167
|
* tableInfo
|
|
4173
4168
|
* ******************************************************************************************************************/
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
React.useEffect(
|
|
4169
|
+
const tableInfoFirstUseEffect = React.useRef(true);
|
|
4170
|
+
const [tableInfo, setTableInfo] = React.useState(() => getTableInfo(table));
|
|
4171
|
+
React.useEffect(() => {
|
|
4177
4172
|
if (tableInfoFirstUseEffect.current) {
|
|
4178
4173
|
tableInfoFirstUseEffect.current = false;
|
|
4179
4174
|
}
|
|
@@ -4184,30 +4179,30 @@ var deHash = function () {
|
|
|
4184
4179
|
/********************************************************************************************************************
|
|
4185
4180
|
* Function
|
|
4186
4181
|
* ******************************************************************************************************************/
|
|
4187
|
-
|
|
4182
|
+
const getData = React.useCallback((data) => {
|
|
4188
4183
|
lastGetDataDataRef.current = data;
|
|
4189
4184
|
if (onGetData) {
|
|
4190
4185
|
onGetData(data).then(setTableData);
|
|
4191
4186
|
}
|
|
4192
4187
|
}, [onGetData]);
|
|
4193
|
-
|
|
4194
|
-
|
|
4188
|
+
const hashToSearchValue = React.useCallback(() => {
|
|
4189
|
+
const commands = searchRef.current;
|
|
4195
4190
|
if (commands) {
|
|
4196
4191
|
commands.resetAll();
|
|
4197
|
-
|
|
4198
|
-
Object.keys(
|
|
4192
|
+
const hashValues = deHash();
|
|
4193
|
+
Object.keys(hashValues).forEach((name) => {
|
|
4199
4194
|
var _a, _b;
|
|
4200
|
-
|
|
4195
|
+
const value = hashValues[name];
|
|
4201
4196
|
if (name === 'page') {
|
|
4202
4197
|
commands.setValue(name, Number(value) || 1);
|
|
4203
4198
|
}
|
|
4204
4199
|
else {
|
|
4205
|
-
|
|
4200
|
+
const itemCommands = commands.getItem(name);
|
|
4206
4201
|
if (itemCommands) {
|
|
4207
4202
|
switch (itemCommands.getType()) {
|
|
4208
4203
|
case 'PFormCheckbox':
|
|
4209
4204
|
if (compare.notEmpty(value)) {
|
|
4210
|
-
|
|
4205
|
+
const checkCommands = itemCommands;
|
|
4211
4206
|
if (value.toString() === ((_a = itemCommands.getValue()) === null || _a === void 0 ? void 0 : _a.toString())) {
|
|
4212
4207
|
checkCommands.setChecked(true);
|
|
4213
4208
|
}
|
|
@@ -4221,9 +4216,9 @@ var deHash = function () {
|
|
|
4221
4216
|
case 'PFormTimePicker':
|
|
4222
4217
|
{
|
|
4223
4218
|
if (compare.notEmpty(value)) {
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
|
|
4219
|
+
const dateCommands = itemCommands;
|
|
4220
|
+
const format = dateCommands.getFormValueFormat();
|
|
4221
|
+
const itemValue = dayjs(value, format);
|
|
4227
4222
|
itemCommands.setValue(itemValue.isValid() ? itemValue : null);
|
|
4228
4223
|
}
|
|
4229
4224
|
else {
|
|
@@ -4233,13 +4228,13 @@ var deHash = function () {
|
|
|
4233
4228
|
break;
|
|
4234
4229
|
case 'PFormDateRangePicker':
|
|
4235
4230
|
{
|
|
4236
|
-
|
|
4237
|
-
|
|
4238
|
-
|
|
4239
|
-
|
|
4231
|
+
const dateRangePickerCommands = itemCommands;
|
|
4232
|
+
const fromName = dateRangePickerCommands.getFormValueFromName();
|
|
4233
|
+
const toName = dateRangePickerCommands.getFormValueToName();
|
|
4234
|
+
const format = dateRangePickerCommands.getFormValueFormat();
|
|
4240
4235
|
if (name === fromName) {
|
|
4241
4236
|
if (compare.notEmpty(value)) {
|
|
4242
|
-
|
|
4237
|
+
const startValue = dayjs(value, format);
|
|
4243
4238
|
dateRangePickerCommands.setFromValue(startValue.isValid() ? startValue : null);
|
|
4244
4239
|
}
|
|
4245
4240
|
else {
|
|
@@ -4248,7 +4243,7 @@ var deHash = function () {
|
|
|
4248
4243
|
}
|
|
4249
4244
|
else if (name === toName) {
|
|
4250
4245
|
if (compare.notEmpty(value)) {
|
|
4251
|
-
|
|
4246
|
+
const endValue = dayjs(value, format);
|
|
4252
4247
|
dateRangePickerCommands.setToValue(endValue.isValid() ? endValue : null);
|
|
4253
4248
|
}
|
|
4254
4249
|
else {
|
|
@@ -4259,9 +4254,9 @@ var deHash = function () {
|
|
|
4259
4254
|
break;
|
|
4260
4255
|
case 'PFormYearRangePicker':
|
|
4261
4256
|
{
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4257
|
+
const dateRangePickerCommands = itemCommands;
|
|
4258
|
+
const fromName = dateRangePickerCommands.getFormValueFromName();
|
|
4259
|
+
const toName = dateRangePickerCommands.getFormValueToName();
|
|
4265
4260
|
if (name === fromName) {
|
|
4266
4261
|
dateRangePickerCommands.setFromValue(compare.notEmpty(value) ? Number(value) : null);
|
|
4267
4262
|
}
|
|
@@ -4272,9 +4267,9 @@ var deHash = function () {
|
|
|
4272
4267
|
break;
|
|
4273
4268
|
case 'PFormMonthPicker':
|
|
4274
4269
|
{
|
|
4275
|
-
|
|
4276
|
-
|
|
4277
|
-
|
|
4270
|
+
const monthCommands = itemCommands;
|
|
4271
|
+
const yearName = monthCommands.getFormValueYearName();
|
|
4272
|
+
const monthName = monthCommands.getFormValueMonthName();
|
|
4278
4273
|
if (name === yearName) {
|
|
4279
4274
|
monthCommands.setYear(compare.notEmpty(value) ? Number(value) : null);
|
|
4280
4275
|
}
|
|
@@ -4285,11 +4280,11 @@ var deHash = function () {
|
|
|
4285
4280
|
break;
|
|
4286
4281
|
case 'PFormMonthRangePicker':
|
|
4287
4282
|
{
|
|
4288
|
-
|
|
4289
|
-
|
|
4290
|
-
|
|
4291
|
-
|
|
4292
|
-
|
|
4283
|
+
const monthRangeCommands = itemCommands;
|
|
4284
|
+
const fromYearName = monthRangeCommands.getFormValueFromYearName();
|
|
4285
|
+
const fromMonthName = monthRangeCommands.getFormValueFromMonthName();
|
|
4286
|
+
const toYearName = monthRangeCommands.getFormValueToYearName();
|
|
4287
|
+
const toMonthName = monthRangeCommands.getFormValueToMonthName();
|
|
4293
4288
|
if (name === fromYearName) {
|
|
4294
4289
|
monthRangeCommands.setFromYear(compare.notEmpty(value) ? Number(value) : null);
|
|
4295
4290
|
}
|
|
@@ -4317,15 +4312,15 @@ var deHash = function () {
|
|
|
4317
4312
|
/********************************************************************************************************************
|
|
4318
4313
|
* Commands
|
|
4319
4314
|
* ******************************************************************************************************************/
|
|
4320
|
-
reactHook.useForwardLayoutRef(ref, React.useMemo(
|
|
4321
|
-
reload:
|
|
4315
|
+
reactHook.useForwardLayoutRef(ref, React.useMemo(() => ({
|
|
4316
|
+
reload: (page) => {
|
|
4322
4317
|
var _a, _b, _c, _d;
|
|
4323
4318
|
if (page != null) {
|
|
4324
4319
|
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
|
|
4325
4320
|
}
|
|
4326
|
-
|
|
4321
|
+
let finalData;
|
|
4327
4322
|
if (lastGetDataDataRef.current) {
|
|
4328
|
-
finalData =
|
|
4323
|
+
finalData = Object.assign({}, lastGetDataDataRef.current);
|
|
4329
4324
|
if (page != null) {
|
|
4330
4325
|
(_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', page);
|
|
4331
4326
|
finalData.page = page;
|
|
@@ -4342,46 +4337,46 @@ var deHash = function () {
|
|
|
4342
4337
|
}
|
|
4343
4338
|
getData(finalData);
|
|
4344
4339
|
},
|
|
4345
|
-
getLastLoadData:
|
|
4346
|
-
getSearch:
|
|
4347
|
-
getTable:
|
|
4348
|
-
})
|
|
4340
|
+
getLastLoadData: () => lastGetDataDataRef.current || {},
|
|
4341
|
+
getSearch: () => searchRef.current,
|
|
4342
|
+
getTable: () => tableRef.current,
|
|
4343
|
+
}), [getData, hash, hashToSearchValue]));
|
|
4349
4344
|
/********************************************************************************************************************
|
|
4350
4345
|
* hash
|
|
4351
4346
|
* ******************************************************************************************************************/
|
|
4352
|
-
React.useEffect(
|
|
4347
|
+
React.useEffect(() => {
|
|
4353
4348
|
if (hash && window.location.pathname === initPathRef.current) {
|
|
4354
|
-
|
|
4349
|
+
const data = hashToSearchValue();
|
|
4355
4350
|
if (data)
|
|
4356
4351
|
getData(data);
|
|
4357
4352
|
}
|
|
4358
4353
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4359
4354
|
}, [window.location.hash]);
|
|
4360
|
-
|
|
4355
|
+
const hashChange = React.useCallback((params) => {
|
|
4361
4356
|
if (onRequestHashChange) {
|
|
4362
|
-
|
|
4363
|
-
Object.keys(params).forEach(
|
|
4364
|
-
|
|
4357
|
+
const hashes = [];
|
|
4358
|
+
Object.keys(params).forEach((name) => {
|
|
4359
|
+
const value = params[name];
|
|
4365
4360
|
if (name === 'page') {
|
|
4366
4361
|
if (Number(value) > 1) {
|
|
4367
|
-
|
|
4362
|
+
hashes.push(`${name}=${value}`);
|
|
4368
4363
|
}
|
|
4369
4364
|
}
|
|
4370
4365
|
else {
|
|
4371
4366
|
if (searchRef.current) {
|
|
4372
|
-
|
|
4367
|
+
const itemCommands = searchRef.current.getItem(name);
|
|
4373
4368
|
if (itemCommands) {
|
|
4374
|
-
|
|
4369
|
+
let resetValue = null;
|
|
4375
4370
|
switch (itemCommands.getType()) {
|
|
4376
4371
|
case 'PFormDateRangePicker':
|
|
4377
4372
|
case 'PFormYearRangePicker':
|
|
4378
4373
|
{
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
|
|
4384
|
-
|
|
4374
|
+
const commands = itemCommands;
|
|
4375
|
+
const itemName = itemCommands.getName();
|
|
4376
|
+
const fromName = commands.getFormValueFromName();
|
|
4377
|
+
const fromSuffix = commands.getFormValueFromNameSuffix();
|
|
4378
|
+
const toName = commands.getFormValueToName();
|
|
4379
|
+
const toSuffix = commands.getFormValueToNameSuffix();
|
|
4385
4380
|
if (name === fromName) {
|
|
4386
4381
|
resetValue = searchRef.current.getFormReset(itemName, fromSuffix);
|
|
4387
4382
|
}
|
|
@@ -4392,12 +4387,12 @@ var deHash = function () {
|
|
|
4392
4387
|
break;
|
|
4393
4388
|
case 'PFormMonthPicker':
|
|
4394
4389
|
{
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4390
|
+
const commands = itemCommands;
|
|
4391
|
+
const itemName = commands.getName();
|
|
4392
|
+
const yearName = commands.getFormValueYearName();
|
|
4393
|
+
const yearSuffix = commands.getFormValueYearNameSuffix();
|
|
4394
|
+
const monthName = commands.getFormValueMonthName();
|
|
4395
|
+
const monthSuffix = commands.getFormValueMonthNameSuffix();
|
|
4401
4396
|
if (name === yearName) {
|
|
4402
4397
|
resetValue = searchRef.current.getFormReset(itemName, yearSuffix);
|
|
4403
4398
|
}
|
|
@@ -4408,16 +4403,16 @@ var deHash = function () {
|
|
|
4408
4403
|
break;
|
|
4409
4404
|
case 'PFormMonthRangePicker':
|
|
4410
4405
|
{
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4406
|
+
const commands = itemCommands;
|
|
4407
|
+
const itemName = commands.getName();
|
|
4408
|
+
const fromYearName = commands.getFormValueFromYearName();
|
|
4409
|
+
const fromYearSuffix = commands.getFormValueFromYearNameSuffix();
|
|
4410
|
+
const fromMonthName = commands.getFormValueFromMonthName();
|
|
4411
|
+
const fromMonthSuffix = commands.getFormValueFromMonthNameSuffix();
|
|
4412
|
+
const toYearName = commands.getFormValueToYearName();
|
|
4413
|
+
const toYearSuffix = commands.getFormValueToYearNameSuffix();
|
|
4414
|
+
const toMonthName = commands.getFormValueToMonthName();
|
|
4415
|
+
const toMonthSuffix = commands.getFormValueToMonthNameSuffix();
|
|
4421
4416
|
if (name === fromYearName) {
|
|
4422
4417
|
resetValue = searchRef.current.getFormReset(itemName, fromYearSuffix);
|
|
4423
4418
|
}
|
|
@@ -4437,30 +4432,30 @@ var deHash = function () {
|
|
|
4437
4432
|
break;
|
|
4438
4433
|
}
|
|
4439
4434
|
if (resetValue != null && !compare.equal(resetValue, value) && typeof value !== 'object') {
|
|
4440
|
-
|
|
4435
|
+
hashes.push(`${name}=${encodeURIComponent(value)}`);
|
|
4441
4436
|
}
|
|
4442
4437
|
}
|
|
4443
4438
|
}
|
|
4444
4439
|
}
|
|
4445
4440
|
});
|
|
4446
|
-
|
|
4441
|
+
const finalHash = hashes.join('&');
|
|
4447
4442
|
if (window.location.hash.substring(1) === finalHash) {
|
|
4448
4443
|
getData(params);
|
|
4449
4444
|
}
|
|
4450
4445
|
else {
|
|
4451
|
-
onRequestHashChange(
|
|
4446
|
+
onRequestHashChange(hashes.join('&'));
|
|
4452
4447
|
}
|
|
4453
4448
|
}
|
|
4454
4449
|
}, [onRequestHashChange, getData]);
|
|
4455
4450
|
/********************************************************************************************************************
|
|
4456
4451
|
* Event Handler
|
|
4457
4452
|
* ******************************************************************************************************************/
|
|
4458
|
-
|
|
4453
|
+
const handlePageChange = React.useCallback((page) => {
|
|
4459
4454
|
var _a, _b;
|
|
4460
4455
|
(_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.setValue('page', page);
|
|
4461
|
-
|
|
4456
|
+
let finalData;
|
|
4462
4457
|
if (lastGetDataDataRef.current) {
|
|
4463
|
-
finalData =
|
|
4458
|
+
finalData = Object.assign({}, lastGetDataDataRef.current);
|
|
4464
4459
|
finalData.page = page;
|
|
4465
4460
|
}
|
|
4466
4461
|
else {
|
|
@@ -4473,7 +4468,7 @@ var deHash = function () {
|
|
|
4473
4468
|
getData(finalData || {});
|
|
4474
4469
|
}
|
|
4475
4470
|
}, [searchRef, hash, hashChange, getData]);
|
|
4476
|
-
|
|
4471
|
+
const handleSearchSubmit = React.useCallback((data) => {
|
|
4477
4472
|
var _a, _b;
|
|
4478
4473
|
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
|
|
4479
4474
|
if (isFirstSearchSubmit) {
|
|
@@ -4484,7 +4479,7 @@ var deHash = function () {
|
|
|
4484
4479
|
}
|
|
4485
4480
|
else {
|
|
4486
4481
|
(_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', 1);
|
|
4487
|
-
|
|
4482
|
+
const finalData = Object.assign(Object.assign({}, data), { page: 1 });
|
|
4488
4483
|
if (hash) {
|
|
4489
4484
|
hashChange(finalData);
|
|
4490
4485
|
}
|
|
@@ -4496,8 +4491,8 @@ var deHash = function () {
|
|
|
4496
4491
|
/********************************************************************************************************************
|
|
4497
4492
|
* Render
|
|
4498
4493
|
* ******************************************************************************************************************/
|
|
4499
|
-
|
|
4500
|
-
React.createElement(reactForm.PSearch,
|
|
4494
|
+
const searchView = React.useMemo(() => (React.createElement(material.Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
|
|
4495
|
+
React.createElement(reactForm.PSearch, Object.assign({ color: color }, searchInfo.props, { ref: (commands) => {
|
|
4501
4496
|
if (searchInfo.ref) {
|
|
4502
4497
|
if (typeof searchInfo.ref === 'function') {
|
|
4503
4498
|
searchInfo.ref(commands);
|
|
@@ -4510,11 +4505,11 @@ var deHash = function () {
|
|
|
4510
4505
|
}, autoSubmit: true, onSubmit: handleSearchSubmit }),
|
|
4511
4506
|
React.createElement(reactForm.PSearchGroup, { hidden: true },
|
|
4512
4507
|
React.createElement(reactForm.PFormHidden, { name: 'page', value: 1 })),
|
|
4513
|
-
searchInfo.searchGroups)))
|
|
4514
|
-
|
|
4508
|
+
searchInfo.searchGroups))), [color, handleSearchSubmit, searchInfo]);
|
|
4509
|
+
const tableView = React.useMemo(() => {
|
|
4515
4510
|
var _a, _b;
|
|
4516
4511
|
return (React.createElement(material.Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
|
|
4517
|
-
React.createElement(PTable,
|
|
4512
|
+
React.createElement(PTable, Object.assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: (commands) => {
|
|
4518
4513
|
if (tableInfo.ref) {
|
|
4519
4514
|
if (typeof tableInfo.ref === 'function') {
|
|
4520
4515
|
tableInfo.ref(commands);
|
|
@@ -4526,41 +4521,41 @@ var deHash = function () {
|
|
|
4526
4521
|
tableRef.current = commands || undefined;
|
|
4527
4522
|
}, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange }))));
|
|
4528
4523
|
}, [fullHeight, handlePageChange, stickyHeader, tableData === null || tableData === void 0 ? void 0 : tableData.items, tableData === null || tableData === void 0 ? void 0 : tableData.paging, tableInfo]);
|
|
4529
|
-
return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('PSearchTable', className), style: fullHeight ?
|
|
4524
|
+
return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('PSearchTable', className), style: fullHeight ? Object.assign(Object.assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
|
|
4530
4525
|
searchView,
|
|
4531
4526
|
betweenSearchTableComponent && React.createElement(material.Grid, null, betweenSearchTableComponent),
|
|
4532
4527
|
tableView));
|
|
4533
|
-
});
|
|
4534
|
-
var
|
|
4535
|
-
return (React.createElement(reactComponent.PButton,
|
|
4528
|
+
});const PTableButton = React.forwardRef((_a, ref) => {
|
|
4529
|
+
var { children, className, sx: initSx, variant = 'outlined', color = 'primary', startIcon, endIcon, onClick } = _a, props = __rest(_a, ["children", "className", "sx", "variant", "color", "startIcon", "endIcon", "onClick"]);
|
|
4530
|
+
return (React.createElement(reactComponent.PButton, Object.assign({ ref: ref, className: classNames(className, 'PTableButton'), variant: variant, type: 'button', size: 'small', sx: Object.assign({ minWidth: 0, px: compare.empty(startIcon) && compare.empty(endIcon)
|
|
4536
4531
|
? '7px !important'
|
|
4537
4532
|
: compare.empty(children)
|
|
4538
4533
|
? '5px !important'
|
|
4539
4534
|
: '7px !important' }, initSx), color: color, startIcon: startIcon, endIcon: endIcon, onClick: onClick }, props), children));
|
|
4540
4535
|
});
|
|
4541
|
-
var PTableButton$1 = React.memo(PTableButton);
|
|
4536
|
+
var PTableButton$1 = React.memo(PTableButton);const PTableMenuButton = React.forwardRef((_a, ref) => {
|
|
4542
4537
|
/********************************************************************************************************************
|
|
4543
4538
|
* ID
|
|
4544
4539
|
* ******************************************************************************************************************/
|
|
4545
|
-
var
|
|
4546
|
-
|
|
4547
|
-
|
|
4540
|
+
var { children, className, sx: initSx, color = 'primary', variant = 'text', startIcon, placement = 'bottom', inModal, zIndex, menuList } = _a, props = __rest(_a, ["children", "className", "sx", "color", "variant", "startIcon", "placement", "inModal", "zIndex", "menuList"]);
|
|
4541
|
+
const buttonId = React.useId();
|
|
4542
|
+
const menuId = React.useId();
|
|
4548
4543
|
/********************************************************************************************************************
|
|
4549
4544
|
* Use
|
|
4550
4545
|
* ******************************************************************************************************************/
|
|
4551
|
-
|
|
4546
|
+
const { menuOpen, openMenuId, setMenuOpen } = useTableState();
|
|
4552
4547
|
/********************************************************************************************************************
|
|
4553
4548
|
* Ref
|
|
4554
4549
|
* ******************************************************************************************************************/
|
|
4555
|
-
|
|
4550
|
+
const anchorRef = React.useRef(null);
|
|
4556
4551
|
/********************************************************************************************************************
|
|
4557
4552
|
* State
|
|
4558
4553
|
* ******************************************************************************************************************/
|
|
4559
|
-
|
|
4554
|
+
const [open, setOpen] = React.useState(false);
|
|
4560
4555
|
/********************************************************************************************************************
|
|
4561
4556
|
* Effect
|
|
4562
4557
|
* ******************************************************************************************************************/
|
|
4563
|
-
React.useEffect(
|
|
4558
|
+
React.useEffect(() => {
|
|
4564
4559
|
if (open && menuOpen && openMenuId !== menuId) {
|
|
4565
4560
|
setOpen(false);
|
|
4566
4561
|
}
|
|
@@ -4568,8 +4563,8 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
|
|
|
4568
4563
|
/********************************************************************************************************************
|
|
4569
4564
|
* Event Handler
|
|
4570
4565
|
* ******************************************************************************************************************/
|
|
4571
|
-
|
|
4572
|
-
setOpen(
|
|
4566
|
+
const handleClick = React.useCallback(() => {
|
|
4567
|
+
setOpen((old) => !old);
|
|
4573
4568
|
if (!open) {
|
|
4574
4569
|
setMenuOpen(true, menuId);
|
|
4575
4570
|
}
|
|
@@ -4577,13 +4572,13 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
|
|
|
4577
4572
|
setMenuOpen(false, menuId);
|
|
4578
4573
|
}
|
|
4579
4574
|
}, [menuId, open, setMenuOpen]);
|
|
4580
|
-
|
|
4575
|
+
const handleClose = React.useCallback(() => {
|
|
4581
4576
|
if (open) {
|
|
4582
4577
|
setOpen(false);
|
|
4583
4578
|
setMenuOpen(false, menuId);
|
|
4584
4579
|
}
|
|
4585
4580
|
}, [menuId, open, setMenuOpen]);
|
|
4586
|
-
|
|
4581
|
+
const handleListKeyDown = React.useCallback((event) => {
|
|
4587
4582
|
if (event.key === 'Tab') {
|
|
4588
4583
|
event.preventDefault();
|
|
4589
4584
|
if (open) {
|
|
@@ -4601,7 +4596,7 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
|
|
|
4601
4596
|
/********************************************************************************************************************
|
|
4602
4597
|
* Memo
|
|
4603
4598
|
* ******************************************************************************************************************/
|
|
4604
|
-
|
|
4599
|
+
const finalMenuList = React.useMemo(() => {
|
|
4605
4600
|
return React.cloneElement(menuList, {
|
|
4606
4601
|
autoFocusItem: open,
|
|
4607
4602
|
id: menuId,
|
|
@@ -4613,12 +4608,12 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
|
|
|
4613
4608
|
/********************************************************************************************************************
|
|
4614
4609
|
* Variable
|
|
4615
4610
|
* ******************************************************************************************************************/
|
|
4616
|
-
|
|
4611
|
+
const icon = !startIcon && !children ? 'MoreVert' : undefined;
|
|
4617
4612
|
/********************************************************************************************************************
|
|
4618
4613
|
* Render
|
|
4619
4614
|
* ******************************************************************************************************************/
|
|
4620
4615
|
return (React.createElement("span", null,
|
|
4621
|
-
React.createElement(reactComponent.PButton,
|
|
4616
|
+
React.createElement(reactComponent.PButton, Object.assign({ ref: (r) => {
|
|
4622
4617
|
if (ref) {
|
|
4623
4618
|
if (typeof ref === 'function') {
|
|
4624
4619
|
ref(r);
|
|
@@ -4628,11 +4623,10 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
|
|
|
4628
4623
|
}
|
|
4629
4624
|
}
|
|
4630
4625
|
anchorRef.current = r;
|
|
4631
|
-
}, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'PTableMenuButton'), type: 'button', size: 'small', sx:
|
|
4632
|
-
React.createElement(material.Popper, { className: 'PTableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } },
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
var transformOrigin;
|
|
4626
|
+
}, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'PTableMenuButton'), type: 'button', size: 'small', sx: Object.assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
|
|
4627
|
+
React.createElement(material.Popper, { className: 'PTableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, ({ TransitionProps, placement }) => {
|
|
4628
|
+
const placements = placement.split('-');
|
|
4629
|
+
let transformOrigin;
|
|
4636
4630
|
if (placements[0] === 'left') {
|
|
4637
4631
|
transformOrigin = 'right';
|
|
4638
4632
|
// if (placements.length > 1) {
|
|
@@ -4676,8 +4670,8 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
|
|
|
4676
4670
|
else {
|
|
4677
4671
|
transformOrigin = 'top';
|
|
4678
4672
|
}
|
|
4679
|
-
return (React.createElement(material.Grow,
|
|
4680
|
-
transformOrigin
|
|
4673
|
+
return (React.createElement(material.Grow, Object.assign({}, TransitionProps, { style: {
|
|
4674
|
+
transformOrigin,
|
|
4681
4675
|
} }),
|
|
4682
4676
|
React.createElement(material.Paper, null,
|
|
4683
4677
|
React.createElement(material.ClickAwayListener, { onClickAway: handleClose }, finalMenuList))));
|