@teamix/pro 1.6.0-beta.7 → 1.6.1-beta
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 +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 {};
|