@kep-platform/basic-component 0.0.14 → 0.0.18

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/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

@@ -100,6 +100,9 @@ export default (function () {
     multiple: true,
     titleWidth: 400,
     contextMenuRender: contextMenuRender,
+    onContextMenuItemSelect: function onContextMenuItemSelect(node) {
+      console.log(node.key);
+    },
     treeData: treeData,
     columns: columns,
     selectedKeys: selectedKeys,

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

@@ -57,6 +57,7 @@ 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,
@@ -166,6 +167,7 @@ var Tree = function Tree(_ref) {
     level: rootLevel,
     mainWidth: titleWidth,
     contextMenuRender: contextMenuRender,
+    onContextMenuItemSelect: onContextMenuItemSelect,
     titleRender: titleRender
   })));
 };

package/dist/Tree/TreeNode.d.ts

@@ -14,6 +14,7 @@ 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: {

package/dist/Tree/TreeNode.js

@@ -21,21 +21,25 @@ var ExpandedIcon = styled(CaretRightOutlined).withConfig({
     return css(["transform:rotate(90deg);"]);
   }
 });
+var TitleArea = styled(FlexItem).withConfig({
+  displayName: "TitleArea",
+  componentId: "basic-component-347b__sc-tzoomn-1"
+})([""]);
 var TreeNode = styled(ListItem).withConfig({
   displayName: "TreeNode",
-  componentId: "basic-component-347b__sc-tzoomn-1"
-})(["", " & ", ",& ", "{background-color:var(--kep-platform-color-bg-base);}&:hover{background-color:var(--kep-platform-color-bg-hover);& ", ",& ", "{background-color:var(--kep-platform-color-bg-hover);}& ", "{overflow-x:auto;& > ", "{width:auto;}}}", ""], function (props) {
+  componentId: "basic-component-347b__sc-tzoomn-2"
+})(["", " & ", ",& ", "{background-color:var(--kep-platform-color-bg-base);}&:hover{background-color:var(--kep-platform-color-bg-hover);& ", ",& ", "{background-color:var(--kep-platform-color-bg-hover);}& ", "{overflow-x:auto;& > ", "{width:auto;}}& ", "{overflow-x:auto;}}", ""], function (props) {
   if (props.width) {
     return css(["width:", "px;"], props.width);
   }
-}, Column, MainArea, Column, MainArea, MainArea, Flex, function (props) {
+}, Column, MainArea, Column, MainArea, MainArea, Flex, TitleArea, function (props) {
   if (props.selected) {
-    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);
+    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;}}& ", "{overflow-x:auto;}"], Column, MainArea, MainArea, Flex, TitleArea);
   }
 });
 var TreeNodeGroupNode = styled.li.withConfig({
   displayName: "TreeNodeGroupNode",
-  componentId: "basic-component-347b__sc-tzoomn-2"
+  componentId: "basic-component-347b__sc-tzoomn-3"
 })(["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);
@@ -105,6 +109,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 () {
@@ -179,7 +184,7 @@ export var TreeNodeController = function TreeNodeController(_ref) {
       onClick: onClickExpandIconhandler
     }, /*#__PURE__*/React.createElement(ExpandedIcon, {
       expanded: expanded
-    })), /*#__PURE__*/React.createElement(FlexItem, {
+    })), /*#__PURE__*/React.createElement(TitleArea, {
       flex: 1
     }, titleRender ? titleRender(node) : node[fieldNames.title])),
     property: isTableMode && /*#__PURE__*/React.createElement(Columns, {
@@ -192,10 +197,14 @@ export var TreeNodeController = function TreeNodeController(_ref) {
   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
+    onClick: onClickNodeHandler,
+    onContextMenu: onClickNodeHandler
   }, contextMenuRender ? /*#__PURE__*/React.createElement(Menu.Popup, {
     trigger: "contextmenu",
-    items: contextMenuRender(node)
+    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,
@@ -221,7 +230,8 @@ export var TreeNodeController = function TreeNodeController(_ref) {
         onExpand: onExpand,
         expandedKeys: expandedKeys,
         contextMenuRender: contextMenuRender,
-        titleRender: titleRender
+        titleRender: titleRender,
+        onContextMenuItemSelect: onContextMenuItemSelect
       });
     }));
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kep-platform/basic-component",
-  "version": "0.0.14",
+  "version": "0.0.18",
   "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": "b346fc9c989221248d4882e8c3f7833e53750e92",
+  "gitHead": "87aa5fd0616b79fc6cad62d3f57b6599325afd85",
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
-    "@kep-platform/hooks": "^0.0.14",
+    "@kep-platform/hooks": "^0.0.18",
     "color": "^4.2.3",
     "rc-pagination": "^4.1.0",
     "styled-components": "^6.1.11"