@teamix/pro 1.5.33 → 1.5.35
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/pro.all.min.css +1 -1
- package/dist/pro.css +1 -1
- package/dist/pro.js +1246 -620
- package/dist/pro.min.css +1 -1
- package/dist/pro.min.js +1 -1
- package/dist/pro.xconsole.min.css +1 -1
- package/es/form/Components/FormItem2/index.js +0 -1
- package/es/form/Components/SelectTable2/index.d.ts +97 -0
- package/es/form/Components/SelectTable2/index.js +39 -0
- package/es/form/Filter/AdvancedFilter.js +39 -18
- package/es/form/ProForm/index.js +3 -1
- package/es/form/SchemaForm/adapterDecorator.js +1 -1
- package/es/form/SchemaForm/adapterType.js +2 -1
- package/es/form/typing.d.ts +12 -0
- package/es/global.scss +9 -0
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/table/components/Cell/index.d.ts +18 -0
- package/es/table/components/Cell/index.js +219 -0
- package/es/table/components/Filter/index.js +0 -1
- package/es/table/components/Layout/index.js +9 -7
- package/es/table/components/Pagination/index.d.ts +5 -4
- package/es/table/components/Pagination/index.js +5 -3
- package/es/table/components/TableContent/index.d.ts +7 -0
- package/es/table/components/TableContent/index.js +23 -0
- package/es/table/components/ToolBar/FilterColumnIcon.js +14 -6
- package/es/table/index.js +127 -127
- package/es/table/index.scss +11 -2
- package/es/table/typing.d.ts +9 -2
- package/es/table/utils/genAutoWidthColumns.d.ts +2 -2
- package/es/table/utils/genAutoWidthColumns.js +65 -16
- package/es/table/utils/genProColumnToColumn.d.ts +1 -1
- package/es/table/utils/genProColumnToColumn.js +43 -4
- package/es/table/utils/processColumns.d.ts +8 -0
- package/es/table/utils/processColumns.js +39 -0
- package/es/table/utils/useTableSelection.js +54 -5
- package/es/xconsole.scss +4 -4
- package/lib/form/Components/FormItem2/index.js +0 -1
- package/lib/form/Components/SelectTable2/index.d.ts +97 -0
- package/lib/form/Components/SelectTable2/index.js +47 -0
- package/lib/form/Filter/AdvancedFilter.js +39 -18
- package/lib/form/ProForm/index.js +3 -1
- package/lib/form/SchemaForm/adapterDecorator.js +1 -1
- package/lib/form/SchemaForm/adapterType.js +2 -1
- package/lib/form/typing.d.ts +12 -0
- package/lib/global.scss +9 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/table/components/Cell/index.d.ts +18 -0
- package/lib/table/components/Cell/index.js +224 -0
- package/lib/table/components/Filter/index.js +0 -1
- package/lib/table/components/Layout/index.js +8 -6
- package/lib/table/components/Pagination/index.d.ts +5 -4
- package/lib/table/components/Pagination/index.js +4 -2
- package/lib/table/components/TableContent/index.d.ts +7 -0
- package/lib/table/components/TableContent/index.js +34 -0
- package/lib/table/components/ToolBar/FilterColumnIcon.js +14 -6
- package/lib/table/index.js +129 -129
- package/lib/table/index.scss +11 -2
- package/lib/table/typing.d.ts +9 -2
- package/lib/table/utils/genAutoWidthColumns.d.ts +2 -2
- package/lib/table/utils/genAutoWidthColumns.js +64 -15
- package/lib/table/utils/genProColumnToColumn.d.ts +1 -1
- package/lib/table/utils/genProColumnToColumn.js +42 -3
- package/lib/table/utils/processColumns.d.ts +8 -0
- package/lib/table/utils/processColumns.js +46 -0
- package/lib/table/utils/useTableSelection.js +57 -5
- package/lib/xconsole.scss +4 -4
- package/package.json +1 -1
package/lib/table/index.js
CHANGED
@@ -8,17 +8,15 @@ exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
9
9
|
var _components = require("@alicloudfe/components");
|
10
10
|
var _Pagination = _interopRequireDefault(require("./components/Pagination"));
|
11
|
+
var _TableContent = _interopRequireDefault(require("./components/TableContent"));
|
11
12
|
var _genProColumnToColumn = _interopRequireDefault(require("./utils/genProColumnToColumn"));
|
12
13
|
var _utils = require("@teamix/utils");
|
13
|
-
var _skeleton = require("../skeleton");
|
14
14
|
require("./index.scss");
|
15
15
|
var _Layout = _interopRequireDefault(require("./components/Layout"));
|
16
16
|
var _utils2 = require("./utils");
|
17
17
|
var _getTableProps = _interopRequireDefault(require("./utils/getTableProps"));
|
18
|
-
var _getTableSortIcons = _interopRequireDefault(require("./utils/getTableSortIcons"));
|
19
18
|
var _useTableSelection = _interopRequireDefault(require("./utils/useTableSelection"));
|
20
19
|
var _Fullscreen = _interopRequireDefault(require("./components/ToolBar/Fullscreen"));
|
21
|
-
var _proField = require("@teamix/pro-field");
|
22
20
|
var _actions = require("../actions");
|
23
21
|
var _classnames = _interopRequireDefault(require("classnames"));
|
24
22
|
var _pageContainer = _interopRequireDefault(require("../page-container"));
|
@@ -27,6 +25,7 @@ var _lodash = _interopRequireDefault(require("lodash.debounce"));
|
|
27
25
|
var _CardView = _interopRequireDefault(require("./components/CardView"));
|
28
26
|
var _hooks = require("@teamix/hooks");
|
29
27
|
var _util = require("./utils/util");
|
28
|
+
var _processColumns = _interopRequireDefault(require("./utils/processColumns"));
|
30
29
|
var _typing = require("./typing");
|
31
30
|
Object.keys(_typing).forEach(function (key) {
|
32
31
|
if (key === "default" || key === "__esModule") return;
|
@@ -49,6 +48,9 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
|
|
49
48
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
50
49
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
51
50
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
51
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
52
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
53
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
52
54
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
53
55
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
54
56
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
@@ -57,44 +59,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
57
59
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
58
60
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
59
61
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
60
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
61
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
62
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
63
62
|
var cls = (0, _utils.usePrefixCls)('teamix-pro-table');
|
64
|
-
/**
|
65
|
-
* 处理原生传入的 columns 以便于 选择列 方便处理
|
66
|
-
* @param columns 原生传入的 columns
|
67
|
-
* @returns
|
68
|
-
*/
|
69
|
-
var processColumns = function processColumns(columns, initialColumns) {
|
70
|
-
var _getGlobalConfig;
|
71
|
-
var globalFilterColumns = (_getGlobalConfig = (0, _utils.getGlobalConfig)('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.filterColumns;
|
72
|
-
var filterColumns = columns.filter(function (item) {
|
73
|
-
return item.columnFilters !== false && (item === null || item === void 0 ? void 0 : item.hidden) !== true && (!globalFilterColumns || globalFilterColumns(_objectSpread({}, item)));
|
74
|
-
});
|
75
|
-
// 处理只剩一列批量选择的情况下宽度错乱问题
|
76
|
-
if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
|
77
|
-
var _initialColumns$;
|
78
|
-
if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
|
79
|
-
var _filterColumns$, _filterColumns$2;
|
80
|
-
if ((_filterColumns$ = filterColumns[0]) === null || _filterColumns$ === void 0 ? void 0 : _filterColumns$.width) {
|
81
|
-
delete filterColumns[0].width;
|
82
|
-
}
|
83
|
-
if ((_filterColumns$2 = filterColumns[0]) === null || _filterColumns$2 === void 0 ? void 0 : _filterColumns$2.lock) {
|
84
|
-
filterColumns[0].lock = false;
|
85
|
-
}
|
86
|
-
} else if (((_initialColumns$ = initialColumns[0]) === null || _initialColumns$ === void 0 ? void 0 : _initialColumns$.columnFilters) !== false) {
|
87
|
-
var _initialColumns$2, _initialColumns$3;
|
88
|
-
if ((_initialColumns$2 = initialColumns[0]) === null || _initialColumns$2 === void 0 ? void 0 : _initialColumns$2.width) {
|
89
|
-
filterColumns[0].width = initialColumns[0].width;
|
90
|
-
}
|
91
|
-
if ((_initialColumns$3 = initialColumns[0]) === null || _initialColumns$3 === void 0 ? void 0 : _initialColumns$3.lock) {
|
92
|
-
filterColumns[0].lock = initialColumns[0].lock;
|
93
|
-
}
|
94
|
-
}
|
95
|
-
}
|
96
|
-
return filterColumns;
|
97
|
-
};
|
98
63
|
/** 默认请求翻页参数 */
|
99
64
|
var globalPageKey = 'currentPage';
|
100
65
|
var globalPageSizeKey = 'pageSize';
|
@@ -219,7 +184,9 @@ var ProTable = function ProTable(props) {
|
|
219
184
|
_useState12 = _slicedToArray(_useState11, 2),
|
220
185
|
showSkeleton = _useState12[0],
|
221
186
|
setShowSkeleton = _useState12[1]; // 首次加载,渲染骨架屏
|
222
|
-
var skeletonDataSource =
|
187
|
+
var skeletonDataSource = (0, _react.useMemo)(function () {
|
188
|
+
return new Array(skeletonSize).fill({});
|
189
|
+
}, [skeletonSize]);
|
223
190
|
var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data';
|
224
191
|
// 如果使用 customRequest 的话,内置 loading
|
225
192
|
var _useState13 = (0, _react.useState)(requestWhenMount),
|
@@ -229,14 +196,14 @@ var ProTable = function ProTable(props) {
|
|
229
196
|
var tableRef = (0, _react.useRef)(null);
|
230
197
|
var actionRef = (0, _react.useRef)();
|
231
198
|
// 传给 table 的过滤后的 columns
|
232
|
-
var _useState15 = (0, _react.useState)(
|
199
|
+
var _useState15 = (0, _react.useState)((0, _processColumns.default)(propsColumns !== null && propsColumns !== void 0 ? propsColumns : [], propsColumns)),
|
233
200
|
_useState16 = _slicedToArray(_useState15, 2),
|
234
201
|
filteredColumns = _useState16[0],
|
235
202
|
setFilteredColumns = _useState16[1];
|
236
203
|
// 全局状态 : 自适应表格
|
237
204
|
var autoWidth = (0, _react.useMemo)(function () {
|
238
|
-
var
|
239
|
-
return ((
|
205
|
+
var _getGlobalConfig;
|
206
|
+
return ((_getGlobalConfig = (0, _utils.getGlobalConfig)('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.autoWidth) || autoWidthProp;
|
240
207
|
}, [autoWidthProp]);
|
241
208
|
// 判断是否有操作列,有的话则渲染一个 shadow dom
|
242
209
|
var hasActionColumn = false;
|
@@ -351,7 +318,9 @@ var ProTable = function ProTable(props) {
|
|
351
318
|
// 获取header高度,用作全屏吸底吸底高度计算以及固定body高度计算(滚动条在底部)
|
352
319
|
var getHeaderHeight = function getHeaderHeight(isFullscreen, offset) {
|
353
320
|
var _tableDom$getElements, _tableDom$getElements2, _document$querySelect, _document$querySelect2, _document$querySelect3;
|
354
|
-
if (
|
321
|
+
if (isFullscreen) {
|
322
|
+
// 开启全屏的时候先往下面走
|
323
|
+
} else if (!fixedTableBody) {
|
355
324
|
return;
|
356
325
|
}
|
357
326
|
var tableDom = tableRef.current;
|
@@ -426,8 +395,8 @@ var ProTable = function ProTable(props) {
|
|
426
395
|
});
|
427
396
|
// 全局状态 : 大数据截断
|
428
397
|
var globalUseMaxData = (0, _react.useMemo)(function () {
|
429
|
-
var
|
430
|
-
return (
|
398
|
+
var _getGlobalConfig2;
|
399
|
+
return (_getGlobalConfig2 = (0, _utils.getGlobalConfig)('ProTable')) === null || _getGlobalConfig2 === void 0 ? void 0 : _getGlobalConfig2.useMaxData;
|
431
400
|
}, []);
|
432
401
|
// 非全屏状态下的
|
433
402
|
var normalDataFilterFormRef = (0, _react.useRef)();
|
@@ -474,7 +443,9 @@ var ProTable = function ProTable(props) {
|
|
474
443
|
if (showSkeleton && result) {
|
475
444
|
result.disabled = true;
|
476
445
|
}
|
477
|
-
return
|
446
|
+
return _objectSpread(_objectSpread({
|
447
|
+
_primaryKey: props.primaryKey
|
448
|
+
}, record), result);
|
478
449
|
},
|
479
450
|
titleProps: function titleProps() {
|
480
451
|
var result = {};
|
@@ -541,14 +512,25 @@ var ProTable = function ProTable(props) {
|
|
541
512
|
}, [propsActionRef]);
|
542
513
|
(0, _react.useEffect)(function () {
|
543
514
|
var _actionRef$current, _actionRef$current$se;
|
544
|
-
var columns =
|
515
|
+
var columns = (0, _processColumns.default)(propsColumns !== null && propsColumns !== void 0 ? propsColumns : [], propsColumns);
|
545
516
|
setFilteredColumns(columns);
|
546
517
|
(_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setState) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, 'filterColumns', columns);
|
518
|
+
if (autoWidth) {
|
519
|
+
reGenFilteredColumnsByAutoWidth(columns);
|
520
|
+
}
|
547
521
|
}, [propsColumns]);
|
548
522
|
// dataSource 受控
|
549
523
|
(0, _react.useEffect)(function () {
|
550
524
|
if (propsDataSource) {
|
551
525
|
_setData(propsDataSource);
|
526
|
+
if (autoWidth) {
|
527
|
+
(0, _genAutoWidthColumns.shadowContainer)({
|
528
|
+
columns: filteredColumns,
|
529
|
+
data: propsDataSource,
|
530
|
+
shadowContainerRef: shadowContainerRef
|
531
|
+
});
|
532
|
+
reGenFilteredColumnsByAutoWidth();
|
533
|
+
}
|
552
534
|
}
|
553
535
|
}, [propsDataSource]);
|
554
536
|
// 初始化 ActionRef。
|
@@ -600,7 +582,7 @@ var ProTable = function ProTable(props) {
|
|
600
582
|
setColumn: function setColumn(newColumns) {
|
601
583
|
var _actionRef$current3, _actionRef$current3$s;
|
602
584
|
var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
603
|
-
var columns =
|
585
|
+
var columns = (0, _processColumns.default)(newColumns, propsColumns);
|
604
586
|
setFilteredColumns(columns);
|
605
587
|
(_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$s = _actionRef$current3.setState) === null || _actionRef$current3$s === void 0 ? void 0 : _actionRef$current3$s.call(_actionRef$current3, 'filterColumns', columns);
|
606
588
|
if (update) {
|
@@ -766,7 +748,9 @@ var ProTable = function ProTable(props) {
|
|
766
748
|
if (Number.isInteger(time) && time >= 1000) {
|
767
749
|
autoRefreshTimerRef.current = setTimeout(function () {
|
768
750
|
// 自动刷新不显示 loading
|
769
|
-
|
751
|
+
// 当表格自适应时,自动刷新要显示 loading ,否则表格自适应会出问题
|
752
|
+
// setShowLoading(true)
|
753
|
+
_request({}, !autoWidth);
|
770
754
|
}, Number(time));
|
771
755
|
(0, _utils2.emit)('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
|
772
756
|
}
|
@@ -851,7 +835,7 @@ var ProTable = function ProTable(props) {
|
|
851
835
|
}
|
852
836
|
});
|
853
837
|
// 请求函数
|
854
|
-
|
838
|
+
var _request = (0, _react.useCallback)(function (params, noLoading, filterParams, isReset) {
|
855
839
|
var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current6, _actionRef$current6$g, _objectSpread3;
|
856
840
|
// 首次渲染表格,获取 urlState 上的 表头 filter 数据
|
857
841
|
if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false && dataRef.current.flag) {
|
@@ -955,7 +939,7 @@ var ProTable = function ProTable(props) {
|
|
955
939
|
if (Number.isInteger(time) && time >= 1000) {
|
956
940
|
autoRefreshTimerRef.current = setTimeout(function () {
|
957
941
|
// 自动刷新不显示 loading
|
958
|
-
_request(params,
|
942
|
+
_request(params, !autoWidth);
|
959
943
|
}, Number(time));
|
960
944
|
(0, _utils2.emit)('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
|
961
945
|
}
|
@@ -966,57 +950,74 @@ var ProTable = function ProTable(props) {
|
|
966
950
|
getData.run(requestData);
|
967
951
|
}
|
968
952
|
}
|
969
|
-
}
|
970
|
-
|
953
|
+
}, [bindUrl, bindUrlProps, dataRef, url, customRequest, currentPage, pageSize, propsParams]);
|
954
|
+
var onSort = (0, _react.useCallback)(function (dataIndex, order) {
|
971
955
|
var nextSort = _defineProperty({}, dataIndex, order);
|
972
956
|
setSort(nextSort);
|
973
957
|
_request(targetFormatSort(nextSort));
|
974
|
-
}
|
958
|
+
}, [_request, targetFormatSort]);
|
975
959
|
// 处理 dataFilter 中的 onFilter、onReset
|
976
|
-
var dataFilter =
|
977
|
-
|
978
|
-
|
979
|
-
|
980
|
-
|
981
|
-
|
982
|
-
|
983
|
-
|
984
|
-
|
985
|
-
|
986
|
-
|
987
|
-
|
988
|
-
|
989
|
-
|
990
|
-
|
991
|
-
filterEnableRef.current.fullscreen
|
992
|
-
|
993
|
-
|
994
|
-
|
995
|
-
|
996
|
-
filterEnableRef.current.normal
|
997
|
-
|
960
|
+
var dataFilter = (0, _react.useMemo)(function () {
|
961
|
+
return _objectSpread(_objectSpread({
|
962
|
+
mode: 'inline',
|
963
|
+
forceClear: true
|
964
|
+
}, propsDataFilter), {}, {
|
965
|
+
onInit: (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onInit) || requestWhenMount ? function (values) {
|
966
|
+
var _propsDataFilter$onIn;
|
967
|
+
// 表单初始化请求处理
|
968
|
+
propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$onIn = propsDataFilter.onInit) === null || _propsDataFilter$onIn === void 0 ? void 0 : _propsDataFilter$onIn.call(propsDataFilter, values);
|
969
|
+
!fullscreenState && requestWhenMount && _request({}, false, values);
|
970
|
+
return true;
|
971
|
+
} : undefined,
|
972
|
+
onFilter: function onFilter(values) {
|
973
|
+
var _actionRef$current7, _actionRef$current7$c;
|
974
|
+
// 全屏状态,判断全屏表单onFilter是否禁用
|
975
|
+
if (fullscreenState && !filterEnableRef.current.fullscreen) {
|
976
|
+
filterEnableRef.current.fullscreen = true;
|
977
|
+
return;
|
978
|
+
}
|
979
|
+
// 非全屏状态,判断普通表单onFiler是否禁用
|
980
|
+
if (!fullscreenState && !filterEnableRef.current.normal) {
|
981
|
+
filterEnableRef.current.normal = true;
|
982
|
+
return;
|
983
|
+
}
|
984
|
+
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
|
985
|
+
if (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) {
|
986
|
+
var filterResult = propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values);
|
987
|
+
if (filterResult === false) {
|
988
|
+
return false;
|
989
|
+
}
|
990
|
+
}
|
991
|
+
// 搜索变化时,暂时先清空选择
|
992
|
+
(_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$c = _actionRef$current7.clearRowSelection) === null || _actionRef$current7$c === void 0 ? void 0 : _actionRef$current7$c.call(_actionRef$current7);
|
993
|
+
setCurrentPage(1);
|
994
|
+
_request(_defineProperty({}, targetPageKey, 1), false, values);
|
995
|
+
},
|
996
|
+
onReset: function onReset(values) {
|
997
|
+
var _dataFilterFormRef$cu3;
|
998
|
+
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
|
999
|
+
(_dataFilterFormRef$cu3 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu3 === void 0 ? void 0 : _dataFilterFormRef$cu3.reset();
|
1000
|
+
setCurrentPage(1);
|
1001
|
+
_request(_defineProperty({}, targetPageKey, 1), false, values);
|
998
1002
|
}
|
999
|
-
|
1000
|
-
|
1001
|
-
|
1002
|
-
setCurrentPage(1);
|
1003
|
-
_request(_defineProperty({}, targetPageKey, 1), false, values);
|
1004
|
-
},
|
1005
|
-
onReset: function onReset(values) {
|
1006
|
-
var _dataFilterFormRef$cu3;
|
1007
|
-
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
|
1008
|
-
(_dataFilterFormRef$cu3 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu3 === void 0 ? void 0 : _dataFilterFormRef$cu3.reset();
|
1009
|
-
setCurrentPage(1);
|
1010
|
-
_request(_defineProperty({}, targetPageKey, 1), false, values);
|
1011
|
-
}
|
1012
|
-
});
|
1013
|
-
var getTableLoading = function getTableLoading() {
|
1003
|
+
});
|
1004
|
+
}, [propsDataFilter, fullscreenState, filterEnableRef, actionRef]);
|
1005
|
+
var isLoading = (0, _react.useMemo)(function () {
|
1014
1006
|
if (!customRequest) {
|
1015
1007
|
return showLoading && !showSkeleton && (getData.loading || props.loading);
|
1016
1008
|
} else {
|
1017
1009
|
return showLoading && !showSkeleton && (customTableLoading || props.loading);
|
1018
1010
|
}
|
1019
|
-
};
|
1011
|
+
}, [customRequest, showLoading, showSkeleton, customTableLoading, props.loading, getData]);
|
1012
|
+
(0, _react.useEffect)(function () {
|
1013
|
+
if (autoWidth) {
|
1014
|
+
reGenFilteredColumnsByAutoWidth();
|
1015
|
+
}
|
1016
|
+
}, [shadowContainerRef === null || shadowContainerRef === void 0 ? void 0 : shadowContainerRef.current]);
|
1017
|
+
var memorizedGenProColumnToColumn = (0, _react.useMemo)(function () {
|
1018
|
+
var result = (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps);
|
1019
|
+
return result;
|
1020
|
+
}, [filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps]);
|
1020
1021
|
var renderTable = function renderTable(isFullScreen) {
|
1021
1022
|
if (propsColumns) {
|
1022
1023
|
return /*#__PURE__*/_react.default.createElement("div", {
|
@@ -1043,11 +1044,15 @@ var ProTable = function ProTable(props) {
|
|
1043
1044
|
autoRefreshProps: autoRefreshProps,
|
1044
1045
|
bindUrlProps: bindUrlProps,
|
1045
1046
|
bindUrl: bindUrl
|
1046
|
-
}),
|
1047
|
+
}), autoWidth && (0, _genAutoWidthColumns.shadowContainer)({
|
1048
|
+
columns: filteredColumns,
|
1049
|
+
data: data,
|
1050
|
+
shadowContainerRef: shadowContainerRef
|
1051
|
+
}), hasActionColumn && (0, _genAutoWidthColumns.shadowActionColumnContainer)(filteredColumns, shadowActionColumnContainerRef), switchViewState === 'table' && /*#__PURE__*/_react.default.createElement(_TableContent.default, _objectSpread({
|
1047
1052
|
hasBorder: false,
|
1048
1053
|
dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
|
1049
|
-
columns:
|
1050
|
-
loading:
|
1054
|
+
columns: memorizedGenProColumnToColumn,
|
1055
|
+
loading: isLoading,
|
1051
1056
|
className: (0, _classnames.default)('teamix-pro-table', tableClassName, {
|
1052
1057
|
'with-row-select': rowSelection,
|
1053
1058
|
'teamix-pro-tree-table': isTree
|
@@ -1058,14 +1063,12 @@ var ProTable = function ProTable(props) {
|
|
1058
1063
|
sort: sort,
|
1059
1064
|
primaryKey: primaryKey,
|
1060
1065
|
rowSelection: rowSelection,
|
1061
|
-
emptyContent: /*#__PURE__*/_react.default.createElement(_proField.EmptyContent, _objectSpread({}, emptyProps)),
|
1062
|
-
sortIcons: (0, _getTableSortIcons.default)(),
|
1063
1066
|
fixedHeader: fullscreenState || fixedTableBody,
|
1064
1067
|
maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
|
1065
1068
|
}, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps))), switchViewState === 'card' && /*#__PURE__*/_react.default.createElement(_CardView.default, {
|
1066
1069
|
dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
|
1067
1070
|
showSkeleton: showSkeleton,
|
1068
|
-
loading:
|
1071
|
+
loading: isLoading,
|
1069
1072
|
originColumns: propsColumns,
|
1070
1073
|
cardViewProps: cardViewProps,
|
1071
1074
|
scrollHeight: fullscreenState || fixedTableBody ? "calc(100vh - ".concat(headerHeight, "px)") : undefined,
|
@@ -1107,34 +1110,33 @@ var ProTable = function ProTable(props) {
|
|
1107
1110
|
})));
|
1108
1111
|
} else return footerAction;
|
1109
1112
|
};
|
1110
|
-
var
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1117
|
-
}
|
1118
|
-
setCurrentPage(currentPage);
|
1119
|
-
_request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
|
1113
|
+
var onChangePagination = (0, _react.useCallback)(function (currentPage) {
|
1114
|
+
var _objectSpread4;
|
1115
|
+
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
1116
|
+
// 翻页默认清空选择
|
1117
|
+
if (!reserveSelectedRecords) {
|
1118
|
+
var _actionRef$current8, _actionRef$current8$c;
|
1119
|
+
(_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$c = _actionRef$current8.clearRowSelection) === null || _actionRef$current8$c === void 0 ? void 0 : _actionRef$current8$c.call(_actionRef$current8);
|
1120
1120
|
}
|
1121
|
-
|
1122
|
-
|
1123
|
-
|
1124
|
-
|
1125
|
-
|
1126
|
-
|
1127
|
-
|
1128
|
-
|
1129
|
-
|
1130
|
-
_request((_request10 = {}, _defineProperty(_request10, targetPageSizeKey, currentPageSize), _defineProperty(_request10, targetPageKey, 1), _request10));
|
1121
|
+
setCurrentPage(currentPage);
|
1122
|
+
_request(_objectSpread((_objectSpread4 = {}, _defineProperty(_objectSpread4, targetPageKey, currentPage), _defineProperty(_objectSpread4, "pageSize", pageSize), _objectSpread4), params));
|
1123
|
+
}, [reserveSelectedRecords, targetPageKey, actionRef, pageSize]);
|
1124
|
+
var onChangePaginationSize = (0, _react.useCallback)(function (currentPageSize) {
|
1125
|
+
var _request10;
|
1126
|
+
// 翻页默认清空选择
|
1127
|
+
if (!reserveSelectedRecords) {
|
1128
|
+
var _actionRef$current9, _actionRef$current9$c;
|
1129
|
+
(_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
|
1131
1130
|
}
|
1131
|
+
setPageSize(currentPageSize);
|
1132
|
+
setCurrentPage(1);
|
1133
|
+
_request((_request10 = {}, _defineProperty(_request10, targetPageSizeKey, currentPageSize), _defineProperty(_request10, targetPageKey, 1), _request10));
|
1134
|
+
}, [reserveSelectedRecords, actionRef, targetPageSizeKey, targetPageKey, currentPage]);
|
1135
|
+
var renderFooter = function renderFooter() {
|
1132
1136
|
function renderRowSelection() {
|
1133
1137
|
if (rowSelection) {
|
1134
1138
|
if (showSkeleton) {
|
1135
|
-
return
|
1136
|
-
className: cls('footer-left-wrapper')
|
1137
|
-
}, /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Operation, null));
|
1139
|
+
return null;
|
1138
1140
|
} else {
|
1139
1141
|
return /*#__PURE__*/_react.default.createElement("div", {
|
1140
1142
|
className: cls('footer-left-wrapper')
|
@@ -1148,9 +1150,7 @@ var ProTable = function ProTable(props) {
|
|
1148
1150
|
}
|
1149
1151
|
} else if (footerAction) {
|
1150
1152
|
if (showSkeleton) {
|
1151
|
-
return
|
1152
|
-
className: cls('footer-left-wrapper')
|
1153
|
-
}, /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Operation, null));
|
1153
|
+
return null;
|
1154
1154
|
} else {
|
1155
1155
|
return /*#__PURE__*/_react.default.createElement("div", {
|
1156
1156
|
className: cls('footer-left-wrapper')
|
@@ -1171,7 +1171,7 @@ var ProTable = function ProTable(props) {
|
|
1171
1171
|
})
|
1172
1172
|
}, renderRowSelection(), /*#__PURE__*/_react.default.createElement("div", {
|
1173
1173
|
className: cls('footer-right-wrapper')
|
1174
|
-
}, showSkeleton ?
|
1174
|
+
}, showSkeleton ? null : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, _objectSpread({
|
1175
1175
|
className: cls('pagination'),
|
1176
1176
|
onChange: function onChange(number, e) {
|
1177
1177
|
onChangePagination(number);
|
@@ -1199,7 +1199,7 @@ var ProTable = function ProTable(props) {
|
|
1199
1199
|
})
|
1200
1200
|
}, renderRowSelection(), /*#__PURE__*/_react.default.createElement("div", {
|
1201
1201
|
className: cls('footer-right-wrapper')
|
1202
|
-
}, showSkeleton ?
|
1202
|
+
}, showSkeleton ? null : footer));
|
1203
1203
|
}
|
1204
1204
|
};
|
1205
1205
|
// 判断是否需要吸底
|
@@ -1226,7 +1226,7 @@ var ProTable = function ProTable(props) {
|
|
1226
1226
|
// 'footer-suction': footerSuctionState && footerSuction,
|
1227
1227
|
}),
|
1228
1228
|
ref: tableRef
|
1229
|
-
},
|
1229
|
+
}, autoWidth && (0, _genAutoWidthColumns.shadowContainer)({
|
1230
1230
|
columns: filteredColumns,
|
1231
1231
|
data: data,
|
1232
1232
|
shadowContainerRef: shadowContainerRef
|
package/lib/table/index.scss
CHANGED
@@ -71,7 +71,7 @@ $fullscreenPadding: 24px;
|
|
71
71
|
box-shadow: var(--shadow-1-up);
|
72
72
|
background-color: var(--table-row-bg, #ffffff);
|
73
73
|
margin: 0;
|
74
|
-
z-index:
|
74
|
+
z-index: 5;
|
75
75
|
}
|
76
76
|
|
77
77
|
.next-table-body {
|
@@ -103,7 +103,7 @@ $fullscreenPadding: 24px;
|
|
103
103
|
pointer-events: none;
|
104
104
|
display: flex;
|
105
105
|
}
|
106
|
-
|
106
|
+
|
107
107
|
// sort icon
|
108
108
|
.next-table-sort.next-table-header-icon {
|
109
109
|
line-height: 16px;
|
@@ -126,6 +126,15 @@ $fullscreenPadding: 24px;
|
|
126
126
|
}
|
127
127
|
}
|
128
128
|
|
129
|
+
// .teamix-pro-table-fullscreen {
|
130
|
+
// .teamix-pro-table-container {
|
131
|
+
// height: calc(100vh - 74px);
|
132
|
+
// overflow: hidden;
|
133
|
+
// overflow-y: auto;
|
134
|
+
// }
|
135
|
+
// }
|
136
|
+
|
137
|
+
|
129
138
|
.teamix-pro-table-footer-suction {
|
130
139
|
margin-bottom: 50px;
|
131
140
|
.teamix-pro-table-footer {
|
package/lib/table/typing.d.ts
CHANGED
@@ -24,6 +24,8 @@ declare type TDataService = {
|
|
24
24
|
};
|
25
25
|
export declare type responsivePaginationType = 'mini' | 'small' | 'simple' | 'normal';
|
26
26
|
export declare type ProTableColumnProps = {
|
27
|
+
/** 是否开启了自动计算宽度 */
|
28
|
+
isAutoWidth?: boolean;
|
27
29
|
/** 自动计算宽度时的被挤占的情况 */
|
28
30
|
shrink?: number;
|
29
31
|
/** 是否自动适应该列宽度 */
|
@@ -182,7 +184,8 @@ export declare type ProTableProps = {
|
|
182
184
|
autoRedirect?: boolean;
|
183
185
|
/** 使用超大数据模式 **/
|
184
186
|
useMaxData?: boolean;
|
185
|
-
|
187
|
+
rowSelection?: rowSelectionType;
|
188
|
+
} & Omit<TableProps, 'columns' | 'rowSelection'> & ProTableTopAreaProps;
|
186
189
|
export declare type rowSelectionType = {
|
187
190
|
getProps?: (record: any, index: number) => any;
|
188
191
|
onChange?: (selectedRowKeys: Array<any>, records: Array<any>) => void;
|
@@ -194,7 +197,11 @@ export declare type rowSelectionType = {
|
|
194
197
|
titleProps?: () => any;
|
195
198
|
columnProps?: () => any;
|
196
199
|
titleAddons?: () => any;
|
197
|
-
|
200
|
+
/** 默认选中的 Key 值 **/
|
201
|
+
defaultSelectedRowKeys?: any[];
|
202
|
+
/** 默认选中的 record 值 **/
|
203
|
+
defaultSelectedRecords?: any[];
|
204
|
+
} & TableProps['rowSelection'];
|
198
205
|
export declare type innerRowSelectionType = {
|
199
206
|
rowSelection: rowSelectionType;
|
200
207
|
selectedRowKeys: string[];
|
@@ -6,13 +6,13 @@ import { ProTableColumnProps, ITableCellRender } from '../typing';
|
|
6
6
|
* @param data
|
7
7
|
* @returns
|
8
8
|
*/
|
9
|
-
export declare function genAutoWidthColumns(
|
9
|
+
export declare function genAutoWidthColumns(columns: ProTableColumnProps[], ref: MutableRefObject<HTMLDivElement | null>, data: any[], size: 'small' | 'medium', useRowSelection?: boolean | undefined, actionColumnRef?: MutableRefObject<HTMLDivElement | null>): ProTableColumnProps[];
|
10
10
|
interface IShadowContainerProps {
|
11
11
|
columns: ProTableColumnProps[];
|
12
12
|
data: any[];
|
13
13
|
shadowContainerRef: MutableRefObject<null>;
|
14
14
|
}
|
15
|
-
export declare const shadowContainer: (props: IShadowContainerProps) => JSX.Element;
|
15
|
+
export declare const shadowContainer: (props: IShadowContainerProps) => JSX.Element | null;
|
16
16
|
export declare const shadowActionColumnContainer: (columns: ProTableColumnProps[], shadowActionColumnContainerRef: MutableRefObject<null>) => JSX.Element | undefined;
|
17
17
|
export declare const computeableWidthTypeList: {
|
18
18
|
dateTime: (data: any[], render: ITableCellRender) => any;
|