@teamix/pro 1.2.20 → 1.2.24
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 +2138 -568
- package/dist/pro.min.css +1 -1
- package/dist/pro.min.js +1 -1
- package/es/actions/dialog.js +13 -23
- package/es/actions/index.d.ts +10 -0
- package/es/actions/index.js +11 -16
- package/es/form/Components/LightFilter/componentMap.js +2 -1
- package/es/form/Components/LightFilter/index.js +15 -3
- 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/Filter/index2.js +8 -8
- package/es/form/ProForm/index.js +5 -4
- package/es/form/ProForm/index.scss +37 -6
- package/es/form/ProForm/useFormDisplayValues.js +4 -2
- package/es/form/SchemaForm/index.js +16 -10
- package/es/form/SchemaForm/initializeDataSource.d.ts +2 -2
- package/es/form/SchemaForm/initializeDataSource.js +4 -9
- package/es/form/SchemaForm/initializeRequest.d.ts +2 -2
- package/es/form/SchemaForm/initializeRequest.js +4 -10
- package/es/form/SchemaForm/initializeRules.d.ts +7 -1
- package/es/form/SchemaForm/initializeRules.js +9 -13
- package/es/form/SchemaForm/reactions.d.ts +5 -5
- package/es/form/SchemaForm/reactions.js +27 -29
- package/es/form/global.scss +1 -0
- package/es/form/typing.d.ts +10 -1
- package/es/form/utils.d.ts +8 -7
- package/es/form/utils.js +5 -4
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/table/components/Filter/index.js +1 -0
- 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 +79 -26
- package/es/table/index.scss +5 -5
- package/es/table/typing.d.ts +9 -9
- package/es/table/utils/columnRender.js +2 -1
- package/es/table/utils/index.d.ts +7 -0
- package/es/table/utils/index.js +38 -4
- package/lib/actions/dialog.js +12 -22
- package/lib/actions/index.d.ts +10 -0
- package/lib/actions/index.js +11 -16
- package/lib/form/Components/LightFilter/componentMap.js +2 -1
- package/lib/form/Components/LightFilter/index.js +14 -3
- 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/Filter/index2.js +9 -8
- package/lib/form/ProForm/index.js +5 -5
- package/lib/form/ProForm/index.scss +37 -6
- package/lib/form/ProForm/useFormDisplayValues.js +3 -1
- package/lib/form/SchemaForm/index.js +16 -9
- package/lib/form/SchemaForm/initializeDataSource.d.ts +2 -2
- package/lib/form/SchemaForm/initializeDataSource.js +4 -11
- package/lib/form/SchemaForm/initializeRequest.d.ts +2 -2
- package/lib/form/SchemaForm/initializeRequest.js +4 -11
- package/lib/form/SchemaForm/initializeRules.d.ts +7 -1
- package/lib/form/SchemaForm/initializeRules.js +9 -16
- package/lib/form/SchemaForm/reactions.d.ts +5 -5
- package/lib/form/SchemaForm/reactions.js +29 -31
- package/lib/form/global.scss +1 -0
- package/lib/form/typing.d.ts +10 -1
- package/lib/form/utils.d.ts +8 -7
- package/lib/form/utils.js +6 -5
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- 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 +79 -24
- package/lib/table/index.scss +5 -5
- package/lib/table/typing.d.ts +9 -9
- package/lib/table/utils/columnRender.js +2 -1
- package/lib/table/utils/index.d.ts +7 -0
- package/lib/table/utils/index.js +46 -4
- 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"];
|
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, 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,
|
@@ -204,8 +207,10 @@ var ProTable = function ProTable(props) {
|
|
204
207
|
var _useState13 = useState(true),
|
205
208
|
_useState14 = _slicedToArray(_useState13, 2),
|
206
209
|
customTableLoading = _useState14[0],
|
207
|
-
setCustomTableLoading = _useState14[1];
|
210
|
+
setCustomTableLoading = _useState14[1]; // 用于存放 Search 组件之前值的 ref
|
211
|
+
|
208
212
|
|
213
|
+
var searchValueRef = useRef('');
|
209
214
|
var tableRef = useRef(null);
|
210
215
|
var actionRef = useRef(); // 传给 table 的过滤后的 columns
|
211
216
|
|
@@ -404,9 +409,14 @@ var ProTable = function ProTable(props) {
|
|
404
409
|
setColumn: function setColumn(newColumns) {
|
405
410
|
var _actionRef$current2, _actionRef$current2$s;
|
406
411
|
|
412
|
+
var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
407
413
|
var columns = processColumns(newColumns, propsColumns);
|
408
414
|
setFilteredColumns(columns);
|
409
415
|
(_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);
|
416
|
+
|
417
|
+
if (update) {
|
418
|
+
emit('refreshFilterState', newColumns);
|
419
|
+
}
|
410
420
|
},
|
411
421
|
setSize: function setSize(mode) {
|
412
422
|
_setSize(mode);
|
@@ -610,10 +620,8 @@ var ProTable = function ProTable(props) {
|
|
610
620
|
}
|
611
621
|
|
612
622
|
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); // 监听 浏览器变化 更吸底状态
|
623
|
+
// 初始化 actionRef state、callback 此时 actionRef 已初始化完成
|
624
|
+
initActionRef(); // 监听 浏览器变化 更吸底状态
|
617
625
|
|
618
626
|
if (footerSuction) {
|
619
627
|
getFooterSuctionState();
|
@@ -627,6 +635,14 @@ var ProTable = function ProTable(props) {
|
|
627
635
|
_request();
|
628
636
|
}
|
629
637
|
|
638
|
+
var searchName = getSearchName();
|
639
|
+
|
640
|
+
if (searchName) {
|
641
|
+
// 如果有初始值,需要赋值
|
642
|
+
var initialValues = toJS(dataFilterForm.initialValues);
|
643
|
+
searchValueRef.current = initialValues[searchName][1];
|
644
|
+
}
|
645
|
+
|
630
646
|
return function () {
|
631
647
|
if (autoRefreshTimerRef.current) {
|
632
648
|
clearTimeout(autoRefreshTimerRef.current);
|
@@ -646,18 +662,54 @@ var ProTable = function ProTable(props) {
|
|
646
662
|
setSort(nextSort);
|
647
663
|
|
648
664
|
_request(targetFormatSort(nextSort));
|
649
|
-
} //
|
665
|
+
} // 找到 Search 组件对应的 name
|
650
666
|
|
651
667
|
|
652
|
-
var
|
653
|
-
|
654
|
-
|
668
|
+
var getSearchName = function getSearchName() {
|
669
|
+
var _dataFilter$schema;
|
670
|
+
|
671
|
+
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) {
|
672
|
+
var searchSchema = dataFilter.schema.find(function (item) {
|
673
|
+
return item.component === 'Search';
|
674
|
+
});
|
675
|
+
|
676
|
+
if (searchSchema) {
|
677
|
+
var searchName = searchSchema.name;
|
678
|
+
return searchName;
|
679
|
+
}
|
680
|
+
}
|
681
|
+
}; // 处理 dataFilter 中的 onFilter、onReset
|
682
|
+
|
683
|
+
|
684
|
+
var dataFilter = _objectSpread(_objectSpread({
|
685
|
+
mode: 'inline'
|
686
|
+
}, propsDataFilter), {}, {
|
687
|
+
onFilter: debounce(function (values) {
|
688
|
+
(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
|
655
689
|
|
656
690
|
if (dataFilterForm.validate()) {
|
657
|
-
var _actionRef$
|
691
|
+
var _actionRef$current5, _actionRef$current5$c;
|
692
|
+
|
693
|
+
/**
|
694
|
+
* 针对 inline 模式下的 Search 组件做特殊处理
|
695
|
+
* 当切换条件且输入内容为空的时候,类似[a, ''] => [b, ''] 不触发请求
|
696
|
+
*/
|
697
|
+
if (dataFilter.mode === 'inline') {
|
698
|
+
var searchName = getSearchName();
|
699
|
+
|
700
|
+
if (searchName) {
|
701
|
+
var searchValue = values[searchName][1];
|
658
702
|
|
659
|
-
|
660
|
-
|
703
|
+
if (searchValue === (searchValueRef === null || searchValueRef === void 0 ? void 0 : searchValueRef.current)) {
|
704
|
+
return;
|
705
|
+
}
|
706
|
+
|
707
|
+
searchValueRef.current = searchValue;
|
708
|
+
}
|
709
|
+
} // 搜索变化时,暂时先清空选择
|
710
|
+
|
711
|
+
|
712
|
+
(_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
713
|
setCurrentPage(1);
|
662
714
|
|
663
715
|
_request(_defineProperty({}, targetPageKey, 1));
|
@@ -752,21 +804,21 @@ var ProTable = function ProTable(props) {
|
|
752
804
|
|
753
805
|
var renderFooter = function renderFooter() {
|
754
806
|
function onChangePagination(currentPage) {
|
755
|
-
var _actionRef$
|
807
|
+
var _actionRef$current6, _actionRef$current6$c;
|
756
808
|
|
757
809
|
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
758
810
|
// 翻页暂时先清空选择
|
759
|
-
(_actionRef$
|
811
|
+
(_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
812
|
setCurrentPage(currentPage);
|
761
813
|
|
762
814
|
_request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
|
763
815
|
}
|
764
816
|
|
765
817
|
function onChangePaginationSize(currentPageSize) {
|
766
|
-
var _actionRef$
|
818
|
+
var _actionRef$current7, _actionRef$current7$c, _request5;
|
767
819
|
|
768
820
|
// 翻页暂时先清空选择
|
769
|
-
(_actionRef$
|
821
|
+
(_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
822
|
setPageSize(currentPageSize);
|
771
823
|
setCurrentPage(1);
|
772
824
|
|
@@ -806,8 +858,9 @@ var ProTable = function ProTable(props) {
|
|
806
858
|
return onChangePagination(number);
|
807
859
|
},
|
808
860
|
total: total,
|
809
|
-
|
810
|
-
|
861
|
+
responsivePaginationType: responsivePaginationType,
|
862
|
+
// shape="arrow-only"
|
863
|
+
// pageSizePosition="end"
|
811
864
|
totalRender: function totalRender(total) {
|
812
865
|
return getMessage('total', {
|
813
866
|
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
|
}
|