@teamix/pro 1.5.30 → 1.5.32
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.js +953 -570
- package/dist/pro.min.js +1 -1
- package/es/actions/index.js +4 -3
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/table/components/Cell/index.d.ts +17 -0
- package/es/table/components/Cell/index.js +209 -0
- 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/index.js +89 -115
- package/es/table/index.scss +1 -1
- package/es/table/typing.d.ts +2 -0
- package/es/table/utils/genAutoWidthColumns.js +42 -6
- package/es/table/utils/genProColumnToColumn.js +20 -2
- package/es/table/utils/processColumns.d.ts +8 -0
- package/es/table/utils/processColumns.js +39 -0
- package/lib/actions/index.js +4 -3
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/table/components/Cell/index.d.ts +17 -0
- package/lib/table/components/Cell/index.js +214 -0
- 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/index.js +91 -117
- package/lib/table/index.scss +1 -1
- package/lib/table/typing.d.ts +2 -0
- package/lib/table/utils/genAutoWidthColumns.js +42 -6
- package/lib/table/utils/genProColumnToColumn.js +19 -1
- package/lib/table/utils/processColumns.d.ts +8 -0
- package/lib/table/utils/processColumns.js +46 -0
- package/package.json +1 -1
package/lib/table/index.js
CHANGED
@@ -8,6 +8,7 @@ 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
14
|
var _skeleton = require("../skeleton");
|
@@ -15,10 +16,8 @@ require("./index.scss");
|
|
15
16
|
var _Layout = _interopRequireDefault(require("./components/Layout"));
|
16
17
|
var _utils2 = require("./utils");
|
17
18
|
var _getTableProps = _interopRequireDefault(require("./utils/getTableProps"));
|
18
|
-
var _getTableSortIcons = _interopRequireDefault(require("./utils/getTableSortIcons"));
|
19
19
|
var _useTableSelection = _interopRequireDefault(require("./utils/useTableSelection"));
|
20
20
|
var _Fullscreen = _interopRequireDefault(require("./components/ToolBar/Fullscreen"));
|
21
|
-
var _proField = require("@teamix/pro-field");
|
22
21
|
var _actions = require("../actions");
|
23
22
|
var _classnames = _interopRequireDefault(require("classnames"));
|
24
23
|
var _pageContainer = _interopRequireDefault(require("../page-container"));
|
@@ -27,6 +26,7 @@ var _lodash = _interopRequireDefault(require("lodash.debounce"));
|
|
27
26
|
var _CardView = _interopRequireDefault(require("./components/CardView"));
|
28
27
|
var _hooks = require("@teamix/hooks");
|
29
28
|
var _util = require("./utils/util");
|
29
|
+
var _processColumns = _interopRequireDefault(require("./utils/processColumns"));
|
30
30
|
var _typing = require("./typing");
|
31
31
|
Object.keys(_typing).forEach(function (key) {
|
32
32
|
if (key === "default" || key === "__esModule") return;
|
@@ -49,6 +49,9 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
|
|
49
49
|
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
50
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
51
51
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
52
|
+
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; }
|
53
|
+
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; }
|
54
|
+
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
55
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
53
56
|
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
57
|
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 +60,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
57
60
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
58
61
|
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
62
|
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
63
|
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
64
|
/** 默认请求翻页参数 */
|
99
65
|
var globalPageKey = 'currentPage';
|
100
66
|
var globalPageSizeKey = 'pageSize';
|
@@ -219,7 +185,9 @@ var ProTable = function ProTable(props) {
|
|
219
185
|
_useState12 = _slicedToArray(_useState11, 2),
|
220
186
|
showSkeleton = _useState12[0],
|
221
187
|
setShowSkeleton = _useState12[1]; // 首次加载,渲染骨架屏
|
222
|
-
var skeletonDataSource =
|
188
|
+
var skeletonDataSource = (0, _react.useMemo)(function () {
|
189
|
+
return new Array(skeletonSize).fill({});
|
190
|
+
}, [skeletonSize]);
|
223
191
|
var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data';
|
224
192
|
// 如果使用 customRequest 的话,内置 loading
|
225
193
|
var _useState13 = (0, _react.useState)(requestWhenMount),
|
@@ -229,14 +197,14 @@ var ProTable = function ProTable(props) {
|
|
229
197
|
var tableRef = (0, _react.useRef)(null);
|
230
198
|
var actionRef = (0, _react.useRef)();
|
231
199
|
// 传给 table 的过滤后的 columns
|
232
|
-
var _useState15 = (0, _react.useState)(
|
200
|
+
var _useState15 = (0, _react.useState)((0, _processColumns.default)(propsColumns !== null && propsColumns !== void 0 ? propsColumns : [], propsColumns)),
|
233
201
|
_useState16 = _slicedToArray(_useState15, 2),
|
234
202
|
filteredColumns = _useState16[0],
|
235
203
|
setFilteredColumns = _useState16[1];
|
236
204
|
// 全局状态 : 自适应表格
|
237
205
|
var autoWidth = (0, _react.useMemo)(function () {
|
238
|
-
var
|
239
|
-
return ((
|
206
|
+
var _getGlobalConfig;
|
207
|
+
return ((_getGlobalConfig = (0, _utils.getGlobalConfig)('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.autoWidth) || autoWidthProp;
|
240
208
|
}, [autoWidthProp]);
|
241
209
|
// 判断是否有操作列,有的话则渲染一个 shadow dom
|
242
210
|
var hasActionColumn = false;
|
@@ -426,8 +394,8 @@ var ProTable = function ProTable(props) {
|
|
426
394
|
});
|
427
395
|
// 全局状态 : 大数据截断
|
428
396
|
var globalUseMaxData = (0, _react.useMemo)(function () {
|
429
|
-
var
|
430
|
-
return (
|
397
|
+
var _getGlobalConfig2;
|
398
|
+
return (_getGlobalConfig2 = (0, _utils.getGlobalConfig)('ProTable')) === null || _getGlobalConfig2 === void 0 ? void 0 : _getGlobalConfig2.useMaxData;
|
431
399
|
}, []);
|
432
400
|
// 非全屏状态下的
|
433
401
|
var normalDataFilterFormRef = (0, _react.useRef)();
|
@@ -541,7 +509,7 @@ var ProTable = function ProTable(props) {
|
|
541
509
|
}, [propsActionRef]);
|
542
510
|
(0, _react.useEffect)(function () {
|
543
511
|
var _actionRef$current, _actionRef$current$se;
|
544
|
-
var columns =
|
512
|
+
var columns = (0, _processColumns.default)(propsColumns !== null && propsColumns !== void 0 ? propsColumns : [], propsColumns);
|
545
513
|
setFilteredColumns(columns);
|
546
514
|
(_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);
|
547
515
|
}, [propsColumns]);
|
@@ -600,7 +568,7 @@ var ProTable = function ProTable(props) {
|
|
600
568
|
setColumn: function setColumn(newColumns) {
|
601
569
|
var _actionRef$current3, _actionRef$current3$s;
|
602
570
|
var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
603
|
-
var columns =
|
571
|
+
var columns = (0, _processColumns.default)(newColumns, propsColumns);
|
604
572
|
setFilteredColumns(columns);
|
605
573
|
(_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
574
|
if (update) {
|
@@ -766,7 +734,9 @@ var ProTable = function ProTable(props) {
|
|
766
734
|
if (Number.isInteger(time) && time >= 1000) {
|
767
735
|
autoRefreshTimerRef.current = setTimeout(function () {
|
768
736
|
// 自动刷新不显示 loading
|
769
|
-
|
737
|
+
// 当表格自适应时,自动刷新要显示 loading ,否则表格自适应会出问题
|
738
|
+
// setShowLoading(true)
|
739
|
+
_request({}, !autoWidth);
|
770
740
|
}, Number(time));
|
771
741
|
(0, _utils2.emit)('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
|
772
742
|
}
|
@@ -851,7 +821,7 @@ var ProTable = function ProTable(props) {
|
|
851
821
|
}
|
852
822
|
});
|
853
823
|
// 请求函数
|
854
|
-
|
824
|
+
var _request = (0, _react.useCallback)(function (params, noLoading, filterParams, isReset) {
|
855
825
|
var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current6, _actionRef$current6$g, _objectSpread3;
|
856
826
|
// 首次渲染表格,获取 urlState 上的 表头 filter 数据
|
857
827
|
if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false && dataRef.current.flag) {
|
@@ -955,7 +925,7 @@ var ProTable = function ProTable(props) {
|
|
955
925
|
if (Number.isInteger(time) && time >= 1000) {
|
956
926
|
autoRefreshTimerRef.current = setTimeout(function () {
|
957
927
|
// 自动刷新不显示 loading
|
958
|
-
_request(params,
|
928
|
+
_request(params, !autoWidth);
|
959
929
|
}, Number(time));
|
960
930
|
(0, _utils2.emit)('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
|
961
931
|
}
|
@@ -966,57 +936,63 @@ var ProTable = function ProTable(props) {
|
|
966
936
|
getData.run(requestData);
|
967
937
|
}
|
968
938
|
}
|
969
|
-
}
|
970
|
-
|
939
|
+
}, [bindUrl, bindUrlProps, dataRef, url, customRequest]);
|
940
|
+
var onSort = (0, _react.useCallback)(function (dataIndex, order) {
|
971
941
|
var nextSort = _defineProperty({}, dataIndex, order);
|
972
942
|
setSort(nextSort);
|
973
943
|
_request(targetFormatSort(nextSort));
|
974
|
-
}
|
944
|
+
}, [_request, targetFormatSort]);
|
975
945
|
// 处理 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
|
-
|
946
|
+
var dataFilter = (0, _react.useMemo)(function () {
|
947
|
+
return _objectSpread(_objectSpread({
|
948
|
+
mode: 'inline',
|
949
|
+
forceClear: true
|
950
|
+
}, propsDataFilter), {}, {
|
951
|
+
onInit: (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onInit) || requestWhenMount ? function (values) {
|
952
|
+
var _propsDataFilter$onIn;
|
953
|
+
// 表单初始化请求处理
|
954
|
+
propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$onIn = propsDataFilter.onInit) === null || _propsDataFilter$onIn === void 0 ? void 0 : _propsDataFilter$onIn.call(propsDataFilter, values);
|
955
|
+
!fullscreenState && requestWhenMount && _request({}, false, values);
|
956
|
+
return true;
|
957
|
+
} : undefined,
|
958
|
+
onFilter: function onFilter(values) {
|
959
|
+
var _actionRef$current7, _actionRef$current7$c;
|
960
|
+
// 全屏状态,判断全屏表单onFilter是否禁用
|
961
|
+
if (fullscreenState && !filterEnableRef.current.fullscreen) {
|
962
|
+
filterEnableRef.current.fullscreen = true;
|
963
|
+
return;
|
964
|
+
}
|
965
|
+
// 非全屏状态,判断普通表单onFiler是否禁用
|
966
|
+
if (!fullscreenState && !filterEnableRef.current.normal) {
|
967
|
+
filterEnableRef.current.normal = true;
|
968
|
+
return;
|
969
|
+
}
|
970
|
+
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
|
971
|
+
// 搜索变化时,暂时先清空选择
|
972
|
+
(_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);
|
973
|
+
setCurrentPage(1);
|
974
|
+
_request(_defineProperty({}, targetPageKey, 1), false, values);
|
975
|
+
},
|
976
|
+
onReset: function onReset(values) {
|
977
|
+
var _dataFilterFormRef$cu3;
|
978
|
+
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
|
979
|
+
(_dataFilterFormRef$cu3 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu3 === void 0 ? void 0 : _dataFilterFormRef$cu3.reset();
|
980
|
+
setCurrentPage(1);
|
981
|
+
_request(_defineProperty({}, targetPageKey, 1), false, values);
|
998
982
|
}
|
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() {
|
983
|
+
});
|
984
|
+
}, [propsDataFilter, fullscreenState, filterEnableRef, actionRef]);
|
985
|
+
var isLoading = (0, _react.useMemo)(function () {
|
1014
986
|
if (!customRequest) {
|
1015
987
|
return showLoading && !showSkeleton && (getData.loading || props.loading);
|
1016
988
|
} else {
|
1017
989
|
return showLoading && !showSkeleton && (customTableLoading || props.loading);
|
1018
990
|
}
|
1019
|
-
};
|
991
|
+
}, [customRequest, showLoading, showSkeleton, customTableLoading, props.loading, getData]);
|
992
|
+
var memorizedGenProColumnToColumn = (0, _react.useMemo)(function () {
|
993
|
+
var result = (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps);
|
994
|
+
return result;
|
995
|
+
}, [filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps]);
|
1020
996
|
var renderTable = function renderTable(isFullScreen) {
|
1021
997
|
if (propsColumns) {
|
1022
998
|
return /*#__PURE__*/_react.default.createElement("div", {
|
@@ -1043,11 +1019,11 @@ var ProTable = function ProTable(props) {
|
|
1043
1019
|
autoRefreshProps: autoRefreshProps,
|
1044
1020
|
bindUrlProps: bindUrlProps,
|
1045
1021
|
bindUrl: bindUrl
|
1046
|
-
}), switchViewState === 'table' && /*#__PURE__*/_react.default.createElement(
|
1022
|
+
}), switchViewState === 'table' && /*#__PURE__*/_react.default.createElement(_TableContent.default, _objectSpread({
|
1047
1023
|
hasBorder: false,
|
1048
1024
|
dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
|
1049
|
-
columns:
|
1050
|
-
loading:
|
1025
|
+
columns: memorizedGenProColumnToColumn,
|
1026
|
+
loading: isLoading,
|
1051
1027
|
className: (0, _classnames.default)('teamix-pro-table', tableClassName, {
|
1052
1028
|
'with-row-select': rowSelection,
|
1053
1029
|
'teamix-pro-tree-table': isTree
|
@@ -1058,14 +1034,12 @@ var ProTable = function ProTable(props) {
|
|
1058
1034
|
sort: sort,
|
1059
1035
|
primaryKey: primaryKey,
|
1060
1036
|
rowSelection: rowSelection,
|
1061
|
-
emptyContent: /*#__PURE__*/_react.default.createElement(_proField.EmptyContent, _objectSpread({}, emptyProps)),
|
1062
|
-
sortIcons: (0, _getTableSortIcons.default)(),
|
1063
1037
|
fixedHeader: fullscreenState || fixedTableBody,
|
1064
1038
|
maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
|
1065
1039
|
}, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps))), switchViewState === 'card' && /*#__PURE__*/_react.default.createElement(_CardView.default, {
|
1066
1040
|
dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
|
1067
1041
|
showSkeleton: showSkeleton,
|
1068
|
-
loading:
|
1042
|
+
loading: isLoading,
|
1069
1043
|
originColumns: propsColumns,
|
1070
1044
|
cardViewProps: cardViewProps,
|
1071
1045
|
scrollHeight: fullscreenState || fixedTableBody ? "calc(100vh - ".concat(headerHeight, "px)") : undefined,
|
@@ -1107,28 +1081,28 @@ var ProTable = function ProTable(props) {
|
|
1107
1081
|
})));
|
1108
1082
|
} else return footerAction;
|
1109
1083
|
};
|
1110
|
-
var
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
(_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);
|
1117
|
-
}
|
1118
|
-
setCurrentPage(currentPage);
|
1119
|
-
_request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
|
1084
|
+
var onChangePagination = (0, _react.useCallback)(function (currentPage) {
|
1085
|
+
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
1086
|
+
// 翻页默认清空选择
|
1087
|
+
if (!reserveSelectedRecords) {
|
1088
|
+
var _actionRef$current8, _actionRef$current8$c;
|
1089
|
+
(_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
1090
|
}
|
1121
|
-
|
1122
|
-
|
1123
|
-
|
1124
|
-
|
1125
|
-
|
1126
|
-
|
1127
|
-
|
1128
|
-
|
1129
|
-
|
1130
|
-
_request((_request10 = {}, _defineProperty(_request10, targetPageSizeKey, currentPageSize), _defineProperty(_request10, targetPageKey, 1), _request10));
|
1091
|
+
setCurrentPage(currentPage);
|
1092
|
+
_request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
|
1093
|
+
}, [reserveSelectedRecords, targetPageKey, actionRef]);
|
1094
|
+
var onChangePaginationSize = (0, _react.useCallback)(function (currentPageSize) {
|
1095
|
+
var _request10;
|
1096
|
+
// 翻页默认清空选择
|
1097
|
+
if (!reserveSelectedRecords) {
|
1098
|
+
var _actionRef$current9, _actionRef$current9$c;
|
1099
|
+
(_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
1100
|
}
|
1101
|
+
setPageSize(currentPageSize);
|
1102
|
+
setCurrentPage(1);
|
1103
|
+
_request((_request10 = {}, _defineProperty(_request10, targetPageSizeKey, currentPageSize), _defineProperty(_request10, targetPageKey, 1), _request10));
|
1104
|
+
}, [reserveSelectedRecords, actionRef, targetPageSizeKey, targetPageKey]);
|
1105
|
+
var renderFooter = function renderFooter() {
|
1132
1106
|
function renderRowSelection() {
|
1133
1107
|
if (rowSelection) {
|
1134
1108
|
if (showSkeleton) {
|
package/lib/table/index.scss
CHANGED
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
|
/** 是否自动适应该列宽度 */
|
@@ -46,11 +46,12 @@ function genAutoWidthColumns(fileteredColumns, ref, data, size, useRowSelection,
|
|
46
46
|
var childNodes = dom.children;
|
47
47
|
var finalColumns = [];
|
48
48
|
fileteredColumns.forEach(function (column, index) {
|
49
|
+
var _childNodes$index;
|
49
50
|
var render = column.render,
|
50
51
|
_column$valueType = column.valueType,
|
51
52
|
valueType = _column$valueType === void 0 ? 'text' : _column$valueType,
|
52
|
-
_column$
|
53
|
-
|
53
|
+
_column$isAutoWidth = column.isAutoWidth,
|
54
|
+
isAutoWidth = _column$isAutoWidth === void 0 ? true : _column$isAutoWidth,
|
54
55
|
actionSchema = column.actionSchema,
|
55
56
|
sortable = column.sortable,
|
56
57
|
lock = column.lock;
|
@@ -62,6 +63,17 @@ function genAutoWidthColumns(fileteredColumns, ref, data, size, useRowSelection,
|
|
62
63
|
var finalType = type || valueType || '';
|
63
64
|
var shrink = fieldTypeShrink[finalType];
|
64
65
|
column.shrink = column.shrink || (shrink !== undefined ? shrink : 1);
|
66
|
+
if ((column === null || column === void 0 ? void 0 : column.isAutoWidth) === false) {
|
67
|
+
// console.log(column.title, 'isAutoWidth')
|
68
|
+
finalColumns.push(column);
|
69
|
+
return;
|
70
|
+
}
|
71
|
+
;
|
72
|
+
if ((column === null || column === void 0 ? void 0 : column.columnFilters) === false) {
|
73
|
+
finalColumns.push(column);
|
74
|
+
return;
|
75
|
+
}
|
76
|
+
// column.isAutoWidth = true
|
65
77
|
//@ts-ignore
|
66
78
|
// if (!autoWidth) {
|
67
79
|
// finalColumns.push(column);
|
@@ -82,13 +94,20 @@ function genAutoWidthColumns(fileteredColumns, ref, data, size, useRowSelection,
|
|
82
94
|
if (width >= 280) {
|
83
95
|
width = 280;
|
84
96
|
}
|
97
|
+
column.isAutoWidth = false;
|
85
98
|
column.width = defaultPaddingFixer(width, size, false);
|
86
99
|
}
|
87
100
|
finalColumns.push(column);
|
88
101
|
return;
|
89
102
|
}
|
103
|
+
// 当列没出来的时候不比较
|
90
104
|
// @ts-ignore
|
91
|
-
|
105
|
+
if ((column === null || column === void 0 ? void 0 : column.columnFilters) === false) {
|
106
|
+
finalColumns.push(column);
|
107
|
+
return;
|
108
|
+
}
|
109
|
+
// @ts-ignore
|
110
|
+
var titleWidth = (_childNodes$index = childNodes[index]) === null || _childNodes$index === void 0 ? void 0 : _childNodes$index.children[0].scrollWidth;
|
92
111
|
// @ts-ignore
|
93
112
|
if (fixedWidthTypeList[finalType]) {
|
94
113
|
// console.log(
|
@@ -96,20 +115,32 @@ function genAutoWidthColumns(fileteredColumns, ref, data, size, useRowSelection,
|
|
96
115
|
// fixedWidthTypeList[finalType],
|
97
116
|
// );
|
98
117
|
// 固定宽度
|
118
|
+
// console.log(column.title, '固定宽度')
|
119
|
+
column.isAutoWidth = false;
|
99
120
|
column.width = defaultPaddingFixer(
|
100
121
|
// @ts-ignore
|
101
122
|
Math.max(titleWidth, fixedWidthTypeList[finalType]), size, index === 0 && useRowSelection);
|
102
123
|
// @ts-ignore
|
103
124
|
} else if (computeableWidthTypeList[finalType]) {
|
104
125
|
// 可计算宽度
|
126
|
+
// console.log(column.title, '可计算宽度')
|
127
|
+
column.isAutoWidth = false;
|
105
128
|
column.width = defaultPaddingFixer(
|
106
129
|
// @ts-ignore
|
107
130
|
Math.max(titleWidth, computeableWidthTypeList[finalType](data, render)), size, index === 0 && useRowSelection);
|
108
131
|
} else {
|
109
132
|
// 直接根据 dom 计算
|
133
|
+
// console.log(column.title, '可计算 dom')
|
134
|
+
column.isAutoWidth = false;
|
110
135
|
column.width = defaultPaddingFixer(Math.max(titleWidth,
|
111
136
|
// @ts-ignore
|
112
137
|
calcWidthWithParentDOM(childNodes[index], column.shrink)), size, index === 0 && useRowSelection);
|
138
|
+
if ((column === null || column === void 0 ? void 0 : column.sortable) && ((column === null || column === void 0 ? void 0 : column.tooltip) || (column === null || column === void 0 ? void 0 : column.filters))) {
|
139
|
+
// 检测有 sortable 和 tooltip 的时候增加宽度
|
140
|
+
column.width = column.width + 40;
|
141
|
+
} else if (column === null || column === void 0 ? void 0 : column.sortable) {
|
142
|
+
column.width = column.width + 24;
|
143
|
+
}
|
113
144
|
}
|
114
145
|
if (index === 0) {
|
115
146
|
// 首列不会被挤占
|
@@ -146,8 +177,12 @@ var shadowContainer = function shadowContainer(props) {
|
|
146
177
|
//@ts-ignore
|
147
178
|
!fixedWidthTypeList[valueType] && data.map(function (item, index) {
|
148
179
|
// @ts-ignore
|
149
|
-
|
150
|
-
|
180
|
+
var newColumn = _.cloneDeep(column);
|
181
|
+
newColumn.smartWidth = (0, _columnRender.renderCellSmartWidth)(getValueFromRecord(dataIndex, item), column, index, item);
|
182
|
+
newColumn.render = _objectSpread(_objectSpread({}, column.render), {}, {
|
183
|
+
description: ''
|
184
|
+
});
|
185
|
+
return (0, _pureColumnRender.renderCell)(getValueFromRecord(dataIndex, item), newColumn, index, item);
|
151
186
|
}));
|
152
187
|
}
|
153
188
|
}));
|
@@ -315,7 +350,8 @@ function defaultPaddingFixer(width) {
|
|
315
350
|
}
|
316
351
|
function sum() {
|
317
352
|
var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
318
|
-
|
353
|
+
if (list.length === 0) return 0;
|
354
|
+
return list === null || list === void 0 ? void 0 : list.reduce(function (a, b) {
|
319
355
|
return a + b;
|
320
356
|
});
|
321
357
|
}
|
@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _columnRender = require("./columnRender");
|
9
9
|
var _skeleton = require("../../skeleton");
|
10
10
|
var _utils = require("@teamix/utils");
|
11
|
+
var _Cell = _interopRequireDefault(require("../components/Cell"));
|
11
12
|
var _excluded = ["filters", "dataIndex", "children"];
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
14
|
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; }
|
@@ -51,7 +52,24 @@ showSkeleton, actionRef) {
|
|
51
52
|
dataIndex: dataIndex === null || dataIndex === void 0 ? void 0 : dataIndex.toString(),
|
52
53
|
title: (0, _columnRender.renderColumnsTitle)(columnProps, actionRef, bindUrl, bindUrlProps),
|
53
54
|
cell: function cell(value, index, record) {
|
54
|
-
return (
|
55
|
+
return /*#__PURE__*/_react.default.createElement(_Cell.default, {
|
56
|
+
value: value,
|
57
|
+
item: columnProps,
|
58
|
+
index: index,
|
59
|
+
record: record,
|
60
|
+
actionRef: actionRef,
|
61
|
+
context: context,
|
62
|
+
dataTeamixSpm: dataTeamixSpm
|
63
|
+
});
|
64
|
+
// return renderCell(
|
65
|
+
// value,
|
66
|
+
// columnProps,
|
67
|
+
// index,
|
68
|
+
// record,
|
69
|
+
// actionRef,
|
70
|
+
// context,
|
71
|
+
// dataTeamixSpm
|
72
|
+
// )
|
55
73
|
}
|
56
74
|
});
|
57
75
|
});
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { ProTableColumnProps } from '../typing';
|
2
|
+
/**
|
3
|
+
* 处理原生传入的 columns 以便于 选择列 方便处理
|
4
|
+
* @param columns 原生传入的 columns
|
5
|
+
* @returns
|
6
|
+
*/
|
7
|
+
declare const processColumns: (columns: ProTableColumnProps[], initialColumns: ProTableColumnProps[]) => ProTableColumnProps[];
|
8
|
+
export default processColumns;
|
@@ -0,0 +1,46 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
var _utils = require("@teamix/utils");
|
8
|
+
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; }
|
9
|
+
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; }
|
10
|
+
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; }
|
11
|
+
/**
|
12
|
+
* 处理原生传入的 columns 以便于 选择列 方便处理
|
13
|
+
* @param columns 原生传入的 columns
|
14
|
+
* @returns
|
15
|
+
*/
|
16
|
+
var processColumns = function processColumns(columns, initialColumns) {
|
17
|
+
var _getGlobalConfig;
|
18
|
+
var globalFilterColumns = (_getGlobalConfig = (0, _utils.getGlobalConfig)('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.filterColumns;
|
19
|
+
var filterColumns = columns.filter(function (item) {
|
20
|
+
return item.columnFilters !== false && (item === null || item === void 0 ? void 0 : item.hidden) !== true && (!globalFilterColumns || globalFilterColumns(_objectSpread({}, item)));
|
21
|
+
});
|
22
|
+
// 处理只剩一列批量选择的情况下宽度错乱问题
|
23
|
+
if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
|
24
|
+
var _initialColumns$;
|
25
|
+
if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
|
26
|
+
var _filterColumns$, _filterColumns$2;
|
27
|
+
if ((_filterColumns$ = filterColumns[0]) === null || _filterColumns$ === void 0 ? void 0 : _filterColumns$.width) {
|
28
|
+
delete filterColumns[0].width;
|
29
|
+
}
|
30
|
+
if ((_filterColumns$2 = filterColumns[0]) === null || _filterColumns$2 === void 0 ? void 0 : _filterColumns$2.lock) {
|
31
|
+
filterColumns[0].lock = false;
|
32
|
+
}
|
33
|
+
} else if (((_initialColumns$ = initialColumns[0]) === null || _initialColumns$ === void 0 ? void 0 : _initialColumns$.columnFilters) !== false) {
|
34
|
+
var _initialColumns$2, _initialColumns$3;
|
35
|
+
if ((_initialColumns$2 = initialColumns[0]) === null || _initialColumns$2 === void 0 ? void 0 : _initialColumns$2.width) {
|
36
|
+
filterColumns[0].width = initialColumns[0].width;
|
37
|
+
}
|
38
|
+
if ((_initialColumns$3 = initialColumns[0]) === null || _initialColumns$3 === void 0 ? void 0 : _initialColumns$3.lock) {
|
39
|
+
filterColumns[0].lock = initialColumns[0].lock;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
return filterColumns;
|
44
|
+
};
|
45
|
+
var _default = processColumns;
|
46
|
+
exports.default = _default;
|