feat: Update Menu support deep child

Author: myxvisual

docs/src/routes/Components/Menu/SimpleExample.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as PropTypes from "prop-types";
 
 import Menu, { MenuItem } from "react-uwp/Menu";
+import Separator from "react-uwp/Separator";
 
 const baseStyle: React.CSSProperties = {
   margin: "10px 0",
@@ -15,7 +16,7 @@ export default class SimpleExample extends React.Component {
   render() {
     return (
       <div style={baseStyle}>
-        <Menu>
+        <Menu menuItemHeight={36} expandedMethod="hover">
         <MenuItem
           icon="Share"
           label="Share"
@@ -28,10 +29,15 @@ export default class SimpleExample extends React.Component {
           icon="Delete"
           label="Delete"
         />
+        <Separator />
         <MenuItem label="Rename" />
         <MenuItem label="Select" />
         <MenuItem label="Child Menu">
-          <MenuItem label="Rename" />
+          <MenuItem label="Rename">
+            <MenuItem
+              label="Test"
+            />
+          </MenuItem>
           <MenuItem
             icon="Delete"
             label="Delete"

src/Menu/MenuItem.tsx

@@ -35,6 +35,10 @@ export interface DataProps {
    * Set Menu Item hovered style.
    */
   hoverStyle?: React.CSSProperties;
+  /**
+   * Set Menu Item expanded method.
+   */
+  expandedMethod?: "active" | "hover";
 }
 
 export interface AnyAttributes {
@@ -50,7 +54,8 @@ export interface MenuItemState {
 export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
   static defaultProps: MenuItemProps = {
     itemWidth: 240,
-    itemHeight: 44
+    itemHeight: 44,
+    expandedMethod: "hover"
   };
 
   state: MenuItemState = {
@@ -118,6 +123,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
       defaultExpanded,
       className,
       hoverStyle,
+      expandedMethod,
       ...attributes
     } = this.props;
     const { theme } = this.context;
@@ -127,6 +133,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
       className: "menu",
       styles: inlineStyles
     });
+    const isHoverToggled = expandedMethod === "hover";
 
     const iconProps = {
       size: itemHeight,
@@ -138,6 +145,8 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
         {...attributes}
         className={theme.classNames(styles.root.className, className)}
         style={styles.root.style}
+        onMouseEnter={isHoverToggled ? () => this.toggleExpanded(true) : void 0}
+        onMouseLeave={isHoverToggled ? () => this.toggleExpanded(false) : void 0}
       >
       <div ref={rootElm => this.rootElm = rootElm}>
         <Icon {...iconProps}>
@@ -152,14 +161,21 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
               cursor: "pointer",
               pointerEvents: "all"
             }}
-            onClick={this.toggleExpanded}
+            onClick={isHoverToggled ? void 0 : this.toggleExpanded}
           >
             ScrollChevronRightLegacy
           </Icon>
         )}
         {children && (
           <div {...styles.child}>
-            {children}
+            {children && React.Children.map(children, (child: any, index) => {
+              return child.type === MenuItem ? React.cloneElement(child, {
+                itemWidth,
+                itemHeight,
+                hoverStyle,
+                expandedMethod
+              }) : child;
+            })}
           </div>
         )}
       </div>
@@ -215,8 +231,8 @@ function getStyles(menuItem: MenuItem): {
       pointerEvents: expanded ? "all" : "none",
       transition: "all .25s",
       position: "absolute",
-      top: 0,
-      left: "98%",
+      top: -1,
+      left: "100%",
       width: "100%",
       background: theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow,
       border: `1px solid ${theme.listLow}`

src/Menu/index.doc.json

@@ -55,6 +55,12 @@
           "documentation": "Set Menu Item hovered style.",
           "isRequired": false,
           "type": "CSSProperties"
+        },
+        {
+          "name": "expandedMethod",
+          "documentation": "Set Menu Item expanded method.",
+          "isRequired": false,
+          "type": "\"active\" | \"hover\""
         }
       ]
     },
@@ -102,6 +108,12 @@
           "documentation": "Set Menu Item hovered style.",
           "isRequired": false,
           "type": "CSSProperties"
+        },
+        {
+          "name": "expandedMethod",
+          "documentation": "Set Menu Item expanded method.",
+          "isRequired": false,
+          "type": "\"active\" | \"hover\""
         }
       ]
     },
@@ -130,7 +142,7 @@
       "exports": [
         {
           "name": "prototype",
-          "type": "prototype"
+          "type": "any"
         },
         {
           "name": "defaultProps",
@@ -167,5 +179,5 @@
       "type": "(menu: Menu) => { root?: CSSProperties; }"
     }
   ],
-  "type": "typeof \"D:/react-uwp/src/Menu/index\""
+  "type": "typeof \"C:/[Work]/react-uwp/src/Menu/index\""
 }

src/Menu/index.tsx

@@ -21,6 +21,10 @@ export interface DataProps {
    * Set Menu Item hovered style.
    */
   menuItemHoverStyle?: React.CSSProperties;
+  /**
+   * Set Menu Item expanded method.
+   */
+  expandedMethod?: "active" | "hover";
 }
 
 export interface MenuItemProps {
@@ -52,6 +56,10 @@ export interface MenuItemProps {
    * Set Menu Item hovered style.
    */
   hoverStyle?: React.CSSProperties;
+  /**
+   * Set Menu Item expanded method.
+   */
+  expandedMethod?: "active" | "hover";
 }
 
 export interface AnyAttributes {
@@ -80,6 +88,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
       menuItemHoverStyle,
       children,
       className,
+      expandedMethod,
       ...attributes
     } = this.props;
     const { theme } = this.context;
@@ -95,13 +104,14 @@ export class Menu extends React.Component<MenuProps, MenuState> {
         {...attributes}
         {...styleClasses}
       >
-        {children && React.Children.map(children, (child: any, index) => (
-          child.type === Menu ? React.cloneElement(child, {
+        {children && React.Children.map(children, (child: any, index) => {
+          return child.type === MenuItem ? React.cloneElement(child, {
             itemWidth: menuItemWidth,
             itemHeight: menuItemHeight,
-            hoverStyle: menuItemHoverStyle
-          }) : child
-        ))}
+            hoverStyle: menuItemHoverStyle,
+            expandedMethod: expandedMethod
+          }) : child;
+        })}
       </div>
     );
   }