@teamix/pro 1.6.0-beta.7 → 1.6.1-beta
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/pro.all.min.css +1 -1
- package/dist/pro.css +1 -1
- package/dist/pro.js +1662 -619
- package/dist/pro.min.css +1 -1
- package/dist/pro.min.js +1 -1
- package/dist/pro.xconsole.min.css +1 -1
- package/es/actions/index.d.ts +6 -6
- package/es/actions/index.js +13 -13
- package/es/form/Components/FormItem2/index.js +5 -5
- package/es/form/Components/__builtins__/hooks/useClickAway.js +1 -1
- package/es/form/Components/__builtins__/icons.js +2 -2
- package/es/form/Components/__builtins__/index.d.ts +5 -5
- package/es/form/Components/__builtins__/index.js +6 -6
- package/es/form/Components/form-layout/index.js +2 -2
- package/es/form/Components/form-layout/useResponsiveFormLayout.js +1 -1
- package/es/form/Filter/AdvancedFilter.js +1 -1
- package/es/form/Filter/index2.js +2 -2
- package/es/form/ProForm/index.d.ts +2 -2
- package/es/form/ProForm/index.js +12 -17
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/info/index.d.ts +6 -2
- package/es/info/index.js +1 -2
- package/es/info/utils/utils.d.ts +1 -1
- package/es/sidebar/utils/index.d.ts +2 -2
- package/es/table/components/Filter/index.js +3 -3
- package/es/table/index.d.ts +3 -4
- package/es/table/index.js +105 -44
- package/es/table/index.scss +26 -0
- package/es/table/typing.d.ts +7 -1
- package/es/table/utils/columnRender.d.ts +1 -0
- package/es/table/utils/columnRender.js +41 -1
- package/es/table/utils/genAutoWidthColumns.d.ts +30 -0
- package/es/table/utils/genAutoWidthColumns.js +327 -0
- package/lib/actions/index.d.ts +6 -6
- package/lib/actions/index.js +11 -11
- package/lib/form/Components/FormItem2/index.js +39 -39
- package/lib/form/Components/__builtins__/icons.js +2 -2
- package/lib/form/Components/__builtins__/index.d.ts +5 -5
- package/lib/form/Components/__builtins__/index.js +27 -27
- package/lib/form/Components/form-layout/index.js +3 -3
- package/lib/form/Components/form-layout/useResponsiveFormLayout.js +1 -1
- package/lib/form/Filter/AdvancedFilter.js +1 -1
- package/lib/form/Filter/index2.js +2 -2
- package/lib/form/ProForm/index.d.ts +2 -2
- package/lib/form/ProForm/index.js +11 -16
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/info/index.d.ts +6 -2
- package/lib/info/index.js +1 -2
- package/lib/info/utils/utils.d.ts +1 -1
- package/lib/sidebar/utils/index.d.ts +2 -2
- package/lib/table/components/Filter/index.js +3 -3
- package/lib/table/index.d.ts +3 -4
- package/lib/table/index.js +104 -43
- package/lib/table/index.scss +26 -0
- package/lib/table/typing.d.ts +7 -1
- package/lib/table/utils/columnRender.d.ts +1 -0
- package/lib/table/utils/columnRender.js +44 -3
- package/lib/table/utils/genAutoWidthColumns.d.ts +30 -0
- package/lib/table/utils/genAutoWidthColumns.js +342 -0
- package/package.json +1 -1
- package/es/form/utils/parseSchema.d.ts +0 -3
- package/es/form/utils/parseSchema.js +0 -38
- package/es/utils/aspect.d.ts +0 -2
- package/es/utils/aspect.js +0 -60
- package/lib/form/utils/parseSchema.d.ts +0 -3
- package/lib/form/utils/parseSchema.js +0 -45
- package/lib/utils/aspect.d.ts +0 -2
- package/lib/utils/aspect.js +0 -67
package/es/table/index.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl", "autoRedirect", "useMaxData"],
|
2
|
-
_excluded2 = ["onChange"];
|
1
|
+
var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "autoWidth", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl", "autoRedirect", "useMaxData"],
|
2
|
+
_excluded2 = ["onChange", "onPageSizeChange"];
|
3
3
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
4
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
5
5
|
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."); }
|
@@ -16,27 +16,27 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
16
16
|
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; }
|
17
17
|
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; }
|
18
18
|
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; }
|
19
|
-
import {
|
20
|
-
import {
|
21
|
-
import { EmptyContent } from '@teamix/pro-field';
|
22
|
-
import { getDeepValue, getGlobalConfig, getMessage, getTargetValue, pickProps, request as utilResquest, usePrefixCls, useRequest } from '@teamix/utils';
|
23
|
-
import classNames from 'classnames';
|
24
|
-
import debounce from 'lodash.debounce';
|
25
|
-
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
26
|
-
import { ProActionGroup } from '../actions';
|
27
|
-
import ProPageContainer from '../page-container';
|
28
|
-
import { ProSkeletonRaw as Skeleton } from '../skeleton';
|
29
|
-
import { ProComponentAspect } from '../utils/aspect';
|
30
|
-
import CardView from './components/CardView';
|
31
|
-
import Layout from './components/Layout';
|
19
|
+
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
20
|
+
import { Table, Checkbox } from '@alicloudfe/components';
|
32
21
|
import Pagination from './components/Pagination';
|
33
|
-
import
|
22
|
+
import genProColumnToColumn from './utils/genProColumnToColumn';
|
23
|
+
import { getGlobalConfig, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, usePrefixCls, getTargetValue } from '@teamix/utils';
|
24
|
+
import { ProSkeletonRaw as Skeleton } from '../skeleton';
|
34
25
|
import './index.scss';
|
26
|
+
import Layout from './components/Layout';
|
35
27
|
import { actionRefUseStateOn, emit, initActionRef, processDefaultFilter, useActionType } from './utils';
|
36
|
-
import genProColumnToColumn from './utils/genProColumnToColumn';
|
37
28
|
import getTableProps from './utils/getTableProps';
|
38
29
|
import getTableSortIcons from './utils/getTableSortIcons';
|
39
30
|
import useTableSelection from './utils/useTableSelection';
|
31
|
+
import FullScreen from './components/ToolBar/Fullscreen';
|
32
|
+
import { EmptyContent } from '@teamix/pro-field';
|
33
|
+
import { ProActionGroup } from '../actions';
|
34
|
+
import classNames from 'classnames';
|
35
|
+
import ProPageContainer from '../page-container';
|
36
|
+
import { genAutoWidthColumns, shadowContainer, shadowActionColumnContainer } from './utils/genAutoWidthColumns';
|
37
|
+
import debounce from 'lodash.debounce';
|
38
|
+
import CardView from './components/CardView';
|
39
|
+
import { useUrlState } from '@teamix/hooks';
|
40
40
|
import { getUrlStateFilter } from './utils/util';
|
41
41
|
export * from './typing';
|
42
42
|
var cls = usePrefixCls('teamix-pro-table');
|
@@ -147,6 +147,8 @@ var ProTable = function ProTable(props) {
|
|
147
147
|
propsSize = _props$size === void 0 ? 'medium' : _props$size,
|
148
148
|
disableSelectAll = props.disableSelectAll,
|
149
149
|
context = props.context,
|
150
|
+
_props$autoWidth = props.autoWidth,
|
151
|
+
autoWidthProp = _props$autoWidth === void 0 ? false : _props$autoWidth,
|
150
152
|
_props$fixedTableBody = props.fixedTableBody,
|
151
153
|
fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
|
152
154
|
isTree = props.isTree,
|
@@ -210,6 +212,19 @@ var ProTable = function ProTable(props) {
|
|
210
212
|
_useState16 = _slicedToArray(_useState15, 2),
|
211
213
|
filteredColumns = _useState16[0],
|
212
214
|
setFilteredColumns = _useState16[1];
|
215
|
+
// 全局状态 : 自适应表格
|
216
|
+
var autoWidth = useMemo(function () {
|
217
|
+
var _getGlobalConfig2;
|
218
|
+
return ((_getGlobalConfig2 = getGlobalConfig('ProTable')) === null || _getGlobalConfig2 === void 0 ? void 0 : _getGlobalConfig2.autoWidth) || autoWidthProp;
|
219
|
+
}, [autoWidthProp]);
|
220
|
+
// 判断是否有操作列,有的话则渲染一个 shadow dom
|
221
|
+
var hasActionColumn = false;
|
222
|
+
if (autoWidth) {
|
223
|
+
hasActionColumn = filteredColumns.some(function (column) {
|
224
|
+
var _column$actionSchema, _column$actionSchema$;
|
225
|
+
return (column === null || column === void 0 ? void 0 : column.actionSchema) && ((_column$actionSchema = column.actionSchema) === null || _column$actionSchema === void 0 ? void 0 : (_column$actionSchema$ = _column$actionSchema.actions) === null || _column$actionSchema$ === void 0 ? void 0 : _column$actionSchema$.length) > 0;
|
226
|
+
});
|
227
|
+
}
|
213
228
|
var _useState17 = useState(propsSize),
|
214
229
|
_useState18 = _slicedToArray(_useState17, 2),
|
215
230
|
size = _useState18[0],
|
@@ -218,6 +233,13 @@ var ProTable = function ProTable(props) {
|
|
218
233
|
_useState20 = _slicedToArray(_useState19, 2),
|
219
234
|
showLoading = _useState20[0],
|
220
235
|
setShowLoading = _useState20[1];
|
236
|
+
// 自动计算列宽需要的一些hook
|
237
|
+
var _useState21 = useState(false),
|
238
|
+
_useState22 = _slicedToArray(_useState21, 2),
|
239
|
+
showShadowContainer = _useState22[0],
|
240
|
+
setShowShadowContainer = _useState22[1];
|
241
|
+
var shadowContainerRef = useRef(null);
|
242
|
+
var shadowActionColumnContainerRef = useRef(null);
|
221
243
|
// 表格内部用作存储的 Ref,标识 Table 组件是否被第一次渲染。用作 useUrlState filter 第一次渲染时使用 state 数据请求
|
222
244
|
var dataRef = useRef({
|
223
245
|
flag: true
|
@@ -238,19 +260,19 @@ var ProTable = function ProTable(props) {
|
|
238
260
|
}, [currentPage, pageSize, urlState]);
|
239
261
|
// 存储能够被 on 监听到的 ProTable 状态
|
240
262
|
// 因为只做存储用。不需要更新视图以及需要同步更改。所以不使用 setState 更新
|
241
|
-
var
|
263
|
+
var _useState23 = useState({
|
242
264
|
fullScreenState: false,
|
243
265
|
filterRules: {},
|
244
266
|
filterColumns: []
|
245
267
|
}),
|
246
|
-
|
247
|
-
actionRefState =
|
268
|
+
_useState24 = _slicedToArray(_useState23, 1),
|
269
|
+
actionRefState = _useState24[0];
|
248
270
|
// 存储 on 监听事件
|
249
|
-
var
|
271
|
+
var _useState25 = useState({
|
250
272
|
fullScreenState: {}
|
251
273
|
}),
|
252
|
-
|
253
|
-
actionRefCallback =
|
274
|
+
_useState26 = _slicedToArray(_useState25, 1),
|
275
|
+
actionRefCallback = _useState26[0];
|
254
276
|
// 存储定时器 id
|
255
277
|
var autoRefreshTimerRef = useRef();
|
256
278
|
var onResize = null;
|
@@ -362,20 +384,20 @@ var ProTable = function ProTable(props) {
|
|
362
384
|
}, 50);
|
363
385
|
};
|
364
386
|
// header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
|
365
|
-
var
|
366
|
-
_useState26 = _slicedToArray(_useState25, 2),
|
367
|
-
headerHeight = _useState26[0],
|
368
|
-
setHeaderHeight = _useState26[1];
|
369
|
-
// 全屏显示 className
|
370
|
-
var _useState27 = useState(false),
|
387
|
+
var _useState27 = useState(0),
|
371
388
|
_useState28 = _slicedToArray(_useState27, 2),
|
372
|
-
|
373
|
-
|
374
|
-
//
|
375
|
-
var _useState29 = useState(
|
389
|
+
headerHeight = _useState28[0],
|
390
|
+
setHeaderHeight = _useState28[1];
|
391
|
+
// 全屏显示 className
|
392
|
+
var _useState29 = useState(false),
|
376
393
|
_useState30 = _slicedToArray(_useState29, 2),
|
377
|
-
|
378
|
-
|
394
|
+
fullscreenState = _useState30[0],
|
395
|
+
setFullscreenState = _useState30[1];
|
396
|
+
// 切换视角
|
397
|
+
var _useState31 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
|
398
|
+
_useState32 = _slicedToArray(_useState31, 2),
|
399
|
+
switchViewState = _useState32[0],
|
400
|
+
setSwitchViewState = _useState32[1];
|
379
401
|
// 切换全屏搜索开关
|
380
402
|
var filterEnableRef = useRef({
|
381
403
|
fullscreen: false,
|
@@ -383,8 +405,8 @@ var ProTable = function ProTable(props) {
|
|
383
405
|
});
|
384
406
|
// 全局状态 : 大数据截断
|
385
407
|
var globalUseMaxData = useMemo(function () {
|
386
|
-
var
|
387
|
-
return (
|
408
|
+
var _getGlobalConfig3;
|
409
|
+
return (_getGlobalConfig3 = getGlobalConfig('ProTable')) === null || _getGlobalConfig3 === void 0 ? void 0 : _getGlobalConfig3.useMaxData;
|
388
410
|
}, []);
|
389
411
|
// 非全屏状态下的
|
390
412
|
var normalDataFilterFormRef = useRef();
|
@@ -395,10 +417,10 @@ var ProTable = function ProTable(props) {
|
|
395
417
|
var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
|
396
418
|
// let dataFilterForm = dataFilterFormRef.current;
|
397
419
|
// 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
|
398
|
-
var
|
399
|
-
|
400
|
-
footerSuctionState =
|
401
|
-
setFooterSuctionState =
|
420
|
+
var _useState33 = useState(false),
|
421
|
+
_useState34 = _slicedToArray(_useState33, 2),
|
422
|
+
footerSuctionState = _useState34[0],
|
423
|
+
setFooterSuctionState = _useState34[1];
|
402
424
|
// TODO 获取内容区是否超出一屏(暂时仅支持全家桶)
|
403
425
|
var getFooterSuctionState = function getFooterSuctionState() {
|
404
426
|
if (!footerSuction) {
|
@@ -549,6 +571,9 @@ var ProTable = function ProTable(props) {
|
|
549
571
|
setFullscreenState(state);
|
550
572
|
getHeaderHeight(state);
|
551
573
|
actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, 'fullScreenState', state);
|
574
|
+
if (autoWidth) {
|
575
|
+
reGenFilteredColumnsByAutoWidth();
|
576
|
+
}
|
552
577
|
return state;
|
553
578
|
},
|
554
579
|
setColumn: function setColumn(newColumns) {
|
@@ -560,10 +585,16 @@ var ProTable = function ProTable(props) {
|
|
560
585
|
if (update) {
|
561
586
|
emit('refreshFilterState', newColumns);
|
562
587
|
}
|
588
|
+
if (autoWidth) {
|
589
|
+
reGenFilteredColumnsByAutoWidth(columns);
|
590
|
+
}
|
563
591
|
},
|
564
592
|
size: size,
|
565
593
|
setSize: function setSize(mode) {
|
566
594
|
_setSize(mode);
|
595
|
+
if (autoWidth) {
|
596
|
+
reGenFilteredColumnsByAutoWidth();
|
597
|
+
}
|
567
598
|
},
|
568
599
|
refresh: function refresh(params) {
|
569
600
|
// card视角的刷新等于重新请求
|
@@ -627,6 +658,9 @@ var ProTable = function ProTable(props) {
|
|
627
658
|
filterEnableRef: filterEnableRef,
|
628
659
|
setData: function setData(data) {
|
629
660
|
_setData(data);
|
661
|
+
if (autoWidth) {
|
662
|
+
reGenFilteredColumnsByAutoWidth();
|
663
|
+
}
|
630
664
|
},
|
631
665
|
resetTableMaxBodyHeight: function resetTableMaxBodyHeight(offset) {
|
632
666
|
getHeaderHeight(fullscreenState, offset);
|
@@ -673,6 +707,21 @@ var ProTable = function ProTable(props) {
|
|
673
707
|
if (propsActionRef) {
|
674
708
|
propsActionRef.current = actionRef.current;
|
675
709
|
}
|
710
|
+
function reGenFilteredColumnsByAutoWidth(columns) {
|
711
|
+
if (!autoWidth) {
|
712
|
+
return;
|
713
|
+
}
|
714
|
+
setShowShadowContainer(true);
|
715
|
+
var authWidthedColumns = genAutoWidthColumns(columns !== null && columns !== void 0 ? columns : filteredColumns, shadowContainerRef, data, size, useRowSelection, shadowActionColumnContainerRef);
|
716
|
+
setFilteredColumns(authWidthedColumns);
|
717
|
+
// 移除 shadow dom
|
718
|
+
// setTimeout(() => {
|
719
|
+
// if (document.querySelector('.teamix-pro-table-shadow-container')) {
|
720
|
+
// document.querySelector('.teamix-pro-table-shadow-container')?.remove();
|
721
|
+
// }
|
722
|
+
// }, 0);
|
723
|
+
}
|
724
|
+
|
676
725
|
function onFormatResult(next) {
|
677
726
|
props.onFormatResult && props.onFormatResult(next);
|
678
727
|
// 如果开启了 autoRedirect 当当前页数不为1,并且data为空的时候,重定向到第一页
|
@@ -712,6 +761,9 @@ var ProTable = function ProTable(props) {
|
|
712
761
|
setTotal(total + (next.total || ((_next$data3 = next.data) === null || _next$data3 === void 0 ? void 0 : _next$data3.length)));
|
713
762
|
}
|
714
763
|
setShowSkeleton(false);
|
764
|
+
if (autoWidth) {
|
765
|
+
reGenFilteredColumnsByAutoWidth();
|
766
|
+
}
|
715
767
|
}
|
716
768
|
// 请求表格数据工具函数
|
717
769
|
var getData = useRequest(function (params) {
|
@@ -858,6 +910,9 @@ var ProTable = function ProTable(props) {
|
|
858
910
|
_setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
|
859
911
|
setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
|
860
912
|
}
|
913
|
+
if (autoWidth) {
|
914
|
+
reGenFilteredColumnsByAutoWidth();
|
915
|
+
}
|
861
916
|
setShowSkeleton(false);
|
862
917
|
setCustomTableLoading(false);
|
863
918
|
}
|
@@ -1086,6 +1141,7 @@ var ProTable = function ProTable(props) {
|
|
1086
1141
|
var _props$paginationProp3;
|
1087
1142
|
var _ref8 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
|
1088
1143
|
onPaginationPropsChange = _ref8.onChange,
|
1144
|
+
onPageSizeChangeProp = _ref8.onPageSizeChange,
|
1089
1145
|
othersPaginationProps = _objectWithoutProperties(_ref8, _excluded2);
|
1090
1146
|
return /*#__PURE__*/React.createElement("div", {
|
1091
1147
|
className: cls('footer', {
|
@@ -1110,7 +1166,8 @@ var ProTable = function ProTable(props) {
|
|
1110
1166
|
pageSizeSelector: total > (props.pageSize || 10) * 2 ? 'dropdown' : false,
|
1111
1167
|
type: total / pageSize <= 2 ? 'simple' : 'normal',
|
1112
1168
|
onPageSizeChange: function onPageSizeChange(number) {
|
1113
|
-
|
1169
|
+
onChangePaginationSize(number);
|
1170
|
+
onPageSizeChangeProp === null || onPageSizeChangeProp === void 0 ? void 0 : onPageSizeChangeProp(number);
|
1114
1171
|
},
|
1115
1172
|
useMaxData: globalUseMaxData !== null && globalUseMaxData !== void 0 ? globalUseMaxData : useMaxData
|
1116
1173
|
}, othersPaginationProps)))));
|
@@ -1148,7 +1205,11 @@ var ProTable = function ProTable(props) {
|
|
1148
1205
|
// 'footer-suction': footerSuctionState && footerSuction,
|
1149
1206
|
}),
|
1150
1207
|
ref: tableRef
|
1151
|
-
},
|
1208
|
+
}, showShadowContainer && shadowContainer({
|
1209
|
+
columns: filteredColumns,
|
1210
|
+
data: data,
|
1211
|
+
shadowContainerRef: shadowContainerRef
|
1212
|
+
}), hasActionColumn && shadowActionColumnContainer(filteredColumns, shadowActionColumnContainerRef), renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
|
1152
1213
|
});
|
1153
1214
|
};
|
1154
|
-
export default
|
1215
|
+
export default ProTable;
|
package/es/table/index.scss
CHANGED
@@ -78,6 +78,32 @@ $fullscreenPadding: 24px;
|
|
78
78
|
transition: all 0.1s;
|
79
79
|
}
|
80
80
|
}
|
81
|
+
&-shadow-container {
|
82
|
+
overflow: hidden;
|
83
|
+
position: absolute;
|
84
|
+
right: 0;
|
85
|
+
left: 0;
|
86
|
+
top: 0;
|
87
|
+
visibility: hidden;
|
88
|
+
pointer-events: none;
|
89
|
+
}
|
90
|
+
&-shadow-container-columns {
|
91
|
+
display: flex;
|
92
|
+
>* {
|
93
|
+
flex-shrink: 0;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
&-action-column-shadow-container {
|
97
|
+
overflow: hidden;
|
98
|
+
position: absolute;
|
99
|
+
right: 0;
|
100
|
+
left: 0;
|
101
|
+
top: 0;
|
102
|
+
visibility: hidden;
|
103
|
+
pointer-events: none;
|
104
|
+
display: flex;
|
105
|
+
}
|
106
|
+
|
81
107
|
// sort icon
|
82
108
|
.next-table-sort.next-table-header-icon {
|
83
109
|
line-height: 16px;
|
package/es/table/typing.d.ts
CHANGED
@@ -13,7 +13,7 @@ import { ProCardProps } from '../card';
|
|
13
13
|
declare type IFieldRenderProps = keyof ProFieldRenderProps;
|
14
14
|
/** 列record函数 */
|
15
15
|
declare type ProTableCellFunProp = (value: any, index: number, record: any, ...others: any) => any;
|
16
|
-
declare type ITableCellRender = {
|
16
|
+
export declare type ITableCellRender = {
|
17
17
|
[key in IFieldRenderProps]?: ProFieldRenderProps[key] | ProTableCellFunProp;
|
18
18
|
} | ((...other: any) => React.ReactNode);
|
19
19
|
declare type TDataService = {
|
@@ -24,6 +24,10 @@ declare type TDataService = {
|
|
24
24
|
};
|
25
25
|
export declare type responsivePaginationType = 'mini' | 'small' | 'simple' | 'normal';
|
26
26
|
export declare type ProTableColumnProps = {
|
27
|
+
/** 自动计算宽度时的被挤占的情况 */
|
28
|
+
shrink?: number;
|
29
|
+
/** 是否自动适应该列宽度 */
|
30
|
+
autoWidth?: boolean;
|
27
31
|
/**
|
28
32
|
* 会在 title 之后展示一个 icon,hover 之后提示一些信息
|
29
33
|
*/
|
@@ -65,6 +69,8 @@ export declare type ProTableColumnProps = {
|
|
65
69
|
} & Omit<ColumnProps, 'filters' | 'dataIndex' | 'filtersMode' | 'children'>;
|
66
70
|
export declare type ProColumnProps = ProTableColumnProps;
|
67
71
|
export declare type ProTableProps = {
|
72
|
+
/** 表格是否自适应宽度 */
|
73
|
+
autoWidth?: boolean;
|
68
74
|
/** ProColums 定义,取代 Table 的 columns */
|
69
75
|
columns: ProTableColumnProps[];
|
70
76
|
/** 请求地址 */
|
@@ -11,3 +11,4 @@ export declare const renderColumnsTitle: (item: ProTableColumnProps, actionRef:
|
|
11
11
|
* 负责单元格的具体渲染
|
12
12
|
*/
|
13
13
|
export declare const renderCell: (value: any, item: ProTableColumnProps, index: number, record: any, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string) => JSX.Element;
|
14
|
+
export declare const renderCellSmartWidth: (value: any, item: ProTableColumnProps, index: number, record: any) => 0 | import("@teamix/pro-field/lib/autoWidth/typing").ProFieldAutoWidthPropsItem;
|
@@ -19,6 +19,7 @@ import { getTargetValue } from '@teamix/utils';
|
|
19
19
|
import { ProActionGroup } from '../../actions';
|
20
20
|
import ProField, { LabelIconTip } from '../../field';
|
21
21
|
import Filter from '../components/Filter';
|
22
|
+
import { getProFieldWidth } from '@teamix/pro-field';
|
22
23
|
/**
|
23
24
|
* 增加了 icon 的功能 render title
|
24
25
|
*/
|
@@ -183,9 +184,48 @@ dataTeamixSpm) {
|
|
183
184
|
value: value,
|
184
185
|
render: newRender,
|
185
186
|
dataSource: newDataSource,
|
186
|
-
format: format
|
187
|
+
format: format,
|
188
|
+
proFieldWidthType: valueType
|
187
189
|
}, props));
|
188
190
|
};
|
191
|
+
export var renderCellSmartWidth = function renderCellSmartWidth(value, item, index, record) {
|
192
|
+
var _item$valueType2 = item.valueType,
|
193
|
+
valueType = _item$valueType2 === void 0 ? 'text' : _item$valueType2,
|
194
|
+
render = item.render;
|
195
|
+
var newRender = null;
|
196
|
+
var newDataSource = null;
|
197
|
+
var props = item.props;
|
198
|
+
// 如果 render 直接传函数
|
199
|
+
if (typeof render === 'function') {
|
200
|
+
newRender = function newRender() {
|
201
|
+
return render === null || render === void 0 ? void 0 : render(value, index, record);
|
202
|
+
};
|
203
|
+
} else {
|
204
|
+
newRender = processBuriedPoint(processRenderFunction(render, value, index, record), record, value, index);
|
205
|
+
if (valueType === 'selectGroup') {
|
206
|
+
newRender = _objectSpread(_objectSpread({
|
207
|
+
maxShowNumber: 'auto',
|
208
|
+
foldText: 'more',
|
209
|
+
editOnClick: function editOnClick() {},
|
210
|
+
edit: true
|
211
|
+
}, newRender), {}, {
|
212
|
+
ellipsis: false
|
213
|
+
});
|
214
|
+
props = _objectSpread({
|
215
|
+
valueAlias: {
|
216
|
+
value: 'TagValue',
|
217
|
+
key: 'TagKey'
|
218
|
+
}
|
219
|
+
}, props);
|
220
|
+
}
|
221
|
+
if ((render === null || render === void 0 ? void 0 : render.type) === 'step') {
|
222
|
+
newRender = _objectSpread(_objectSpread({}, newRender), {}, {
|
223
|
+
ellipsis: false
|
224
|
+
});
|
225
|
+
}
|
226
|
+
}
|
227
|
+
return getProFieldWidth(valueType, newRender);
|
228
|
+
};
|
189
229
|
/**
|
190
230
|
* 处理 render 配置项是函数的情况
|
191
231
|
* @param render ProFieldRender
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { MutableRefObject } from 'react';
|
2
|
+
import { ProTableColumnProps, ITableCellRender } from '../typing';
|
3
|
+
/**
|
4
|
+
* @param fileteredColumns
|
5
|
+
* @param ref
|
6
|
+
* @param data
|
7
|
+
* @returns
|
8
|
+
*/
|
9
|
+
export declare function genAutoWidthColumns(fileteredColumns: ProTableColumnProps[], ref: MutableRefObject<HTMLDivElement | null>, data: any[], size: 'small' | 'medium', useRowSelection?: boolean | undefined, actionColumnRef?: MutableRefObject<HTMLDivElement | null>): ProTableColumnProps[];
|
10
|
+
interface IShadowContainerProps {
|
11
|
+
columns: ProTableColumnProps[];
|
12
|
+
data: any[];
|
13
|
+
shadowContainerRef: MutableRefObject<null>;
|
14
|
+
}
|
15
|
+
export declare const shadowContainer: (props: IShadowContainerProps) => JSX.Element;
|
16
|
+
export declare const shadowActionColumnContainer: (columns: ProTableColumnProps[], shadowActionColumnContainerRef: MutableRefObject<null>) => JSX.Element | undefined;
|
17
|
+
export declare const computeableWidthTypeList: {
|
18
|
+
dateTime: (data: any[], render: ITableCellRender) => any;
|
19
|
+
};
|
20
|
+
export declare const fixedWidthTypeList: {
|
21
|
+
dateWeekRange: number;
|
22
|
+
dateMonthRange: number;
|
23
|
+
dateYearRange: number;
|
24
|
+
dateQuarterRange: number;
|
25
|
+
dateTimeRange: number;
|
26
|
+
time: number;
|
27
|
+
timeRange: number;
|
28
|
+
};
|
29
|
+
export declare const fieldTypeShrink: any;
|
30
|
+
export {};
|