@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.
@@ -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"