@teamias/rex-design 0.1.21 → 0.1.23
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/components/data-cell/data-cell.js +27 -13
- package/dist/components/data-cell/demo/DropdownDemo.d.ts +6 -0
- package/dist/components/data-cell/demo/DropdownDemo.js +146 -0
- package/dist/components/data-cell/modules/cellItemMap.d.ts +6 -7
- package/dist/components/data-cell/modules/cellItemMap.js +46 -28
- package/dist/components/data-cell/types.d.ts +24 -6
- package/dist/components/data-cell/utils/index.d.ts +1 -0
- package/dist/components/data-cell/utils/index.js +2 -0
- package/dist/components/data-cell/utils/useDataCellAction.d.ts +32 -0
- package/dist/components/data-cell/utils/useDataCellAction.js +75 -0
- package/package.json +6 -2
|
@@ -4,31 +4,45 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
import { ErrorBoundaryProvider, useErrorBoundary
|
|
7
|
+
import { ErrorBoundaryProvider, useErrorBoundary } from "../../context";
|
|
8
|
+
import { Dropdown } from 'antd';
|
|
8
9
|
import React from 'react';
|
|
9
10
|
import { cellItemMap } from "./modules/cellItemMap";
|
|
10
11
|
import { Wrapper } from "./style";
|
|
12
|
+
import { useDataCellAction } from "./utils/useDataCellAction";
|
|
13
|
+
|
|
14
|
+
/** 内部渲染组件，会在检测到父级有 ErrorBoundary 时直接抛出错误 */
|
|
11
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
16
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
-
/** 内部渲染组件，会在检测到父级有 ErrorBoundary 时直接抛出错误 */
|
|
14
17
|
var DataCellInner = function DataCellInner(_ref) {
|
|
15
18
|
var items = _ref.items,
|
|
16
|
-
onClick = _ref.onClick
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var systemHistory = propSystemHistory !== null && propSystemHistory !== void 0 ? propSystemHistory : contextSystemHistory;
|
|
19
|
+
onClick = _ref.onClick;
|
|
20
|
+
var _useDataCellAction = useDataCellAction(),
|
|
21
|
+
navigate = _useDataCellAction.navigate,
|
|
22
|
+
createDropdownMenu = _useDataCellAction.createDropdownMenu;
|
|
21
23
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
22
24
|
children: items.map(function (item, index) {
|
|
23
|
-
var _cellItemMap$item$typ;
|
|
25
|
+
var _cellItemMap$item$typ, _dropdown$items, _dropdown$trigger;
|
|
26
|
+
var content = (_cellItemMap$item$typ = cellItemMap[item.type]) === null || _cellItemMap$item$typ === void 0 ? void 0 : _cellItemMap$item$typ.call(cellItemMap, {
|
|
27
|
+
item: item,
|
|
28
|
+
click: onClick,
|
|
29
|
+
navigate: navigate
|
|
30
|
+
});
|
|
31
|
+
var dropdown = item.dropdown;
|
|
24
32
|
return /*#__PURE__*/_jsx(Wrapper, {
|
|
25
33
|
style: item.rootStyle,
|
|
26
34
|
className: "data-cell-row-item ".concat(item.type),
|
|
27
|
-
children: (
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
35
|
+
children: dropdown !== null && dropdown !== void 0 && (_dropdown$items = dropdown.items) !== null && _dropdown$items !== void 0 && _dropdown$items.length ? /*#__PURE__*/_jsx(Dropdown, {
|
|
36
|
+
menu: createDropdownMenu(dropdown, onClick, item),
|
|
37
|
+
trigger: (_dropdown$trigger = dropdown.trigger) !== null && _dropdown$trigger !== void 0 ? _dropdown$trigger : ['click'],
|
|
38
|
+
placement: dropdown.placement,
|
|
39
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
40
|
+
style: {
|
|
41
|
+
cursor: 'pointer'
|
|
42
|
+
},
|
|
43
|
+
children: content
|
|
44
|
+
})
|
|
45
|
+
}) : content
|
|
32
46
|
}, index);
|
|
33
47
|
})
|
|
34
48
|
});
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* title: Dropdown 下拉菜单
|
|
3
|
+
* description: 所有类型均支持 `dropdown` 配置，每个菜单项继承 `TCellActionExtend`，支持 url 跳转、文件下载、自定义回调等操作。菜单项点击通过统一的 `onClick` 回调抛出，第三个参数 `dropdownKey` 为菜单项的 key。
|
|
4
|
+
*/
|
|
5
|
+
declare const _default: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { DataCell, RexProConfigProvider } from "../../..";
|
|
2
|
+
import { message } from 'antd';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* title: Dropdown 下拉菜单
|
|
6
|
+
* description: 所有类型均支持 `dropdown` 配置，每个菜单项继承 `TCellActionExtend`，支持 url 跳转、文件下载、自定义回调等操作。菜单项点击通过统一的 `onClick` 回调抛出，第三个参数 `dropdownKey` 为菜单项的 key。
|
|
7
|
+
*/
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
export default (function () {
|
|
10
|
+
return /*#__PURE__*/_jsx(RexProConfigProvider, {
|
|
11
|
+
value: {},
|
|
12
|
+
children: /*#__PURE__*/_jsx(DataCell, {
|
|
13
|
+
onClick: function onClick(item, subItem, dropdownKey) {
|
|
14
|
+
if (dropdownKey) {
|
|
15
|
+
message.info("\u83DC\u5355\u9879\u70B9\u51FB: key=".concat(dropdownKey, ", type=").concat(item.type));
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
items: [
|
|
19
|
+
// 文本类型 + dropdown（默认点击触发）
|
|
20
|
+
{
|
|
21
|
+
type: 'text',
|
|
22
|
+
props: {
|
|
23
|
+
label: '商品名称',
|
|
24
|
+
value: '点击我试试'
|
|
25
|
+
},
|
|
26
|
+
dropdown: {
|
|
27
|
+
items: [{
|
|
28
|
+
key: 'edit',
|
|
29
|
+
label: '编辑',
|
|
30
|
+
action: 'custom'
|
|
31
|
+
}, {
|
|
32
|
+
key: 'view',
|
|
33
|
+
label: '查看详情',
|
|
34
|
+
action: 'url',
|
|
35
|
+
value: '/detail/123',
|
|
36
|
+
urlTarget: '_blank'
|
|
37
|
+
}, {
|
|
38
|
+
key: 'delete',
|
|
39
|
+
label: '删除',
|
|
40
|
+
action: 'custom'
|
|
41
|
+
}]
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
// 标签类型 + dropdown（hover 触发）
|
|
45
|
+
{
|
|
46
|
+
type: 'tag',
|
|
47
|
+
props: {
|
|
48
|
+
label: '状态',
|
|
49
|
+
value: '进行中',
|
|
50
|
+
color: 'processing'
|
|
51
|
+
},
|
|
52
|
+
dropdown: {
|
|
53
|
+
items: [{
|
|
54
|
+
key: 'pending',
|
|
55
|
+
label: '切换为: 待处理',
|
|
56
|
+
action: 'custom'
|
|
57
|
+
}, {
|
|
58
|
+
key: 'processing',
|
|
59
|
+
label: '切换为: 进行中',
|
|
60
|
+
action: 'custom'
|
|
61
|
+
}, {
|
|
62
|
+
key: 'done',
|
|
63
|
+
label: '切换为: 已完成',
|
|
64
|
+
action: 'custom'
|
|
65
|
+
}],
|
|
66
|
+
trigger: ['hover']
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
// group-v2 顶层 dropdown（含 url 跳转和自定义操作）
|
|
70
|
+
{
|
|
71
|
+
type: 'group-v2',
|
|
72
|
+
dropdown: {
|
|
73
|
+
items: [{
|
|
74
|
+
key: 'detail',
|
|
75
|
+
label: '查看详情',
|
|
76
|
+
action: 'url',
|
|
77
|
+
value: '/order/detail',
|
|
78
|
+
urlTarget: '_self'
|
|
79
|
+
}, {
|
|
80
|
+
key: 'export',
|
|
81
|
+
label: '导出',
|
|
82
|
+
action: 'custom'
|
|
83
|
+
}]
|
|
84
|
+
},
|
|
85
|
+
props: {
|
|
86
|
+
label: '订单信息',
|
|
87
|
+
itemsDirection: 'row',
|
|
88
|
+
itemsGap: 8,
|
|
89
|
+
itemsSeparator: ' / ',
|
|
90
|
+
items: [{
|
|
91
|
+
type: 'text',
|
|
92
|
+
value: 'ORD-20240110'
|
|
93
|
+
}, {
|
|
94
|
+
type: 'tag',
|
|
95
|
+
value: '已发货',
|
|
96
|
+
color: 'blue'
|
|
97
|
+
}]
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
// group-v2 子项级别 dropdown
|
|
101
|
+
{
|
|
102
|
+
type: 'group-v2',
|
|
103
|
+
props: {
|
|
104
|
+
label: '子项菜单',
|
|
105
|
+
itemsDirection: 'row',
|
|
106
|
+
itemsGap: 12,
|
|
107
|
+
items: [{
|
|
108
|
+
type: 'text',
|
|
109
|
+
value: '点击我',
|
|
110
|
+
style: {
|
|
111
|
+
color: '#1890ff',
|
|
112
|
+
cursor: 'pointer'
|
|
113
|
+
},
|
|
114
|
+
dropdown: {
|
|
115
|
+
items: [{
|
|
116
|
+
key: 'view',
|
|
117
|
+
label: '查看',
|
|
118
|
+
action: 'custom'
|
|
119
|
+
}, {
|
|
120
|
+
key: 'share',
|
|
121
|
+
label: '分享',
|
|
122
|
+
action: 'custom'
|
|
123
|
+
}]
|
|
124
|
+
}
|
|
125
|
+
}, {
|
|
126
|
+
type: 'tag',
|
|
127
|
+
value: '右键我',
|
|
128
|
+
color: 'green',
|
|
129
|
+
dropdown: {
|
|
130
|
+
items: [{
|
|
131
|
+
key: 'pin',
|
|
132
|
+
label: '置顶',
|
|
133
|
+
action: 'custom'
|
|
134
|
+
}, {
|
|
135
|
+
key: 'archive',
|
|
136
|
+
label: '归档',
|
|
137
|
+
action: 'custom'
|
|
138
|
+
}],
|
|
139
|
+
trigger: ['contextMenu']
|
|
140
|
+
}
|
|
141
|
+
}]
|
|
142
|
+
}
|
|
143
|
+
}]
|
|
144
|
+
})
|
|
145
|
+
});
|
|
146
|
+
});
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { useRexProConfigProvider } from "../../..";
|
|
2
1
|
import React from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import { NavigateFunction } from 'react-router-dom';
|
|
3
|
+
import { IDataCellProps, TDataCellType } from '../types';
|
|
4
4
|
export declare const cellItemMap: TCellItemMap;
|
|
5
|
-
type
|
|
5
|
+
type TCellItemMap = Record<TDataCellType, (data: {
|
|
6
6
|
item: IDataCellProps['items'][number];
|
|
7
|
-
click?:
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
type TCellItemMap = Record<TDataCellType, (data: TCellItemFnData) => React.ReactNode>;
|
|
7
|
+
click?: IDataCellProps['onClick'];
|
|
8
|
+
navigate?: NavigateFunction;
|
|
9
|
+
}) => React.ReactNode>;
|
|
11
10
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["ellipsis", "tooltip", "copyable", "action", "urlTarget", "url", "style", "type"],
|
|
1
|
+
var _excluded = ["ellipsis", "tooltip", "copyable", "action", "urlTarget", "url", "style", "type", "dropdown"],
|
|
2
2
|
_excluded2 = ["mediaViewerType"],
|
|
3
3
|
_excluded3 = ["value"],
|
|
4
4
|
_excluded4 = ["iconsType"];
|
|
@@ -12,10 +12,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
12
12
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
13
|
import { EyeOutlined } from '@ant-design/icons';
|
|
14
14
|
import { downloadResourceFile, Icons, MediaViewer, showFileViewer } from "../../..";
|
|
15
|
-
import { Tag, Tooltip, Typography } from 'antd';
|
|
15
|
+
import { Dropdown, Tag, Tooltip, Typography } from 'antd';
|
|
16
16
|
import React, { cloneElement } from 'react';
|
|
17
17
|
import { DataCell } from "../data-cell";
|
|
18
18
|
import { DataCellRowText, DataCellRowTextLabel, DataCellRowTextValue } from "../style";
|
|
19
|
+
import { buildDropdownMenu } from "../utils/useDataCellAction";
|
|
19
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
22
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -26,7 +27,7 @@ var isEmpty = function isEmpty(val) {
|
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
/** 动作块渲染 */
|
|
29
|
-
var actionRender = function actionRender(item, action, node, click,
|
|
30
|
+
var actionRender = function actionRender(item, action, node, click, navigate) {
|
|
30
31
|
var tooltipBox = function tooltipBox(content) {
|
|
31
32
|
if (item.tooltip) {
|
|
32
33
|
return /*#__PURE__*/_jsx(Tooltip, {
|
|
@@ -69,8 +70,8 @@ var actionRender = function actionRender(item, action, node, click, systemHistor
|
|
|
69
70
|
onClick: function onClick(e) {
|
|
70
71
|
if (target !== '_blank') {
|
|
71
72
|
e.preventDefault();
|
|
72
|
-
if (
|
|
73
|
-
|
|
73
|
+
if (navigate) {
|
|
74
|
+
navigate(item.value || '');
|
|
74
75
|
} else {
|
|
75
76
|
window.location.href = item.value || '';
|
|
76
77
|
}
|
|
@@ -131,7 +132,7 @@ export var cellItemMap = {
|
|
|
131
132
|
text: function text(_ref) {
|
|
132
133
|
var item = _ref.item,
|
|
133
134
|
click = _ref.click,
|
|
134
|
-
|
|
135
|
+
navigate = _ref.navigate;
|
|
135
136
|
var props = item.props;
|
|
136
137
|
if (!props) return undefined;
|
|
137
138
|
return !isEmpty(props.label) || !isEmpty(props.value) ? /*#__PURE__*/_jsxs(DataCellRowText, {
|
|
@@ -156,7 +157,7 @@ export var cellItemMap = {
|
|
|
156
157
|
children: cellItemMap[props.value.type]({
|
|
157
158
|
item: props.value,
|
|
158
159
|
click: click,
|
|
159
|
-
|
|
160
|
+
navigate: navigate
|
|
160
161
|
})
|
|
161
162
|
});
|
|
162
163
|
}
|
|
@@ -187,7 +188,7 @@ export var cellItemMap = {
|
|
|
187
188
|
link: function link(_ref3) {
|
|
188
189
|
var item = _ref3.item,
|
|
189
190
|
click = _ref3.click,
|
|
190
|
-
|
|
191
|
+
navigate = _ref3.navigate;
|
|
191
192
|
var props = item.props;
|
|
192
193
|
if (!props) return undefined;
|
|
193
194
|
return /*#__PURE__*/_jsxs(DataCellRowText, {
|
|
@@ -201,7 +202,7 @@ export var cellItemMap = {
|
|
|
201
202
|
},
|
|
202
203
|
children: actionRender(props, props.action, props.label, function () {
|
|
203
204
|
return click === null || click === void 0 ? void 0 : click(item);
|
|
204
|
-
},
|
|
205
|
+
}, navigate)
|
|
205
206
|
}), props.copyable ? /*#__PURE__*/_jsx(Typography.Paragraph, {
|
|
206
207
|
copyable: {
|
|
207
208
|
text: typeof props.copyable === 'string' ? props.copyable : "".concat(props.label)
|
|
@@ -213,7 +214,7 @@ export var cellItemMap = {
|
|
|
213
214
|
'link-group': function linkGroup(_ref4) {
|
|
214
215
|
var item = _ref4.item,
|
|
215
216
|
click = _ref4.click,
|
|
216
|
-
|
|
217
|
+
navigate = _ref4.navigate;
|
|
217
218
|
var props = item.props;
|
|
218
219
|
if (!props) return undefined;
|
|
219
220
|
return /*#__PURE__*/_jsx("div", {
|
|
@@ -232,7 +233,7 @@ export var cellItemMap = {
|
|
|
232
233
|
type: 'link'
|
|
233
234
|
},
|
|
234
235
|
click: click,
|
|
235
|
-
|
|
236
|
+
navigate: navigate
|
|
236
237
|
}), (props === null || props === void 0 ? void 0 : props.items.length) - 1 === index ? '' : /*#__PURE__*/_jsx("span", {
|
|
237
238
|
style: {
|
|
238
239
|
paddingInline: 2
|
|
@@ -283,7 +284,7 @@ export var cellItemMap = {
|
|
|
283
284
|
var _props$action;
|
|
284
285
|
var item = _ref6.item,
|
|
285
286
|
click = _ref6.click,
|
|
286
|
-
|
|
287
|
+
navigate = _ref6.navigate;
|
|
287
288
|
var props = item.props;
|
|
288
289
|
if (!props) return undefined;
|
|
289
290
|
return actionRender(props, (_props$action = props.action) !== null && _props$action !== void 0 ? _props$action : 'default', /*#__PURE__*/_jsx(Icons, {
|
|
@@ -291,21 +292,19 @@ export var cellItemMap = {
|
|
|
291
292
|
name: props.value
|
|
292
293
|
}), function () {
|
|
293
294
|
return click === null || click === void 0 ? void 0 : click(item);
|
|
294
|
-
},
|
|
295
|
+
}, navigate);
|
|
295
296
|
},
|
|
296
297
|
/** 块组 */
|
|
297
298
|
group: function group(_ref7) {
|
|
298
299
|
var item = _ref7.item,
|
|
299
|
-
click = _ref7.click
|
|
300
|
-
systemHistory = _ref7.systemHistory;
|
|
300
|
+
click = _ref7.click;
|
|
301
301
|
var props = item.props;
|
|
302
302
|
if (!props) return undefined;
|
|
303
303
|
return /*#__PURE__*/_jsx("div", {
|
|
304
304
|
style: props.style,
|
|
305
305
|
children: /*#__PURE__*/_jsx(DataCell, {
|
|
306
306
|
items: props.items,
|
|
307
|
-
onClick: click
|
|
308
|
-
systemHistory: systemHistory
|
|
307
|
+
onClick: click
|
|
309
308
|
})
|
|
310
309
|
});
|
|
311
310
|
},
|
|
@@ -314,7 +313,7 @@ export var cellItemMap = {
|
|
|
314
313
|
var _props$items;
|
|
315
314
|
var item = _ref8.item,
|
|
316
315
|
click = _ref8.click,
|
|
317
|
-
|
|
316
|
+
navigate = _ref8.navigate;
|
|
318
317
|
var props = item.props;
|
|
319
318
|
if (!props) return undefined;
|
|
320
319
|
var renderItem = function renderItem(subItem, index) {
|
|
@@ -322,8 +321,7 @@ export var cellItemMap = {
|
|
|
322
321
|
if (subItem.type === 'group-v2') {
|
|
323
322
|
return /*#__PURE__*/_jsx(DataCell, {
|
|
324
323
|
items: [subItem],
|
|
325
|
-
onClick: click
|
|
326
|
-
systemHistory: systemHistory
|
|
324
|
+
onClick: click
|
|
327
325
|
}, "renderItem-".concat(index, "-").concat(count++));
|
|
328
326
|
}
|
|
329
327
|
var ellipsis = subItem.ellipsis,
|
|
@@ -334,6 +332,7 @@ export var cellItemMap = {
|
|
|
334
332
|
url = subItem.url,
|
|
335
333
|
style = subItem.style,
|
|
336
334
|
type = subItem.type,
|
|
335
|
+
dropdown = subItem.dropdown,
|
|
337
336
|
other = _objectWithoutProperties(subItem, _excluded);
|
|
338
337
|
var renderBox = function renderBox(content) {
|
|
339
338
|
var afterContent = /*#__PURE__*/_jsx(DataCellRowTextValue, {
|
|
@@ -376,7 +375,7 @@ export var cellItemMap = {
|
|
|
376
375
|
if (target !== '_blank') {
|
|
377
376
|
e.preventDefault();
|
|
378
377
|
try {
|
|
379
|
-
|
|
378
|
+
navigate === null || navigate === void 0 || navigate(url || '');
|
|
380
379
|
} catch (_unused) {
|
|
381
380
|
window.location.href = url || '';
|
|
382
381
|
}
|
|
@@ -435,17 +434,36 @@ export var cellItemMap = {
|
|
|
435
434
|
children: afterContent
|
|
436
435
|
}, "renderItem-".concat(index, "-").concat(count++));
|
|
437
436
|
};
|
|
437
|
+
var wrapDropdown = function wrapDropdown(node) {
|
|
438
|
+
var _dropdown$items;
|
|
439
|
+
if (dropdown !== null && dropdown !== void 0 && (_dropdown$items = dropdown.items) !== null && _dropdown$items !== void 0 && _dropdown$items.length) {
|
|
440
|
+
var _dropdown$trigger;
|
|
441
|
+
return /*#__PURE__*/_jsx(Dropdown, {
|
|
442
|
+
menu: buildDropdownMenu(dropdown, click, item, subItem, navigate),
|
|
443
|
+
trigger: (_dropdown$trigger = dropdown.trigger) !== null && _dropdown$trigger !== void 0 ? _dropdown$trigger : ['click'],
|
|
444
|
+
placement: dropdown.placement,
|
|
445
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
446
|
+
style: {
|
|
447
|
+
display: 'inline-flex',
|
|
448
|
+
cursor: 'pointer'
|
|
449
|
+
},
|
|
450
|
+
children: node
|
|
451
|
+
})
|
|
452
|
+
});
|
|
453
|
+
}
|
|
454
|
+
return node;
|
|
455
|
+
};
|
|
438
456
|
switch (type) {
|
|
439
457
|
case 'text':
|
|
440
|
-
return renderBox(subItem.value);
|
|
458
|
+
return wrapDropdown(renderBox(subItem.value));
|
|
441
459
|
case 'img':
|
|
442
460
|
{
|
|
443
461
|
var _ref9 = other,
|
|
444
462
|
mediaViewerType = _ref9.mediaViewerType,
|
|
445
463
|
otherProps = _objectWithoutProperties(_ref9, _excluded2);
|
|
446
|
-
return renderBox( /*#__PURE__*/_jsx(MediaViewer, _objectSpread({
|
|
464
|
+
return wrapDropdown(renderBox( /*#__PURE__*/_jsx(MediaViewer, _objectSpread({
|
|
447
465
|
type: mediaViewerType
|
|
448
|
-
}, otherProps)));
|
|
466
|
+
}, otherProps))));
|
|
449
467
|
}
|
|
450
468
|
case 'tag':
|
|
451
469
|
{
|
|
@@ -462,19 +480,19 @@ export var cellItemMap = {
|
|
|
462
480
|
}
|
|
463
481
|
return '#2db7f5';
|
|
464
482
|
}();
|
|
465
|
-
return renderBox(isEmpty(value) ? '' : /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, _otherProps), {}, {
|
|
483
|
+
return wrapDropdown(renderBox(isEmpty(value) ? '' : /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, _otherProps), {}, {
|
|
466
484
|
color: color,
|
|
467
485
|
children: value
|
|
468
|
-
})));
|
|
486
|
+
}))));
|
|
469
487
|
}
|
|
470
488
|
case 'icon':
|
|
471
489
|
{
|
|
472
490
|
var _ref11 = other,
|
|
473
491
|
iconsType = _ref11.iconsType,
|
|
474
492
|
_otherProps2 = _objectWithoutProperties(_ref11, _excluded4);
|
|
475
|
-
return renderBox( /*#__PURE__*/_jsx(Icons, _objectSpread({
|
|
493
|
+
return wrapDropdown(renderBox( /*#__PURE__*/_jsx(Icons, _objectSpread({
|
|
476
494
|
type: iconsType
|
|
477
|
-
}, _otherProps2)));
|
|
495
|
+
}, _otherProps2))));
|
|
478
496
|
}
|
|
479
497
|
default:
|
|
480
498
|
break;
|
|
@@ -1,14 +1,26 @@
|
|
|
1
|
-
import { Icons, MediaViewer
|
|
2
|
-
import { GetProps, Tag } from 'antd';
|
|
1
|
+
import { Icons, MediaViewer } from "../..";
|
|
2
|
+
import { Dropdown, GetProps, Tag } from 'antd';
|
|
3
3
|
import { HTMLAttributeAnchorTarget } from 'react';
|
|
4
|
+
/** Dropdown 配置 */
|
|
5
|
+
export interface IDataCellDropdown {
|
|
6
|
+
/** 下拉菜单项 */
|
|
7
|
+
items: Array<{
|
|
8
|
+
label: React.ReactNode;
|
|
9
|
+
key: string;
|
|
10
|
+
} & TCellActionExtend>;
|
|
11
|
+
/** 触发方式 @default ['click'] */
|
|
12
|
+
trigger?: GetProps<typeof Dropdown>['trigger'];
|
|
13
|
+
/** 弹出位置 */
|
|
14
|
+
placement?: GetProps<typeof Dropdown>['placement'];
|
|
15
|
+
}
|
|
4
16
|
/** 组件props */
|
|
5
17
|
export interface IDataCellProps {
|
|
6
18
|
/** 每一行展示内容 */
|
|
7
19
|
items: Array<TGroupV2 | IDataCellItem<TDataCellType>>;
|
|
8
|
-
/**
|
|
9
|
-
onClick?: (item: IDataCellItem, subItem?: Exclude<TGroupV2['props'], undefined>['items'][number]
|
|
10
|
-
/**
|
|
11
|
-
|
|
20
|
+
/** 点击回调（action='custom' 或 Dropdown 菜单项点击时触发） */
|
|
21
|
+
onClick?: (item: IDataCellItem, subItem?: Exclude<TGroupV2['props'], undefined>['items'][number],
|
|
22
|
+
/** Dropdown 菜单项 */
|
|
23
|
+
dropdownItem?: IDataCellDropdown['items'][number]) => void;
|
|
12
24
|
}
|
|
13
25
|
export interface IDataCellItem<T extends TDataCellType = TDataCellType> {
|
|
14
26
|
/** 组件类型 */
|
|
@@ -17,6 +29,8 @@ export interface IDataCellItem<T extends TDataCellType = TDataCellType> {
|
|
|
17
29
|
props?: ICellPropsMap[T];
|
|
18
30
|
/** 顶层样式 */
|
|
19
31
|
rootStyle?: React.CSSProperties;
|
|
32
|
+
/** 下拉菜单配置 */
|
|
33
|
+
dropdown?: IDataCellDropdown;
|
|
20
34
|
/** 扩展信息 */
|
|
21
35
|
extra?: {
|
|
22
36
|
rowSpan?: number;
|
|
@@ -129,6 +143,8 @@ export type TGroupV2 = {
|
|
|
129
143
|
iconsType?: GetProps<typeof Icons>['type'];
|
|
130
144
|
} & ICommonGroupV2 & Omit<GetProps<typeof Icons>, 'type'>) | TGroupV2>;
|
|
131
145
|
};
|
|
146
|
+
/** 下拉菜单配置 */
|
|
147
|
+
dropdown?: IDataCellDropdown;
|
|
132
148
|
/** 顶层样式 */
|
|
133
149
|
rootStyle?: React.CSSProperties;
|
|
134
150
|
/** 扩展信息 */
|
|
@@ -139,6 +155,8 @@ export type TGroupV2 = {
|
|
|
139
155
|
};
|
|
140
156
|
/** 为 group-v2 公共属性 */
|
|
141
157
|
export interface ICommonGroupV2 {
|
|
158
|
+
/** 下拉菜单配置 */
|
|
159
|
+
dropdown?: IDataCellDropdown;
|
|
142
160
|
/**
|
|
143
161
|
* 缺省
|
|
144
162
|
* @default 2
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { TDataCellConfig } from '../types';
|
|
2
|
+
export { useDataCellAction } from './useDataCellAction';
|
|
2
3
|
/** 将 普通数据 转 dataCell 数据 */
|
|
3
4
|
export declare const dataToDataCellData: (oldDataSource?: Record<string, any>[], config?: TDataCellConfig) => Record<string, any>[] | undefined;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
2
|
import { get } from 'radash';
|
|
3
|
+
export { useDataCellAction } from "./useDataCellAction";
|
|
4
|
+
|
|
3
5
|
// 缓存编译后的正则表达式
|
|
4
6
|
var TEMPLATE_REGEX = /"{{\s*(.+?)\s*}}"/g;
|
|
5
7
|
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { useNavigate } from 'react-router-dom';
|
|
3
|
+
import { IDataCellDropdown, IDataCellProps, TCellActionExtend, TGroupV2 } from '../types';
|
|
4
|
+
type TNavigate = ReturnType<typeof useNavigate>;
|
|
5
|
+
/** 执行 TCellActionExtend 的 action 操作 */
|
|
6
|
+
export declare const executeAction: (matched: TCellActionExtend, navigate?: TNavigate) => void;
|
|
7
|
+
/** 构建 Dropdown 的 menu 配置 */
|
|
8
|
+
export declare const buildDropdownMenu: (dropdown: IDataCellDropdown, onClick?: IDataCellProps['onClick'], item?: IDataCellProps['items'][number], subItem?: Exclude<TGroupV2['props'], undefined>['items'][number], navigate?: TNavigate) => {
|
|
9
|
+
items: {
|
|
10
|
+
label: string | (import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & string) | (Iterable<import("react").ReactNode> & string) | (import("react").ReactPortal & string) | undefined;
|
|
11
|
+
key: string;
|
|
12
|
+
}[];
|
|
13
|
+
onClick: ({ key }: {
|
|
14
|
+
key: string;
|
|
15
|
+
}) => void;
|
|
16
|
+
};
|
|
17
|
+
/** DataCell action 处理 hook */
|
|
18
|
+
export declare const useDataCellAction: () => {
|
|
19
|
+
navigate: import("react-router-dom").NavigateFunction | undefined;
|
|
20
|
+
handleAction: (action: TCellActionExtend) => void;
|
|
21
|
+
createDropdownMenu: (dropdown: IDataCellDropdown, onClick?: IDataCellProps['onClick'], item?: IDataCellProps['items'][number], subItem?: Exclude<TGroupV2['props'], undefined>['items'][number]) => {
|
|
22
|
+
items: {
|
|
23
|
+
label: string | (import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & string) | (Iterable<import("react").ReactNode> & string) | (import("react").ReactPortal & string) | undefined;
|
|
24
|
+
key: string;
|
|
25
|
+
}[];
|
|
26
|
+
onClick: ({ key }: {
|
|
27
|
+
key: string;
|
|
28
|
+
}) => void;
|
|
29
|
+
};
|
|
30
|
+
showFileViewer: (options: import("../../..").IFileViewerOptions) => void;
|
|
31
|
+
};
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { downloadResourceFile, showFileViewer } from "../../..";
|
|
2
|
+
import { useNavigate } from 'react-router-dom';
|
|
3
|
+
/** 执行 TCellActionExtend 的 action 操作 */
|
|
4
|
+
export var executeAction = function executeAction(matched, navigate) {
|
|
5
|
+
switch (matched.action) {
|
|
6
|
+
case 'url':
|
|
7
|
+
{
|
|
8
|
+
var _matched$urlTarget;
|
|
9
|
+
var target = (_matched$urlTarget = matched.urlTarget) !== null && _matched$urlTarget !== void 0 ? _matched$urlTarget : '_blank';
|
|
10
|
+
if (target === '_blank') {
|
|
11
|
+
window.open(matched.value || '', '_blank', 'noopener,noreferrer');
|
|
12
|
+
} else if (navigate) {
|
|
13
|
+
navigate(matched.value || '');
|
|
14
|
+
} else {
|
|
15
|
+
window.location.href = matched.value || '';
|
|
16
|
+
}
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
case 'file':
|
|
20
|
+
downloadResourceFile(matched.value || '');
|
|
21
|
+
break;
|
|
22
|
+
case 'custom':
|
|
23
|
+
case 'default':
|
|
24
|
+
default:
|
|
25
|
+
break;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/** 构建 Dropdown 的 menu 配置 */
|
|
30
|
+
export var buildDropdownMenu = function buildDropdownMenu(dropdown, _onClick, item, subItem, navigate) {
|
|
31
|
+
return {
|
|
32
|
+
items: dropdown.items.map(function (_ref) {
|
|
33
|
+
var label = _ref.label,
|
|
34
|
+
key = _ref.key;
|
|
35
|
+
return {
|
|
36
|
+
label: label,
|
|
37
|
+
key: key
|
|
38
|
+
};
|
|
39
|
+
}),
|
|
40
|
+
onClick: function onClick(_ref2) {
|
|
41
|
+
var key = _ref2.key;
|
|
42
|
+
var matched = dropdown.items.find(function (i) {
|
|
43
|
+
return i.key === key;
|
|
44
|
+
});
|
|
45
|
+
if (!matched) return;
|
|
46
|
+
executeAction(matched, navigate);
|
|
47
|
+
if (matched.action === 'custom') {
|
|
48
|
+
_onClick === null || _onClick === void 0 || _onClick(item, subItem, matched);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
/** DataCell action 处理 hook */
|
|
55
|
+
export var useDataCellAction = function useDataCellAction() {
|
|
56
|
+
var navigate;
|
|
57
|
+
try {
|
|
58
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
59
|
+
navigate = useNavigate();
|
|
60
|
+
} catch (_unused) {
|
|
61
|
+
// 不在 Router 上下文中时 navigate 为 undefined，回退到 window.location
|
|
62
|
+
}
|
|
63
|
+
var handleAction = function handleAction(action) {
|
|
64
|
+
executeAction(action, navigate);
|
|
65
|
+
};
|
|
66
|
+
var createDropdownMenu = function createDropdownMenu(dropdown, onClick, item, subItem) {
|
|
67
|
+
return buildDropdownMenu(dropdown, onClick, item, subItem, navigate);
|
|
68
|
+
};
|
|
69
|
+
return {
|
|
70
|
+
navigate: navigate,
|
|
71
|
+
handleAction: handleAction,
|
|
72
|
+
createDropdownMenu: createDropdownMenu,
|
|
73
|
+
showFileViewer: showFileViewer
|
|
74
|
+
};
|
|
75
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teamias/rex-design",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.23",
|
|
4
4
|
"description": "A react library developed with dumi",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -85,6 +85,8 @@
|
|
|
85
85
|
"react-dom": "^18.3.1",
|
|
86
86
|
"react-intl": "^7.1.11",
|
|
87
87
|
"react-quick-pinch-zoom": "^5.1.1",
|
|
88
|
+
"react-router": "6",
|
|
89
|
+
"react-router-dom": "6.3.0",
|
|
88
90
|
"styled-components": "^6.1.19"
|
|
89
91
|
},
|
|
90
92
|
"devDependencies": {
|
|
@@ -119,7 +121,9 @@
|
|
|
119
121
|
"antd": ">=5.0.0",
|
|
120
122
|
"react": ">=16.9.0",
|
|
121
123
|
"react-dom": ">=16.9.0",
|
|
122
|
-
"react-intl": ">=3.0.0"
|
|
124
|
+
"react-intl": ">=3.0.0",
|
|
125
|
+
"react-router": ">=6.0.0",
|
|
126
|
+
"react-router-dom": ">=6.0.0"
|
|
123
127
|
},
|
|
124
128
|
"publishConfig": {
|
|
125
129
|
"access": "public"
|