@kep-platform/basic-component 0.0.13 → 0.0.14
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/Columns/Columns.d.ts +1 -1
- package/dist/Tree/BOMTree.js +24 -21
- package/dist/Tree/MainProperties.d.ts +1 -1
- package/dist/Tree/MainProperties.js +9 -5
- package/dist/Tree/Tree.js +33 -118
- package/dist/Tree/TreeNode.d.ts +3 -2
- package/dist/Tree/TreeNode.js +107 -28
- package/package.json +3 -3
@@ -10,7 +10,7 @@ export type ColumnsProps = {
|
|
10
10
|
} & HtmlHTMLAttributes<HTMLUListElement>;
|
11
11
|
export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
|
12
12
|
ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
|
13
|
-
}, Omit<ColumnType, "
|
13
|
+
}, Omit<ColumnType, "render" | "dataIndex"> & {
|
14
14
|
key: React.Key;
|
15
15
|
title?: React.ReactNode;
|
16
16
|
index?: number | undefined;
|
package/dist/Tree/BOMTree.js
CHANGED
@@ -4,9 +4,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
4
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
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
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
7
|
-
import { GlobalStyles
|
7
|
+
import { GlobalStyles } from "./..";
|
8
8
|
import React, { useState } from 'react';
|
9
9
|
import styled from 'styled-components';
|
10
|
+
import Tree from "./Tree";
|
10
11
|
var Title = styled.div.withConfig({
|
11
12
|
displayName: "Title",
|
12
13
|
componentId: "basic-component-347b__sc-klaw2r-0"
|
@@ -24,6 +25,7 @@ export default (function () {
|
|
24
25
|
key: '1',
|
25
26
|
title: 'jss',
|
26
27
|
count: 1,
|
28
|
+
groupBy: 'count',
|
27
29
|
children: [{
|
28
30
|
key: '4',
|
29
31
|
title: 'skjdfkljasklfjkljdsklajfkl就是要长一的点点滴滴的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒',
|
@@ -41,24 +43,25 @@ export default (function () {
|
|
41
43
|
key: '2121212121212',
|
42
44
|
title: '2',
|
43
45
|
count: 1,
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
46
|
+
groupBy: 'count',
|
47
|
+
children: [{
|
48
|
+
key: '3',
|
49
|
+
title: 'jss',
|
50
|
+
name: 'jss',
|
51
|
+
children: [],
|
52
|
+
count: 2
|
53
|
+
}, {
|
54
|
+
key: '10',
|
55
|
+
title: 'jss',
|
56
|
+
name: 'jss',
|
57
|
+
children: [],
|
58
|
+
count: 2
|
59
|
+
}, {
|
60
|
+
key: '20',
|
61
|
+
title: '3',
|
62
|
+
children: [],
|
63
|
+
count: 2
|
64
|
+
}]
|
62
65
|
}];
|
63
66
|
var columns = [{
|
64
67
|
key: 'key',
|
@@ -94,6 +97,7 @@ export default (function () {
|
|
94
97
|
$css: []
|
95
98
|
}), /*#__PURE__*/React.createElement(Tree, {
|
96
99
|
title: /*#__PURE__*/React.createElement(Title, null, "\u6807\u8BC6"),
|
100
|
+
multiple: true,
|
97
101
|
titleWidth: 400,
|
98
102
|
contextMenuRender: contextMenuRender,
|
99
103
|
treeData: treeData,
|
@@ -105,7 +109,6 @@ export default (function () {
|
|
105
109
|
},
|
106
110
|
onExpand: function onExpand(expandedKeys) {
|
107
111
|
return setExpandedKeys(expandedKeys);
|
108
|
-
}
|
109
|
-
groupBy: "count"
|
112
|
+
}
|
110
113
|
}));
|
111
114
|
});
|
@@ -8,5 +8,5 @@ type MainPropertyProps = {
|
|
8
8
|
property?: ReactNode;
|
9
9
|
isFlex: boolean;
|
10
10
|
};
|
11
|
-
export declare const MainProperty: React.
|
11
|
+
export declare const MainProperty: React.ForwardRefExoticComponent<MainPropertyProps & React.RefAttributes<HTMLDivElement>>;
|
12
12
|
export {};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { forwardRef } from 'react';
|
2
2
|
import styled from 'styled-components';
|
3
3
|
import { Flex, FlexItem } from "../Flex";
|
4
4
|
export var MainArea = styled(FlexItem).withConfig({
|
@@ -10,14 +10,18 @@ var PropertiesArea = styled(FlexItem).withConfig({
|
|
10
10
|
componentId: "basic-component-347b__sc-u1pspr-1"
|
11
11
|
})([""]);
|
12
12
|
/* 有属性就渲染属性,没有属性就不处理 */
|
13
|
-
export var MainProperty = function
|
13
|
+
export var MainProperty = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
14
14
|
var mainWidth = _ref.mainWidth,
|
15
15
|
main = _ref.main,
|
16
16
|
property = _ref.property,
|
17
17
|
isFlex = _ref.isFlex;
|
18
|
-
if (property) return /*#__PURE__*/React.createElement(Flex,
|
18
|
+
if (property) return /*#__PURE__*/React.createElement(Flex, {
|
19
|
+
ref: ref
|
20
|
+
}, /*#__PURE__*/React.createElement(MainArea, {
|
19
21
|
width: mainWidth
|
20
22
|
}, main), /*#__PURE__*/React.createElement(PropertiesArea, {
|
21
23
|
flex: isFlex ? 1 : undefined
|
22
|
-
}, property));else return main
|
23
|
-
|
24
|
+
}, property));else return /*#__PURE__*/React.cloneElement(main, {
|
25
|
+
ref: ref
|
26
|
+
});
|
27
|
+
});
|
package/dist/Tree/Tree.js
CHANGED
@@ -1,17 +1,15 @@
|
|
1
|
-
function
|
2
|
-
function
|
3
|
-
function
|
4
|
-
function
|
5
|
-
|
6
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
7
|
-
import React, { useMemo, useRef, useState } from 'react';
|
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
|
+
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; }
|
3
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
4
|
+
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); }
|
5
|
+
import React, { useMemo, useRef } from 'react';
|
8
6
|
import styled, { css } from 'styled-components';
|
9
7
|
import { BoxShadowBox } from "../BoxShadowBox";
|
10
8
|
import { Column, Columns } from "../Columns";
|
11
9
|
import { DefaultColumnWidth } from "../Columns/Columns";
|
12
10
|
import { List } from "../List";
|
13
|
-
import { MainArea } from "./MainProperties";
|
14
|
-
import {
|
11
|
+
import { MainArea, MainProperty } from "./MainProperties";
|
12
|
+
import { TreeNodeController, nodeTypeMap } from "./TreeNode";
|
15
13
|
var TreeContainer = styled.div.withConfig({
|
16
14
|
displayName: "TreeContainer",
|
17
15
|
componentId: "basic-component-347b__sc-n4lkq9-0"
|
@@ -33,35 +31,7 @@ var TreeHeader = styled.div.withConfig({
|
|
33
31
|
return css(["width:", "px;"], props.width);
|
34
32
|
}
|
35
33
|
}, Column, MainArea);
|
36
|
-
var rootLevel =
|
37
|
-
var TreeGroupNode = styled.div.withConfig({
|
38
|
-
displayName: "TreeGroupNode",
|
39
|
-
componentId: "basic-component-347b__sc-n4lkq9-3"
|
40
|
-
})(["height:40px;line-height:40px;padding:0 16px;color:var(--kep-platform-color-primary);cursor:pointer;border:1px dotted var(--kep-platform-color-primary);"]);
|
41
|
-
var TreeNodeGroup = function TreeNodeGroup(props) {
|
42
|
-
var _useState = useState(false),
|
43
|
-
_useState2 = _slicedToArray(_useState, 2),
|
44
|
-
expanded = _useState2[0],
|
45
|
-
setExpanded = _useState2[1];
|
46
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeGroupNode, {
|
47
|
-
onClick: function onClick() {
|
48
|
-
return setExpanded(!expanded);
|
49
|
-
}
|
50
|
-
}, props.groupName, "\uFF1A", props.groupValue), expanded && props.children);
|
51
|
-
};
|
52
|
-
function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
|
53
|
-
var grouped = arr.reduce(function (acc, obj) {
|
54
|
-
var key = obj[propertyName] || obj[fieldNames.key];
|
55
|
-
if (key) {
|
56
|
-
if (!acc[key]) {
|
57
|
-
acc[key] = [];
|
58
|
-
}
|
59
|
-
acc[key].push(obj);
|
60
|
-
} else {}
|
61
|
-
return acc;
|
62
|
-
}, {});
|
63
|
-
return grouped;
|
64
|
-
}
|
34
|
+
var rootLevel = -1;
|
65
35
|
var Tree = function Tree(_ref) {
|
66
36
|
var treeData = _ref.treeData,
|
67
37
|
_ref$columns = _ref.columns,
|
@@ -90,15 +60,17 @@ var Tree = function Tree(_ref) {
|
|
90
60
|
_ref$multiple = _ref.multiple,
|
91
61
|
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
92
62
|
_ref$bordered = _ref.bordered,
|
93
|
-
bordered = _ref$bordered === void 0 ? false : _ref$bordered
|
94
|
-
|
95
|
-
|
63
|
+
bordered = _ref$bordered === void 0 ? false : _ref$bordered;
|
64
|
+
var rootNode = useMemo(function () {
|
65
|
+
return _defineProperty(_defineProperty(_defineProperty({}, fieldNames.key, 'root'), "nodeType", nodeTypeMap.virtual), "children", treeData);
|
66
|
+
}, [treeData]);
|
67
|
+
|
96
68
|
/* 复用Columns组件显示行,构造一个类似表格头数据来适应Columns组件的数据结构 */
|
97
69
|
var treeHeaderRowData = useMemo(function () {
|
98
70
|
var data = {};
|
99
|
-
if (columns) columns.forEach(function (
|
100
|
-
var title =
|
101
|
-
dataIndex =
|
71
|
+
if (columns) columns.forEach(function (_ref3) {
|
72
|
+
var title = _ref3.title,
|
73
|
+
dataIndex = _ref3.dataIndex;
|
102
74
|
data[dataIndex] = title;
|
103
75
|
});
|
104
76
|
return data;
|
@@ -143,15 +115,6 @@ var Tree = function Tree(_ref) {
|
|
143
115
|
}
|
144
116
|
return newColumns;
|
145
117
|
}, [columns, fieldNames]);
|
146
|
-
var treeNodeGroup = useMemo(function () {
|
147
|
-
if (groupBy) return groupTreeNodeByPropertyName(treeData, groupBy, fieldNames);
|
148
|
-
}, [treeData, groupBy]);
|
149
|
-
var groupByTitle = useMemo(function () {
|
150
|
-
var _columns$find;
|
151
|
-
return (_columns$find = columns.find(function (column) {
|
152
|
-
return column.dataIndex === groupBy;
|
153
|
-
})) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
|
154
|
-
}, [columns, groupBy]);
|
155
118
|
var boxShadowBox = useRef(null);
|
156
119
|
/* 树组件的结构其实比较简单,就是一个树标题(TableMode下),然后树节点形成的列表 */
|
157
120
|
return /*#__PURE__*/React.createElement(TreeContainer, {
|
@@ -187,71 +150,23 @@ var Tree = function Tree(_ref) {
|
|
187
150
|
isFlex: isFlex
|
188
151
|
})), /*#__PURE__*/React.createElement(TreeBody, {
|
189
152
|
direction: "column"
|
190
|
-
},
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
titleRender: titleRender
|
208
|
-
});
|
209
|
-
}), treeNodeGroup && groupBy && Object.keys(treeNodeGroup).map(function (key) {
|
210
|
-
var group = treeNodeGroup[key];
|
211
|
-
if (group.length < 2) {
|
212
|
-
return /*#__PURE__*/React.createElement(TreeNodeController, {
|
213
|
-
key: group[0][fieldNames.key],
|
214
|
-
selectedKeys: selectedKeys,
|
215
|
-
onSelect: onSelect,
|
216
|
-
expandedKeys: expandedKeys,
|
217
|
-
onExpand: onExpand,
|
218
|
-
width: isTableMode && !isFlex ? rowWidth : undefined,
|
219
|
-
node: group[0],
|
220
|
-
fieldNames: fieldNames,
|
221
|
-
isFlex: isFlex,
|
222
|
-
isTableMode: !!isTableMode,
|
223
|
-
columns: columns,
|
224
|
-
multiple: multiple,
|
225
|
-
level: rootLevel,
|
226
|
-
mainWidth: titleWidth,
|
227
|
-
contextMenuRender: contextMenuRender,
|
228
|
-
titleRender: titleRender
|
229
|
-
});
|
230
|
-
}
|
231
|
-
return /*#__PURE__*/React.createElement(TreeNodeGroup, {
|
232
|
-
groupName: groupByTitle,
|
233
|
-
key: key,
|
234
|
-
groupValue: key
|
235
|
-
}, treeNodeGroup[key].map(function (node) {
|
236
|
-
return /*#__PURE__*/React.createElement(TreeNodeController, {
|
237
|
-
key: node[fieldNames.key],
|
238
|
-
selectedKeys: selectedKeys,
|
239
|
-
onSelect: onSelect,
|
240
|
-
expandedKeys: expandedKeys,
|
241
|
-
onExpand: onExpand,
|
242
|
-
width: isTableMode && !isFlex ? rowWidth : undefined,
|
243
|
-
node: node,
|
244
|
-
fieldNames: fieldNames,
|
245
|
-
isFlex: isFlex,
|
246
|
-
isTableMode: !!isTableMode,
|
247
|
-
columns: columns,
|
248
|
-
multiple: multiple,
|
249
|
-
level: rootLevel + 1,
|
250
|
-
mainWidth: titleWidth,
|
251
|
-
contextMenuRender: contextMenuRender,
|
252
|
-
titleRender: titleRender
|
253
|
-
});
|
254
|
-
}));
|
153
|
+
}, /*#__PURE__*/React.createElement(TreeNodeController, {
|
154
|
+
key: rootNode[fieldNames.key],
|
155
|
+
selectedKeys: selectedKeys,
|
156
|
+
onSelect: onSelect,
|
157
|
+
expandedKeys: expandedKeys,
|
158
|
+
onExpand: onExpand,
|
159
|
+
width: isTableMode && !isFlex ? rowWidth : undefined,
|
160
|
+
node: rootNode,
|
161
|
+
fieldNames: fieldNames,
|
162
|
+
isFlex: isFlex,
|
163
|
+
isTableMode: isTableMode,
|
164
|
+
columns: columns,
|
165
|
+
multiple: multiple,
|
166
|
+
level: rootLevel,
|
167
|
+
mainWidth: titleWidth,
|
168
|
+
contextMenuRender: contextMenuRender,
|
169
|
+
titleRender: titleRender
|
255
170
|
})));
|
256
171
|
};
|
257
172
|
export default Tree;
|
package/dist/Tree/TreeNode.d.ts
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
import React, { Key, ReactNode } from 'react';
|
2
|
-
import { MainProperty } from './MainProperties';
|
3
2
|
export type TreeNodeControllerProps = {
|
4
3
|
node: TreeNodeType;
|
5
4
|
selectedKeys: Key[];
|
@@ -17,5 +16,7 @@ export type TreeNodeControllerProps = {
|
|
17
16
|
contextMenuRender?: (node: TreeNodeType) => MenuItem[];
|
18
17
|
titleRender?: ((node: TreeNodeType) => ReactNode | null) | null | undefined;
|
19
18
|
};
|
19
|
+
export declare const nodeTypeMap: {
|
20
|
+
virtual: string;
|
21
|
+
};
|
20
22
|
export declare const TreeNodeController: React.FC<TreeNodeControllerProps>;
|
21
|
-
export { MainProperty };
|
package/dist/Tree/TreeNode.js
CHANGED
@@ -1,5 +1,11 @@
|
|
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; }
|
1
7
|
import { CaretRightOutlined } from '@ant-design/icons';
|
2
|
-
import React, { useCallback, useMemo } from 'react';
|
8
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
3
9
|
import styled, { css } from 'styled-components';
|
4
10
|
import { Column, Columns } from "../Columns";
|
5
11
|
import { Flex, FlexItem } from "../Flex";
|
@@ -27,6 +33,62 @@ var TreeNode = styled(ListItem).withConfig({
|
|
27
33
|
return css(["background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;& ", ",& ", "{background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;}& ", "{overflow-x:auto;& > ", "{width:auto;}}"], Column, MainArea, MainArea, Flex);
|
28
34
|
}
|
29
35
|
});
|
36
|
+
var TreeNodeGroupNode = styled.li.withConfig({
|
37
|
+
displayName: "TreeNodeGroupNode",
|
38
|
+
componentId: "basic-component-347b__sc-tzoomn-2"
|
39
|
+
})(["height:40px;line-height:40px;background-color:var(--kep-platform-color-primary);color:var(--kep-platform-color-white);& span{color:var(--kep-platform-color-white) !important;}cursor:pointer;", ""], function (props) {
|
40
|
+
if (props.width) {
|
41
|
+
return css(["width:", "px;"], props.width);
|
42
|
+
}
|
43
|
+
});
|
44
|
+
var TreeNodeGroup = function TreeNodeGroup(props) {
|
45
|
+
var _useState = useState(false),
|
46
|
+
_useState2 = _slicedToArray(_useState, 2),
|
47
|
+
expanded = _useState2[0],
|
48
|
+
setExpanded = _useState2[1];
|
49
|
+
if (React.Children.toArray(props.children).length > 1) return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeNodeGroupNode, {
|
50
|
+
width: props.width,
|
51
|
+
onClick: function onClick() {
|
52
|
+
return setExpanded(!expanded);
|
53
|
+
}
|
54
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
55
|
+
width: props.mainWidth,
|
56
|
+
style: {
|
57
|
+
position: 'sticky',
|
58
|
+
left: 0
|
59
|
+
}
|
60
|
+
}, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
|
61
|
+
level: props.level
|
62
|
+
})), /*#__PURE__*/React.createElement(FlexItem, {
|
63
|
+
width: 24,
|
64
|
+
align: "center",
|
65
|
+
cursor: "pointer"
|
66
|
+
}, /*#__PURE__*/React.createElement(ExpandedIcon, {
|
67
|
+
expanded: expanded
|
68
|
+
})), /*#__PURE__*/React.createElement(FlexItem, {
|
69
|
+
flex: 1
|
70
|
+
}, props.groupName, " : ", props.groupValue))), expanded && React.Children.map(props.children, function (child) {
|
71
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
72
|
+
level: props.level + 1
|
73
|
+
});
|
74
|
+
}));else return props.children;
|
75
|
+
};
|
76
|
+
function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
|
77
|
+
var grouped = arr.reduce(function (acc, obj) {
|
78
|
+
var key = obj[propertyName || fieldNames.key] || obj[fieldNames.key];
|
79
|
+
if (key) {
|
80
|
+
if (!acc[key]) {
|
81
|
+
acc[key] = [];
|
82
|
+
}
|
83
|
+
acc[key].push(obj);
|
84
|
+
} else {}
|
85
|
+
return acc;
|
86
|
+
}, {});
|
87
|
+
return grouped;
|
88
|
+
}
|
89
|
+
export var nodeTypeMap = {
|
90
|
+
virtual: 'virtual'
|
91
|
+
};
|
30
92
|
export var TreeNodeController = function TreeNodeController(_ref) {
|
31
93
|
var node = _ref.node,
|
32
94
|
_ref$selectedKeys = _ref.selectedKeys,
|
@@ -52,8 +114,17 @@ export var TreeNodeController = function TreeNodeController(_ref) {
|
|
52
114
|
return selectedKeys.includes(node[fieldNames.key]);
|
53
115
|
}, [selectedKeys, fieldNames, node]);
|
54
116
|
var expanded = useMemo(function () {
|
55
|
-
return expandedKeys.includes(node[fieldNames.key]);
|
117
|
+
return expandedKeys.includes(node[fieldNames.key]) || node.nodeType === nodeTypeMap.virtual;
|
56
118
|
}, [expandedKeys, fieldNames, node]);
|
119
|
+
var treeNodeGroup = useMemo(function () {
|
120
|
+
return groupTreeNodeByPropertyName(node.children || [], node.groupBy, fieldNames);
|
121
|
+
}, [node.children, node.groupBy]);
|
122
|
+
var groupTitle = useMemo(function () {
|
123
|
+
var _columns$find;
|
124
|
+
return (_columns$find = columns.find(function (column) {
|
125
|
+
return column.dataIndex === node.groupBy;
|
126
|
+
})) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
|
127
|
+
}, [columns, node.groupBy]);
|
57
128
|
var onClickNodeHandler = useCallback(function (e) {
|
58
129
|
if (multiple) {
|
59
130
|
if (selected) {
|
@@ -96,11 +167,7 @@ export var TreeNodeController = function TreeNodeController(_ref) {
|
|
96
167
|
});
|
97
168
|
}
|
98
169
|
}, [expandedKeys, onExpand, expanded]);
|
99
|
-
var
|
100
|
-
selected: selectedKeys.includes(node[fieldNames.key]),
|
101
|
-
width: width,
|
102
|
-
onClick: onClickNodeHandler
|
103
|
-
}, /*#__PURE__*/React.createElement(MainProperty, {
|
170
|
+
var nodeEntity = /*#__PURE__*/React.createElement(MainProperty, {
|
104
171
|
isFlex: isFlex,
|
105
172
|
mainWidth: mainWidth,
|
106
173
|
main: /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
|
@@ -121,29 +188,41 @@ export var TreeNodeController = function TreeNodeController(_ref) {
|
|
121
188
|
rowData: node,
|
122
189
|
isFlex: isFlex
|
123
190
|
})
|
124
|
-
})
|
125
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
191
|
+
});
|
192
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, node.nodeType !== nodeTypeMap.virtual && /*#__PURE__*/React.createElement(TreeNode, {
|
193
|
+
selected: selectedKeys.includes(node[fieldNames.key]),
|
194
|
+
width: width,
|
195
|
+
onClick: onClickNodeHandler
|
196
|
+
}, contextMenuRender ? /*#__PURE__*/React.createElement(Menu.Popup, {
|
126
197
|
trigger: "contextmenu",
|
127
198
|
items: contextMenuRender(node)
|
128
|
-
},
|
129
|
-
return /*#__PURE__*/React.createElement(
|
199
|
+
}, nodeEntity) : nodeEntity), expanded && treeNodeGroup && Object.keys(treeNodeGroup).map(function (groupKey) {
|
200
|
+
return /*#__PURE__*/React.createElement(TreeNodeGroup, {
|
130
201
|
width: width,
|
131
|
-
selectedKeys: selectedKeys,
|
132
|
-
key: childNode[fieldNames.key],
|
133
|
-
node: childNode,
|
134
|
-
fieldNames: fieldNames,
|
135
|
-
isFlex: isFlex,
|
136
|
-
isTableMode: isTableMode,
|
137
|
-
columns: columns,
|
138
|
-
onSelect: onSelect,
|
139
|
-
multiple: multiple,
|
140
|
-
level: childLevel,
|
141
202
|
mainWidth: mainWidth,
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
})
|
203
|
+
key: groupKey,
|
204
|
+
groupValue: groupKey,
|
205
|
+
groupName: groupTitle,
|
206
|
+
level: childLevel
|
207
|
+
}, treeNodeGroup[groupKey].map(function (childNode) {
|
208
|
+
return /*#__PURE__*/React.createElement(TreeNodeController, {
|
209
|
+
width: width,
|
210
|
+
selectedKeys: selectedKeys,
|
211
|
+
key: childNode[fieldNames.key],
|
212
|
+
node: childNode,
|
213
|
+
fieldNames: fieldNames,
|
214
|
+
isFlex: isFlex,
|
215
|
+
isTableMode: isTableMode,
|
216
|
+
columns: columns,
|
217
|
+
onSelect: onSelect,
|
218
|
+
multiple: multiple,
|
219
|
+
level: childLevel,
|
220
|
+
mainWidth: mainWidth,
|
221
|
+
onExpand: onExpand,
|
222
|
+
expandedKeys: expandedKeys,
|
223
|
+
contextMenuRender: contextMenuRender,
|
224
|
+
titleRender: titleRender
|
225
|
+
});
|
226
|
+
}));
|
147
227
|
}));
|
148
|
-
};
|
149
|
-
export { MainProperty };
|
228
|
+
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@kep-platform/basic-component",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.14",
|
4
4
|
"description": "A react library developed with dumi",
|
5
5
|
"module": "dist/index.js",
|
6
6
|
"types": "dist/index.d.ts",
|
@@ -74,10 +74,10 @@
|
|
74
74
|
"react-dom": "^18.0.0",
|
75
75
|
"stylelint": "^14.9.1"
|
76
76
|
},
|
77
|
-
"gitHead": "
|
77
|
+
"gitHead": "b346fc9c989221248d4882e8c3f7833e53750e92",
|
78
78
|
"dependencies": {
|
79
79
|
"@ant-design/icons": "^5.3.7",
|
80
|
-
"@kep-platform/hooks": "^0.0.
|
80
|
+
"@kep-platform/hooks": "^0.0.14",
|
81
81
|
"color": "^4.2.3",
|
82
82
|
"rc-pagination": "^4.1.0",
|
83
83
|
"styled-components": "^6.1.11"
|