@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.
Files changed (70) hide show
  1. package/dist/pro.all.min.css +1 -1
  2. package/dist/pro.css +1 -1
  3. package/dist/pro.js +1662 -619
  4. package/dist/pro.min.css +1 -1
  5. package/dist/pro.min.js +1 -1
  6. package/dist/pro.xconsole.min.css +1 -1
  7. package/es/actions/index.d.ts +6 -6
  8. package/es/actions/index.js +13 -13
  9. package/es/form/Components/FormItem2/index.js +5 -5
  10. package/es/form/Components/__builtins__/hooks/useClickAway.js +1 -1
  11. package/es/form/Components/__builtins__/icons.js +2 -2
  12. package/es/form/Components/__builtins__/index.d.ts +5 -5
  13. package/es/form/Components/__builtins__/index.js +6 -6
  14. package/es/form/Components/form-layout/index.js +2 -2
  15. package/es/form/Components/form-layout/useResponsiveFormLayout.js +1 -1
  16. package/es/form/Filter/AdvancedFilter.js +1 -1
  17. package/es/form/Filter/index2.js +2 -2
  18. package/es/form/ProForm/index.d.ts +2 -2
  19. package/es/form/ProForm/index.js +12 -17
  20. package/es/index.d.ts +1 -1
  21. package/es/index.js +1 -1
  22. package/es/info/index.d.ts +6 -2
  23. package/es/info/index.js +1 -2
  24. package/es/info/utils/utils.d.ts +1 -1
  25. package/es/sidebar/utils/index.d.ts +2 -2
  26. package/es/table/components/Filter/index.js +3 -3
  27. package/es/table/index.d.ts +3 -4
  28. package/es/table/index.js +105 -44
  29. package/es/table/index.scss +26 -0
  30. package/es/table/typing.d.ts +7 -1
  31. package/es/table/utils/columnRender.d.ts +1 -0
  32. package/es/table/utils/columnRender.js +41 -1
  33. package/es/table/utils/genAutoWidthColumns.d.ts +30 -0
  34. package/es/table/utils/genAutoWidthColumns.js +327 -0
  35. package/lib/actions/index.d.ts +6 -6
  36. package/lib/actions/index.js +11 -11
  37. package/lib/form/Components/FormItem2/index.js +39 -39
  38. package/lib/form/Components/__builtins__/icons.js +2 -2
  39. package/lib/form/Components/__builtins__/index.d.ts +5 -5
  40. package/lib/form/Components/__builtins__/index.js +27 -27
  41. package/lib/form/Components/form-layout/index.js +3 -3
  42. package/lib/form/Components/form-layout/useResponsiveFormLayout.js +1 -1
  43. package/lib/form/Filter/AdvancedFilter.js +1 -1
  44. package/lib/form/Filter/index2.js +2 -2
  45. package/lib/form/ProForm/index.d.ts +2 -2
  46. package/lib/form/ProForm/index.js +11 -16
  47. package/lib/index.d.ts +1 -1
  48. package/lib/index.js +1 -1
  49. package/lib/info/index.d.ts +6 -2
  50. package/lib/info/index.js +1 -2
  51. package/lib/info/utils/utils.d.ts +1 -1
  52. package/lib/sidebar/utils/index.d.ts +2 -2
  53. package/lib/table/components/Filter/index.js +3 -3
  54. package/lib/table/index.d.ts +3 -4
  55. package/lib/table/index.js +104 -43
  56. package/lib/table/index.scss +26 -0
  57. package/lib/table/typing.d.ts +7 -1
  58. package/lib/table/utils/columnRender.d.ts +1 -0
  59. package/lib/table/utils/columnRender.js +44 -3
  60. package/lib/table/utils/genAutoWidthColumns.d.ts +30 -0
  61. package/lib/table/utils/genAutoWidthColumns.js +342 -0
  62. package/package.json +1 -1
  63. package/es/form/utils/parseSchema.d.ts +0 -3
  64. package/es/form/utils/parseSchema.js +0 -38
  65. package/es/utils/aspect.d.ts +0 -2
  66. package/es/utils/aspect.js +0 -60
  67. package/lib/form/utils/parseSchema.d.ts +0 -3
  68. package/lib/form/utils/parseSchema.js +0 -45
  69. package/lib/utils/aspect.d.ts +0 -2
  70. 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 { Checkbox, Table } from '@alicloudfe/components';
20
- import { useUrlState } from '@teamix/hooks';
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 FullScreen from './components/ToolBar/Fullscreen';
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 _useState21 = useState({
263
+ var _useState23 = useState({
242
264
  fullScreenState: false,
243
265
  filterRules: {},
244
266
  filterColumns: []
245
267
  }),
246
- _useState22 = _slicedToArray(_useState21, 1),
247
- actionRefState = _useState22[0];
268
+ _useState24 = _slicedToArray(_useState23, 1),
269
+ actionRefState = _useState24[0];
248
270
  // 存储 on 监听事件
249
- var _useState23 = useState({
271
+ var _useState25 = useState({
250
272
  fullScreenState: {}
251
273
  }),
252
- _useState24 = _slicedToArray(_useState23, 1),
253
- actionRefCallback = _useState24[0];
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 _useState25 = useState(0),
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
- fullscreenState = _useState28[0],
373
- setFullscreenState = _useState28[1];
374
- // 切换视角
375
- var _useState29 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
389
+ headerHeight = _useState28[0],
390
+ setHeaderHeight = _useState28[1];
391
+ // 全屏显示 className
392
+ var _useState29 = useState(false),
376
393
  _useState30 = _slicedToArray(_useState29, 2),
377
- switchViewState = _useState30[0],
378
- setSwitchViewState = _useState30[1];
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 _getGlobalConfig2;
387
- return (_getGlobalConfig2 = getGlobalConfig('ProTable')) === null || _getGlobalConfig2 === void 0 ? void 0 : _getGlobalConfig2.useMaxData;
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 _useState31 = useState(false),
399
- _useState32 = _slicedToArray(_useState31, 2),
400
- footerSuctionState = _useState32[0],
401
- setFooterSuctionState = _useState32[1];
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
- return onChangePaginationSize(number);
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
- }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
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 ProComponentAspect(ProTable, 'ProTable');
1215
+ export default ProTable;
@@ -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;
@@ -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 {};