@teamix/pro 1.5.0 → 1.5.1
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 +1103 -123
- package/dist/pro.min.css +1 -1
- package/dist/pro.min.js +1 -1
- package/es/actions/index.d.ts +4 -0
- package/es/actions/index.js +34 -9
- package/es/actions/index.scss +5 -0
- package/es/card/index.scss +7 -0
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/sidebar/components/tree-node/components/IconSwitch/index.d.ts +2 -2
- package/es/sidebar/components/tree-node/components/IconSwitch/index.scss +1 -1
- package/es/sidebar/index.d.ts +2 -0
- package/es/sidebar/index.js +3 -1
- package/es/table/components/CardView/index.d.ts +5 -0
- package/es/table/components/CardView/index.js +446 -0
- package/es/table/components/CardView/index.scss +46 -0
- package/es/table/components/Filter/index.d.ts +1 -0
- package/es/table/components/Filter/index.js +21 -14
- package/es/table/components/Layout/index.js +4 -2
- package/es/table/components/LoadMore/index.d.ts +20 -0
- package/es/table/components/LoadMore/index.js +107 -0
- package/es/table/components/LoadMore/index.scss +19 -0
- package/es/table/components/QuickAction/index.d.ts +1 -0
- package/es/table/components/ToolBar/CardSwitch.d.ts +8 -0
- package/es/table/components/ToolBar/CardSwitch.js +63 -0
- package/es/table/components/ToolBar/FilterColumnIcon.js +13 -2
- package/es/table/components/ToolBar/Fullscreen.js +15 -2
- package/es/table/components/ToolBar/index.js +64 -33
- package/es/table/components/ToolBar/index.scss +10 -1
- package/es/table/index.js +132 -34
- package/es/table/typing.d.ts +69 -0
- package/es/table/utils/columnRender.d.ts +1 -1
- package/es/table/utils/columnRender.js +4 -2
- package/es/table/utils/genProColumnToColumn.d.ts +1 -1
- package/es/table/utils/genProColumnToColumn.js +3 -1
- package/lib/actions/index.d.ts +4 -0
- package/lib/actions/index.js +33 -9
- package/lib/actions/index.scss +5 -0
- package/lib/card/index.scss +7 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/sidebar/components/tree-node/components/IconSwitch/index.d.ts +2 -2
- package/lib/sidebar/components/tree-node/components/IconSwitch/index.scss +1 -1
- package/lib/sidebar/index.d.ts +2 -0
- package/lib/sidebar/index.js +12 -1
- package/lib/table/components/CardView/index.d.ts +5 -0
- package/lib/table/components/CardView/index.js +468 -0
- package/lib/table/components/CardView/index.scss +46 -0
- package/lib/table/components/Filter/index.d.ts +1 -0
- package/lib/table/components/Filter/index.js +21 -14
- package/lib/table/components/Layout/index.js +4 -2
- package/lib/table/components/LoadMore/index.d.ts +20 -0
- package/lib/table/components/LoadMore/index.js +128 -0
- package/lib/table/components/LoadMore/index.scss +19 -0
- package/lib/table/components/QuickAction/index.d.ts +1 -0
- package/lib/table/components/ToolBar/CardSwitch.d.ts +8 -0
- package/lib/table/components/ToolBar/CardSwitch.js +82 -0
- package/lib/table/components/ToolBar/FilterColumnIcon.js +13 -2
- package/lib/table/components/ToolBar/Fullscreen.js +15 -2
- package/lib/table/components/ToolBar/index.js +65 -32
- package/lib/table/components/ToolBar/index.scss +10 -1
- package/lib/table/index.js +134 -34
- package/lib/table/typing.d.ts +69 -0
- package/lib/table/utils/columnRender.d.ts +1 -1
- package/lib/table/utils/columnRender.js +4 -2
- package/lib/table/utils/genProColumnToColumn.d.ts +1 -1
- package/lib/table/utils/genProColumnToColumn.js +3 -1
- package/package.json +1 -1
@@ -0,0 +1,446 @@
|
|
1
|
+
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); }
|
2
|
+
|
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
|
+
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
6
|
+
|
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
|
+
|
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
|
+
|
21
|
+
import React, { isValidElement, useEffect, useMemo, useState } from 'react';
|
22
|
+
import { Grid } from '@alicloudfe/components';
|
23
|
+
import { getDeepValue, ProCard, ProInfo } from '../../../';
|
24
|
+
import { ProSkeletonRaw } from '../../../skeleton';
|
25
|
+
import { usePrefixCls } from '@teamix/utils';
|
26
|
+
import './index.scss';
|
27
|
+
import { renderCell } from '../../utils/columnRender';
|
28
|
+
import LoadMore from '../LoadMore';
|
29
|
+
var Row = Grid.Row,
|
30
|
+
Col = Grid.Col;
|
31
|
+
var cls = usePrefixCls('teamix-pro-table-card-view');
|
32
|
+
|
33
|
+
var CardView = function CardView(props) {
|
34
|
+
var _cardViewProps$scroll;
|
35
|
+
|
36
|
+
var dataSource = props.dataSource,
|
37
|
+
_props$columns = props.columns,
|
38
|
+
columns = _props$columns === void 0 ? [] : _props$columns,
|
39
|
+
_props$loading = props.loading,
|
40
|
+
loading = _props$loading === void 0 ? false : _props$loading,
|
41
|
+
originColumns = props.originColumns,
|
42
|
+
_props$cardViewProps = props.cardViewProps,
|
43
|
+
cardViewProps = _props$cardViewProps === void 0 ? {} : _props$cardViewProps,
|
44
|
+
actionRef = props.actionRef,
|
45
|
+
context = props.context,
|
46
|
+
scrollHeight = props.scrollHeight,
|
47
|
+
_props$showSkeleton = props.showSkeleton,
|
48
|
+
showSkeleton = _props$showSkeleton === void 0 ? false : _props$showSkeleton; // 加载状态
|
49
|
+
|
50
|
+
var _useState = useState('none'),
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
52
|
+
loadState = _useState2[0],
|
53
|
+
setLoadState = _useState2[1]; // 骨架屏状态
|
54
|
+
|
55
|
+
|
56
|
+
var _useState3 = useState(true),
|
57
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
58
|
+
skeletonVisible = _useState4[0],
|
59
|
+
setSkeletonVisible = _useState4[1]; // 加载状态变化回调
|
60
|
+
|
61
|
+
|
62
|
+
useEffect(function () {
|
63
|
+
setLoadState(loading ? 'loading' : 'loadMore');
|
64
|
+
setSkeletonVisible(showSkeleton);
|
65
|
+
|
66
|
+
if (showSkeleton) {
|
67
|
+
setLoadState('none');
|
68
|
+
}
|
69
|
+
}, [loading, skeletonVisible, showSkeleton]);
|
70
|
+
|
71
|
+
var getDataIndexValue = function getDataIndexValue(dataIndex, dataSource) {
|
72
|
+
if (Array.isArray(dataIndex)) {
|
73
|
+
return dataIndex.map(function (item) {
|
74
|
+
return getDeepValue(item !== null && item !== void 0 ? item : '', dataSource);
|
75
|
+
});
|
76
|
+
}
|
77
|
+
|
78
|
+
return getDeepValue(dataIndex !== null && dataIndex !== void 0 ? dataIndex : '', dataSource);
|
79
|
+
}; // 获取卡片 columns
|
80
|
+
|
81
|
+
|
82
|
+
var cardColumns = useMemo(function () {
|
83
|
+
return columns.map(function (column) {
|
84
|
+
var _originColumn$title;
|
85
|
+
|
86
|
+
var originColumn = originColumns === null || originColumns === void 0 ? void 0 : originColumns.find(function (item) {
|
87
|
+
return item.dataIndex === column.dataIndex;
|
88
|
+
});
|
89
|
+
var render = column === null || column === void 0 ? void 0 : column.render;
|
90
|
+
|
91
|
+
if (typeof (column === null || column === void 0 ? void 0 : column.render) === 'function') {
|
92
|
+
render = function render(value, record) {
|
93
|
+
var _column$render;
|
94
|
+
|
95
|
+
return column === null || column === void 0 ? void 0 : (_column$render = column.render) === null || _column$render === void 0 ? void 0 : _column$render.call(column, value, undefined, record);
|
96
|
+
};
|
97
|
+
} else {
|
98
|
+
var _Object$entries$map, _Object$entries, _Object$entries$map2, _column$render2;
|
99
|
+
|
100
|
+
render = Object.fromEntries((_Object$entries$map = (_Object$entries = Object.entries((_column$render2 = column === null || column === void 0 ? void 0 : column.render) !== null && _column$render2 !== void 0 ? _column$render2 : {})) === null || _Object$entries === void 0 ? void 0 : (_Object$entries$map2 = _Object$entries.map) === null || _Object$entries$map2 === void 0 ? void 0 : _Object$entries$map2.call(_Object$entries, function (_ref) {
|
101
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
102
|
+
k = _ref2[0],
|
103
|
+
v = _ref2[1];
|
104
|
+
|
105
|
+
if (typeof v === 'function') {
|
106
|
+
return [k, function (value, record) {
|
107
|
+
return v === null || v === void 0 ? void 0 : v(value, undefined, record);
|
108
|
+
}];
|
109
|
+
}
|
110
|
+
|
111
|
+
return [k, v];
|
112
|
+
})) !== null && _Object$entries$map !== void 0 ? _Object$entries$map : []);
|
113
|
+
}
|
114
|
+
|
115
|
+
return _objectSpread(_objectSpread({}, column), {}, {
|
116
|
+
title: (_originColumn$title = originColumn === null || originColumn === void 0 ? void 0 : originColumn.title) !== null && _originColumn$title !== void 0 ? _originColumn$title : column.title,
|
117
|
+
render: render
|
118
|
+
});
|
119
|
+
}).filter(function (item) {
|
120
|
+
return !(item === null || item === void 0 ? void 0 : item.actionSchema);
|
121
|
+
});
|
122
|
+
}, [columns, originColumns]); // 获取单个渲染数据
|
123
|
+
|
124
|
+
var renderCardInfoItem = function renderCardInfoItem(itemProps, record, index) {
|
125
|
+
if (itemProps) {
|
126
|
+
if (typeof itemProps === 'string' || Array.isArray(itemProps)) {
|
127
|
+
var _titleColumn$cell, _titleColumn$cell2;
|
128
|
+
|
129
|
+
var titleColumn = cardColumns.find(function (item) {
|
130
|
+
return item.dataIndex === itemProps;
|
131
|
+
});
|
132
|
+
return (_titleColumn$cell = titleColumn === null || titleColumn === void 0 ? void 0 : (_titleColumn$cell2 = titleColumn.cell) === null || _titleColumn$cell2 === void 0 ? void 0 : _titleColumn$cell2.call(titleColumn, getDataIndexValue(itemProps, record), index, record)) !== null && _titleColumn$cell !== void 0 ? _titleColumn$cell : '';
|
133
|
+
}
|
134
|
+
|
135
|
+
return renderCell(getDataIndexValue(itemProps.dataIndex, record), itemProps, index, record, actionRef, context);
|
136
|
+
}
|
137
|
+
}; // 渲染卡片title
|
138
|
+
|
139
|
+
|
140
|
+
var renderCardTitle = function renderCardTitle(record, index) {
|
141
|
+
var _cardColumns$, _cardColumns$$render, _cardColumns$2, _cardColumns$2$cell, _cardColumns$3;
|
142
|
+
|
143
|
+
var titleProp = cardViewProps.title;
|
144
|
+
var title = titleProp;
|
145
|
+
|
146
|
+
if (typeof titleProp === 'function') {
|
147
|
+
title = titleProp === null || titleProp === void 0 ? void 0 : titleProp(index, record);
|
148
|
+
}
|
149
|
+
|
150
|
+
if (titleProp) {
|
151
|
+
return renderCardInfoItem(title, record, index);
|
152
|
+
} // 【默认情况】看看第一列有没有 description,有的话,只取 title
|
153
|
+
|
154
|
+
|
155
|
+
if (cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$ = cardColumns[0]) === null || _cardColumns$ === void 0 ? void 0 : (_cardColumns$$render = _cardColumns$.render) === null || _cardColumns$$render === void 0 ? void 0 : _cardColumns$$render.description) {
|
156
|
+
var _originColumn$render;
|
157
|
+
|
158
|
+
var column = cardColumns === null || cardColumns === void 0 ? void 0 : cardColumns[0];
|
159
|
+
var originColumn = originColumns === null || originColumns === void 0 ? void 0 : originColumns[0]; // 转化为新的 table columns
|
160
|
+
|
161
|
+
var _columns = _objectSpread(_objectSpread({}, originColumn), {}, {
|
162
|
+
render: _objectSpread(_objectSpread({}, originColumn === null || originColumn === void 0 ? void 0 : originColumn.render), {}, {
|
163
|
+
value: originColumn === null || originColumn === void 0 ? void 0 : (_originColumn$render = originColumn.render) === null || _originColumn$render === void 0 ? void 0 : _originColumn$render.value,
|
164
|
+
description: undefined,
|
165
|
+
descriptionCopy: undefined
|
166
|
+
})
|
167
|
+
});
|
168
|
+
|
169
|
+
return renderCell(getDataIndexValue(column === null || column === void 0 ? void 0 : column.dataIndex, record), _columns, index, record, actionRef, context);
|
170
|
+
} // 【默认情况】直接拿第一列的 cell
|
171
|
+
|
172
|
+
|
173
|
+
return cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$2 = cardColumns[0]) === null || _cardColumns$2 === void 0 ? void 0 : (_cardColumns$2$cell = _cardColumns$2.cell) === null || _cardColumns$2$cell === void 0 ? void 0 : _cardColumns$2$cell.call(_cardColumns$2, getDataIndexValue(cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$3 = cardColumns[0]) === null || _cardColumns$3 === void 0 ? void 0 : _cardColumns$3.dataIndex, record), index, record);
|
174
|
+
}; // 渲染卡片subTitle
|
175
|
+
|
176
|
+
|
177
|
+
var renderCardSubTitle = function renderCardSubTitle(record, index) {
|
178
|
+
var _cardColumns$4, _cardColumns$4$render;
|
179
|
+
|
180
|
+
var subTitleProp = cardViewProps.subTitle;
|
181
|
+
var subTitle = subTitleProp;
|
182
|
+
|
183
|
+
if (typeof subTitleProp === 'function') {
|
184
|
+
subTitle = subTitleProp === null || subTitleProp === void 0 ? void 0 : subTitleProp(index, record);
|
185
|
+
}
|
186
|
+
|
187
|
+
if (subTitle) {
|
188
|
+
return renderCardInfoItem(subTitle, record, index);
|
189
|
+
} // 【默认情况】看看第一列有没有 description,有的话,只取 title
|
190
|
+
|
191
|
+
|
192
|
+
if (cardColumns === null || cardColumns === void 0 ? void 0 : (_cardColumns$4 = cardColumns[0]) === null || _cardColumns$4 === void 0 ? void 0 : (_cardColumns$4$render = _cardColumns$4.render) === null || _cardColumns$4$render === void 0 ? void 0 : _cardColumns$4$render.description) {
|
193
|
+
var _originColumn$render2, _column$render3;
|
194
|
+
|
195
|
+
var column = cardColumns === null || cardColumns === void 0 ? void 0 : cardColumns[0];
|
196
|
+
var originColumn = originColumns === null || originColumns === void 0 ? void 0 : originColumns[0]; // 转化为新的 table columns
|
197
|
+
|
198
|
+
var _columns2 = _objectSpread(_objectSpread({}, originColumn), {}, {
|
199
|
+
render: {
|
200
|
+
value: originColumn === null || originColumn === void 0 ? void 0 : (_originColumn$render2 = originColumn.render) === null || _originColumn$render2 === void 0 ? void 0 : _originColumn$render2.description,
|
201
|
+
description: undefined,
|
202
|
+
descriptionCopy: undefined
|
203
|
+
}
|
204
|
+
});
|
205
|
+
|
206
|
+
return renderCell(getDataIndexValue(column === null || column === void 0 ? void 0 : (_column$render3 = column.render) === null || _column$render3 === void 0 ? void 0 : _column$render3.value, record), _columns2, index, record, actionRef, context);
|
207
|
+
}
|
208
|
+
}; // 获取ProInfoColumns
|
209
|
+
|
210
|
+
|
211
|
+
var getPropInfoColumns = function getPropInfoColumns(record, index) {
|
212
|
+
var contentProp = cardViewProps.content;
|
213
|
+
var content = contentProp;
|
214
|
+
|
215
|
+
if (typeof contentProp === 'function') {
|
216
|
+
content = contentProp === null || contentProp === void 0 ? void 0 : contentProp(index, record);
|
217
|
+
}
|
218
|
+
|
219
|
+
if (content) {
|
220
|
+
return content.map(function (item) {
|
221
|
+
if (typeof item === 'string') {
|
222
|
+
return cardColumns.find(function (column) {
|
223
|
+
return column.dataIndex === item;
|
224
|
+
});
|
225
|
+
}
|
226
|
+
|
227
|
+
return content;
|
228
|
+
});
|
229
|
+
} // 默认取4条数据
|
230
|
+
|
231
|
+
|
232
|
+
return cardColumns.filter(function (item, index) {
|
233
|
+
return index > 0 && index < 5;
|
234
|
+
});
|
235
|
+
}; // 从表格columns获取Action配置
|
236
|
+
|
237
|
+
|
238
|
+
var getActionGroupFromColumn = function getActionGroupFromColumn(dataIndex, record, index) {
|
239
|
+
var actionColumn;
|
240
|
+
|
241
|
+
if (dataIndex) {
|
242
|
+
actionColumn = columns === null || columns === void 0 ? void 0 : columns.find(function (item) {
|
243
|
+
return item.dataIndex.toString() === dataIndex.toString();
|
244
|
+
});
|
245
|
+
} else {
|
246
|
+
// 默认继承表格操作列
|
247
|
+
// 获取操作列,只能获取最后一列
|
248
|
+
actionColumn = columns === null || columns === void 0 ? void 0 : columns[(columns === null || columns === void 0 ? void 0 : columns.length) - 1];
|
249
|
+
}
|
250
|
+
|
251
|
+
if (actionColumn.actionSchema) {
|
252
|
+
var _actionColumn, _actionColumn$actionS;
|
253
|
+
|
254
|
+
var newActionColumn = _objectSpread(_objectSpread({}, actionColumn), {}, {
|
255
|
+
actionSchema: {
|
256
|
+
actions: (_actionColumn = actionColumn) === null || _actionColumn === void 0 ? void 0 : (_actionColumn$actionS = _actionColumn.actionSchema) === null || _actionColumn$actionS === void 0 ? void 0 : _actionColumn$actionS.actions,
|
257
|
+
max: 1
|
258
|
+
}
|
259
|
+
});
|
260
|
+
|
261
|
+
return renderCell(null, newActionColumn, index, record, actionRef, context);
|
262
|
+
}
|
263
|
+
|
264
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
265
|
+
}; // 获取Card操作列配置
|
266
|
+
|
267
|
+
|
268
|
+
var getProCardExtra = function getProCardExtra(record, index) {
|
269
|
+
var extraProp = cardViewProps.extra;
|
270
|
+
var extra = extraProp;
|
271
|
+
|
272
|
+
if (typeof extraProp === 'function') {
|
273
|
+
extra = extraProp === null || extraProp === void 0 ? void 0 : extraProp(index, record);
|
274
|
+
}
|
275
|
+
|
276
|
+
if (Array.isArray(extra)) {
|
277
|
+
return /*#__PURE__*/React.createElement("div", {
|
278
|
+
className: cls('extra')
|
279
|
+
}, extra.map(function (item) {
|
280
|
+
if (typeof item === 'string') {
|
281
|
+
return /*#__PURE__*/React.createElement("div", {
|
282
|
+
className: cls('extra-item')
|
283
|
+
}, getActionGroupFromColumn(item, record, index));
|
284
|
+
}
|
285
|
+
|
286
|
+
if ( /*#__PURE__*/isValidElement(item)) {
|
287
|
+
return /*#__PURE__*/React.createElement("div", {
|
288
|
+
className: cls('extra-item')
|
289
|
+
}, item);
|
290
|
+
}
|
291
|
+
|
292
|
+
return /*#__PURE__*/React.createElement("div", {
|
293
|
+
className: cls('extra-item')
|
294
|
+
}, renderCell(null, item, index, record, actionRef, context));
|
295
|
+
}));
|
296
|
+
}
|
297
|
+
|
298
|
+
return getActionGroupFromColumn(undefined, record, index);
|
299
|
+
}; // 渲染Tag
|
300
|
+
|
301
|
+
|
302
|
+
var getTags = function getTags(record, index) {
|
303
|
+
var tagProp = cardViewProps.tags;
|
304
|
+
var tags = tagProp !== null && tagProp !== void 0 ? tagProp : [];
|
305
|
+
|
306
|
+
if (typeof tagProp === 'function') {
|
307
|
+
var _tagProp;
|
308
|
+
|
309
|
+
tags = (_tagProp = tagProp === null || tagProp === void 0 ? void 0 : tagProp(index, record)) !== null && _tagProp !== void 0 ? _tagProp : [];
|
310
|
+
}
|
311
|
+
|
312
|
+
var getTagFromColumns = function getTagFromColumns(columns, dataIndex) {
|
313
|
+
var _columns$render, _columns$render2, _columns$render4, _columns$render5, _columns$render7, _columns$render8;
|
314
|
+
|
315
|
+
var text = getDataIndexValue(dataIndex, record);
|
316
|
+
|
317
|
+
if ((columns === null || columns === void 0 ? void 0 : (_columns$render = columns.render) === null || _columns$render === void 0 ? void 0 : _columns$render.value) && typeof (columns === null || columns === void 0 ? void 0 : (_columns$render2 = columns.render) === null || _columns$render2 === void 0 ? void 0 : _columns$render2.value) === 'string') {
|
318
|
+
var _columns$render3;
|
319
|
+
|
320
|
+
text = columns === null || columns === void 0 ? void 0 : (_columns$render3 = columns.render) === null || _columns$render3 === void 0 ? void 0 : _columns$render3.value;
|
321
|
+
}
|
322
|
+
|
323
|
+
if ((columns === null || columns === void 0 ? void 0 : (_columns$render4 = columns.render) === null || _columns$render4 === void 0 ? void 0 : _columns$render4.value) && typeof (columns === null || columns === void 0 ? void 0 : (_columns$render5 = columns.render) === null || _columns$render5 === void 0 ? void 0 : _columns$render5.value) === 'function') {
|
324
|
+
var _columns$render6;
|
325
|
+
|
326
|
+
text = columns === null || columns === void 0 ? void 0 : (_columns$render6 = columns.render) === null || _columns$render6 === void 0 ? void 0 : _columns$render6.value(getDataIndexValue(dataIndex, record), index, record);
|
327
|
+
}
|
328
|
+
|
329
|
+
var color = columns === null || columns === void 0 ? void 0 : (_columns$render7 = columns.render) === null || _columns$render7 === void 0 ? void 0 : _columns$render7.color;
|
330
|
+
|
331
|
+
if (typeof (columns === null || columns === void 0 ? void 0 : (_columns$render8 = columns.render) === null || _columns$render8 === void 0 ? void 0 : _columns$render8.color) === 'function') {
|
332
|
+
var _columns$render9;
|
333
|
+
|
334
|
+
color = columns === null || columns === void 0 ? void 0 : (_columns$render9 = columns.render) === null || _columns$render9 === void 0 ? void 0 : _columns$render9.color(getDataIndexValue(dataIndex, record), index, record);
|
335
|
+
}
|
336
|
+
|
337
|
+
return {
|
338
|
+
children: text,
|
339
|
+
color: color
|
340
|
+
};
|
341
|
+
};
|
342
|
+
|
343
|
+
return tags.map(function (tagItem) {
|
344
|
+
if (typeof tagItem === 'string') {
|
345
|
+
var tagColumns = columns.find(function (item) {
|
346
|
+
return item.dataIndex === tagItem;
|
347
|
+
});
|
348
|
+
return getTagFromColumns(tagColumns, tagItem);
|
349
|
+
}
|
350
|
+
|
351
|
+
if (_typeof(tagItem) === 'object') {
|
352
|
+
return getTagFromColumns(tagItem, tagItem === null || tagItem === void 0 ? void 0 : tagItem.dataIndex);
|
353
|
+
}
|
354
|
+
});
|
355
|
+
}; // 加载下一页回调
|
356
|
+
|
357
|
+
|
358
|
+
var onLoadMore = function onLoadMore() {
|
359
|
+
var _actionRef$current, _actionRef$current$ne;
|
360
|
+
|
361
|
+
actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$ne = _actionRef$current.nextPage) === null || _actionRef$current$ne === void 0 ? void 0 : _actionRef$current$ne.call(_actionRef$current);
|
362
|
+
}; // 触底回调
|
363
|
+
|
364
|
+
|
365
|
+
var onScrollBottom = function onScrollBottom() {
|
366
|
+
if (cardViewProps.autoLoadNextPage !== false) {
|
367
|
+
var _cardViewProps$onScro;
|
368
|
+
|
369
|
+
onLoadMore();
|
370
|
+
cardViewProps === null || cardViewProps === void 0 ? void 0 : (_cardViewProps$onScro = cardViewProps.onScrollBottom) === null || _cardViewProps$onScro === void 0 ? void 0 : _cardViewProps$onScro.call(cardViewProps);
|
371
|
+
}
|
372
|
+
}; // 获取ProCard配置
|
373
|
+
|
374
|
+
|
375
|
+
var getProCardProps = function getProCardProps(record, index) {
|
376
|
+
var _cardViewProps$cardPr;
|
377
|
+
|
378
|
+
var external = ['onCollapse', 'onSelect', 'onClick'];
|
379
|
+
return Object.fromEntries(Object.entries((_cardViewProps$cardPr = cardViewProps.cardProps) !== null && _cardViewProps$cardPr !== void 0 ? _cardViewProps$cardPr : {}).map(function (_ref3) {
|
380
|
+
var _ref4 = _slicedToArray(_ref3, 2),
|
381
|
+
key = _ref4[0],
|
382
|
+
value = _ref4[1];
|
383
|
+
|
384
|
+
if (typeof value === 'function' && !external.includes(key)) {
|
385
|
+
return [key, value === null || value === void 0 ? void 0 : value(index, record)];
|
386
|
+
}
|
387
|
+
|
388
|
+
if (typeof value === 'function' && external.includes(key)) {
|
389
|
+
return [key, function () {
|
390
|
+
for (var _len = arguments.length, others = new Array(_len), _key = 0; _key < _len; _key++) {
|
391
|
+
others[_key] = arguments[_key];
|
392
|
+
}
|
393
|
+
|
394
|
+
return value === null || value === void 0 ? void 0 : value.apply(void 0, [index, record].concat(others));
|
395
|
+
}];
|
396
|
+
}
|
397
|
+
|
398
|
+
return [key, value];
|
399
|
+
}));
|
400
|
+
}; // 渲染单个卡片
|
401
|
+
|
402
|
+
|
403
|
+
var renderCard = function renderCard(record, index) {
|
404
|
+
return /*#__PURE__*/React.createElement(Col, {
|
405
|
+
xxs: 24,
|
406
|
+
xs: 12,
|
407
|
+
s: 8,
|
408
|
+
m: 8,
|
409
|
+
l: 6,
|
410
|
+
xl: 6,
|
411
|
+
key: index,
|
412
|
+
className: cls('card-item')
|
413
|
+
}, /*#__PURE__*/React.createElement(ProCard, _objectSpread({
|
414
|
+
title: renderCardTitle(record, index),
|
415
|
+
subTitle: renderCardSubTitle(record, index),
|
416
|
+
extra: getProCardExtra(record, index),
|
417
|
+
tags: getTags(record, index)
|
418
|
+
}, getProCardProps(record, index)), /*#__PURE__*/React.createElement(ProInfo, {
|
419
|
+
columns: getPropInfoColumns(record, index),
|
420
|
+
dataSource: record,
|
421
|
+
context: {
|
422
|
+
record: record,
|
423
|
+
index: index
|
424
|
+
}
|
425
|
+
})));
|
426
|
+
};
|
427
|
+
|
428
|
+
return /*#__PURE__*/React.createElement("div", {
|
429
|
+
className: cls()
|
430
|
+
}, /*#__PURE__*/React.createElement(LoadMore, {
|
431
|
+
onScrollBottom: onScrollBottom,
|
432
|
+
onLoadMore: onLoadMore,
|
433
|
+
loadState: loadState,
|
434
|
+
scrollHeight: (_cardViewProps$scroll = cardViewProps.scrollHeight) !== null && _cardViewProps$scroll !== void 0 ? _cardViewProps$scroll : scrollHeight
|
435
|
+
}, skeletonVisible && /*#__PURE__*/React.createElement(ProSkeletonRaw.Content, null), !skeletonVisible && /*#__PURE__*/React.createElement(Row, {
|
436
|
+
gutter: 16,
|
437
|
+
wrap: true,
|
438
|
+
style: {
|
439
|
+
marginTop: '-16px'
|
440
|
+
}
|
441
|
+
}, dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item, index) {
|
442
|
+
return renderCard(item, index);
|
443
|
+
}))));
|
444
|
+
};
|
445
|
+
|
446
|
+
export default CardView;
|
@@ -0,0 +1,46 @@
|
|
1
|
+
.teamix-pro-table-card-view {
|
2
|
+
&-card-item {
|
3
|
+
margin-top: 16px;
|
4
|
+
}
|
5
|
+
|
6
|
+
// 样式覆盖
|
7
|
+
.teamix-pro-card-title-name.teamix-pro-card-title-name {
|
8
|
+
|
9
|
+
.teamix-pro-field.teamix-pro-field.teamix-pro-field {
|
10
|
+
font-weight: var(--font-weight-medium);
|
11
|
+
font-size: var(--card-title-font-size, 14px);
|
12
|
+
}
|
13
|
+
|
14
|
+
.next-form-preview.next-form-preview.next-form-preview {
|
15
|
+
font-weight: var(--font-weight-medium);
|
16
|
+
font-size: var(--card-title-font-size, 14px);
|
17
|
+
}
|
18
|
+
|
19
|
+
|
20
|
+
}
|
21
|
+
|
22
|
+
.next-card-header-subtitle.next-card-header-subtitle {
|
23
|
+
|
24
|
+
.teamix-pro-field.teamix-pro-field.teamix-pro-field {
|
25
|
+
font-size: var(--card-sub-title-font-size, 12px);
|
26
|
+
color: var(--card-sub-title-color, #5a5a5a);
|
27
|
+
}
|
28
|
+
|
29
|
+
.next-form-preview.next-form-preview.next-form-preview {
|
30
|
+
font-size: var(--card-sub-title-font-size, 12px);
|
31
|
+
color: var(--card-sub-title-color, #5a5a5a);
|
32
|
+
}
|
33
|
+
|
34
|
+
|
35
|
+
}
|
36
|
+
|
37
|
+
&-extra {
|
38
|
+
display: flex;
|
39
|
+
align-items: center;
|
40
|
+
|
41
|
+
&-item {
|
42
|
+
display: inline-block;
|
43
|
+
margin-left: 8px;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
@@ -4,6 +4,7 @@ import { ProTableColumnProps, ProTableActionType } from '../../typing';
|
|
4
4
|
declare type ProTableFilterProps = {
|
5
5
|
column: ProTableColumnProps;
|
6
6
|
actionRef: React.MutableRefObject<ProTableActionType | undefined>;
|
7
|
+
switchCardView?: 'table' | 'card';
|
7
8
|
};
|
8
9
|
declare const Filter: React.FC<ProTableFilterProps>;
|
9
10
|
export default Filter;
|
@@ -36,7 +36,8 @@ var RadioItem = Menu.RadioItem;
|
|
36
36
|
|
37
37
|
var Filter = function Filter(props) {
|
38
38
|
var column = props.column,
|
39
|
-
actionRef = props.actionRef
|
39
|
+
actionRef = props.actionRef,
|
40
|
+
switchCardView = props.switchCardView;
|
40
41
|
var _column$filtersWidth = column.filtersWidth,
|
41
42
|
filtersWidth = _column$filtersWidth === void 0 ? 130 : _column$filtersWidth; // 选中过滤项
|
42
43
|
|
@@ -172,7 +173,7 @@ var Filter = function Filter(props) {
|
|
172
173
|
btn: true
|
173
174
|
}),
|
174
175
|
onClick: function onClick() {
|
175
|
-
var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$
|
176
|
+
var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$current7, _actionRef$current7$r, _actionRef$current8, _actionRef$current8$r, _actionRef$current9, _actionRef$current9$c;
|
176
177
|
|
177
178
|
(_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.filterDataSource) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2, column.dataIndex); // 先获取此列的param
|
178
179
|
|
@@ -198,13 +199,19 @@ var Filter = function Filter(props) {
|
|
198
199
|
|
199
200
|
if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
|
200
201
|
targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
|
202
|
+
}
|
203
|
+
|
204
|
+
if (switchCardView === 'card') {
|
205
|
+
var _actionRef$current6, _actionRef$current6$s;
|
206
|
+
|
207
|
+
(_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$s = _actionRef$current6.setData) === null || _actionRef$current6$s === void 0 ? void 0 : _actionRef$current6$s.call(_actionRef$current6, []);
|
201
208
|
} // 发送请求
|
202
209
|
|
203
210
|
|
204
|
-
(_actionRef$
|
205
|
-
(_actionRef$
|
211
|
+
(_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.request) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7, _defineProperty({}, targetPageKey, 1));
|
212
|
+
(_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$r = _actionRef$current8.resetPage) === null || _actionRef$current8$r === void 0 ? void 0 : _actionRef$current8$r.call(_actionRef$current8); // 清空表格选择
|
206
213
|
|
207
|
-
(_actionRef$
|
214
|
+
(_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
|
208
215
|
setVisible(false);
|
209
216
|
}
|
210
217
|
}, getMessage('ok')), /*#__PURE__*/React.createElement(Button, {
|
@@ -214,31 +221,31 @@ var Filter = function Filter(props) {
|
|
214
221
|
btn: true
|
215
222
|
}),
|
216
223
|
onClick: function onClick() {
|
217
|
-
var _actionRef$current$ge7, _actionRef$
|
224
|
+
var _actionRef$current$ge7, _actionRef$current10, _actionRef$current10$, _actionRef$current10$2, _actionRef$current11, _actionRef$current11$, _actionRef$current12, _actionRef$current12$;
|
218
225
|
|
219
226
|
setSelected([]);
|
220
|
-
var rules = (_actionRef$current$ge7 = (_actionRef$
|
221
|
-
(_actionRef$
|
227
|
+
var rules = (_actionRef$current$ge7 = (_actionRef$current10 = actionRef.current) === null || _actionRef$current10 === void 0 ? void 0 : (_actionRef$current10$ = _actionRef$current10.getState) === null || _actionRef$current10$ === void 0 ? void 0 : (_actionRef$current10$2 = _actionRef$current10$.call(_actionRef$current10)) === null || _actionRef$current10$2 === void 0 ? void 0 : _actionRef$current10$2.filterRules) !== null && _actionRef$current$ge7 !== void 0 ? _actionRef$current$ge7 : {};
|
228
|
+
(_actionRef$current11 = actionRef.current) === null || _actionRef$current11 === void 0 ? void 0 : (_actionRef$current11$ = _actionRef$current11.setFilterRules) === null || _actionRef$current11$ === void 0 ? void 0 : _actionRef$current11$.call(_actionRef$current11, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
|
222
229
|
rules: [],
|
223
230
|
params: ''
|
224
231
|
})));
|
225
|
-
(_actionRef$
|
232
|
+
(_actionRef$current12 = actionRef.current) === null || _actionRef$current12 === void 0 ? void 0 : (_actionRef$current12$ = _actionRef$current12.filterDataSource) === null || _actionRef$current12$ === void 0 ? void 0 : _actionRef$current12$.call(_actionRef$current12, column.dataIndex);
|
226
233
|
|
227
234
|
if (selected.length > 0) {
|
228
|
-
var _actionRef$
|
235
|
+
var _actionRef$current13, _actionRef$current14, _actionRef$current14$, _actionRef$current15, _actionRef$current15$, _actionRef$current16, _actionRef$current16$;
|
229
236
|
|
230
237
|
var targetPageKey = 'currentPage';
|
231
|
-
var pageInfo = (_actionRef$
|
238
|
+
var pageInfo = (_actionRef$current13 = actionRef.current) === null || _actionRef$current13 === void 0 ? void 0 : _actionRef$current13.pageInfo;
|
232
239
|
|
233
240
|
if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
|
234
241
|
targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
|
235
242
|
} // 发送请求
|
236
243
|
|
237
244
|
|
238
|
-
(_actionRef$
|
239
|
-
(_actionRef$
|
245
|
+
(_actionRef$current14 = actionRef.current) === null || _actionRef$current14 === void 0 ? void 0 : (_actionRef$current14$ = _actionRef$current14.request) === null || _actionRef$current14$ === void 0 ? void 0 : _actionRef$current14$.call(_actionRef$current14, _defineProperty({}, targetPageKey, 1));
|
246
|
+
(_actionRef$current15 = actionRef.current) === null || _actionRef$current15 === void 0 ? void 0 : (_actionRef$current15$ = _actionRef$current15.resetPage) === null || _actionRef$current15$ === void 0 ? void 0 : _actionRef$current15$.call(_actionRef$current15); // 清空表格选择
|
240
247
|
|
241
|
-
(_actionRef$
|
248
|
+
(_actionRef$current16 = actionRef.current) === null || _actionRef$current16 === void 0 ? void 0 : (_actionRef$current16$ = _actionRef$current16.clearRowSelection) === null || _actionRef$current16$ === void 0 ? void 0 : _actionRef$current16$.call(_actionRef$current16);
|
242
249
|
} // setVisible(!visible);
|
243
250
|
|
244
251
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar"];
|
1
|
+
var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar", "dataTeamixSpm"];
|
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
|
|
@@ -32,6 +32,7 @@ var Layout = function Layout(props) {
|
|
32
32
|
afterDataFilter = props.afterDataFilter,
|
33
33
|
rowSelection = props.rowSelection,
|
34
34
|
toolBar = props.toolBar,
|
35
|
+
dataTeamixSpm = props.dataTeamixSpm,
|
35
36
|
otherProps = _objectWithoutProperties(props, _excluded); // 渲染主操作区
|
36
37
|
|
37
38
|
|
@@ -56,7 +57,8 @@ var Layout = function Layout(props) {
|
|
56
57
|
return /*#__PURE__*/React.createElement("div", {
|
57
58
|
className: cls('main-action')
|
58
59
|
}, /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({}, mainAction), {}, {
|
59
|
-
context: _objectSpread(_objectSpread({}, defaultContext), mainAction.context)
|
60
|
+
context: _objectSpread(_objectSpread({}, defaultContext), mainAction.context),
|
61
|
+
"data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-mainAction") : undefined
|
60
62
|
})));
|
61
63
|
} else return mainAction;
|
62
64
|
}; // 渲染 addonAfter
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import './index.scss';
|
3
|
+
export declare type LoadMoreProps = {
|
4
|
+
/** 内容 **/
|
5
|
+
children?: React.ReactNode;
|
6
|
+
/** 加载状态 受控 **/
|
7
|
+
loadState?: 'loading' | 'loadMore' | 'noMore' | 'none';
|
8
|
+
/** 滚动条滚动到底部触发事件 **/
|
9
|
+
onScrollBottom?: () => void;
|
10
|
+
/** 加载状态改变回调 **/
|
11
|
+
onChangeLoadState?: (state: LoadMoreProps['loadState']) => void;
|
12
|
+
/** 点击加载更多回调 **/
|
13
|
+
onLoadMore?: () => void;
|
14
|
+
/** 滚动区域高度 **/
|
15
|
+
scrollHeight?: number | string;
|
16
|
+
/** 当前滚动区域位置 **/
|
17
|
+
scrollPosition?: number;
|
18
|
+
};
|
19
|
+
declare const LoadMore: React.FC<LoadMoreProps>;
|
20
|
+
export default LoadMore;
|