@kep-platform/basic-component 0.0.13 → 0.0.14

Sign up to get free protection for your applications and to get access to all the features.
@@ -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, "dataIndex" | "render"> & {
13
+ }, Omit<ColumnType, "render" | "dataIndex"> & {
14
14
  key: React.Key;
15
15
  title?: React.ReactNode;
16
16
  index?: number | undefined;
@@ -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, Tree } from "./..";
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
- children: []
45
- }, {
46
- key: '3',
47
- title: 'jss',
48
- name: 'jss',
49
- children: [],
50
- count: 2
51
- }, {
52
- key: '10',
53
- title: 'jss',
54
- name: 'jss',
55
- children: [],
56
- count: 2
57
- }, {
58
- key: '20',
59
- title: '3',
60
- children: [],
61
- count: 2
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.FC<MainPropertyProps>;
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 MainProperty(_ref) {
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, null, /*#__PURE__*/React.createElement(MainArea, {
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 _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 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 { MainProperty, TreeNodeController } from "./TreeNode";
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 = 0;
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
- _ref$groupBy = _ref.groupBy,
95
- groupBy = _ref$groupBy === void 0 ? null : _ref$groupBy;
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 (_ref2) {
100
- var title = _ref2.title,
101
- dataIndex = _ref2.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
- }, !treeNodeGroup && !groupBy && treeData.map(function (node) {
191
- return /*#__PURE__*/React.createElement(TreeNodeController, {
192
- key: node[fieldNames.key],
193
- selectedKeys: selectedKeys,
194
- onSelect: onSelect,
195
- expandedKeys: expandedKeys,
196
- onExpand: onExpand,
197
- width: isTableMode && !isFlex ? rowWidth : undefined,
198
- node: node,
199
- fieldNames: fieldNames,
200
- isFlex: isFlex,
201
- isTableMode: !!isTableMode,
202
- columns: columns,
203
- multiple: multiple,
204
- level: rootLevel,
205
- mainWidth: titleWidth,
206
- contextMenuRender: contextMenuRender,
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;
@@ -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 };
@@ -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 treeNode = /*#__PURE__*/React.createElement(TreeNode, {
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, contextMenuRender && /*#__PURE__*/React.createElement(Menu.Popup, {
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
- }, treeNode), !contextMenuRender && treeNode, expanded && node.children.map(function (childNode) {
129
- return /*#__PURE__*/React.createElement(TreeNodeController, {
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
- onExpand: onExpand,
143
- expandedKeys: expandedKeys,
144
- contextMenuRender: contextMenuRender,
145
- titleRender: titleRender
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.13",
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": "326ab1de4aaa605ef65582b87238e2d10a581600",
77
+ "gitHead": "b346fc9c989221248d4882e8c3f7833e53750e92",
78
78
  "dependencies": {
79
79
  "@ant-design/icons": "^5.3.7",
80
- "@kep-platform/hooks": "^0.0.13",
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"