@kne/table-page 0.1.1 → 0.1.3
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/README.md +286 -153
- package/dist/index.css +68 -7
- package/dist/index.css.map +1 -1
- package/dist/index.js +231 -82
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +236 -90
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -233,7 +233,8 @@ const formatView = (value, format, context) => {
|
|
|
233
233
|
const globalParams = {
|
|
234
234
|
renderType: null,
|
|
235
235
|
renderTypeSize: {},
|
|
236
|
-
tagTypeColors: {}
|
|
236
|
+
tagTypeColors: {},
|
|
237
|
+
statusTypeColors: {}
|
|
237
238
|
};
|
|
238
239
|
|
|
239
240
|
const defaultRender = value => value;
|
|
@@ -263,19 +264,22 @@ const Ellipsis = ({
|
|
|
263
264
|
});
|
|
264
265
|
};
|
|
265
266
|
|
|
266
|
-
var style$
|
|
267
|
+
var style$8 = {"text":"kne-table-page_5N2-a","ellipsis":"kne-table-page_Lkl3D","hover":"kne-table-page_RnF6d","primary":"kne-table-page_g-Sky","clickable":"kne-table-page_vPcDo","loading":"kne-table-page_FeQ09"};
|
|
267
268
|
|
|
268
|
-
const
|
|
269
|
+
const MainCell = ({
|
|
270
|
+
value,
|
|
269
271
|
column,
|
|
270
272
|
dataSource
|
|
271
|
-
}
|
|
273
|
+
}) => {
|
|
272
274
|
const {
|
|
273
275
|
ellipsis = true,
|
|
274
276
|
hover = true,
|
|
275
277
|
primary = true,
|
|
276
278
|
onClick
|
|
277
279
|
} = column || {};
|
|
278
|
-
|
|
280
|
+
const [loading, setLoading] = react.useState(false);
|
|
281
|
+
const isClickable = Boolean(hover || primary || onClick);
|
|
282
|
+
if (!isClickable) {
|
|
279
283
|
return /*#__PURE__*/jsxRuntime.jsx(Ellipsis, {
|
|
280
284
|
ellipsis: ellipsis,
|
|
281
285
|
children: value
|
|
@@ -283,16 +287,27 @@ const main = (value, {
|
|
|
283
287
|
}
|
|
284
288
|
const ellipsisConfig = typeof ellipsis === 'object' ? ellipsis : {};
|
|
285
289
|
const showTooltip = ellipsis && ellipsisConfig.showTitle !== false;
|
|
286
|
-
const
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
onClick
|
|
290
|
+
const handleClick = onClick ? e => {
|
|
291
|
+
if (loading) {
|
|
292
|
+
return;
|
|
293
|
+
}
|
|
294
|
+
setLoading(true);
|
|
295
|
+
Promise.resolve(onClick({
|
|
292
296
|
item: value,
|
|
293
297
|
colItem: dataSource,
|
|
294
298
|
event: e
|
|
295
|
-
})
|
|
299
|
+
})).finally(() => {
|
|
300
|
+
setLoading(false);
|
|
301
|
+
});
|
|
302
|
+
} : undefined;
|
|
303
|
+
const text = /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
304
|
+
className: classnames__default["default"](style$8['text'], ellipsis && style$8['ellipsis'], {
|
|
305
|
+
[style$8['hover']]: hover,
|
|
306
|
+
[style$8['primary']]: primary,
|
|
307
|
+
[style$8['clickable']]: Boolean(onClick),
|
|
308
|
+
[style$8['loading']]: loading
|
|
309
|
+
}),
|
|
310
|
+
onClick: handleClick,
|
|
296
311
|
children: value
|
|
297
312
|
});
|
|
298
313
|
if (!showTooltip) {
|
|
@@ -304,8 +319,16 @@ const main = (value, {
|
|
|
304
319
|
children: text
|
|
305
320
|
});
|
|
306
321
|
};
|
|
322
|
+
const main = (value, {
|
|
323
|
+
column,
|
|
324
|
+
dataSource
|
|
325
|
+
} = {}) => /*#__PURE__*/jsxRuntime.jsx(MainCell, {
|
|
326
|
+
value: value,
|
|
327
|
+
column: column,
|
|
328
|
+
dataSource: dataSource
|
|
329
|
+
});
|
|
307
330
|
|
|
308
|
-
var style$
|
|
331
|
+
var style$7 = {"amount":"kne-table-page_AH-3R"};
|
|
309
332
|
|
|
310
333
|
const amount = (value, {
|
|
311
334
|
column
|
|
@@ -314,7 +337,7 @@ const amount = (value, {
|
|
|
314
337
|
ellipsis = true
|
|
315
338
|
} = column || {};
|
|
316
339
|
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
317
|
-
className: style$
|
|
340
|
+
className: style$7['amount'],
|
|
318
341
|
children: /*#__PURE__*/jsxRuntime.jsx(Ellipsis, {
|
|
319
342
|
ellipsis: ellipsis,
|
|
320
343
|
children: value
|
|
@@ -397,6 +420,71 @@ const tag = value => renderTagItem(value);
|
|
|
397
420
|
|
|
398
421
|
const tagList = value => renderTagList(value);
|
|
399
422
|
|
|
423
|
+
const DEFAULT_STATUS_TYPE_MAP = {
|
|
424
|
+
default: 'default',
|
|
425
|
+
success: 'success',
|
|
426
|
+
progress: 'processing',
|
|
427
|
+
processing: 'processing',
|
|
428
|
+
danger: 'error',
|
|
429
|
+
error: 'error',
|
|
430
|
+
warning: 'warning',
|
|
431
|
+
info: 'processing',
|
|
432
|
+
other: 'default',
|
|
433
|
+
active: 'success',
|
|
434
|
+
vacation: 'warning',
|
|
435
|
+
resigned: 'default',
|
|
436
|
+
probation: 'processing',
|
|
437
|
+
completed: 'success',
|
|
438
|
+
pending: 'warning',
|
|
439
|
+
shipped: 'processing',
|
|
440
|
+
paid: 'success',
|
|
441
|
+
cancelled: 'error'
|
|
442
|
+
};
|
|
443
|
+
const getStatusType = type => {
|
|
444
|
+
if (!type) {
|
|
445
|
+
return 'default';
|
|
446
|
+
}
|
|
447
|
+
const customTypes = globalParams.statusTypeColors || {};
|
|
448
|
+
return customTypes[type] || DEFAULT_STATUS_TYPE_MAP[type] || type;
|
|
449
|
+
};
|
|
450
|
+
const normalizeStatusItem = item => {
|
|
451
|
+
if (item == null) {
|
|
452
|
+
return null;
|
|
453
|
+
}
|
|
454
|
+
if (typeof item === 'string' || typeof item === 'number') {
|
|
455
|
+
return {
|
|
456
|
+
text: String(item)
|
|
457
|
+
};
|
|
458
|
+
}
|
|
459
|
+
if (typeof item === 'object') {
|
|
460
|
+
return Object.assign({}, item, {
|
|
461
|
+
text: item.text ?? item.children ?? item.label
|
|
462
|
+
});
|
|
463
|
+
}
|
|
464
|
+
return null;
|
|
465
|
+
};
|
|
466
|
+
const renderStatusItem = item => {
|
|
467
|
+
const statusItem = normalizeStatusItem(item);
|
|
468
|
+
if (!statusItem || statusItem.text == null) {
|
|
469
|
+
return null;
|
|
470
|
+
}
|
|
471
|
+
const {
|
|
472
|
+
text,
|
|
473
|
+
type,
|
|
474
|
+
status,
|
|
475
|
+
color,
|
|
476
|
+
children,
|
|
477
|
+
...rest
|
|
478
|
+
} = statusItem;
|
|
479
|
+
return /*#__PURE__*/jsxRuntime.jsx(antd.Badge, {
|
|
480
|
+
status: status ?? color ?? getStatusType(type),
|
|
481
|
+
text: children ?? text,
|
|
482
|
+
...rest
|
|
483
|
+
});
|
|
484
|
+
};
|
|
485
|
+
|
|
486
|
+
const status = value => renderStatusItem(value);
|
|
487
|
+
|
|
400
488
|
const DEFAULT_SPLIT = ',';
|
|
401
489
|
const normalizeListValue = value => {
|
|
402
490
|
if (Array.isArray(value)) {
|
|
@@ -562,7 +650,7 @@ const getColumnLayout = (column, {
|
|
|
562
650
|
};
|
|
563
651
|
};
|
|
564
652
|
|
|
565
|
-
var style$
|
|
653
|
+
var style$6 = {"col-item":"kne-table-page_nL1tj","options":"kne-table-page_EwzO-","options-column":"kne-table-page_im2Lc","options-btn":"kne-table-page_SJxZl"};
|
|
566
654
|
|
|
567
655
|
const normalizeOptionItem = (item, buttonClassName) => {
|
|
568
656
|
if (item == null) {
|
|
@@ -611,15 +699,15 @@ const options = (value, {
|
|
|
611
699
|
if (!Array.isArray(list) || list.length === 0) {
|
|
612
700
|
return null;
|
|
613
701
|
}
|
|
614
|
-
const wrapperClassName = classnames__default["default"](style$
|
|
615
|
-
const buttonClassName = classnames__default["default"](wrapperClassName, style$
|
|
702
|
+
const wrapperClassName = classnames__default["default"](style$6['col-item'], style$6['options']);
|
|
703
|
+
const buttonClassName = classnames__default["default"](wrapperClassName, style$6['options-btn']);
|
|
616
704
|
const normalizedList = list.map(item => normalizeOptionItem(item, buttonClassName)).filter(item => item != null && !item.hidden);
|
|
617
705
|
if (normalizedList.length === 0) {
|
|
618
706
|
return null;
|
|
619
707
|
}
|
|
620
708
|
const width = parseColumnWidth(column?.width);
|
|
621
709
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
622
|
-
className: classnames__default["default"](wrapperClassName, style$
|
|
710
|
+
className: classnames__default["default"](wrapperClassName, style$6['options-column']),
|
|
623
711
|
style: width > 0 ? {
|
|
624
712
|
'--max-width': `${width}px`
|
|
625
713
|
} : undefined,
|
|
@@ -642,6 +730,7 @@ const renderType = {
|
|
|
642
730
|
amount,
|
|
643
731
|
tag,
|
|
644
732
|
tagList,
|
|
733
|
+
status,
|
|
645
734
|
list,
|
|
646
735
|
options,
|
|
647
736
|
enum: enumRender,
|
|
@@ -679,6 +768,11 @@ const typeSize = {
|
|
|
679
768
|
min: 100,
|
|
680
769
|
max: 400
|
|
681
770
|
},
|
|
771
|
+
status: {
|
|
772
|
+
width: 100,
|
|
773
|
+
min: 80,
|
|
774
|
+
max: 140
|
|
775
|
+
},
|
|
682
776
|
tagList: {
|
|
683
777
|
width: 300,
|
|
684
778
|
min: 160,
|
|
@@ -988,9 +1082,9 @@ const computeColumnsDisplay = ({
|
|
|
988
1082
|
computeColumnsValue.computeDisplay = computeDisplay;
|
|
989
1083
|
computeColumnsValue.computeColumnsDisplay = computeColumnsDisplay;
|
|
990
1084
|
|
|
991
|
-
var style$
|
|
1085
|
+
var style$5 = {"table":"kne-table-page_lZgIW","tableView":"kne-table-page_fUw6j","grid":"kne-table-page_JlDmf","header-cell":"kne-table-page_P-ebv","col-content":"kne-table-page_HT5Rr","body-row":"kne-table-page_Z6mVv","col":"kne-table-page_KNy4z","body-cell":"kne-table-page_BSOzz","body":"kne-table-page_9qon1","is-selected-all":"kne-table-page_f2i1e","is-selected":"kne-table-page_n3V6m","is-disabled":"kne-table-page_AfmkR","col-width-based":"kne-table-page_ZvnDi","col-width-fill":"kne-table-page_cV7PE","single-checked":"kne-table-page_9UAoL","col-fixed":"kne-table-page_aB-1c","empty":"kne-table-page_SRI8Q"};
|
|
992
1086
|
|
|
993
|
-
var style$
|
|
1087
|
+
var style$4 = {"table":"kne-table-page_awa1L","is-selected-all":"kne-table-page_692q3","is-selected":"kne-table-page_IWgjl","is-disabled":"kne-table-page_YUG4k","has-summary":"kne-table-page_Cb-du","has-group-header":"kne-table-page_7qTC5","is-sticky":"kne-table-page_jGzIR","is-sticky-scroll-y":"kne-table-page_P6lxG","is-sticky-viewport":"kne-table-page_Kr-p6","table-cell":"kne-table-page_HPmr3","selection-col":"kne-table-page_D7YhS","radio-col":"kne-table-page_df9z3","is-computed":"kne-table-page_ZA1Je","is-resize":"kne-table-page_CA0uL","column-resize-guide":"kne-table-page_JARA2"};
|
|
994
1088
|
|
|
995
1089
|
const useSelectedRow = options => {
|
|
996
1090
|
const _Object$assign = Object.assign({}, {
|
|
@@ -1077,7 +1171,26 @@ const useSelectedRow = options => {
|
|
|
1077
1171
|
};
|
|
1078
1172
|
};
|
|
1079
1173
|
|
|
1080
|
-
var style$
|
|
1174
|
+
var style$3 = {"title":"kne-table-page_Yn7Wc","title-text":"kne-table-page_QhSty","has-sort":"kne-table-page_YaVIX","sort-btn":"kne-table-page_XkYCi","sort-icon":"kne-table-page_SSGYi","active":"kne-table-page_VT0uN","sort-up":"kne-table-page_CIokw","sort-down":"kne-table-page_5xrlc"};
|
|
1175
|
+
|
|
1176
|
+
var style$2 = {"ellipsis":"kne-table-page_QBxlu"};
|
|
1177
|
+
|
|
1178
|
+
const isSimpleTitle = title => typeof title === 'string' || typeof title === 'number';
|
|
1179
|
+
const wrapColumnHeaderTitle = title => {
|
|
1180
|
+
if (title == null || title === '') {
|
|
1181
|
+
return title;
|
|
1182
|
+
}
|
|
1183
|
+
if (isSimpleTitle(title)) {
|
|
1184
|
+
return /*#__PURE__*/jsxRuntime.jsx(Ellipsis, {
|
|
1185
|
+
ellipsis: true,
|
|
1186
|
+
children: title
|
|
1187
|
+
});
|
|
1188
|
+
}
|
|
1189
|
+
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
1190
|
+
className: style$2['ellipsis'],
|
|
1191
|
+
children: title
|
|
1192
|
+
});
|
|
1193
|
+
};
|
|
1081
1194
|
|
|
1082
1195
|
const sortArrayToMap = sort => new Map((sort || []).map(item => {
|
|
1083
1196
|
return [item.name, item.sort];
|
|
@@ -1159,21 +1272,25 @@ const getSortSingle = sortOption => {
|
|
|
1159
1272
|
return true;
|
|
1160
1273
|
};
|
|
1161
1274
|
const renderColumnTitle = (title, column, sortRender) => {
|
|
1275
|
+
const titleContent = wrapColumnHeaderTitle(title);
|
|
1162
1276
|
if (!column.sort || typeof sortRender !== 'function') {
|
|
1163
|
-
return
|
|
1277
|
+
return titleContent;
|
|
1164
1278
|
}
|
|
1165
1279
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
1166
|
-
className: classnames__default["default"](style$
|
|
1280
|
+
className: classnames__default["default"](style$3['title'], style$3['has-sort']),
|
|
1167
1281
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
1168
|
-
className: style$
|
|
1169
|
-
children:
|
|
1282
|
+
className: style$3['title-text'],
|
|
1283
|
+
children: titleContent
|
|
1170
1284
|
}), sortRender({
|
|
1171
1285
|
name: column.name,
|
|
1172
1286
|
single: getSortSingle(column.sort)
|
|
1173
1287
|
})]
|
|
1174
1288
|
});
|
|
1175
1289
|
};
|
|
1176
|
-
const useSort = props
|
|
1290
|
+
const useSort = function (props) {
|
|
1291
|
+
if (props === void 0) {
|
|
1292
|
+
props = {};
|
|
1293
|
+
}
|
|
1177
1294
|
const _useControlValue = useControlValue({
|
|
1178
1295
|
value: props.sort,
|
|
1179
1296
|
defaultValue: props.defaultSort || [],
|
|
@@ -1202,7 +1319,7 @@ const useSort = props => {
|
|
|
1202
1319
|
name = _ref4.name;
|
|
1203
1320
|
const direction = mapSort.get(name);
|
|
1204
1321
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
1205
|
-
className: style$
|
|
1322
|
+
className: style$3['sort-btn'],
|
|
1206
1323
|
onClick: e => {
|
|
1207
1324
|
e.stopPropagation();
|
|
1208
1325
|
setMapSort(sortMap => {
|
|
@@ -1225,12 +1342,12 @@ const useSort = props => {
|
|
|
1225
1342
|
});
|
|
1226
1343
|
},
|
|
1227
1344
|
children: [/*#__PURE__*/jsxRuntime.jsx(icons.CaretUpOutlined, {
|
|
1228
|
-
className: classnames__default["default"](style$
|
|
1229
|
-
[style$
|
|
1345
|
+
className: classnames__default["default"](style$3['sort-icon'], style$3['sort-up'], {
|
|
1346
|
+
[style$3['active']]: direction === 'ASC'
|
|
1230
1347
|
})
|
|
1231
1348
|
}), /*#__PURE__*/jsxRuntime.jsx(icons.CaretDownOutlined, {
|
|
1232
|
-
className: classnames__default["default"](style$
|
|
1233
|
-
[style$
|
|
1349
|
+
className: classnames__default["default"](style$3['sort-icon'], style$3['sort-down'], {
|
|
1350
|
+
[style$3['active']]: direction === 'DESC'
|
|
1234
1351
|
})
|
|
1235
1352
|
})]
|
|
1236
1353
|
});
|
|
@@ -1977,7 +2094,8 @@ const getColumnEllipsis = column => {
|
|
|
1977
2094
|
return typeof column.ellipsis === 'object' ? column.ellipsis : true;
|
|
1978
2095
|
};
|
|
1979
2096
|
|
|
1980
|
-
const _excluded$2 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"]
|
|
2097
|
+
const _excluded$2 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "stickyOffset", "getStickyContainer", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"],
|
|
2098
|
+
_excluded2$1 = ["getContainer"];
|
|
1981
2099
|
const mapJustifyToAlign = justify => {
|
|
1982
2100
|
if (justify === 'center') {
|
|
1983
2101
|
return 'center';
|
|
@@ -2012,10 +2130,10 @@ const getColCellStyle = column => ({
|
|
|
2012
2130
|
verticalAlign: column.align === 'middle' ? 'middle' : column.align === 'bottom' ? 'bottom' : 'top'
|
|
2013
2131
|
});
|
|
2014
2132
|
const getAntCellClassName = function () {
|
|
2015
|
-
return classnames__default["default"](style$
|
|
2133
|
+
return classnames__default["default"](style$4['table-cell'], 'info-page-table-col', ...[].slice.call(arguments));
|
|
2016
2134
|
};
|
|
2017
2135
|
const wrapColContent = node => /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2018
|
-
className: style$
|
|
2136
|
+
className: style$5['col-content'],
|
|
2019
2137
|
children: node
|
|
2020
2138
|
});
|
|
2021
2139
|
const Table = p => {
|
|
@@ -2045,6 +2163,8 @@ const Table = p => {
|
|
|
2045
2163
|
render = props.render,
|
|
2046
2164
|
context = props.context,
|
|
2047
2165
|
sticky = props.sticky,
|
|
2166
|
+
stickyOffset = props.stickyOffset,
|
|
2167
|
+
getStickyContainer = props.getStickyContainer,
|
|
2048
2168
|
headerStyle = props.headerStyle,
|
|
2049
2169
|
_props$pagination = props.pagination,
|
|
2050
2170
|
pagination = _props$pagination === void 0 ? false : _props$pagination,
|
|
@@ -2140,7 +2260,7 @@ const Table = p => {
|
|
|
2140
2260
|
key: colName,
|
|
2141
2261
|
dataIndex: colName,
|
|
2142
2262
|
title: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2143
|
-
className: style$
|
|
2263
|
+
className: style$5['col-content'],
|
|
2144
2264
|
children: renderColumnTitle(title, column, sortRender)
|
|
2145
2265
|
}),
|
|
2146
2266
|
width: toAntdWidth(width),
|
|
@@ -2174,7 +2294,7 @@ const Table = p => {
|
|
|
2174
2294
|
placeholder,
|
|
2175
2295
|
dataSource: record,
|
|
2176
2296
|
context
|
|
2177
|
-
}), computedColumn, style$
|
|
2297
|
+
}), computedColumn, style$5['col-content']);
|
|
2178
2298
|
}
|
|
2179
2299
|
};
|
|
2180
2300
|
if (!controllerOpen) {
|
|
@@ -2182,7 +2302,7 @@ const Table = p => {
|
|
|
2182
2302
|
}
|
|
2183
2303
|
const configProps = computedColumnProps(column, index, {
|
|
2184
2304
|
title: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2185
|
-
className: style$
|
|
2305
|
+
className: style$5['col-content'],
|
|
2186
2306
|
children: renderColumnTitle(title, column, sortRender)
|
|
2187
2307
|
})
|
|
2188
2308
|
});
|
|
@@ -2205,8 +2325,8 @@ const Table = p => {
|
|
|
2205
2325
|
return {
|
|
2206
2326
|
key: column.name,
|
|
2207
2327
|
title: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2208
|
-
className: style$
|
|
2209
|
-
children: column.title
|
|
2328
|
+
className: style$5['col-content'],
|
|
2329
|
+
children: wrapColumnHeaderTitle(column.title)
|
|
2210
2330
|
}),
|
|
2211
2331
|
onHeaderCell: () => ({
|
|
2212
2332
|
className: getAntCellClassName(),
|
|
@@ -2271,13 +2391,13 @@ const Table = p => {
|
|
|
2271
2391
|
})),
|
|
2272
2392
|
renderCell: (checked, record, index, originNode) => wrapColContent(originNode),
|
|
2273
2393
|
onCell: () => ({
|
|
2274
|
-
className: getAntCellClassName(style$
|
|
2394
|
+
className: getAntCellClassName(style$4['selection-col'])
|
|
2275
2395
|
})
|
|
2276
2396
|
} : {
|
|
2277
2397
|
columnWidth: 30,
|
|
2278
2398
|
renderCell: (checked, record, index, originNode) => wrapColContent(originNode),
|
|
2279
2399
|
onCell: () => ({
|
|
2280
|
-
className: getAntCellClassName(style$
|
|
2400
|
+
className: getAntCellClassName(style$4['radio-col'])
|
|
2281
2401
|
})
|
|
2282
2402
|
});
|
|
2283
2403
|
}, [context, dataSource, rowKey, rowSelection, hasFixedColumn]);
|
|
@@ -2292,6 +2412,32 @@ const Table = p => {
|
|
|
2292
2412
|
x
|
|
2293
2413
|
} : {}, scroll);
|
|
2294
2414
|
}, [hasFixedColumn, controllerOpen, totalWidth, tableWidth, scroll]);
|
|
2415
|
+
const hasScrollY = (scroll == null ? void 0 : scroll.y) != null && (scroll == null ? void 0 : scroll.y) !== false;
|
|
2416
|
+
const antdSticky = react.useMemo(() => {
|
|
2417
|
+
if (!sticky) {
|
|
2418
|
+
return undefined;
|
|
2419
|
+
}
|
|
2420
|
+
const config = typeof sticky === 'object' ? Object.assign({}, sticky) : {};
|
|
2421
|
+
if (hasScrollY) {
|
|
2422
|
+
const scrollSticky = _objectWithoutPropertiesLoose(config, _excluded2$1);
|
|
2423
|
+
return Object.assign({
|
|
2424
|
+
offsetHeader: 0
|
|
2425
|
+
}, scrollSticky);
|
|
2426
|
+
}
|
|
2427
|
+
return Object.assign({
|
|
2428
|
+
offsetHeader: 0
|
|
2429
|
+
}, config, getStickyContainer ? {
|
|
2430
|
+
getContainer: getStickyContainer
|
|
2431
|
+
} : null);
|
|
2432
|
+
}, [sticky, getStickyContainer, hasScrollY]);
|
|
2433
|
+
const tableWrapperStyle = react.useMemo(() => {
|
|
2434
|
+
if (!sticky || stickyOffset == null || hasScrollY) {
|
|
2435
|
+
return undefined;
|
|
2436
|
+
}
|
|
2437
|
+
return {
|
|
2438
|
+
'--sticky-offset': stickyOffset
|
|
2439
|
+
};
|
|
2440
|
+
}, [sticky, stickyOffset, hasScrollY]);
|
|
2295
2441
|
const tableElement = /*#__PURE__*/jsxRuntime.jsx(antd.Table, _extends({}, others, {
|
|
2296
2442
|
showHeader: true,
|
|
2297
2443
|
dataSource: dataSource,
|
|
@@ -2302,57 +2448,57 @@ const Table = p => {
|
|
|
2302
2448
|
summary: typeof summary === 'function' ? function (pageData) {
|
|
2303
2449
|
return summary(pageData, ...[].slice.call(arguments, 1));
|
|
2304
2450
|
} : undefined,
|
|
2305
|
-
sticky:
|
|
2306
|
-
offsetHeader: 0
|
|
2307
|
-
} : undefined,
|
|
2451
|
+
sticky: antdSticky,
|
|
2308
2452
|
tableLayout: controllerOpen || hasFixedColumn ? 'fixed' : undefined,
|
|
2309
2453
|
scroll: tableScroll,
|
|
2310
2454
|
onHeaderRow: () => ({
|
|
2311
|
-
className: classnames__default["default"](style$
|
|
2312
|
-
[style$4['sticky']]: sticky && !hasFixedColumn
|
|
2313
|
-
}),
|
|
2455
|
+
className: classnames__default["default"](style$5['header'], 'info-page-table-header'),
|
|
2314
2456
|
style: headerStyle
|
|
2315
2457
|
}),
|
|
2316
2458
|
locale: {
|
|
2317
2459
|
emptyText: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2318
|
-
className: style$
|
|
2460
|
+
className: style$5['empty'],
|
|
2319
2461
|
children: empty
|
|
2320
2462
|
})
|
|
2321
2463
|
},
|
|
2322
2464
|
rowClassName: record => {
|
|
2323
2465
|
const id = resolveRowKey(rowKey, record);
|
|
2324
2466
|
const isChecked = (rowSelection == null ? void 0 : rowSelection.selectedRowKeys) && rowSelection.selectedRowKeys.indexOf(id) > -1;
|
|
2325
|
-
return classnames__default["default"](style$
|
|
2326
|
-
[style$
|
|
2327
|
-
[style$
|
|
2328
|
-
[style$
|
|
2467
|
+
return classnames__default["default"](style$5['body'], 'info-page-table-row', {
|
|
2468
|
+
[style$5['is-selected-all']]: rowSelection == null ? void 0 : rowSelection.isSelectedAll,
|
|
2469
|
+
[style$5['is-selected']]: isChecked,
|
|
2470
|
+
[style$5['is-disabled']]: record.disabled
|
|
2329
2471
|
});
|
|
2330
2472
|
},
|
|
2331
|
-
onRow: record => ({
|
|
2473
|
+
onRow: onRowSelect ? record => ({
|
|
2332
2474
|
onClick: () => {
|
|
2333
2475
|
if (record.disabled) {
|
|
2334
2476
|
return;
|
|
2335
2477
|
}
|
|
2336
|
-
onRowSelect
|
|
2478
|
+
onRowSelect(record, {
|
|
2337
2479
|
columns: visibleColumns,
|
|
2338
2480
|
dataSource
|
|
2339
2481
|
});
|
|
2340
2482
|
}
|
|
2341
|
-
})
|
|
2483
|
+
}) : undefined
|
|
2342
2484
|
}));
|
|
2343
2485
|
const wrappedTable = /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
2344
2486
|
ref: tableRef,
|
|
2345
|
-
className: classnames__default["default"](style$
|
|
2346
|
-
[style$
|
|
2347
|
-
[style$
|
|
2348
|
-
[style$
|
|
2349
|
-
[style$
|
|
2487
|
+
className: classnames__default["default"](style$5['table'], style$4['table'], 'info-page-table', className, {
|
|
2488
|
+
[style$4['is-resize']]: currentMoveColumnIndex !== null,
|
|
2489
|
+
[style$4['is-computed']]: isLayout,
|
|
2490
|
+
[style$4['has-group-header']]: hasGroupHeader,
|
|
2491
|
+
[style$4['has-summary']]: typeof summary === 'function',
|
|
2492
|
+
[style$4['is-sticky']]: !!sticky,
|
|
2493
|
+
[style$4['is-sticky-scroll-y']]: !!sticky && hasScrollY,
|
|
2494
|
+
[style$4['is-sticky-viewport']]: !!sticky && !hasScrollY
|
|
2350
2495
|
}),
|
|
2496
|
+
style: tableWrapperStyle,
|
|
2351
2497
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2352
2498
|
className: "info-page-table-body",
|
|
2353
2499
|
children: !isLayout && tableElement
|
|
2354
2500
|
}), currentMoveColumnIndex !== null && resizeGuideStyle && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2355
|
-
className: style$
|
|
2501
|
+
className: style$4['column-resize-guide'],
|
|
2356
2502
|
style: resizeGuideStyle,
|
|
2357
2503
|
"aria-hidden": true
|
|
2358
2504
|
})]
|
|
@@ -2405,7 +2551,7 @@ const renderHeaderCellContent = (column, {
|
|
|
2405
2551
|
colsSize
|
|
2406
2552
|
}) => {
|
|
2407
2553
|
const titleNode = renderColumnTitle(column.title, column, sortRender);
|
|
2408
|
-
const contentClassName = style$
|
|
2554
|
+
const contentClassName = style$5['col-content'];
|
|
2409
2555
|
if (widthBased) {
|
|
2410
2556
|
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2411
2557
|
className: contentClassName,
|
|
@@ -2435,9 +2581,9 @@ const renderHeaderGridCells = ({
|
|
|
2435
2581
|
const cells = [];
|
|
2436
2582
|
if (rowSelection?.type === 'checkbox') {
|
|
2437
2583
|
cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2438
|
-
className: classnames__default["default"](style$
|
|
2584
|
+
className: classnames__default["default"](style$5['col'], style$5['col-fixed'], style$5['header-cell'], 'info-page-table-col'),
|
|
2439
2585
|
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2440
|
-
className: classnames__default["default"](style$
|
|
2586
|
+
className: classnames__default["default"](style$5['col-content'], 'info-page-table-col-content'),
|
|
2441
2587
|
children: rowSelection.allowSelectedAll ? (() => {
|
|
2442
2588
|
const checkedAll = rowSelection.isSelectedAll || dataSource && dataSource.every(item => rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.indexOf(get__default["default"](item, typeof rowKey === 'function' ? rowKey(item) : rowKey)) > -1);
|
|
2443
2589
|
return /*#__PURE__*/jsxRuntime.jsx(antd.Checkbox, {
|
|
@@ -2475,7 +2621,7 @@ const renderHeaderGridCells = ({
|
|
|
2475
2621
|
});
|
|
2476
2622
|
cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2477
2623
|
style: columnStyle,
|
|
2478
|
-
className: classnames__default["default"](style$
|
|
2624
|
+
className: classnames__default["default"](style$5['col'], fillRemaining ? style$5['col-width-fill'] : widthBased && style$5['col-width-based'], style$5['header-cell'], 'info-page-table-col'),
|
|
2479
2625
|
children: renderHeaderCellContent(column, {
|
|
2480
2626
|
sortRender,
|
|
2481
2627
|
widthBased,
|
|
@@ -2487,7 +2633,7 @@ const renderHeaderGridCells = ({
|
|
|
2487
2633
|
});
|
|
2488
2634
|
if (rowSelection?.type === 'radio') {
|
|
2489
2635
|
cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2490
|
-
className: classnames__default["default"](style$
|
|
2636
|
+
className: classnames__default["default"](style$5['col'], style$5['single-checked'], style$5['header-cell'], 'info-page-table-col')
|
|
2491
2637
|
}, "__radio__"));
|
|
2492
2638
|
}
|
|
2493
2639
|
return cells;
|
|
@@ -2508,7 +2654,7 @@ const Header = p => {
|
|
|
2508
2654
|
}, p);
|
|
2509
2655
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2510
2656
|
style: headerStyle,
|
|
2511
|
-
className: classnames__default["default"](style$
|
|
2657
|
+
className: classnames__default["default"](style$5['header'], 'info-page-table-header'),
|
|
2512
2658
|
children: renderHeaderGridCells({
|
|
2513
2659
|
dataSource,
|
|
2514
2660
|
columns,
|
|
@@ -2625,10 +2771,10 @@ const TableView = p => {
|
|
|
2625
2771
|
const columnMap = columnsValue.reduce((result, column) => Object.assign(result, {
|
|
2626
2772
|
[column.name]: column
|
|
2627
2773
|
}), {});
|
|
2628
|
-
const rowClassName = classnames__default["default"](style$
|
|
2629
|
-
[style$
|
|
2630
|
-
[style$
|
|
2631
|
-
[style$
|
|
2774
|
+
const rowClassName = classnames__default["default"](style$5['body'], style$5['body-cell'], style$5['body-row'], 'info-page-table-row', {
|
|
2775
|
+
[style$5['is-selected-all']]: rowSelection == null ? void 0 : rowSelection.isSelectedAll,
|
|
2776
|
+
[style$5['is-selected']]: isChecked,
|
|
2777
|
+
[style$5['is-disabled']]: item.disabled
|
|
2632
2778
|
});
|
|
2633
2779
|
const onSelectionChange = () => handleRowClick(item, {
|
|
2634
2780
|
dataSource,
|
|
@@ -2639,9 +2785,9 @@ const TableView = p => {
|
|
|
2639
2785
|
const cells = [];
|
|
2640
2786
|
if ((rowSelection == null ? void 0 : rowSelection.type) === 'checkbox') {
|
|
2641
2787
|
cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2642
|
-
className: classnames__default["default"](style$
|
|
2788
|
+
className: classnames__default["default"](style$5['col'], style$5['col-fixed'], 'info-page-table-col'),
|
|
2643
2789
|
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2644
|
-
className: classnames__default["default"](style$
|
|
2790
|
+
className: classnames__default["default"](style$5['col-content'], 'info-page-table-col-content'),
|
|
2645
2791
|
children: /*#__PURE__*/jsxRuntime.jsx(antd.Checkbox, {
|
|
2646
2792
|
disabled: item.disabled || rowSelection.isSelectedAll,
|
|
2647
2793
|
checked: rowSelection.isSelectedAll && !item.disabled || isChecked,
|
|
@@ -2663,20 +2809,20 @@ const TableView = p => {
|
|
|
2663
2809
|
columnStyle = _getColumnLayout.style;
|
|
2664
2810
|
cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2665
2811
|
style: columnStyle,
|
|
2666
|
-
className: classnames__default["default"](style$
|
|
2812
|
+
className: classnames__default["default"](style$5['col'], fillRemaining ? style$5['col-width-fill'] : widthBased && style$5['col-width-based'], 'info-page-table-col'),
|
|
2667
2813
|
children: columnValue ? renderCellContent(computeDisplay({
|
|
2668
2814
|
column: columnValue,
|
|
2669
2815
|
placeholder,
|
|
2670
2816
|
dataSource: item,
|
|
2671
2817
|
context
|
|
2672
|
-
}), columnValue, style$
|
|
2673
|
-
className: style$
|
|
2818
|
+
}), columnValue, style$5['col-content']) : /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2819
|
+
className: style$5['col-content']
|
|
2674
2820
|
})
|
|
2675
2821
|
}, id + "-" + column.name));
|
|
2676
2822
|
});
|
|
2677
2823
|
if ((rowSelection == null ? void 0 : rowSelection.type) === 'radio') {
|
|
2678
2824
|
cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2679
|
-
className: classnames__default["default"](style$
|
|
2825
|
+
className: classnames__default["default"](style$5['col'], style$5['single-checked'], 'info-page-table-col'),
|
|
2680
2826
|
onClick: onSelectionChange,
|
|
2681
2827
|
children: isChecked && /*#__PURE__*/jsxRuntime.jsx(icons.CheckOutlined, {})
|
|
2682
2828
|
}, id + "__radio__"));
|
|
@@ -2688,7 +2834,7 @@ const TableView = p => {
|
|
|
2688
2834
|
});
|
|
2689
2835
|
};
|
|
2690
2836
|
const renderGrid = (dataSource, context) => /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
2691
|
-
className: style$
|
|
2837
|
+
className: style$5['grid'],
|
|
2692
2838
|
style: {
|
|
2693
2839
|
gridTemplateColumns
|
|
2694
2840
|
},
|
|
@@ -2697,7 +2843,7 @@ const TableView = p => {
|
|
|
2697
2843
|
const renderBody = (dataSource, context) => {
|
|
2698
2844
|
if (!dataSource || dataSource.length === 0) {
|
|
2699
2845
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2700
|
-
className: style$
|
|
2846
|
+
className: style$5['empty'],
|
|
2701
2847
|
children: empty
|
|
2702
2848
|
});
|
|
2703
2849
|
}
|
|
@@ -2713,16 +2859,16 @@ const TableView = p => {
|
|
|
2713
2859
|
}));
|
|
2714
2860
|
}
|
|
2715
2861
|
return /*#__PURE__*/jsxRuntime.jsx("div", _extends({}, others, {
|
|
2716
|
-
className: classnames__default["default"](style$
|
|
2862
|
+
className: classnames__default["default"](style$5['table'], style$5['tableView'], 'info-page-table', className),
|
|
2717
2863
|
children: dataSource && dataSource.length > 0 ? renderGrid(dataSource, context) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
2718
2864
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2719
|
-
className: style$
|
|
2865
|
+
className: style$5['grid'],
|
|
2720
2866
|
style: {
|
|
2721
2867
|
gridTemplateColumns
|
|
2722
2868
|
},
|
|
2723
2869
|
children: renderHeaderGridCells(headerCellProps)
|
|
2724
2870
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2725
|
-
className: style$
|
|
2871
|
+
className: style$5['empty'],
|
|
2726
2872
|
children: empty
|
|
2727
2873
|
})]
|
|
2728
2874
|
})
|
|
@@ -3411,6 +3557,7 @@ const TablePageInnerContent = withLocale(_ref => {
|
|
|
3411
3557
|
dataSource: formatData.list,
|
|
3412
3558
|
pagination: false,
|
|
3413
3559
|
sticky,
|
|
3560
|
+
getStickyContainer: getScrollContainer,
|
|
3414
3561
|
className: classnames__default["default"](className, {
|
|
3415
3562
|
[style$1['table-in-toolbar']]: hasToolbar
|
|
3416
3563
|
}),
|
|
@@ -3522,11 +3669,13 @@ exports["default"] = TablePage;
|
|
|
3522
3669
|
exports.getColumnRender = getColumnRender;
|
|
3523
3670
|
exports.getRenderTypeDimensions = getRenderTypeDimensions;
|
|
3524
3671
|
exports.getRenderTypeNames = getRenderTypeNames;
|
|
3672
|
+
exports.getStatusType = getStatusType;
|
|
3525
3673
|
exports.getTagColor = getTagColor;
|
|
3526
3674
|
exports.globalParams = globalParams;
|
|
3527
3675
|
exports.isOptionsColumn = isOptionsColumn;
|
|
3528
3676
|
exports.parseRenderType = parseRenderType;
|
|
3529
3677
|
exports.preset = preset;
|
|
3678
|
+
exports.renderStatusItem = renderStatusItem;
|
|
3530
3679
|
exports.renderTagItem = renderTagItem;
|
|
3531
3680
|
exports.renderTagList = renderTagList;
|
|
3532
3681
|
exports.resolveColumn = resolveColumn;
|