@teamix/pro 1.2.26 → 1.2.30
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/212.js +129 -129
- package/dist/pro.css +1 -1
- package/dist/pro.js +18415 -16897
- package/dist/pro.min.css +1 -1
- package/dist/pro.min.js +1 -1
- package/dist/pro.min.js.LICENSE.txt +2 -0
- package/es/actions/index.d.ts +2 -3
- package/es/actions/index.js +15 -19
- package/es/form/Filter/AdvancedFilter.js +1 -1
- package/es/form/Filter/Layout.d.ts +5 -0
- package/es/form/Filter/Layout.js +82 -0
- package/es/form/Filter/SimpleFilter.js +30 -6
- package/es/form/Filter/index2.d.ts +2 -1
- package/es/form/Filter/index2.js +97 -116
- package/es/form/Filter/index2.scss +16 -45
- package/es/form/Filter/layout.scss +36 -0
- package/es/form/Filter/useSpecialProps.d.ts +6 -0
- package/es/form/Filter/useSpecialProps.js +37 -0
- package/es/form/ProForm/customComponent.d.ts +3 -0
- package/es/form/ProForm/customComponent.js +20 -0
- package/es/form/ProForm/index.scss +5 -6
- package/es/form/ProForm/useFormDisplayValues.js +14 -24
- package/es/form/SchemaForm/adapterType.js +1 -0
- package/es/form/fieldTypeMap.js +2 -1
- package/es/form/index.d.ts +4 -2
- package/es/form/index.js +4 -2
- package/es/form/typing.d.ts +25 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/info/index.scss +1 -1
- package/es/nocode/pages/renderer.js +1 -1
- package/es/table/components/Layout/index.js +74 -163
- package/es/table/components/Layout/index.scss +4 -3
- package/es/table/components/Pagination/index.js +1 -0
- package/es/table/components/ToolBar/FullScreenIcon.js +4 -9
- package/es/table/components/ToolBar/Fullscreen.js +21 -11
- package/es/table/index.js +84 -102
- package/es/table/index.scss +4 -0
- package/es/table/typing.d.ts +12 -10
- package/es/table/utils/columnRender.js +21 -3
- package/lib/actions/index.d.ts +2 -3
- package/lib/actions/index.js +15 -19
- package/lib/form/Filter/AdvancedFilter.js +1 -1
- package/lib/form/Filter/Layout.d.ts +5 -0
- package/lib/form/Filter/Layout.js +102 -0
- package/lib/form/Filter/SimpleFilter.js +29 -4
- package/lib/form/Filter/index2.d.ts +2 -1
- package/lib/form/Filter/index2.js +101 -114
- package/lib/form/Filter/index2.scss +16 -45
- package/lib/form/Filter/layout.scss +36 -0
- package/lib/form/Filter/useSpecialProps.d.ts +6 -0
- package/lib/form/Filter/useSpecialProps.js +46 -0
- package/lib/form/ProForm/customComponent.d.ts +3 -0
- package/lib/form/ProForm/customComponent.js +28 -0
- package/lib/form/ProForm/index.scss +5 -6
- package/lib/form/ProForm/useFormDisplayValues.js +17 -24
- package/lib/form/SchemaForm/adapterType.js +1 -0
- package/lib/form/fieldTypeMap.js +2 -1
- package/lib/form/index.d.ts +4 -2
- package/lib/form/index.js +19 -1
- package/lib/form/typing.d.ts +25 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/info/index.scss +1 -1
- package/lib/nocode/pages/renderer.js +1 -1
- package/lib/table/components/Layout/index.js +72 -163
- package/lib/table/components/Layout/index.scss +4 -3
- package/lib/table/components/Pagination/index.js +1 -0
- package/lib/table/components/ToolBar/FullScreenIcon.js +4 -9
- package/lib/table/components/ToolBar/Fullscreen.js +22 -11
- package/lib/table/index.js +81 -100
- package/lib/table/index.scss +4 -0
- package/lib/table/typing.d.ts +12 -10
- package/lib/table/utils/columnRender.js +21 -3
- package/package.json +4 -4
package/es/table/index.js
CHANGED
@@ -32,11 +32,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
32
32
|
|
33
33
|
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; }
|
34
34
|
|
35
|
-
import React, { useState, useEffect, useRef
|
35
|
+
import React, { useState, useEffect, useRef } from 'react';
|
36
36
|
import { Table, Checkbox } from '@alicloudfe/components';
|
37
37
|
import Pagination from './components/Pagination';
|
38
38
|
import genProColumnToColumn from './utils/genProColumnToColumn';
|
39
|
-
import { baseClass, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps } from '@teamix/utils';
|
39
|
+
import { baseClass, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, getCookie } from '@teamix/utils';
|
40
40
|
import { ProSkeletonRaw as Skeleton } from '../skeleton';
|
41
41
|
import './index.scss';
|
42
42
|
import Layout from './components/Layout';
|
@@ -46,14 +46,15 @@ import getTableSortIcons from './utils/getTableSortIcons';
|
|
46
46
|
import useTableSelection from './utils/useTableSelection';
|
47
47
|
import FullScreen from './components/ToolBar/Fullscreen';
|
48
48
|
import EmptyContent from './components/EmptyContent';
|
49
|
-
import {
|
49
|
+
import { formilyReactive } from '../form';
|
50
50
|
import { ProActionGroup } from '../actions';
|
51
|
-
import debounce from 'lodash.debounce';
|
52
51
|
import classNames from 'classnames';
|
53
52
|
import ProPageContainer from '../page-container';
|
54
53
|
export * from './typing';
|
55
54
|
var cls = baseClass('teamix-pro-table');
|
56
|
-
var toJS = formilyReactive.toJS;
|
55
|
+
var toJS = formilyReactive.toJS; // 判断是否是 root 组织
|
56
|
+
|
57
|
+
var isRoot = getCookie('organizationId') === '1';
|
57
58
|
/**
|
58
59
|
* 处理原生传入的 columns 以便于 选择列 方便处理
|
59
60
|
* @param columns 原生传入的 columns
|
@@ -61,14 +62,24 @@ var toJS = formilyReactive.toJS;
|
|
61
62
|
*/
|
62
63
|
|
63
64
|
var processColumns = function processColumns(columns, initialColumns) {
|
65
|
+
var _filterColumns;
|
66
|
+
|
64
67
|
var filterColumns = columns.filter(function (item) {
|
65
68
|
return item.columnFilters !== false;
|
66
|
-
});
|
69
|
+
});
|
70
|
+
|
71
|
+
if (isRoot) {
|
72
|
+
// root 组织下不显示标签管理
|
73
|
+
filterColumns = filterColumns.filter(function (item) {
|
74
|
+
return item.valueType !== 'selectGroup';
|
75
|
+
});
|
76
|
+
} // 处理只剩一列批量选择的情况下宽度错乱问题
|
67
77
|
|
68
|
-
if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
|
69
|
-
var _initialColumns$;
|
70
78
|
|
71
|
-
|
79
|
+
if ((_filterColumns = filterColumns) === null || _filterColumns === void 0 ? void 0 : _filterColumns.length) {
|
80
|
+
var _filterColumns2, _initialColumns$;
|
81
|
+
|
82
|
+
if (((_filterColumns2 = filterColumns) === null || _filterColumns2 === void 0 ? void 0 : _filterColumns2.length) === 1) {
|
72
83
|
var _filterColumns$, _filterColumns$2;
|
73
84
|
|
74
85
|
if ((_filterColumns$ = filterColumns[0]) === null || _filterColumns$ === void 0 ? void 0 : _filterColumns$.width) {
|
@@ -110,7 +121,7 @@ var globalFormatSort = function globalFormatSort(sort) {
|
|
110
121
|
};
|
111
122
|
|
112
123
|
var ProTable = function ProTable(props) {
|
113
|
-
var _rowSelection$selecte;
|
124
|
+
var _rowSelection$selecte, _dataFilterForm4;
|
114
125
|
|
115
126
|
var header = props.header,
|
116
127
|
className = props.className,
|
@@ -208,10 +219,8 @@ var ProTable = function ProTable(props) {
|
|
208
219
|
var _useState13 = useState(true),
|
209
220
|
_useState14 = _slicedToArray(_useState13, 2),
|
210
221
|
customTableLoading = _useState14[0],
|
211
|
-
setCustomTableLoading = _useState14[1];
|
212
|
-
|
222
|
+
setCustomTableLoading = _useState14[1];
|
213
223
|
|
214
|
-
var searchValueRef = useRef('');
|
215
224
|
var tableRef = useRef(null);
|
216
225
|
var actionRef = useRef(); // 传给 table 的过滤后的 columns
|
217
226
|
|
@@ -261,19 +270,22 @@ var ProTable = function ProTable(props) {
|
|
261
270
|
var _useState23 = useState(false),
|
262
271
|
_useState24 = _slicedToArray(_useState23, 2),
|
263
272
|
fullscreenState = _useState24[0],
|
264
|
-
setFullscreenState = _useState24[1]; //
|
273
|
+
setFullscreenState = _useState24[1]; // 非全屏状态下的
|
274
|
+
|
265
275
|
|
276
|
+
var normalDataFilterFormRef = useRef();
|
277
|
+
var fullscreenDataFilterFormRef = useRef();
|
278
|
+
var normalDataFilterForm = normalDataFilterFormRef.current;
|
279
|
+
var fullscreenDataFilterForm = fullscreenDataFilterFormRef.current; // 传给 QueryFilter 的 formRef
|
280
|
+
|
281
|
+
var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
|
282
|
+
var dataFilterForm = dataFilterFormRef.current; // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
|
266
283
|
|
267
284
|
var _useState25 = useState(false),
|
268
285
|
_useState26 = _slicedToArray(_useState25, 2),
|
269
286
|
footerSuctionState = _useState26[0],
|
270
|
-
setFooterSuctionState = _useState26[1];
|
271
|
-
/** 筛选区域 form */
|
272
|
-
|
287
|
+
setFooterSuctionState = _useState26[1]; // TODO 获取内容区是否超出一屏(暂时仅支持全家桶)
|
273
288
|
|
274
|
-
var dataFilterForm = useMemo(function () {
|
275
|
-
return createForm();
|
276
|
-
}, []); // TODO 获取内容区是否超出一屏(暂时仅支持全家桶)
|
277
289
|
|
278
290
|
var getFooterSuctionState = function getFooterSuctionState() {
|
279
291
|
var containerDom = document.querySelector('.teamix-pro-page-container-scroll-container');
|
@@ -426,26 +438,24 @@ var ProTable = function ProTable(props) {
|
|
426
438
|
return _request(params);
|
427
439
|
},
|
428
440
|
request: function request(params) {
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
}
|
434
|
-
|
435
|
-
if (params === null || params === void 0 ? void 0 : params[targetPageSizeKey]) {
|
436
|
-
setPageSize(params[targetPageSizeKey]);
|
437
|
-
}
|
441
|
+
// 如果请求中还有翻页相关信息,需要自动设置到指定页
|
442
|
+
if (params === null || params === void 0 ? void 0 : params[targetPageKey]) {
|
443
|
+
setCurrentPage(params[targetPageKey]);
|
444
|
+
}
|
438
445
|
|
439
|
-
|
446
|
+
if (params === null || params === void 0 ? void 0 : params[targetPageSizeKey]) {
|
447
|
+
setPageSize(params[targetPageSizeKey]);
|
440
448
|
}
|
449
|
+
|
450
|
+
_request(params);
|
441
451
|
},
|
442
452
|
reset: function reset() {
|
443
|
-
var _actionRef$current3, _actionRef$current3$s;
|
453
|
+
var _actionRef$current3, _actionRef$current3$s, _dataFilterForm;
|
444
454
|
|
445
455
|
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset()); // 清空列过滤参数
|
446
456
|
|
447
457
|
(_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$s = _actionRef$current3.setFilterRules) === null || _actionRef$current3$s === void 0 ? void 0 : _actionRef$current3$s.call(_actionRef$current3, {});
|
448
|
-
dataFilterForm.reset();
|
458
|
+
(_dataFilterForm = dataFilterForm) === null || _dataFilterForm === void 0 ? void 0 : _dataFilterForm.reset();
|
449
459
|
setCurrentPage(1);
|
450
460
|
|
451
461
|
_request(_defineProperty({}, targetPageKey, 1));
|
@@ -468,6 +478,8 @@ var ProTable = function ProTable(props) {
|
|
468
478
|
},
|
469
479
|
data: data,
|
470
480
|
dataFilterForm: dataFilterForm,
|
481
|
+
normalDataFilterForm: normalDataFilterForm,
|
482
|
+
fullscreenDataFilterForm: fullscreenDataFilterForm,
|
471
483
|
resetTableMaxBodyHeight: function resetTableMaxBodyHeight() {
|
472
484
|
getHeaderHeight().then(function (height) {
|
473
485
|
setHeaderHeight(height);
|
@@ -557,7 +569,7 @@ var ProTable = function ProTable(props) {
|
|
557
569
|
}); // 请求函数
|
558
570
|
|
559
571
|
function _request(params, noLoading) {
|
560
|
-
var _actionRef$current$ge, _actionRef$current4, _actionRef$current4$g, _objectSpread2;
|
572
|
+
var _dataFilterForm2, _actionRef$current$ge, _actionRef$current4, _actionRef$current4$g, _objectSpread2;
|
561
573
|
|
562
574
|
// 如果没有传 url 且没有 customRequest,直接返回
|
563
575
|
if (!url && !customRequest) {
|
@@ -570,7 +582,7 @@ var ProTable = function ProTable(props) {
|
|
570
582
|
|
571
583
|
var sortParams = targetFormatSort(sort); // 筛选区请求参数
|
572
584
|
|
573
|
-
var dataFilterParams = toJS(dataFilterForm.values); // 列过滤请求参数
|
585
|
+
var dataFilterParams = toJS((_dataFilterForm2 = dataFilterForm) === null || _dataFilterForm2 === void 0 ? void 0 : _dataFilterForm2.values); // 列过滤请求参数
|
574
586
|
|
575
587
|
var columnsFilterParams = (_actionRef$current$ge = (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$g = _actionRef$current4.getFilterRules) === null || _actionRef$current4$g === void 0 ? void 0 : _actionRef$current4$g.call(_actionRef$current4)) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {}; // 格式化后的请求参数
|
576
588
|
|
@@ -622,7 +634,8 @@ var ProTable = function ProTable(props) {
|
|
622
634
|
|
623
635
|
useEffect(function () {
|
624
636
|
// 初始化 actionRef state、callback 此时 actionRef 已初始化完成
|
625
|
-
initActionRef();
|
637
|
+
initActionRef();
|
638
|
+
dataFilterForm = dataFilterFormRef.current; // 监听 浏览器变化 更吸底状态
|
626
639
|
|
627
640
|
if (footerSuction) {
|
628
641
|
getFooterSuctionState();
|
@@ -632,19 +645,21 @@ var ProTable = function ProTable(props) {
|
|
632
645
|
};
|
633
646
|
}
|
634
647
|
|
635
|
-
if (
|
636
|
-
|
637
|
-
processDefaultFilter(propsColumns, actionRef, defaultFilterParams);
|
648
|
+
if (propsDataFilter) {
|
649
|
+
var _dataFilterForm3;
|
638
650
|
|
639
|
-
|
640
|
-
|
651
|
+
if (requestWhenMount && ((_dataFilterForm3 = dataFilterForm) === null || _dataFilterForm3 === void 0 ? void 0 : _dataFilterForm3.id)) {
|
652
|
+
// 在请求发送之前 处理漏斗默认数据
|
653
|
+
processDefaultFilter(propsColumns, actionRef, defaultFilterParams);
|
641
654
|
|
642
|
-
|
655
|
+
_request();
|
656
|
+
}
|
657
|
+
} else {
|
658
|
+
if (requestWhenMount) {
|
659
|
+
processDefaultFilter(propsColumns, actionRef, defaultFilterParams);
|
643
660
|
|
644
|
-
|
645
|
-
|
646
|
-
var initialValues = toJS(dataFilterForm.initialValues);
|
647
|
-
searchValueRef.current = initialValues[searchName][1];
|
661
|
+
_request();
|
662
|
+
}
|
648
663
|
}
|
649
664
|
|
650
665
|
return function () {
|
@@ -658,7 +673,7 @@ var ProTable = function ProTable(props) {
|
|
658
673
|
|
659
674
|
actionRef.current = undefined;
|
660
675
|
};
|
661
|
-
}, []);
|
676
|
+
}, [(_dataFilterForm4 = dataFilterForm) === null || _dataFilterForm4 === void 0 ? void 0 : _dataFilterForm4.id]);
|
662
677
|
|
663
678
|
function onSort(dataIndex, order) {
|
664
679
|
var nextSort = _defineProperty({}, dataIndex, order);
|
@@ -666,62 +681,27 @@ var ProTable = function ProTable(props) {
|
|
666
681
|
setSort(nextSort);
|
667
682
|
|
668
683
|
_request(targetFormatSort(nextSort));
|
669
|
-
} //
|
670
|
-
|
671
|
-
|
672
|
-
var getSearchName = function getSearchName() {
|
673
|
-
var _dataFilter$schema;
|
674
|
-
|
675
|
-
if ((dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.schema) && ((_dataFilter$schema = dataFilter.schema) === null || _dataFilter$schema === void 0 ? void 0 : _dataFilter$schema.length) > 0) {
|
676
|
-
var searchSchema = dataFilter.schema.find(function (item) {
|
677
|
-
return item.component === 'Search';
|
678
|
-
});
|
679
|
-
|
680
|
-
if (searchSchema) {
|
681
|
-
var searchName = searchSchema.name;
|
682
|
-
return searchName;
|
683
|
-
}
|
684
|
-
}
|
685
|
-
}; // 处理 dataFilter 中的 onFilter、onReset
|
684
|
+
} // 处理 dataFilter 中的 onFilter、onReset
|
686
685
|
|
687
686
|
|
688
687
|
var dataFilter = _objectSpread(_objectSpread({
|
689
688
|
mode: 'inline'
|
690
689
|
}, propsDataFilter), {}, {
|
691
|
-
onFilter:
|
692
|
-
|
693
|
-
|
694
|
-
if (dataFilterForm.validate()) {
|
695
|
-
var _actionRef$current5, _actionRef$current5$c;
|
696
|
-
|
697
|
-
/**
|
698
|
-
* 针对 inline 模式下的 Search 组件做特殊处理
|
699
|
-
* 当切换条件且输入内容为空的时候,类似[a, ''] => [b, ''] 不触发请求
|
700
|
-
*/
|
701
|
-
if (dataFilter.mode === 'inline') {
|
702
|
-
var searchName = getSearchName();
|
703
|
-
|
704
|
-
if (searchName) {
|
705
|
-
var searchValue = values[searchName][1];
|
690
|
+
onFilter: function onFilter(values) {
|
691
|
+
var _actionRef$current5, _actionRef$current5$c;
|
706
692
|
|
707
|
-
|
708
|
-
return;
|
709
|
-
}
|
693
|
+
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values)); // 搜索变化时,暂时先清空选择
|
710
694
|
|
711
|
-
|
712
|
-
|
713
|
-
} // 搜索变化时,暂时先清空选择
|
714
|
-
|
715
|
-
|
716
|
-
(_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$c = _actionRef$current5.clearRowSelection) === null || _actionRef$current5$c === void 0 ? void 0 : _actionRef$current5$c.call(_actionRef$current5);
|
717
|
-
setCurrentPage(1);
|
695
|
+
(_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$c = _actionRef$current5.clearRowSelection) === null || _actionRef$current5$c === void 0 ? void 0 : _actionRef$current5$c.call(_actionRef$current5);
|
696
|
+
setCurrentPage(1);
|
718
697
|
|
719
|
-
|
720
|
-
|
721
|
-
}, filterDebounce),
|
698
|
+
_request(_defineProperty({}, targetPageKey, 1));
|
699
|
+
},
|
722
700
|
onReset: function onReset() {
|
701
|
+
var _dataFilterForm5;
|
702
|
+
|
723
703
|
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
|
724
|
-
dataFilterForm.reset();
|
704
|
+
(_dataFilterForm5 = dataFilterForm) === null || _dataFilterForm5 === void 0 ? void 0 : _dataFilterForm5.reset();
|
725
705
|
setCurrentPage(1);
|
726
706
|
|
727
707
|
_request(_defineProperty({}, targetPageKey, 1));
|
@@ -736,7 +716,7 @@ var ProTable = function ProTable(props) {
|
|
736
716
|
}
|
737
717
|
};
|
738
718
|
|
739
|
-
var renderTable = function renderTable() {
|
719
|
+
var renderTable = function renderTable(isFullScreen) {
|
740
720
|
if (propsColumns) {
|
741
721
|
return /*#__PURE__*/React.createElement("div", {
|
742
722
|
className: classNames('teamix-pro-table-container', className)
|
@@ -748,7 +728,7 @@ var ProTable = function ProTable(props) {
|
|
748
728
|
actionRef: actionRef,
|
749
729
|
columns: propsColumns,
|
750
730
|
dataFilter: dataFilter,
|
751
|
-
|
731
|
+
dataFilterFormRef: isFullScreen ? fullscreenDataFilterFormRef : normalDataFilterFormRef,
|
752
732
|
rowSelection: rowSelection,
|
753
733
|
filterColumnType: filterColumnType
|
754
734
|
}), /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
|
@@ -893,14 +873,16 @@ var ProTable = function ProTable(props) {
|
|
893
873
|
return /*#__PURE__*/React.createElement(FullScreen, {
|
894
874
|
visible: fullscreenState,
|
895
875
|
actionRef: actionRef
|
896
|
-
},
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
|
902
|
-
|
903
|
-
|
876
|
+
}, function (isFullScreen) {
|
877
|
+
return /*#__PURE__*/React.createElement("div", {
|
878
|
+
className: cls({
|
879
|
+
'': true,
|
880
|
+
fullscreen: fullscreenState // 'footer-suction': footerSuctionState && footerSuction,
|
881
|
+
|
882
|
+
}),
|
883
|
+
ref: tableRef
|
884
|
+
}, renderTable(isFullScreen), footerSuctionState && footerSuction && !fullscreenState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && renderFooter(), fullscreenState && renderFooter());
|
885
|
+
});
|
904
886
|
};
|
905
887
|
|
906
888
|
export default ProTable;
|
package/es/table/index.scss
CHANGED
package/es/table/typing.d.ts
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
*/
|
4
4
|
import { ColumnProps, TableProps } from '@alicloudfe/components/types/table';
|
5
5
|
import { ProFieldType, ProFieldRenderProps, ProFieldDataSourceItem } from '../field';
|
6
|
-
import {
|
6
|
+
import { QueryFilterProps } from '../form';
|
7
7
|
import { ProActionGroupProps, ProActionButtonProps } from '../actions';
|
8
8
|
import { PaginationProps } from '@alicloudfe/components/types/pagination';
|
9
9
|
import { HeaderProps as ProTableHeaderProps } from '@teamix/utils';
|
@@ -56,6 +56,8 @@ export declare type ProTableColumnProps = {
|
|
56
56
|
dataIndex?: string | string[];
|
57
57
|
/** 指定 valueType 为日期时间格式时,可以格式化日期时间 */
|
58
58
|
format?: string;
|
59
|
+
/** ProField 其他配置项 */
|
60
|
+
props?: any;
|
59
61
|
} & Omit<ColumnProps, 'filters' | 'dataIndex' | 'filtersMode'>;
|
60
62
|
export declare type ProColumnProps = ProTableColumnProps;
|
61
63
|
export declare type ProTableProps = {
|
@@ -105,7 +107,10 @@ export declare type ProTableProps = {
|
|
105
107
|
footerAction?: ProActionGroupProps | React.ReactNode;
|
106
108
|
/** 表格底部(右层)配置 */
|
107
109
|
footer?: React.ReactNode;
|
108
|
-
/**
|
110
|
+
/**
|
111
|
+
* @deprecated 已废弃 建议用 dataFilter 中的 filterDebounce 代替
|
112
|
+
* 筛选区自动搜索的防抖时间(毫秒)
|
113
|
+
*/
|
109
114
|
filterDebounce?: number;
|
110
115
|
/** ProTable action 的引用,便于手动触发一些方法 */
|
111
116
|
actionRef?: React.MutableRefObject<ProTableActionType | undefined>;
|
@@ -185,6 +190,8 @@ export declare type ProTableActionType = {
|
|
185
190
|
resetPage?: () => void;
|
186
191
|
/** 获取数据过滤区表单实例 */
|
187
192
|
dataFilterForm?: FormType;
|
193
|
+
normalDataFilterForm?: FormType;
|
194
|
+
fullscreenDataFilterForm?: FormType;
|
188
195
|
/** 表格当前的数据 */
|
189
196
|
data?: any[];
|
190
197
|
} & ProTableActionTypeMutations;
|
@@ -219,17 +226,12 @@ export declare type ProTableActionTypeState = {
|
|
219
226
|
[key: string]: any;
|
220
227
|
};
|
221
228
|
export declare type ProTableDataFilterProps = {
|
222
|
-
/** 展示形式 */
|
223
|
-
mode?: 'inline' | 'panel';
|
224
|
-
/** mode='panel' 时是否默认展开 */
|
225
|
-
expand?: boolean;
|
226
|
-
/** 搜索时是否传入值为undefined的参数,默认不传 */
|
227
229
|
searchUndefined?: boolean;
|
228
230
|
/** 搜索时是否传入值为空字符串的参数,默认不传 */
|
229
231
|
searchEmptyString?: boolean;
|
230
232
|
/** 自定义内容 */
|
231
233
|
content?: React.ReactNode;
|
232
|
-
} &
|
234
|
+
} & QueryFilterProps;
|
233
235
|
export declare type dataFilterProps = ProTableDataFilterProps;
|
234
236
|
export declare type ProTableTopAreaProps = {
|
235
237
|
/** 标题区 */
|
@@ -242,8 +244,8 @@ export declare type ProTableTopAreaProps = {
|
|
242
244
|
extra?: ProActionButtonProps | React.ReactNode | React.ReactNode[];
|
243
245
|
/** 数据过滤区 */
|
244
246
|
dataFilter?: ProTableDataFilterProps;
|
245
|
-
/**
|
246
|
-
|
247
|
+
/** 传给 QueryFilter 的 formRef */
|
248
|
+
dataFilterFormRef?: any;
|
247
249
|
/** 排序、筛选列展示状态 */
|
248
250
|
filterColumnType?: 'dialog' | 'dropdown' | 'auto';
|
249
251
|
};
|
@@ -132,7 +132,8 @@ export var renderCell = function renderCell(value, item, index, record, actionRe
|
|
132
132
|
}
|
133
133
|
|
134
134
|
var newRender = null;
|
135
|
-
var newDataSource = null;
|
135
|
+
var newDataSource = null;
|
136
|
+
var props = item.props; // 如果 render 直接传函数
|
136
137
|
|
137
138
|
if (typeof render === 'function') {
|
138
139
|
newRender = function newRender() {
|
@@ -140,6 +141,23 @@ export var renderCell = function renderCell(value, item, index, record, actionRe
|
|
140
141
|
};
|
141
142
|
} else {
|
142
143
|
newRender = processBuriedPoint(processRenderFunction(render, value, index, record), record, value, index);
|
144
|
+
|
145
|
+
if (valueType === 'selectGroup') {
|
146
|
+
newRender = _objectSpread(_objectSpread({
|
147
|
+
maxShowNumber: 1,
|
148
|
+
foldText: 'more',
|
149
|
+
editOnClick: function editOnClick() {},
|
150
|
+
edit: true
|
151
|
+
}, newRender), {}, {
|
152
|
+
ellipsis: false
|
153
|
+
});
|
154
|
+
props = _objectSpread({
|
155
|
+
valueAlias: {
|
156
|
+
value: 'TagValue',
|
157
|
+
key: 'TagKey'
|
158
|
+
}
|
159
|
+
}, props);
|
160
|
+
}
|
143
161
|
} // 渲染操作组
|
144
162
|
|
145
163
|
|
@@ -182,13 +200,13 @@ export var renderCell = function renderCell(value, item, index, record, actionRe
|
|
182
200
|
} // 渲染 ProField
|
183
201
|
|
184
202
|
|
185
|
-
return /*#__PURE__*/React.createElement(ProField, {
|
203
|
+
return /*#__PURE__*/React.createElement(ProField, _objectSpread({
|
186
204
|
type: valueType || 'text',
|
187
205
|
value: value,
|
188
206
|
render: newRender,
|
189
207
|
dataSource: newDataSource,
|
190
208
|
format: format
|
191
|
-
});
|
209
|
+
}, props));
|
192
210
|
};
|
193
211
|
/**
|
194
212
|
* 处理 render 配置项是函数的情况
|
package/lib/actions/index.d.ts
CHANGED
@@ -41,6 +41,7 @@ export interface ProActionCommonProps {
|
|
41
41
|
export interface ProActionMenuButtonProps extends ProActionCommonProps, Omit<MenuButtonProps, 'visible'> {
|
42
42
|
actions: ProActionProps[];
|
43
43
|
icon?: string;
|
44
|
+
noArrow?: boolean;
|
44
45
|
}
|
45
46
|
export declare const ProActionMenuButton: (props: ProActionMenuButtonProps) => JSX.Element;
|
46
47
|
export interface ProActionDividerProps extends ProActionCommonProps {
|
@@ -61,9 +62,7 @@ export declare type ProActionGroupProps = {
|
|
61
62
|
*/
|
62
63
|
moreText?: string;
|
63
64
|
/** 更多按钮的配置,只有在actions数量超过max时才有效 */
|
64
|
-
more?: string |
|
65
|
-
noArrow?: boolean;
|
66
|
-
});
|
65
|
+
more?: string | Omit<ProActionMenuButtonProps, 'actions'>;
|
67
66
|
/** 是否有分割线,只有type="text"时生效,默认有分割线 */
|
68
67
|
divider?: boolean;
|
69
68
|
} & React.HTMLAttributes<HTMLElement>;
|
package/lib/actions/index.js
CHANGED
@@ -56,12 +56,11 @@ require("./index.scss");
|
|
56
56
|
var _excluded = ["type"],
|
57
57
|
_excluded2 = ["config", "icon", "iconSize", "type", "context", "children", "visible", "onClick"],
|
58
58
|
_excluded3 = ["loading"],
|
59
|
-
_excluded4 = ["icon", "iconSize", "label", "actions", "children", "context", "type"],
|
59
|
+
_excluded4 = ["icon", "iconSize", "label", "actions", "children", "context", "type", "className", "noArrow"],
|
60
60
|
_excluded5 = ["context", "text"],
|
61
|
-
_excluded6 = ["
|
62
|
-
_excluded7 = ["key", "
|
63
|
-
_excluded8 = ["
|
64
|
-
_excluded9 = ["type", "divider", "max", "moreText", "more", "context", "actions", "className"];
|
61
|
+
_excluded6 = ["key", "actions"],
|
62
|
+
_excluded7 = ["key", "config"],
|
63
|
+
_excluded8 = ["type", "divider", "max", "moreText", "more", "context", "actions", "className"];
|
65
64
|
|
66
65
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
67
66
|
|
@@ -282,6 +281,8 @@ var ProActionMenuButton = function ProActionMenuButton(props) {
|
|
282
281
|
context = props.context,
|
283
282
|
_props$type2 = props.type,
|
284
283
|
type = _props$type2 === void 0 ? 'primary' : _props$type2,
|
284
|
+
className = props.className,
|
285
|
+
noArrow = props.noArrow,
|
285
286
|
others = _objectWithoutProperties(props, _excluded4);
|
286
287
|
|
287
288
|
return /*#__PURE__*/_react.default.createElement(_components.MenuButton, _objectSpread({
|
@@ -295,7 +296,10 @@ var ProActionMenuButton = function ProActionMenuButton(props) {
|
|
295
296
|
v2: true
|
296
297
|
},
|
297
298
|
type: type,
|
298
|
-
label: buttonContent(label || children, icon, iconSize, context)
|
299
|
+
label: buttonContent(label || children, icon, iconSize, context),
|
300
|
+
className: (0, _classnames.default)(className, {
|
301
|
+
'teamix-pro-actions-text-menu-btn-no-arrow': noArrow
|
302
|
+
})
|
299
303
|
}, others), actions.map(function (action, i) {
|
300
304
|
return renderCommonActionButtonMenuItem(action, action.key || i, context);
|
301
305
|
}));
|
@@ -358,14 +362,12 @@ function renderCommonActionButton(button, context, isTypeText) {
|
|
358
362
|
}
|
359
363
|
|
360
364
|
function getDefaultMoreButton(type, more) {
|
361
|
-
var noArrowClassName = 'teamix-pro-actions-text-menu-btn-no-arrow';
|
362
365
|
var defaultConfig = type === 'button' ? {
|
363
366
|
children: (0, _utils.getMessage)('more')
|
364
367
|
} : {
|
365
368
|
icon: 'more-line',
|
366
|
-
// iconSize: 'small',
|
367
369
|
autoWidth: false,
|
368
|
-
|
370
|
+
noArrow: true
|
369
371
|
};
|
370
372
|
|
371
373
|
if (!more) {
|
@@ -380,13 +382,7 @@ function getDefaultMoreButton(type, more) {
|
|
380
382
|
return Object.assign(defaultConfig, moreConfig);
|
381
383
|
}
|
382
384
|
|
383
|
-
|
384
|
-
className = moreConfig.className,
|
385
|
-
others = _objectWithoutProperties(moreConfig, _excluded6);
|
386
|
-
|
387
|
-
return _objectSpread({
|
388
|
-
className: (0, _classnames.default)(className, _defineProperty({}, "".concat(noArrowClassName), noArrow))
|
389
|
-
}, others);
|
385
|
+
return moreConfig;
|
390
386
|
}
|
391
387
|
|
392
388
|
var MAX_ACTTIONS = 4;
|
@@ -403,7 +399,7 @@ function getActionConfig(action, index, context) {
|
|
403
399
|
if (action.actions) {
|
404
400
|
var _key = action.key,
|
405
401
|
actions = action.actions,
|
406
|
-
_others = _objectWithoutProperties(action,
|
402
|
+
_others = _objectWithoutProperties(action, _excluded6);
|
407
403
|
|
408
404
|
return _objectSpread({
|
409
405
|
key: getKey(index, _key),
|
@@ -415,7 +411,7 @@ function getActionConfig(action, index, context) {
|
|
415
411
|
|
416
412
|
var key = action.key,
|
417
413
|
config = action.config,
|
418
|
-
others = _objectWithoutProperties(action,
|
414
|
+
others = _objectWithoutProperties(action, _excluded7);
|
419
415
|
|
420
416
|
return _objectSpread({
|
421
417
|
key: getKey(index, key),
|
@@ -436,7 +432,7 @@ function ProActionGroup(props) {
|
|
436
432
|
_props$actions = props.actions,
|
437
433
|
actions = _props$actions === void 0 ? [] : _props$actions,
|
438
434
|
className = props.className,
|
439
|
-
containerProps = _objectWithoutProperties(props,
|
435
|
+
containerProps = _objectWithoutProperties(props, _excluded8);
|
440
436
|
|
441
437
|
var isTypeText = type === 'text';
|
442
438
|
var filteredActions = actions.map(function (action, index) {
|
@@ -72,7 +72,7 @@ var AdvancedFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
72
72
|
props: {
|
73
73
|
breakpoints: [480, 720, 990, 1200, Infinity],
|
74
74
|
maxColumns: [1, 2, 3, 3, 4],
|
75
|
-
maxWidth: [480, 360, 330,
|
75
|
+
maxWidth: [480, 360, 330, 400],
|
76
76
|
columnGap: 16,
|
77
77
|
rowGap: 12
|
78
78
|
},
|