feat(dropdown): add basic component and stories

DTStack · Nov 20, 2020 · 77941be · 77941be
1 parent 75ef5d9
commit 77941be
Show file tree

Hide file tree

Showing 5 changed files with 401 additions and 1 deletion.
diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx
@@ -0,0 +1,49 @@
+import './style.scss';
+import * as React from 'react';
+import { classNames, prefixClaName } from 'mo/common/className';
+import { useContextView } from '../contextview';
+import { triggerEvent, TriggerEvent } from 'mo/common/dom';
+
+export interface IDropDown extends HTMLElementProps {
+    overlay: ReactNode;
+    trigger?: TriggerEvent;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+export const defaultDropDownClassName = 'drop-down';
+
+export function DropDown(props: React.PropsWithChildren<IDropDown>) {
+    const {
+        className,
+        overlay,
+        children,
+        placement = 'bottom',
+        trigger = 'click',
+        ...others
+    } = props;
+    const contextView = useContextView({
+        render: () => overlay,
+    });
+
+    const claNames = classNames(
+        prefixClaName(defaultDropDownClassName),
+        placement,
+        className
+    );
+    const events = {
+        [triggerEvent(trigger)]: function (e: React.MouseEvent) {
+            const target = e.currentTarget;
+            const rect = target.getBoundingClientRect();
+            contextView.show({
+                x: rect.x + rect.width,
+                y: rect.y,
+            });
+        },
+    };
+
+    return (
+        <div className={claNames} {...events} {...others}>
+            {children}
+        </div>
+    );
+}
diff --git a/src/components/dropdown/style.scss b/src/components/dropdown/style.scss
@@ -0,0 +1,10 @@
+@import 'mo/style/const';
+$dropDown: 'drop-down';
+
+#{prefix($dropDown)} {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+}
diff --git a/src/style/const.scss b/src/style/const.scss
@@ -1,3 +1,4 @@
+// TODO Refactor the class name to camel style
 $prefix: 'mo';
 $activityBar: 'activityBar';
 $sidebar: 'sidebar';
@@ -7,6 +8,9 @@ $settings: 'settings';
 $panel: 'panel';
 $statusBar: 'statusBar';
 
+// Component parts below
+$dropDown: 'drop-down';
+
 @function prefix($name) {
     @return '.' + $prefix + '-' + $name;
 }
diff --git a/src/workbench/menuBar/menuBar.tsx b/src/workbench/menuBar/menuBar.tsx
@@ -2,21 +2,134 @@ import 'mo/workbench/menuBar/style.scss';
 import * as React from 'react';
 import { prefixClaName } from 'mo/common/className';
 import { IMenuBar } from 'mo/model/workbench/menuBar';
+import { Menu } from 'mo/components/menu';
+import { DropDown } from 'mo/components/dropdown';
+import { Icon } from 'mo/components/icon';
 
 export interface IMenuBarProps {
     // menuBar: IMenuBar;
 }
 
+const initialMenuData = [
+    {
+        id: 'File',
+        name: 'File',
+        data: [
+            {
+                id: 'New File',
+                name: 'New File',
+            },
+            {
+                id: 'OpenFile',
+                name: 'Open',
+            },
+        ],
+    },
+    {
+        id: 'Edit',
+        name: 'Edit',
+        data: [
+            {
+                id: 'Undo',
+                name: 'Undo',
+            },
+            {
+                id: 'Redo',
+                name: 'Redo',
+            },
+        ],
+    },
+    {
+        id: 'Selection',
+        name: 'Selection',
+        data: [
+            {
+                id: 'SelectAll',
+                name: 'Select All',
+            },
+            {
+                id: 'CopyLineUp',
+                name: 'Copy Line Up',
+            },
+        ],
+    },
+    {
+        id: 'View',
+        name: 'View',
+        data: [
+            {
+                id: 'Command Palette',
+                name: 'Command Palette',
+            },
+            {
+                id: 'OpenView',
+                name: 'Open View',
+            },
+            {
+                id: 'Appearance',
+                name: 'Appearance',
+                data: [
+                    {
+                        icon: 'check',
+                        id: 'ShowMenuBar',
+                        name: 'Show Menu Bar',
+                    },
+                    {
+                        icon: 'check',
+                        id: 'ShowSideBar',
+                        name: 'Show Side Bar',
+                    },
+                    {
+                        icon: 'check',
+                        id: 'ShowStatusBar',
+                        name: 'Show Status Bar',
+                    },
+                    {
+                        icon: 'check',
+                        id: 'ShowActivityBar',
+                        name: 'Show Activity Bar',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 'Run',
+        name: 'Run',
+        data: [
+            {
+                id: 'RunTask',
+                name: 'Run Task',
+            },
+        ],
+    },
+    {
+        id: 'Help',
+        name: 'Help',
+        data: [
+            {
+                id: 'About',
+                name: 'About',
+            },
+        ],
+    },
+];
+
 function MenuBar(props: IMenuBar) {
     const menuBar = props;
     const click = function (e) {
         menuBar.onClick(e, {
             name: 'test',
         });
     };
+    const menu = (
+        <Menu onClick={click} style={{ width: 200 }} data={initialMenuData} />
+    );
     return (
         <div className={prefixClaName('menuBar')}>
-            <a className="menu-action codicon codicon-menu" onClick={click}></a>
+            <DropDown className="menu-action" placement="right" overlay={menu}>
+                <Icon type="menu" />
+            </DropDown>
         </div>
     );
 }