@teamix/pro 1.2.21 → 1.2.26
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.css +1 -1
- package/dist/pro.js +4849 -2339
- package/dist/pro.min.css +1 -1
- package/dist/pro.min.js +1 -1
- package/es/actions/dialog.js +14 -24
- package/es/actions/index.d.ts +22 -8
- package/es/actions/index.js +69 -29
- package/es/actions/index.scss +12 -1
- package/es/form/Components/SelectTable/index.d.ts +24 -0
- package/es/form/Components/SelectTable/index.js +135 -0
- package/es/form/Components/SelectTable/index.scss +28 -0
- package/es/form/Components/SelectTable/table.d.ts +6 -0
- package/es/form/Components/SelectTable/table.js +64 -0
- package/es/form/Filter/AdvancedFilter.js +1 -0
- package/es/form/ProForm/index.scss +37 -6
- package/es/form/SchemaForm/index.js +8 -6
- package/es/form/SchemaForm/initializeDataSource.d.ts +1 -1
- package/es/form/SchemaForm/initializeDataSource.js +2 -2
- package/es/form/SchemaForm/initializeRequest.d.ts +1 -1
- package/es/form/SchemaForm/initializeRequest.js +2 -2
- package/es/form/SchemaForm/initializeRules.d.ts +1 -1
- package/es/form/SchemaForm/initializeRules.js +3 -3
- package/es/form/global.scss +1 -0
- package/es/form/utils.d.ts +2 -2
- package/es/form/utils.js +2 -2
- package/es/index.d.ts +5 -2
- package/es/index.js +6 -3
- package/es/step/ProStepItem/components/HozStepItem/index.d.ts +5 -0
- package/es/step/ProStepItem/components/HozStepItem/index.js +235 -0
- package/es/step/ProStepItem/components/HozStepItem/index.scss +279 -0
- package/es/step/ProStepItem/components/VerStepItem/index.d.ts +5 -0
- package/es/step/ProStepItem/components/VerStepItem/index.js +295 -0
- package/es/step/ProStepItem/components/VerStepItem/index.scss +287 -0
- package/es/step/ProStepItem/index.d.ts +4 -0
- package/es/step/ProStepItem/index.js +57 -0
- package/es/step/index.d.ts +9 -0
- package/es/step/index.js +101 -0
- package/es/step/typing.d.ts +96 -0
- package/es/step/typing.js +1 -0
- package/es/table/components/Filter/index.js +2 -17
- package/es/table/components/Layout/index.js +22 -12
- package/es/table/components/Pagination/index.d.ts +5 -1
- package/es/table/components/Pagination/index.js +179 -17
- package/es/table/components/Pagination/index.scss +55 -0
- package/es/table/components/ToolBar/FilterColumnIcon.js +24 -3
- package/es/table/components/ToolBar/index.scss +9 -4
- package/es/table/index.js +84 -27
- package/es/table/index.scss +5 -5
- package/es/table/typing.d.ts +11 -2
- package/es/table/utils/columnRender.js +2 -1
- package/es/table/utils/index.d.ts +14 -0
- package/es/table/utils/index.js +74 -4
- package/es/utils/index.d.ts +1 -0
- package/es/utils/index.js +1 -0
- package/lib/actions/dialog.js +13 -23
- package/lib/actions/index.d.ts +22 -8
- package/lib/actions/index.js +69 -29
- package/lib/actions/index.scss +12 -1
- package/lib/form/Components/SelectTable/index.d.ts +24 -0
- package/lib/form/Components/SelectTable/index.js +157 -0
- package/lib/form/Components/SelectTable/index.scss +28 -0
- package/lib/form/Components/SelectTable/table.d.ts +6 -0
- package/lib/form/Components/SelectTable/table.js +76 -0
- package/lib/form/Filter/AdvancedFilter.js +1 -0
- package/lib/form/ProForm/index.scss +37 -6
- package/lib/form/SchemaForm/index.js +8 -6
- package/lib/form/SchemaForm/initializeDataSource.d.ts +1 -1
- package/lib/form/SchemaForm/initializeDataSource.js +2 -2
- package/lib/form/SchemaForm/initializeRequest.d.ts +1 -1
- package/lib/form/SchemaForm/initializeRequest.js +2 -2
- package/lib/form/SchemaForm/initializeRules.d.ts +1 -1
- package/lib/form/SchemaForm/initializeRules.js +3 -3
- package/lib/form/global.scss +1 -0
- package/lib/form/utils.d.ts +2 -2
- package/lib/form/utils.js +2 -2
- package/lib/index.d.ts +5 -2
- package/lib/index.js +35 -3
- package/lib/step/ProStepItem/components/HozStepItem/index.d.ts +5 -0
- package/lib/step/ProStepItem/components/HozStepItem/index.js +258 -0
- package/lib/step/ProStepItem/components/HozStepItem/index.scss +279 -0
- package/lib/step/ProStepItem/components/VerStepItem/index.d.ts +5 -0
- package/lib/step/ProStepItem/components/VerStepItem/index.js +315 -0
- package/lib/step/ProStepItem/components/VerStepItem/index.scss +287 -0
- package/lib/step/ProStepItem/index.d.ts +4 -0
- package/lib/step/ProStepItem/index.js +69 -0
- package/lib/step/index.d.ts +9 -0
- package/lib/step/index.js +124 -0
- package/lib/step/typing.d.ts +96 -0
- package/lib/step/typing.js +5 -0
- package/lib/table/components/Filter/index.js +2 -17
- package/lib/table/components/Layout/index.js +21 -11
- package/lib/table/components/Pagination/index.d.ts +5 -1
- package/lib/table/components/Pagination/index.js +186 -17
- package/lib/table/components/Pagination/index.scss +55 -0
- package/lib/table/components/ToolBar/FilterColumnIcon.js +23 -2
- package/lib/table/components/ToolBar/index.scss +9 -4
- package/lib/table/index.js +84 -25
- package/lib/table/index.scss +5 -5
- package/lib/table/typing.d.ts +11 -2
- package/lib/table/utils/columnRender.js +2 -1
- package/lib/table/utils/index.d.ts +14 -0
- package/lib/table/utils/index.js +84 -4
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.js +13 -0
- package/package.json +1 -1
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["className", "onChange", "total", "totalRender", "pageSize", "current", "pageSizeList", "pageSizeSelector", "
|
1
|
+
var _excluded = ["className", "onChange", "total", "totalRender", "pageSize", "current", "pageSizeList", "pageSizeSelector", "onPageSizeChange", "responsivePaginationType"];
|
2
2
|
|
3
3
|
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; }
|
4
4
|
|
@@ -6,65 +6,227 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
6
6
|
|
7
7
|
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; }
|
8
8
|
|
9
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
10
|
+
|
11
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
12
|
+
|
13
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
14
|
+
|
15
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
16
|
+
|
17
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
18
|
+
|
19
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
20
|
+
|
9
21
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
10
22
|
|
11
23
|
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; }
|
12
24
|
|
13
25
|
// 自适应宽度的翻页器
|
14
|
-
import React from 'react';
|
15
|
-
import { Pagination } from '@alicloudfe/components';
|
26
|
+
import React, { useState } from 'react';
|
27
|
+
import { Pagination, Balloon, Select, Button, Input, Icon } from '@alicloudfe/components';
|
28
|
+
import { getMessage, baseClass } from '@teamix/utils';
|
16
29
|
import { useResponsiveProps } from '@teamix/hooks';
|
30
|
+
import './index.scss';
|
31
|
+
var cls = baseClass('teamix-pro-pagination');
|
17
32
|
export default (function (props) {
|
18
33
|
var className = props.className,
|
19
|
-
|
34
|
+
propsOnChange = props.onChange,
|
20
35
|
total = props.total,
|
21
36
|
totalRender = props.totalRender,
|
22
37
|
pageSize = props.pageSize,
|
23
38
|
current = props.current,
|
24
39
|
pageSizeList = props.pageSizeList,
|
25
40
|
pageSizeSelector = props.pageSizeSelector,
|
26
|
-
type = props.type,
|
27
41
|
onPageSizeChange = props.onPageSizeChange,
|
42
|
+
responsivePaginationType = props.responsivePaginationType,
|
28
43
|
otherProps = _objectWithoutProperties(props, _excluded);
|
29
44
|
|
30
|
-
var _useResponsiveProps = useResponsiveProps([480,
|
45
|
+
var _useResponsiveProps = useResponsiveProps([480, 590, 700], ['mini', 'small', 'simple', 'normal']),
|
31
46
|
responsiveProps = _useResponsiveProps.responsiveProps,
|
32
47
|
paginationWrapperRef = _useResponsiveProps.ref;
|
33
48
|
|
49
|
+
var _useState = useState(false),
|
50
|
+
_useState2 = _slicedToArray(_useState, 2),
|
51
|
+
visible = _useState2[0],
|
52
|
+
setVisible = _useState2[1];
|
53
|
+
|
54
|
+
var _useState3 = useState(current),
|
55
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
56
|
+
currentPage = _useState4[0],
|
57
|
+
setCurrentPage = _useState4[1];
|
58
|
+
|
34
59
|
var commonPaginationProps = {
|
35
60
|
className: className,
|
36
|
-
onChange:
|
61
|
+
onChange: propsOnChange,
|
37
62
|
total: total,
|
38
63
|
pageSize: pageSize,
|
39
|
-
current: current,
|
40
64
|
shape: 'arrow-only',
|
41
65
|
pageSizeList: pageSizeList,
|
42
66
|
pageSizeSelector: pageSizeSelector,
|
43
67
|
pageSizePosition: 'end',
|
44
68
|
onPageSizeChange: onPageSizeChange
|
69
|
+
}; // 自定义总数,用于 small、mini
|
70
|
+
|
71
|
+
var customTotalRender = function customTotalRender(total) {
|
72
|
+
return /*#__PURE__*/React.createElement(Balloon, {
|
73
|
+
visible: visible,
|
74
|
+
closable: false,
|
75
|
+
onVisibleChange: function onVisibleChange(visible) {
|
76
|
+
return setVisible(visible);
|
77
|
+
},
|
78
|
+
align: "t",
|
79
|
+
// triggerType="click"
|
80
|
+
trigger: /*#__PURE__*/React.createElement(Button, {
|
81
|
+
text: true,
|
82
|
+
onMouseEnter: function onMouseEnter() {
|
83
|
+
return setVisible(true);
|
84
|
+
}
|
85
|
+
}, getMessage('total', {
|
86
|
+
total: total
|
87
|
+
}))
|
88
|
+
}, /*#__PURE__*/React.createElement("div", {
|
89
|
+
className: cls('custom-total-content')
|
90
|
+
}, /*#__PURE__*/React.createElement("div", {
|
91
|
+
className: "title"
|
92
|
+
}, getMessage('pageSize')), /*#__PURE__*/React.createElement(Select, {
|
93
|
+
className: cls('custom-page-size-selector'),
|
94
|
+
dataSource: pageSizeList,
|
95
|
+
defaultValue: pageSize,
|
96
|
+
followTrigger: true,
|
97
|
+
menuProps: {
|
98
|
+
hasSelectedIcon: false
|
99
|
+
},
|
100
|
+
onChange: function onChange(value) {
|
101
|
+
setVisible(false);
|
102
|
+
setCurrentPage(1);
|
103
|
+
onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(value);
|
104
|
+
}
|
105
|
+
})));
|
106
|
+
}; // 获取页总数
|
107
|
+
|
108
|
+
|
109
|
+
function getTotalPage(total, currentPageSize) {
|
110
|
+
var totalPage = Math.ceil(total / currentPageSize);
|
111
|
+
return totalPage <= 0 ? 1 : totalPage;
|
112
|
+
} // 自定义翻页,用于 mini
|
113
|
+
|
114
|
+
|
115
|
+
var customJumpRender = function customJumpRender() {
|
116
|
+
var handleInputChange = function handleInputChange(value, e) {
|
117
|
+
setCurrentPage(value);
|
118
|
+
}; // 回车触发跳转
|
119
|
+
|
120
|
+
|
121
|
+
var handleJump = function handleJump(e) {
|
122
|
+
var totalPage = getTotalPage(total, pageSize);
|
123
|
+
var value = Number(currentPage);
|
124
|
+
|
125
|
+
if (isNaN(value)) {
|
126
|
+
value = '';
|
127
|
+
} else if (value < 1) {
|
128
|
+
value = 1;
|
129
|
+
} else if (value > totalPage) {
|
130
|
+
value = totalPage;
|
131
|
+
}
|
132
|
+
|
133
|
+
if (value && value !== current) {
|
134
|
+
setCurrentPage(value);
|
135
|
+
propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(value, e);
|
136
|
+
}
|
137
|
+
};
|
138
|
+
|
139
|
+
var handlePrevClick = function handlePrevClick(e) {
|
140
|
+
setCurrentPage(currentPage - 1);
|
141
|
+
propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(currentPage - 1, e);
|
142
|
+
};
|
143
|
+
|
144
|
+
var handleNextClick = function handleNextClick(e) {
|
145
|
+
setCurrentPage(currentPage + 1);
|
146
|
+
propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(currentPage + 1, e);
|
147
|
+
};
|
148
|
+
|
149
|
+
return /*#__PURE__*/React.createElement("div", {
|
150
|
+
className: cls('custom-jumper')
|
151
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
152
|
+
className: "next-prev next-pagination-item",
|
153
|
+
onClick: handlePrevClick,
|
154
|
+
disabled: Number(currentPage) <= 1
|
155
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
156
|
+
size: "small",
|
157
|
+
type: "arrow-left"
|
158
|
+
})), /*#__PURE__*/React.createElement(Input, {
|
159
|
+
className: "jump-input",
|
160
|
+
value: currentPage,
|
161
|
+
onChange: handleInputChange,
|
162
|
+
onKeyDown: function onKeyDown(e) {
|
163
|
+
if (e.keyCode === 13) {
|
164
|
+
handleJump(e);
|
165
|
+
}
|
166
|
+
}
|
167
|
+
}), /*#__PURE__*/React.createElement("div", {
|
168
|
+
className: "total"
|
169
|
+
}, /*#__PURE__*/React.createElement("span", {
|
170
|
+
style: {
|
171
|
+
marginRight: 4
|
172
|
+
}
|
173
|
+
}, "/"), getTotalPage(total, pageSize)), /*#__PURE__*/React.createElement(Button, {
|
174
|
+
className: "next-next next-pagination-item",
|
175
|
+
onClick: handleNextClick,
|
176
|
+
//@ts-ignore
|
177
|
+
disabled: total && Number(currentPage) >= getTotalPage(total, pageSize)
|
178
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
179
|
+
size: "small",
|
180
|
+
type: "arrow-right"
|
181
|
+
})));
|
182
|
+
};
|
183
|
+
|
184
|
+
var renderMiniPagination = function renderMiniPagination() {
|
185
|
+
if (total && pageSize) {
|
186
|
+
if (total / pageSize <= 2) {
|
187
|
+
return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
|
188
|
+
type: "simple"
|
189
|
+
}, otherProps));
|
190
|
+
} else {
|
191
|
+
return /*#__PURE__*/React.createElement("div", {
|
192
|
+
className: "".concat(cls('custom-mini-pagination'), " next-pagination")
|
193
|
+
}, customTotalRender(total), customJumpRender());
|
194
|
+
}
|
195
|
+
}
|
45
196
|
};
|
46
197
|
|
47
198
|
var renderPagination = function renderPagination() {
|
48
|
-
switch (responsiveProps) {
|
199
|
+
switch (responsivePaginationType || responsiveProps) {
|
49
200
|
case 'normal':
|
50
|
-
return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps),
|
201
|
+
return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
|
202
|
+
totalRender: function totalRender(total) {
|
203
|
+
return getMessage('total', {
|
204
|
+
total: total
|
205
|
+
});
|
206
|
+
}
|
207
|
+
}, otherProps));
|
51
208
|
|
52
209
|
case 'simple':
|
53
210
|
return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
|
54
|
-
pageShowCount: 3
|
211
|
+
pageShowCount: 3,
|
212
|
+
totalRender: function totalRender(total) {
|
213
|
+
return getMessage('total', {
|
214
|
+
total: total
|
215
|
+
});
|
216
|
+
}
|
55
217
|
}, otherProps));
|
56
218
|
|
57
219
|
case 'small':
|
58
220
|
return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
|
221
|
+
pageShowCount: 3,
|
59
222
|
pageSizeSelector: false,
|
60
|
-
|
223
|
+
totalRender: function totalRender(total) {
|
224
|
+
return customTotalRender(total);
|
225
|
+
}
|
61
226
|
}, otherProps));
|
62
227
|
|
63
228
|
case 'mini':
|
64
|
-
return
|
65
|
-
pageSizeSelector: false,
|
66
|
-
type: "mini"
|
67
|
-
}, otherProps));
|
229
|
+
return renderMiniPagination();
|
68
230
|
|
69
231
|
default:
|
70
232
|
return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), otherProps));
|
@@ -76,7 +238,7 @@ export default (function (props) {
|
|
76
238
|
// 用于获取翻页器响应式 ref
|
77
239
|
React.createElement("div", {
|
78
240
|
ref: paginationWrapperRef,
|
79
|
-
className:
|
241
|
+
className: cls('wrapper')
|
80
242
|
}, renderPagination())
|
81
243
|
);
|
82
244
|
});
|
@@ -0,0 +1,55 @@
|
|
1
|
+
$prefix: 'teamix-pro-pagination';
|
2
|
+
|
3
|
+
.#{$prefix} {
|
4
|
+
&-wrapper {
|
5
|
+
display: flex;
|
6
|
+
justify-content: flex-end;
|
7
|
+
width: 100%;
|
8
|
+
}
|
9
|
+
&-custom-total {
|
10
|
+
&-content {
|
11
|
+
display: flex;
|
12
|
+
align-items: center;
|
13
|
+
.next-menu {
|
14
|
+
min-width: 56px !important;
|
15
|
+
.next-menu-item.next-select-menu-item {
|
16
|
+
padding: 0 8px !important;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
&-custom-mini-pagination {
|
22
|
+
display: flex;
|
23
|
+
align-items: center;
|
24
|
+
}
|
25
|
+
&-custom-jumper {
|
26
|
+
display: flex;
|
27
|
+
align-items: center;
|
28
|
+
.jump-input {
|
29
|
+
width: 36px;
|
30
|
+
input {
|
31
|
+
padding: 0 3px;
|
32
|
+
text-align: center;
|
33
|
+
line-height: 30px;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
.total {
|
37
|
+
margin-left: 8px;
|
38
|
+
margin-right: 4px;
|
39
|
+
color: var(--color-text1-2);
|
40
|
+
}
|
41
|
+
.next-prev {
|
42
|
+
margin-left: 8px;
|
43
|
+
margin-right: 4px;
|
44
|
+
}
|
45
|
+
.next-pagination-item:disabled i {
|
46
|
+
color: var(--btn-pure-normal-color-disabled, #CCCCCC) !important;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
&-custom-page-size-selector.next-select-trigger {
|
50
|
+
min-width: 56px;
|
51
|
+
.next-select-inner {
|
52
|
+
min-width: 56px;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
}
|
@@ -31,7 +31,7 @@ import { Button, Dropdown, Menu, Dialog, Grid, Checkbox } from '@alicloudfe/comp
|
|
31
31
|
import TeamixIcon from '@teamix/icon';
|
32
32
|
import { baseClass, getMessage } from '@teamix/utils';
|
33
33
|
import React, { useState, useEffect } from 'react';
|
34
|
-
import { cloneDeep } from '../../utils';
|
34
|
+
import { cloneDeep, off, on } from '../../utils';
|
35
35
|
import './index.scss';
|
36
36
|
import { Ellipsis } from '@teamix/utils';
|
37
37
|
var CheckboxItem = Menu.CheckboxItem;
|
@@ -85,6 +85,26 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
|
|
85
85
|
dropdownVisible = _useState10[0],
|
86
86
|
setDropdownVisible = _useState10[1];
|
87
87
|
|
88
|
+
useEffect(function () {
|
89
|
+
on === null || on === void 0 ? void 0 : on(function (stateFilterColumns) {
|
90
|
+
if (stateFilterColumns && stateFilterColumns.length > 0) {
|
91
|
+
var showDataIndex = stateFilterColumns.map(function (item) {
|
92
|
+
return item.dataIndex;
|
93
|
+
});
|
94
|
+
var stateColumns = cloneDeep(processColumns(columns)).map(function (item) {
|
95
|
+
if (!showDataIndex.includes(item.dataIndex)) {
|
96
|
+
item.columnFilters = false;
|
97
|
+
}
|
98
|
+
|
99
|
+
return item;
|
100
|
+
});
|
101
|
+
setNewColumns(stateColumns);
|
102
|
+
}
|
103
|
+
}, 'refreshFilterState');
|
104
|
+
return function () {
|
105
|
+
off('refreshFilterState');
|
106
|
+
};
|
107
|
+
});
|
88
108
|
useEffect(function () {
|
89
109
|
setNewColumns(processColumns(columns));
|
90
110
|
}, [columns]); // 全选
|
@@ -196,7 +216,7 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
|
|
196
216
|
|
197
217
|
calculateSelectAllState(columns);
|
198
218
|
setNewColumns(columns);
|
199
|
-
(_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setColumn) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, columns);
|
219
|
+
(_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setColumn) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, columns, false);
|
200
220
|
}; // 计算全选状态
|
201
221
|
|
202
222
|
|
@@ -317,7 +337,8 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
|
|
317
337
|
onOk: onChangeColumnsForDialog,
|
318
338
|
onCancel: dialogOnClose,
|
319
339
|
onClose: dialogOnClose,
|
320
|
-
width: 480
|
340
|
+
width: 480,
|
341
|
+
className: cls('dialog')
|
321
342
|
}, /*#__PURE__*/React.createElement(Row, {
|
322
343
|
gutter: 20,
|
323
344
|
wrap: true,
|
@@ -20,6 +20,12 @@
|
|
20
20
|
min-width: 180px;
|
21
21
|
box-shadow: var(--popup-local-shadow, 0px 6px 24px 0px rgba(0, 0, 0, 0.1));
|
22
22
|
background: var(--menu-background);
|
23
|
+
|
24
|
+
&-dialog {
|
25
|
+
.next-checkbox-label {
|
26
|
+
line-height: var(--checkbox-size,16px);
|
27
|
+
}
|
28
|
+
}
|
23
29
|
&-reset {
|
24
30
|
position: absolute;
|
25
31
|
right: 16px;
|
@@ -38,7 +44,6 @@
|
|
38
44
|
visibility: visible;
|
39
45
|
cursor: pointer;
|
40
46
|
}
|
41
|
-
|
42
47
|
}
|
43
48
|
}
|
44
49
|
.next-menu-item-text {
|
@@ -94,7 +99,7 @@
|
|
94
99
|
background-color: var(--balloon-tooltip-color-bg, #292929);
|
95
100
|
border-color: var(--balloon-tooltip-color-border, transparent);
|
96
101
|
box-shadow: var(--balloon-tooltip-shadow, none);
|
97
|
-
color: var(--balloon-tooltip-color, #
|
102
|
+
color: var(--balloon-tooltip-color, #ffffff);
|
98
103
|
display: flex;
|
99
104
|
align-items: center;
|
100
105
|
height: 36px;
|
@@ -105,7 +110,7 @@
|
|
105
110
|
display: none;
|
106
111
|
}
|
107
112
|
.next-message-content {
|
108
|
-
color: var(--balloon-tooltip-color, #
|
113
|
+
color: var(--balloon-tooltip-color, #ffffff);
|
109
114
|
padding: 0;
|
110
115
|
}
|
111
116
|
.teamix-pro-table-full-screen-message-esc {
|
@@ -114,7 +119,7 @@
|
|
114
119
|
padding: 0 2px;
|
115
120
|
position: relative;
|
116
121
|
// box-shadow: inset 0 0 1px 1px var(--color-fill1-1);
|
117
|
-
border: 1px solid var(--balloon-tooltip-color, #
|
122
|
+
border: 1px solid var(--balloon-tooltip-color, #ffffff);
|
118
123
|
display: inline-block;
|
119
124
|
line-height: 1;
|
120
125
|
&-title {
|
package/es/table/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "customRequest", "filterColumnType"];
|
1
|
+
var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "customRequest", "filterColumnType", "defaultFilterParams"];
|
2
2
|
|
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
|
|
@@ -33,14 +33,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
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
35
|
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
36
|
-
import { Table, Checkbox
|
37
|
-
|
36
|
+
import { Table, Checkbox } from '@alicloudfe/components';
|
37
|
+
import Pagination from './components/Pagination';
|
38
38
|
import genProColumnToColumn from './utils/genProColumnToColumn';
|
39
39
|
import { baseClass, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps } from '@teamix/utils';
|
40
40
|
import { ProSkeletonRaw as Skeleton } from '../skeleton';
|
41
41
|
import './index.scss';
|
42
42
|
import Layout from './components/Layout';
|
43
|
-
import { useActionType } from './utils';
|
43
|
+
import { emit, initActionRef, processDefaultFilter, useActionType } from './utils';
|
44
44
|
import getTableProps from './utils/getTableProps';
|
45
45
|
import getTableSortIcons from './utils/getTableSortIcons';
|
46
46
|
import useTableSelection from './utils/useTableSelection';
|
@@ -66,6 +66,8 @@ var processColumns = function processColumns(columns, initialColumns) {
|
|
66
66
|
}); // 处理只剩一列批量选择的情况下宽度错乱问题
|
67
67
|
|
68
68
|
if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
|
69
|
+
var _initialColumns$;
|
70
|
+
|
69
71
|
if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
|
70
72
|
var _filterColumns$, _filterColumns$2;
|
71
73
|
|
@@ -76,14 +78,14 @@ var processColumns = function processColumns(columns, initialColumns) {
|
|
76
78
|
if ((_filterColumns$2 = filterColumns[0]) === null || _filterColumns$2 === void 0 ? void 0 : _filterColumns$2.lock) {
|
77
79
|
filterColumns[0].lock = false;
|
78
80
|
}
|
79
|
-
} else {
|
80
|
-
var _initialColumns
|
81
|
+
} else if (((_initialColumns$ = initialColumns[0]) === null || _initialColumns$ === void 0 ? void 0 : _initialColumns$.columnFilters) !== false) {
|
82
|
+
var _initialColumns$2, _initialColumns$3;
|
81
83
|
|
82
|
-
if ((_initialColumns$ = initialColumns[0]) === null || _initialColumns$ === void 0 ? void 0 : _initialColumns
|
84
|
+
if ((_initialColumns$2 = initialColumns[0]) === null || _initialColumns$2 === void 0 ? void 0 : _initialColumns$2.width) {
|
83
85
|
filterColumns[0].width = initialColumns[0].width;
|
84
86
|
}
|
85
87
|
|
86
|
-
if ((_initialColumns$
|
88
|
+
if ((_initialColumns$3 = initialColumns[0]) === null || _initialColumns$3 === void 0 ? void 0 : _initialColumns$3.lock) {
|
87
89
|
filterColumns[0].lock = initialColumns[0].lock;
|
88
90
|
}
|
89
91
|
}
|
@@ -144,6 +146,7 @@ var ProTable = function ProTable(props) {
|
|
144
146
|
showPagination = _props$showPagination === void 0 ? true : _props$showPagination,
|
145
147
|
_props$pageSizeList = props.pageSizeList,
|
146
148
|
pageSizeList = _props$pageSizeList === void 0 ? [5, 10, 20, 50, 100] : _props$pageSizeList,
|
149
|
+
responsivePaginationType = props.responsivePaginationType,
|
147
150
|
_props$showSkeleton = props.showSkeleton,
|
148
151
|
propsShowSkeleton = _props$showSkeleton === void 0 ? true : _props$showSkeleton,
|
149
152
|
_props$skeletonSize = props.skeletonSize,
|
@@ -161,6 +164,7 @@ var ProTable = function ProTable(props) {
|
|
161
164
|
customRequest = props.customRequest,
|
162
165
|
_props$filterColumnTy = props.filterColumnType,
|
163
166
|
filterColumnType = _props$filterColumnTy === void 0 ? 'auto' : _props$filterColumnTy,
|
167
|
+
defaultFilterParams = props.defaultFilterParams,
|
164
168
|
otherProps = _objectWithoutProperties(props, _excluded);
|
165
169
|
|
166
170
|
var targetPageKey = pageKey || globalPageKey;
|
@@ -204,8 +208,10 @@ var ProTable = function ProTable(props) {
|
|
204
208
|
var _useState13 = useState(true),
|
205
209
|
_useState14 = _slicedToArray(_useState13, 2),
|
206
210
|
customTableLoading = _useState14[0],
|
207
|
-
setCustomTableLoading = _useState14[1];
|
211
|
+
setCustomTableLoading = _useState14[1]; // 用于存放 Search 组件之前值的 ref
|
212
|
+
|
208
213
|
|
214
|
+
var searchValueRef = useRef('');
|
209
215
|
var tableRef = useRef(null);
|
210
216
|
var actionRef = useRef(); // 传给 table 的过滤后的 columns
|
211
217
|
|
@@ -404,9 +410,14 @@ var ProTable = function ProTable(props) {
|
|
404
410
|
setColumn: function setColumn(newColumns) {
|
405
411
|
var _actionRef$current2, _actionRef$current2$s;
|
406
412
|
|
413
|
+
var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
407
414
|
var columns = processColumns(newColumns, propsColumns);
|
408
415
|
setFilteredColumns(columns);
|
409
416
|
(_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, 'filterColumns', columns);
|
417
|
+
|
418
|
+
if (update) {
|
419
|
+
emit('refreshFilterState', newColumns);
|
420
|
+
}
|
410
421
|
},
|
411
422
|
setSize: function setSize(mode) {
|
412
423
|
_setSize(mode);
|
@@ -610,10 +621,8 @@ var ProTable = function ProTable(props) {
|
|
610
621
|
}
|
611
622
|
|
612
623
|
useEffect(function () {
|
613
|
-
|
614
|
-
|
615
|
-
// 初始化 state 状态
|
616
|
-
actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$i = _actionRef$current5.initState) === null || _actionRef$current5$i === void 0 ? void 0 : _actionRef$current5$i.call(_actionRef$current5); // 监听 浏览器变化 更吸底状态
|
624
|
+
// 初始化 actionRef state、callback 此时 actionRef 已初始化完成
|
625
|
+
initActionRef(); // 监听 浏览器变化 更吸底状态
|
617
626
|
|
618
627
|
if (footerSuction) {
|
619
628
|
getFooterSuctionState();
|
@@ -624,9 +633,20 @@ var ProTable = function ProTable(props) {
|
|
624
633
|
}
|
625
634
|
|
626
635
|
if (requestWhenMount) {
|
636
|
+
// 在请求发送之前 处理漏斗默认数据
|
637
|
+
processDefaultFilter(propsColumns, actionRef, defaultFilterParams);
|
638
|
+
|
627
639
|
_request();
|
628
640
|
}
|
629
641
|
|
642
|
+
var searchName = getSearchName();
|
643
|
+
|
644
|
+
if (searchName) {
|
645
|
+
// 如果有初始值,需要赋值
|
646
|
+
var initialValues = toJS(dataFilterForm.initialValues);
|
647
|
+
searchValueRef.current = initialValues[searchName][1];
|
648
|
+
}
|
649
|
+
|
630
650
|
return function () {
|
631
651
|
if (autoRefreshTimerRef.current) {
|
632
652
|
clearTimeout(autoRefreshTimerRef.current);
|
@@ -646,18 +666,54 @@ var ProTable = function ProTable(props) {
|
|
646
666
|
setSort(nextSort);
|
647
667
|
|
648
668
|
_request(targetFormatSort(nextSort));
|
649
|
-
} //
|
669
|
+
} // 找到 Search 组件对应的 name
|
670
|
+
|
671
|
+
|
672
|
+
var getSearchName = function getSearchName() {
|
673
|
+
var _dataFilter$schema;
|
650
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
|
651
686
|
|
652
|
-
|
653
|
-
|
654
|
-
|
687
|
+
|
688
|
+
var dataFilter = _objectSpread(_objectSpread({
|
689
|
+
mode: 'inline'
|
690
|
+
}, propsDataFilter), {}, {
|
691
|
+
onFilter: debounce(function (values) {
|
692
|
+
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
|
655
693
|
|
656
694
|
if (dataFilterForm.validate()) {
|
657
|
-
var _actionRef$
|
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];
|
658
706
|
|
659
|
-
|
660
|
-
|
707
|
+
if (searchValue === (searchValueRef === null || searchValueRef === void 0 ? void 0 : searchValueRef.current)) {
|
708
|
+
return;
|
709
|
+
}
|
710
|
+
|
711
|
+
searchValueRef.current = searchValue;
|
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);
|
661
717
|
setCurrentPage(1);
|
662
718
|
|
663
719
|
_request(_defineProperty({}, targetPageKey, 1));
|
@@ -734,7 +790,7 @@ var ProTable = function ProTable(props) {
|
|
734
790
|
|
735
791
|
var targetActions = footerAction.actions.map(function (action) {
|
736
792
|
return _objectSpread(_objectSpread({}, action), {}, {
|
737
|
-
disabled: action.disabled || selectedCount === 0
|
793
|
+
disabled: (action === null || action === void 0 ? void 0 : action.disabled) || selectedCount === 0
|
738
794
|
});
|
739
795
|
});
|
740
796
|
|
@@ -752,21 +808,21 @@ var ProTable = function ProTable(props) {
|
|
752
808
|
|
753
809
|
var renderFooter = function renderFooter() {
|
754
810
|
function onChangePagination(currentPage) {
|
755
|
-
var _actionRef$
|
811
|
+
var _actionRef$current6, _actionRef$current6$c;
|
756
812
|
|
757
813
|
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
758
814
|
// 翻页暂时先清空选择
|
759
|
-
(_actionRef$
|
815
|
+
(_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$c = _actionRef$current6.clearRowSelection) === null || _actionRef$current6$c === void 0 ? void 0 : _actionRef$current6$c.call(_actionRef$current6);
|
760
816
|
setCurrentPage(currentPage);
|
761
817
|
|
762
818
|
_request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
|
763
819
|
}
|
764
820
|
|
765
821
|
function onChangePaginationSize(currentPageSize) {
|
766
|
-
var _actionRef$
|
822
|
+
var _actionRef$current7, _actionRef$current7$c, _request5;
|
767
823
|
|
768
824
|
// 翻页暂时先清空选择
|
769
|
-
(_actionRef$
|
825
|
+
(_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$c = _actionRef$current7.clearRowSelection) === null || _actionRef$current7$c === void 0 ? void 0 : _actionRef$current7$c.call(_actionRef$current7);
|
770
826
|
setPageSize(currentPageSize);
|
771
827
|
setCurrentPage(1);
|
772
828
|
|
@@ -806,8 +862,9 @@ var ProTable = function ProTable(props) {
|
|
806
862
|
return onChangePagination(number);
|
807
863
|
},
|
808
864
|
total: total,
|
809
|
-
|
810
|
-
|
865
|
+
responsivePaginationType: responsivePaginationType,
|
866
|
+
// shape="arrow-only"
|
867
|
+
// pageSizePosition="end"
|
811
868
|
totalRender: function totalRender(total) {
|
812
869
|
return getMessage('total', {
|
813
870
|
total: total
|
package/es/table/index.scss
CHANGED
@@ -40,11 +40,6 @@ $fullscreenPadding: 24px;
|
|
40
40
|
justify-content: flex-end;
|
41
41
|
width: 100%;
|
42
42
|
}
|
43
|
-
.pagination-wrapper {
|
44
|
-
display: flex;
|
45
|
-
justify-content: flex-end;
|
46
|
-
width: 100%;
|
47
|
-
}
|
48
43
|
&-footer-action {
|
49
44
|
margin-left: 16px;
|
50
45
|
}
|
@@ -114,4 +109,9 @@ $fullscreenPadding: 24px;
|
|
114
109
|
|
115
110
|
.next-table-empty {
|
116
111
|
--table-empty-padding: 48px;
|
112
|
+
}
|
113
|
+
|
114
|
+
// 后面在基础组件里面覆盖
|
115
|
+
.next-table.next-table td .next-table-cell-wrapper {
|
116
|
+
text-overflow: unset;
|
117
117
|
}
|