@sooloer/pages 0.1.19 → 0.1.20
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.
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { ProTable } from "../..";
|
|
8
|
+
import { ConfigProvider } from 'antd';
|
|
9
|
+
import zhCN from 'antd/lib/locale/zh_CN';
|
|
10
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
11
|
+
import { columns, fetchData, total } from "./data";
|
|
12
|
+
export default (function () {
|
|
13
|
+
var _useState = useState([]),
|
|
14
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
15
|
+
dataSource = _useState2[0],
|
|
16
|
+
setDataSource = _useState2[1];
|
|
17
|
+
var _useState3 = useState(false),
|
|
18
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
19
|
+
loading = _useState4[0],
|
|
20
|
+
setLoading = _useState4[1];
|
|
21
|
+
var _useState5 = useState({
|
|
22
|
+
pageNo: 1,
|
|
23
|
+
pageSize: 20
|
|
24
|
+
}),
|
|
25
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
26
|
+
_useState6$ = _useState6[0],
|
|
27
|
+
pageNo = _useState6$.pageNo,
|
|
28
|
+
pageSize = _useState6$.pageSize,
|
|
29
|
+
setPage = _useState6[1];
|
|
30
|
+
var _useState7 = useState([]),
|
|
31
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
32
|
+
selectedRowKeys = _useState8[0],
|
|
33
|
+
setSelectedRowKeys = _useState8[1];
|
|
34
|
+
var queryData = useCallback(function (pageNo, pageSize) {
|
|
35
|
+
setLoading(true);
|
|
36
|
+
var data = fetchData(pageNo, pageSize);
|
|
37
|
+
setTimeout(function () {
|
|
38
|
+
setDataSource(data);
|
|
39
|
+
setLoading(false);
|
|
40
|
+
}, 1000);
|
|
41
|
+
}, []);
|
|
42
|
+
var handlePageChange = function handlePageChange(pageNo, pageSize) {
|
|
43
|
+
setPage({
|
|
44
|
+
pageNo: pageNo,
|
|
45
|
+
pageSize: pageSize
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
useEffect(function () {
|
|
49
|
+
queryData(pageNo, pageSize);
|
|
50
|
+
}, [pageNo, pageSize, queryData]);
|
|
51
|
+
var handleRowSelectionChange = function handleRowSelectionChange(selectedRowKeys, globalChecked) {
|
|
52
|
+
console.log(selectedRowKeys, globalChecked);
|
|
53
|
+
setSelectedRowKeys(selectedRowKeys);
|
|
54
|
+
};
|
|
55
|
+
return /*#__PURE__*/React.createElement(ConfigProvider, {
|
|
56
|
+
locale: zhCN
|
|
57
|
+
}, /*#__PURE__*/React.createElement(ProTable, {
|
|
58
|
+
loading: loading,
|
|
59
|
+
height: 420,
|
|
60
|
+
rowSelection: {
|
|
61
|
+
fixed: true,
|
|
62
|
+
type: 'radio',
|
|
63
|
+
selectedRowKeys: selectedRowKeys,
|
|
64
|
+
// @ts-ignore
|
|
65
|
+
onChange: handleRowSelectionChange
|
|
66
|
+
},
|
|
67
|
+
columns: columns,
|
|
68
|
+
dataSource: dataSource,
|
|
69
|
+
pagination: {
|
|
70
|
+
total: total,
|
|
71
|
+
current: pageNo,
|
|
72
|
+
pageSize: pageSize,
|
|
73
|
+
onChange: handlePageChange
|
|
74
|
+
}
|
|
75
|
+
}));
|
|
76
|
+
});
|
package/dist/table/index.js
CHANGED
|
@@ -69,9 +69,19 @@ var ProTable = function ProTable(_ref) {
|
|
|
69
69
|
// 单行勾选
|
|
70
70
|
var handleSelect = function handleSelect(record, selected) {
|
|
71
71
|
if (rowSelection) {
|
|
72
|
+
if ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'radio') {
|
|
73
|
+
var _rowSelection$onChang;
|
|
74
|
+
rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang = rowSelection.onChange) === null || _rowSelection$onChang === void 0 || _rowSelection$onChang.call(rowSelection, [{
|
|
75
|
+
id: record[rowKey],
|
|
76
|
+
record: record,
|
|
77
|
+
expandSelectedRowKeys: [],
|
|
78
|
+
expandUnselectedRowKeys: []
|
|
79
|
+
}], false);
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
72
82
|
var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || [];
|
|
73
83
|
if (selected) {
|
|
74
|
-
var _rowSelection$
|
|
84
|
+
var _rowSelection$onChang2;
|
|
75
85
|
// 非当前页勾选集合
|
|
76
86
|
var notCurSelectedRows = multipleable ? selectedRowKeys.filter(function (item) {
|
|
77
87
|
return !curRowKeys.includes(item.id);
|
|
@@ -87,10 +97,10 @@ var ProTable = function ProTable(_ref) {
|
|
|
87
97
|
expandSelectedRowKeys: [],
|
|
88
98
|
expandUnselectedRowKeys: []
|
|
89
99
|
}]);
|
|
90
|
-
rowSelection === null || rowSelection === void 0 || (_rowSelection$
|
|
100
|
+
rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang2 = rowSelection.onChange) === null || _rowSelection$onChang2 === void 0 || _rowSelection$onChang2.call(rowSelection, newSelectedRows, globalChecked);
|
|
91
101
|
} else {
|
|
92
|
-
var _rowSelection$
|
|
93
|
-
rowSelection === null || rowSelection === void 0 || (_rowSelection$
|
|
102
|
+
var _rowSelection$onChang3;
|
|
103
|
+
rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang3 = rowSelection.onChange) === null || _rowSelection$onChang3 === void 0 || _rowSelection$onChang3.call(rowSelection, selectedRowKeys.filter(function (row) {
|
|
94
104
|
return row.id !== record[rowKey];
|
|
95
105
|
}), globalChecked);
|
|
96
106
|
}
|
|
@@ -100,13 +110,13 @@ var ProTable = function ProTable(_ref) {
|
|
|
100
110
|
// 当页全选
|
|
101
111
|
var handleSelectAll = function handleSelectAll(selected) {
|
|
102
112
|
if (rowSelection) {
|
|
103
|
-
var _rowSelection$
|
|
113
|
+
var _rowSelection$onChang4;
|
|
104
114
|
var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || [];
|
|
105
115
|
// 非当前页勾选集合
|
|
106
116
|
var notCurSelectedRows = multipleable ? selectedRowKeys.filter(function (item) {
|
|
107
117
|
return !curRowKeys.includes(item.id);
|
|
108
118
|
}) : [];
|
|
109
|
-
rowSelection === null || rowSelection === void 0 || (_rowSelection$
|
|
119
|
+
rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang4 = rowSelection.onChange) === null || _rowSelection$onChang4 === void 0 || _rowSelection$onChang4.call(rowSelection, [].concat(_toConsumableArray(notCurSelectedRows), _toConsumableArray((selected ? dataSource : []).map(function (item) {
|
|
110
120
|
return {
|
|
111
121
|
record: item,
|
|
112
122
|
id: item[rowKey],
|
|
@@ -147,9 +157,9 @@ var ProTable = function ProTable(_ref) {
|
|
|
147
157
|
|
|
148
158
|
// 全局勾选
|
|
149
159
|
var handleGlobalCheckboxChange = function handleGlobalCheckboxChange(checked) {
|
|
150
|
-
var _rowSelection$
|
|
160
|
+
var _rowSelection$onChang5;
|
|
151
161
|
setGlobalChecked(checked);
|
|
152
|
-
rowSelection === null || rowSelection === void 0 || (_rowSelection$
|
|
162
|
+
rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang5 = rowSelection.onChange) === null || _rowSelection$onChang5 === void 0 || _rowSelection$onChang5.call(rowSelection, _toConsumableArray((checked ? dataSource : []).map(function (item) {
|
|
153
163
|
return {
|
|
154
164
|
record: item,
|
|
155
165
|
id: item[rowKey],
|
|
@@ -94,9 +94,10 @@ var ElTable = function ElTable(_ref) {
|
|
|
94
94
|
className: 'sooloer-table-pagination',
|
|
95
95
|
pageSizeOptions: [20, 50, 100, 200],
|
|
96
96
|
showTotal: function showTotal(total, range) {
|
|
97
|
+
var _args$rowSelection;
|
|
97
98
|
return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
|
|
98
99
|
flex: "auto"
|
|
99
|
-
}, globalCheckable && (args === null || args === void 0 ? void 0 : args.rowSelection) && /*#__PURE__*/React.createElement(Checkbox, {
|
|
100
|
+
}, globalCheckable && (args === null || args === void 0 ? void 0 : args.rowSelection) && (args === null || args === void 0 || (_args$rowSelection = args.rowSelection) === null || _args$rowSelection === void 0 ? void 0 : _args$rowSelection.type) !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
|
|
100
101
|
checked: globalChecked,
|
|
101
102
|
onChange: handleGlobalChange,
|
|
102
103
|
className: "sooloer-table-global-checkbox"
|
package/dist/table/typing.d.ts
CHANGED
|
@@ -56,6 +56,7 @@ export type ProTableProps = TableProps<any> & {
|
|
|
56
56
|
* @description 表格行是否可选择，配置项参考 antd.Table
|
|
57
57
|
*/
|
|
58
58
|
rowSelection?: {
|
|
59
|
+
type?: 'checkbox' | 'radio';
|
|
59
60
|
selectedRowKeys?: SelectedRowKeyProps[];
|
|
60
61
|
onChange?: (selectedRowKeys: SelectedRowKeyProps[], globalChecked: boolean) => void;
|
|
61
62
|
};
|