@kep-platform/basic-component 0.0.13 → 0.0.15

package/dist/@types/index.d.ts

@@ -29,7 +29,6 @@ declare global {
         key: Key;
         title?: string;
         label: ReactNode;
-        onSelect?(item: MenuItem): void;
     };
     type RequiredTreeNodeKeys = 'key' | 'title' | 'children';
 

package/dist/Columns/Columns.d.ts

@@ -10,7 +10,7 @@ export type ColumnsProps = {
 } & HtmlHTMLAttributes<HTMLUListElement>;
 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"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, Omit<ColumnType, "dataIndex" | "render"> & {
+}, Omit<ColumnType, "render" | "dataIndex"> & {
     key: React.Key;
     title?: React.ReactNode;
     index?: number | undefined;

package/dist/Menu/Menu.d.ts

@@ -1,9 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, type Key } from 'react';
 export type MenuProps = {
     items: MenuItem[];
     direction?: Direction;
+    activeKey?: Key;
+    onSelect?: (key: Key, item: MenuItem) => void;
 };
-declare function Menu({ items, direction }: MenuProps): React.JSX.Element;
+declare function Menu({ items, direction, onSelect, activeKey: outerActiveKey }: MenuProps): React.JSX.Element;
 declare namespace Menu {
     var Popup: typeof PopupMenu;
 }

package/dist/Menu/Menu.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "trigger"];
+var _excluded = ["children", "onSelect", "activeKey", "trigger"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -20,7 +20,7 @@ var MenuList = styled(List).withConfig({
 var MenuListItem = styled(ListItem).withConfig({
   displayName: "MenuListItem",
   componentId: "basic-component-347b__sc-d665dh-1"
-})(["background-color:var(--kep-platform-color-bg-base);border-radius:var(--kep-platform-border-radius-sm);margin:var(--kep-platform-margin-xxxs);padding:0 var(--kep-platform-padding-xs);height:var(--kep-platform-menu-item-height);line-height:var(--kep-platform-menu-item-line-height);&:hover{background-color:var(--kep-platform-color-bg-hover);}", ""], function (props) {
+})(["background-color:var(--kep-platform-color-bg-base);border-radius:var(--kep-platform-border-radius-sm);margin:var(--kep-platform-margin-xxxs);padding:0 var(--kep-platform-padding-xs);height:var(--kep-platform-menu-item-height);line-height:var(--kep-platform-menu-item-line-height);color:var(--kep-platform-color-text) !important;&:hover{background-color:var(--kep-platform-color-bg-hover);}", ""], function (props) {
   if (props.active) {
     return css(["background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;"]);
   }
@@ -28,38 +28,48 @@ var MenuListItem = styled(ListItem).withConfig({
 function Menu(_ref) {
   var items = _ref.items,
     _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'row' : _ref$direction;
-  var _useState = useState(null),
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    onSelect = _ref.onSelect,
+    outerActiveKey = _ref.activeKey;
+  var _useState = useState(outerActiveKey),
     _useState2 = _slicedToArray(_useState, 2),
     activeKey = _useState2[0],
     setActiveKey = _useState2[1];
-  var menuClickHandler = useCallback(function (e) {
-    var dataKey = e.target.getAttribute('data-key');
-    setActiveKey(dataKey);
-  }, []);
+  useEffect(function () {
+    setActiveKey(outerActiveKey);
+  }, [outerActiveKey]);
   return /*#__PURE__*/React.createElement(MenuList, {
     direction: direction
   }, items.map(function (item) {
     return /*#__PURE__*/React.createElement(MenuListItem, {
       key: item.key,
       active: activeKey === item.key,
-      onClick: menuClickHandler,
+      onClick: function onClick() {
+        setActiveKey(item.key);
+        onSelect === null || onSelect === void 0 || onSelect(item.key, item);
+      },
       "data-key": item.key
     }, item.label);
   }));
 }
 export function PopupMenu(props) {
   var children = props.children,
+    onSelect = props.onSelect,
+    outerActiveKey = props.activeKey,
     _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
     rest = _objectWithoutProperties(props, _excluded);
-  var _useState3 = useState({
+  var _useState3 = useState(outerActiveKey),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeKey = _useState4[0],
+    setActiveKey = _useState4[1];
+  var _useState5 = useState({
       left: 0,
       top: 0
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    pos = _useState4[0],
-    setPos = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    pos = _useState6[0],
+    setPos = _useState6[1];
   var triggerController = useRef(null);
   var popupBox = useRef(null);
   var mergeProps = useMemo(function () {
@@ -68,7 +78,6 @@ export function PopupMenu(props) {
     };
   }, []);
   var showPopupMenu = useCallback(function (e) {
-    e.stopPropagation();
     e.preventDefault();
     var _ref2 = e,
       clientX = _ref2.clientX,
@@ -77,6 +86,7 @@ export function PopupMenu(props) {
       left: clientX,
       top: clientY
     });
+    setActiveKey(undefined);
   }, []);
   var hidePopupMenu = useCallback(function () {
     setPos({
@@ -84,6 +94,11 @@ export function PopupMenu(props) {
       top: -999
     });
   }, []);
+  var onSelectHandler = useCallback(function (key, item) {
+    onSelect === null || onSelect === void 0 || onSelect(key, item);
+    setActiveKey(key);
+    hidePopupMenu();
+  }, [onSelect, hidePopupMenu]);
   useClickOutsize('mousedown', popupBox, hidePopupMenu);
   useClickOutsize('scroll', popupBox, hidePopupMenu);
   useEffect(function () {
@@ -97,8 +112,11 @@ export function PopupMenu(props) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopupBox, {
       left: pos.left,
       top: pos.top,
-      ref: popupBox
+      ref: popupBox,
+      onClick: hidePopupMenu
     }, /*#__PURE__*/React.createElement(Menu, _extends({}, rest, {
+      activeKey: outerActiveKey || activeKey,
+      onSelect: onSelectHandler,
       direction: "column"
     }))), /*#__PURE__*/React.cloneElement(children, mergeProps));
   } else console.warn('PopupMenu需要一个触发元素!');

package/dist/Tree/BOMTree.js

@@ -4,9 +4,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
 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; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { GlobalStyles, Tree } from "./..";
+import { GlobalStyles } from "./..";
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import Tree from "./Tree";
 var Title = styled.div.withConfig({
   displayName: "Title",
   componentId: "basic-component-347b__sc-klaw2r-0"
@@ -24,6 +25,7 @@ export default (function () {
     key: '1',
     title: 'jss',
     count: 1,
+    groupBy: 'count',
     children: [{
       key: '4',
       title: 'skjdfkljasklfjkljdsklajfkl就是要长一的点点滴滴的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒',
@@ -41,24 +43,25 @@ export default (function () {
     key: '2121212121212',
     title: '2',
     count: 1,
-    children: []
-  }, {
-    key: '3',
-    title: 'jss',
-    name: 'jss',
-    children: [],
-    count: 2
-  }, {
-    key: '10',
-    title: 'jss',
-    name: 'jss',
-    children: [],
-    count: 2
-  }, {
-    key: '20',
-    title: '3',
-    children: [],
-    count: 2
+    groupBy: 'count',
+    children: [{
+      key: '3',
+      title: 'jss',
+      name: 'jss',
+      children: [],
+      count: 2
+    }, {
+      key: '10',
+      title: 'jss',
+      name: 'jss',
+      children: [],
+      count: 2
+    }, {
+      key: '20',
+      title: '3',
+      children: [],
+      count: 2
+    }]
   }];
   var columns = [{
     key: 'key',
@@ -94,8 +97,12 @@ export default (function () {
     $css: []
   }), /*#__PURE__*/React.createElement(Tree, {
     title: /*#__PURE__*/React.createElement(Title, null, "\u6807\u8BC6"),
+    multiple: true,
     titleWidth: 400,
     contextMenuRender: contextMenuRender,
+    onContextMenuItemSelect: function onContextMenuItemSelect(node) {
+      console.log(node.key);
+    },
     treeData: treeData,
     columns: columns,
     selectedKeys: selectedKeys,
@@ -105,7 +112,6 @@ export default (function () {
     },
     onExpand: function onExpand(expandedKeys) {
       return setExpandedKeys(expandedKeys);
-    },
-    groupBy: "count"
+    }
   }));
 });

package/dist/Tree/MainProperties.d.ts

@@ -8,5 +8,5 @@ type MainPropertyProps = {
     property?: ReactNode;
     isFlex: boolean;
 };
-export declare const MainProperty: React.FC<MainPropertyProps>;
+export declare const MainProperty: React.ForwardRefExoticComponent<MainPropertyProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Tree/MainProperties.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { Flex, FlexItem } from "../Flex";
 export var MainArea = styled(FlexItem).withConfig({
@@ -10,14 +10,18 @@ var PropertiesArea = styled(FlexItem).withConfig({
   componentId: "basic-component-347b__sc-u1pspr-1"
 })([""]);
 /* 有属性就渲染属性，没有属性就不处理 */
-export var MainProperty = function MainProperty(_ref) {
+export var MainProperty = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var mainWidth = _ref.mainWidth,
     main = _ref.main,
     property = _ref.property,
     isFlex = _ref.isFlex;
-  if (property) return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(MainArea, {
+  if (property) return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(MainArea, {
     width: mainWidth
   }, main), /*#__PURE__*/React.createElement(PropertiesArea, {
     flex: isFlex ? 1 : undefined
-  }, property));else return main;
-};
+  }, property));else return /*#__PURE__*/React.cloneElement(main, {
+    ref: ref
+  });
+});

package/dist/Tree/Tree.d.ts

@@ -9,7 +9,8 @@ export type TreeProps = {
     titleRender?: ((node: TreeNodeType) => ReactNode | null) | null | undefined;
     onExpand?: onExpandHandler;
     onSelect?: onSelectHandler;
-    contextMenuRender: (node: TreeNodeType) => MenuItem[];
+    contextMenuRender?: (node: TreeNodeType) => MenuItem[];
+    onContextMenuItemSelect?: (node: TreeNodeType, key: Key, item: MenuItem) => void;
     titleWidth?: number;
     title?: ReactNode;
     isFlex?: boolean;

package/dist/Tree/Tree.js

@@ -1,17 +1,15 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-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."); }
-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); }
-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; }
-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; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useMemo, useRef, useState } from 'react';
+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); }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+import React, { useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { BoxShadowBox } from "../BoxShadowBox";
 import { Column, Columns } from "../Columns";
 import { DefaultColumnWidth } from "../Columns/Columns";
 import { List } from "../List";
-import { MainArea } from "./MainProperties";
-import { MainProperty, TreeNodeController } from "./TreeNode";
+import { MainArea, MainProperty } from "./MainProperties";
+import { TreeNodeController, nodeTypeMap } from "./TreeNode";
 var TreeContainer = styled.div.withConfig({
   displayName: "TreeContainer",
   componentId: "basic-component-347b__sc-n4lkq9-0"
@@ -33,35 +31,7 @@ var TreeHeader = styled.div.withConfig({
     return css(["width:", "px;"], props.width);
   }
 }, Column, MainArea);
-var rootLevel = 0;
-var TreeGroupNode = styled.div.withConfig({
-  displayName: "TreeGroupNode",
-  componentId: "basic-component-347b__sc-n4lkq9-3"
-})(["height:40px;line-height:40px;padding:0 16px;color:var(--kep-platform-color-primary);cursor:pointer;border:1px dotted var(--kep-platform-color-primary);"]);
-var TreeNodeGroup = function TreeNodeGroup(props) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expanded = _useState2[0],
-    setExpanded = _useState2[1];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeGroupNode, {
-    onClick: function onClick() {
-      return setExpanded(!expanded);
-    }
-  }, props.groupName, "\uFF1A", props.groupValue), expanded && props.children);
-};
-function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
-  var grouped = arr.reduce(function (acc, obj) {
-    var key = obj[propertyName] || obj[fieldNames.key];
-    if (key) {
-      if (!acc[key]) {
-        acc[key] = [];
-      }
-      acc[key].push(obj);
-    } else {}
-    return acc;
-  }, {});
-  return grouped;
-}
+var rootLevel = -1;
 var Tree = function Tree(_ref) {
   var treeData = _ref.treeData,
     _ref$columns = _ref.columns,
@@ -87,18 +57,21 @@ var Tree = function Tree(_ref) {
     _ref$onExpand = _ref.onExpand,
     onExpand = _ref$onExpand === void 0 ? function () {} : _ref$onExpand,
     contextMenuRender = _ref.contextMenuRender,
+    onContextMenuItemSelect = _ref.onContextMenuItemSelect,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$bordered = _ref.bordered,
-    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
-    _ref$groupBy = _ref.groupBy,
-    groupBy = _ref$groupBy === void 0 ? null : _ref$groupBy;
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered;
+  var rootNode = useMemo(function () {
+    return _defineProperty(_defineProperty(_defineProperty({}, fieldNames.key, 'root'), "nodeType", nodeTypeMap.virtual), "children", treeData);
+  }, [treeData]);
+
   /* 复用Columns组件显示行，构造一个类似表格头数据来适应Columns组件的数据结构 */
   var treeHeaderRowData = useMemo(function () {
     var data = {};
-    if (columns) columns.forEach(function (_ref2) {
-      var title = _ref2.title,
-        dataIndex = _ref2.dataIndex;
+    if (columns) columns.forEach(function (_ref3) {
+      var title = _ref3.title,
+        dataIndex = _ref3.dataIndex;
       data[dataIndex] = title;
     });
     return data;
@@ -143,15 +116,6 @@ var Tree = function Tree(_ref) {
     }
     return newColumns;
   }, [columns, fieldNames]);
-  var treeNodeGroup = useMemo(function () {
-    if (groupBy) return groupTreeNodeByPropertyName(treeData, groupBy, fieldNames);
-  }, [treeData, groupBy]);
-  var groupByTitle = useMemo(function () {
-    var _columns$find;
-    return (_columns$find = columns.find(function (column) {
-      return column.dataIndex === groupBy;
-    })) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
-  }, [columns, groupBy]);
   var boxShadowBox = useRef(null);
   /* 树组件的结构其实比较简单，就是一个树标题（TableMode下），然后树节点形成的列表 */
   return /*#__PURE__*/React.createElement(TreeContainer, {
@@ -187,71 +151,24 @@ var Tree = function Tree(_ref) {
     isFlex: isFlex
   })), /*#__PURE__*/React.createElement(TreeBody, {
     direction: "column"
-  }, !treeNodeGroup && !groupBy && treeData.map(function (node) {
-    return /*#__PURE__*/React.createElement(TreeNodeController, {
-      key: node[fieldNames.key],
-      selectedKeys: selectedKeys,
-      onSelect: onSelect,
-      expandedKeys: expandedKeys,
-      onExpand: onExpand,
-      width: isTableMode && !isFlex ? rowWidth : undefined,
-      node: node,
-      fieldNames: fieldNames,
-      isFlex: isFlex,
-      isTableMode: !!isTableMode,
-      columns: columns,
-      multiple: multiple,
-      level: rootLevel,
-      mainWidth: titleWidth,
-      contextMenuRender: contextMenuRender,
-      titleRender: titleRender
-    });
-  }), treeNodeGroup && groupBy && Object.keys(treeNodeGroup).map(function (key) {
-    var group = treeNodeGroup[key];
-    if (group.length < 2) {
-      return /*#__PURE__*/React.createElement(TreeNodeController, {
-        key: group[0][fieldNames.key],
-        selectedKeys: selectedKeys,
-        onSelect: onSelect,
-        expandedKeys: expandedKeys,
-        onExpand: onExpand,
-        width: isTableMode && !isFlex ? rowWidth : undefined,
-        node: group[0],
-        fieldNames: fieldNames,
-        isFlex: isFlex,
-        isTableMode: !!isTableMode,
-        columns: columns,
-        multiple: multiple,
-        level: rootLevel,
-        mainWidth: titleWidth,
-        contextMenuRender: contextMenuRender,
-        titleRender: titleRender
-      });
-    }
-    return /*#__PURE__*/React.createElement(TreeNodeGroup, {
-      groupName: groupByTitle,
-      key: key,
-      groupValue: key
-    }, treeNodeGroup[key].map(function (node) {
-      return /*#__PURE__*/React.createElement(TreeNodeController, {
-        key: node[fieldNames.key],
-        selectedKeys: selectedKeys,
-        onSelect: onSelect,
-        expandedKeys: expandedKeys,
-        onExpand: onExpand,
-        width: isTableMode && !isFlex ? rowWidth : undefined,
-        node: node,
-        fieldNames: fieldNames,
-        isFlex: isFlex,
-        isTableMode: !!isTableMode,
-        columns: columns,
-        multiple: multiple,
-        level: rootLevel + 1,
-        mainWidth: titleWidth,
-        contextMenuRender: contextMenuRender,
-        titleRender: titleRender
-      });
-    }));
+  }, /*#__PURE__*/React.createElement(TreeNodeController, {
+    key: rootNode[fieldNames.key],
+    selectedKeys: selectedKeys,
+    onSelect: onSelect,
+    expandedKeys: expandedKeys,
+    onExpand: onExpand,
+    width: isTableMode && !isFlex ? rowWidth : undefined,
+    node: rootNode,
+    fieldNames: fieldNames,
+    isFlex: isFlex,
+    isTableMode: isTableMode,
+    columns: columns,
+    multiple: multiple,
+    level: rootLevel,
+    mainWidth: titleWidth,
+    contextMenuRender: contextMenuRender,
+    onContextMenuItemSelect: onContextMenuItemSelect,
+    titleRender: titleRender
   })));
 };
 export default Tree;

package/dist/Tree/TreeNode.d.ts

@@ -1,5 +1,4 @@
 import React, { Key, ReactNode } from 'react';
-import { MainProperty } from './MainProperties';
 export type TreeNodeControllerProps = {
     node: TreeNodeType;
     selectedKeys: Key[];
@@ -15,7 +14,10 @@ export type TreeNodeControllerProps = {
     expandedKeys: Key[];
     onExpand: onExpandHandler;
     contextMenuRender?: (node: TreeNodeType) => MenuItem[];
+    onContextMenuItemSelect?: (node: TreeNodeType, key: Key, item: MenuItem) => void;
     titleRender?: ((node: TreeNodeType) => ReactNode | null) | null | undefined;
 };
+export declare const nodeTypeMap: {
+    virtual: string;
+};
 export declare const TreeNodeController: React.FC<TreeNodeControllerProps>;
-export { MainProperty };

package/dist/Tree/TreeNode.js

@@ -1,5 +1,11 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+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; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { CaretRightOutlined } from '@ant-design/icons';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Column, Columns } from "../Columns";
 import { Flex, FlexItem } from "../Flex";
@@ -27,6 +33,62 @@ var TreeNode = styled(ListItem).withConfig({
     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);
   }
 });
+var TreeNodeGroupNode = styled.li.withConfig({
+  displayName: "TreeNodeGroupNode",
+  componentId: "basic-component-347b__sc-tzoomn-2"
+})(["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) {
+  if (props.width) {
+    return css(["width:", "px;"], props.width);
+  }
+});
+var TreeNodeGroup = function TreeNodeGroup(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  if (React.Children.toArray(props.children).length > 1) return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeNodeGroupNode, {
+    width: props.width,
+    onClick: function onClick() {
+      return setExpanded(!expanded);
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    width: props.mainWidth,
+    style: {
+      position: 'sticky',
+      left: 0
+    }
+  }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
+    level: props.level
+  })), /*#__PURE__*/React.createElement(FlexItem, {
+    width: 24,
+    align: "center",
+    cursor: "pointer"
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    expanded: expanded
+  })), /*#__PURE__*/React.createElement(FlexItem, {
+    flex: 1
+  }, props.groupName, " : ", props.groupValue))), expanded && React.Children.map(props.children, function (child) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      level: props.level + 1
+    });
+  }));else return props.children;
+};
+function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
+  var grouped = arr.reduce(function (acc, obj) {
+    var key = obj[propertyName || fieldNames.key] || obj[fieldNames.key];
+    if (key) {
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(obj);
+    } else {}
+    return acc;
+  }, {});
+  return grouped;
+}
+export var nodeTypeMap = {
+  virtual: 'virtual'
+};
 export var TreeNodeController = function TreeNodeController(_ref) {
   var node = _ref.node,
     _ref$selectedKeys = _ref.selectedKeys,
@@ -43,6 +105,7 @@ export var TreeNodeController = function TreeNodeController(_ref) {
     expandedKeys = _ref.expandedKeys,
     onExpand = _ref.onExpand,
     contextMenuRender = _ref.contextMenuRender,
+    onContextMenuItemSelect = _ref.onContextMenuItemSelect,
     titleRender = _ref.titleRender;
   /* 处理子节点缩进 */
   var childLevel = useMemo(function () {
@@ -52,8 +115,17 @@ export var TreeNodeController = function TreeNodeController(_ref) {
     return selectedKeys.includes(node[fieldNames.key]);
   }, [selectedKeys, fieldNames, node]);
   var expanded = useMemo(function () {
-    return expandedKeys.includes(node[fieldNames.key]);
+    return expandedKeys.includes(node[fieldNames.key]) || node.nodeType === nodeTypeMap.virtual;
   }, [expandedKeys, fieldNames, node]);
+  var treeNodeGroup = useMemo(function () {
+    return groupTreeNodeByPropertyName(node.children || [], node.groupBy, fieldNames);
+  }, [node.children, node.groupBy]);
+  var groupTitle = useMemo(function () {
+    var _columns$find;
+    return (_columns$find = columns.find(function (column) {
+      return column.dataIndex === node.groupBy;
+    })) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
+  }, [columns, node.groupBy]);
   var onClickNodeHandler = useCallback(function (e) {
     if (multiple) {
       if (selected) {
@@ -96,11 +168,7 @@ export var TreeNodeController = function TreeNodeController(_ref) {
       });
     }
   }, [expandedKeys, onExpand, expanded]);
-  var treeNode = /*#__PURE__*/React.createElement(TreeNode, {
-    selected: selectedKeys.includes(node[fieldNames.key]),
-    width: width,
-    onClick: onClickNodeHandler
-  }, /*#__PURE__*/React.createElement(MainProperty, {
+  var nodeEntity = /*#__PURE__*/React.createElement(MainProperty, {
     isFlex: isFlex,
     mainWidth: mainWidth,
     main: /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
@@ -121,29 +189,46 @@ export var TreeNodeController = function TreeNodeController(_ref) {
       rowData: node,
       isFlex: isFlex
     })
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, contextMenuRender && /*#__PURE__*/React.createElement(Menu.Popup, {
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, node.nodeType !== nodeTypeMap.virtual && /*#__PURE__*/React.createElement(TreeNode, {
+    selected: selectedKeys.includes(node[fieldNames.key]),
+    width: width,
+    onClick: onClickNodeHandler,
+    onContextMenu: onClickNodeHandler
+  }, contextMenuRender ? /*#__PURE__*/React.createElement(Menu.Popup, {
     trigger: "contextmenu",
-    items: contextMenuRender(node)
-  }, treeNode), !contextMenuRender && treeNode, expanded && node.children.map(function (childNode) {
-    return /*#__PURE__*/React.createElement(TreeNodeController, {
+    items: contextMenuRender(node),
+    onSelect: function onSelect(key, item) {
+      return onContextMenuItemSelect === null || onContextMenuItemSelect === void 0 ? void 0 : onContextMenuItemSelect(node, key, item);
+    }
+  }, nodeEntity) : nodeEntity), expanded && treeNodeGroup && Object.keys(treeNodeGroup).map(function (groupKey) {
+    return /*#__PURE__*/React.createElement(TreeNodeGroup, {
       width: width,
-      selectedKeys: selectedKeys,
-      key: childNode[fieldNames.key],
-      node: childNode,
-      fieldNames: fieldNames,
-      isFlex: isFlex,
-      isTableMode: isTableMode,
-      columns: columns,
-      onSelect: onSelect,
-      multiple: multiple,
-      level: childLevel,
       mainWidth: mainWidth,
-      onExpand: onExpand,
-      expandedKeys: expandedKeys,
-      contextMenuRender: contextMenuRender,
-      titleRender: titleRender
-    });
+      key: groupKey,
+      groupValue: groupKey,
+      groupName: groupTitle,
+      level: childLevel
+    }, treeNodeGroup[groupKey].map(function (childNode) {
+      return /*#__PURE__*/React.createElement(TreeNodeController, {
+        width: width,
+        selectedKeys: selectedKeys,
+        key: childNode[fieldNames.key],
+        node: childNode,
+        fieldNames: fieldNames,
+        isFlex: isFlex,
+        isTableMode: isTableMode,
+        columns: columns,
+        onSelect: onSelect,
+        multiple: multiple,
+        level: childLevel,
+        mainWidth: mainWidth,
+        onExpand: onExpand,
+        expandedKeys: expandedKeys,
+        contextMenuRender: contextMenuRender,
+        titleRender: titleRender,
+        onContextMenuItemSelect: onContextMenuItemSelect
+      });
+    }));
   }));
-};
-export { MainProperty };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kep-platform/basic-component",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "A react library developed with dumi",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -74,10 +74,10 @@
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1"
   },
-  "gitHead": "326ab1de4aaa605ef65582b87238e2d10a581600",
+  "gitHead": "fe3e26f7d0e44ccd78969f3acc6f417ce39dd32d",
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
-    "@kep-platform/hooks": "^0.0.13",
+    "@kep-platform/hooks": "^0.0.15",
     "color": "^4.2.3",
     "rc-pagination": "^4.1.0",
     "styled-components": "^6.1.11"