feat: menu support to set divider (#205)

* feat: menu support to set divider

* feat: divider color support to theme change

Author: mortalYoung

src/components/menu/base.ts

@@ -20,6 +20,10 @@ export const defaultMenuItemClassName = getBEMElement(
     defaultMenuClassName,
     'item'
 );
+export const defaultDividerClassName = getBEMElement(
+    defaultMenuClassName,
+    'divider'
+);
 export const checkClassName = getBEMElement(defaultMenuClassName, 'check');
 export const disabledClassName = getBEMModifier(
     defaultMenuItemClassName,

src/components/menu/divider.tsx

@@ -0,0 +1,20 @@
+import { classNames } from 'mo/common/className';
+import React from 'react';
+import {
+    defaultDividerClassName,
+    defaultMenuItemClassName,
+    disabledClassName,
+} from './base';
+
+const Divider = () => {
+    return (
+        <li
+            className={classNames(defaultMenuItemClassName, disabledClassName)}
+            role="separator"
+        >
+            <a className={defaultDividerClassName} />
+        </li>
+    );
+};
+
+export { Divider };

src/components/menu/menu.tsx

@@ -14,6 +14,7 @@ import { mergeFunctions } from 'mo/common/utils';
 import { cloneReactChildren } from 'mo/react';
 import { em2Px } from 'mo/common/css';
 import { getRelativePosition, triggerEvent } from 'mo/common/dom';
+import { Divider } from './divider';
 
 export type IMenuProps = ISubMenuProps;
 
@@ -81,6 +82,7 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
     if (data.length > 0) {
         const renderMenusByData = (menus: IMenuProps[]) => {
             return menus.map((item: IMenuProps) => {
+                if (item.type === 'divider') return <Divider />;
                 const handleClick = mergeFunctions(onClick, item.onClick);
                 if (item.data && item.data.length > 0) {
                     return (
@@ -159,6 +161,16 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
         // sub menu do not listen any event
         if (claNames?.includes(defaultSubMenuClassName)) return {};
         return {
+            onContextMenu: (e) => {
+                e.preventDefault();
+                e.persist();
+                e.stopPropagation();
+            },
+            onClick: (e) => {
+                e.preventDefault();
+                e.persist();
+                e.stopPropagation();
+            },
             [triggerEvent(trigger)]: handleTriggerEvent,
             onMouseOut: handleMouseOut,
         };

src/components/menu/menuItem.tsx

@@ -14,6 +14,7 @@ export interface IMenuItemProps extends HTMLElementProps {
      * The name of icon
      */
     icon?: string;
+    type?: 'divider';
     /**
      * Item Name
      */

src/components/menu/style.scss

@@ -6,12 +6,22 @@
     line-height: 13px;
 }
 
+#{$menu}__divider {
+    border-bottom: 1px solid var(--menu-separatorBackground);
+    flex: 1;
+    font-size: inherit;
+    height: 0;
+    margin: 0 0.8em 0.2em;
+    padding: 0.2em 0 0;
+}
+
 #{$menu} {
     display: flex;
     list-style: none;
     margin: 0;
     min-width: 200px;
     padding: 0;
+    user-select: none;
 
     &--vertical {
         flex-direction: column;
@@ -30,6 +40,9 @@
     }
 
     &__item {
+        align-items: center;
+        border: thin solid transparent;
+        display: flex;
         min-width: 120px;
 
         &--disabled {

src/extensions/theme-defaults/themes/dark_defaults.json

@@ -30,6 +30,7 @@
         "menu.background": "#252526",
         "menu.foreground": "#CCCCCC",
         "menu.selectionBackground": "#094771",
+        "menu.separatorBackground": "#BBBBBB",
         "statusBarItem.remoteForeground": "#FFF",
         "statusBarItem.remoteBackground": "#16825D",
         "sidebarSectionHeader.background": "#0000",

src/extensions/theme-defaults/themes/light_defaults.json

@@ -36,6 +36,7 @@
         "sidebarSectionHeader.border": "#61616130",
         "tab.border": "#333",
         "menu.selectionBackground": "#0060C0",
+        "menu.separatorBackground": "#888888",
         "tab.inactiveBackground": "rgb(236, 236, 236)",
         "tab.inactiveForeground": "rgba(51, 51, 51, 0.7)",
         "tab.activeForeground": "rgb(255, 255, 255)"