feat: add draft contextMenu component

Author: wewoor

src/components/contextMenu/index.tsx

@@ -1,24 +1,36 @@
-// import * as React from 'react';
-// import { prefixClaName } from 'mo/common/className';
-// import { ContextView } from 'monaco-editor/esm/vs/base/browser/ui/contextview/contextview';
-// import { StandardMouseEvent } from 'monaco-editor/esm/vs/base/browser/mouseEvent';
-
-// export interface IContextMenuProps {
-
-// }
-
-// const ContextMenu: React.FunctionComponent = function(props) {
-//     const view = new ContextView();
-
-//     return (
-//         <div className={`${prefixClaName('contextmenu')}`} >
-//             {
-//                 props.children
-//             }
-//         </div>
-//     );
-// }
-
-// export {
-//     ContextMenu
-// }
+import * as React from 'react';
+import { HTMLElementType } from 'mo/common/dom';
+import { useContextView } from 'mo/components/contextview';
+import './style.scss';
+
+export interface IContextMenu {
+    anchor: HTMLElementType;
+    render: () => React.ReactNode
+}
+
+export function useContextMenu(props: IContextMenu) {
+    const { anchor, render } = props;
+
+    if (!anchor) {
+        return;
+    }
+
+    const contextView = useContextView();
+
+    const onContextMenu = (e: MouseEvent) => {
+        e.preventDefault();
+        contextView!.show({
+            x: e.clientX,
+            y: e.clientY,
+        }, render);
+    };
+
+    anchor.addEventListener('contextmenu', onContextMenu);
+
+    const dispose = () => {
+        contextView!.hide();
+        anchor.removeEventListener('contextmenu', onContextMenu);
+    };
+
+    return { contextView, dispose };
+}

src/components/contextMenu/style.scss

@@ -0,0 +1,5 @@
+@import 'mo/style/const';
+$name: 'context-menu';
+
+// #{prefix($name)} {
+// }

stories/components/ContextMenu.stories.tsx

@@ -0,0 +1,140 @@
+
+import * as React from 'react';
+import { useContextMenu } from 'mo/components/contextMenu';
+import { useEffect } from 'react';
+import '../demo.scss';
+
+export const ContextMenuDemo = () => {
+    useEffect(() => {
+        const contextView1 = useContextMenu({
+            anchor: document.getElementById('topLeft'),
+            render() {
+                return (
+                    <ul>
+                        <li>Item1</li>
+                        <li>Item2</li>
+                    </ul>
+                );
+            },
+        });
+
+        const contextView2 = useContextMenu({
+            anchor: document.getElementById('topRight'),
+            render() {
+                return (
+                    <ul>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                    </ul>
+                );
+            },
+        });
+
+        const contextView3 = useContextMenu({
+            anchor: document.getElementById('bottomLeft'),
+            render() {
+                return (
+                    <ul>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                    </ul>
+                );
+            },
+        });
+
+        const contextView4 = useContextMenu({
+            anchor: document.getElementById('bottomRight'),
+            render() {
+                return (
+                    <ul>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                        <li>Item Div</li>
+                    </ul>
+                );
+            },
+        });
+
+        return function cleanup() {
+            contextView1?.dispose();
+            contextView2?.dispose();
+            contextView3?.dispose();
+            contextView4?.dispose();
+        };
+    });
+
+    return (
+        <div className="story-wrapper">
+            <div id="topLeft"
+                style={
+                    {
+                        position: 'absolute',
+                        width: 200,
+                        height: 200,
+                        top: 0,
+                        left: 0,
+                        background: '#dddddd',
+                    }
+                }>
+                    Right Click me!
+            </div>
+            <div id="topRight"
+                style={
+                    {
+                        position: 'absolute',
+                        width: 200,
+                        height: 200,
+                        top: 0,
+                        right: 0,
+                        background: '#dddddd',
+                    }
+                }>
+                    Right Click me!
+            </div>
+            <div id="bottomLeft"
+                style={
+                    {
+                        position: 'absolute',
+                        width: 200,
+                        height: 200,
+                        left: 0,
+                        bottom: 10,
+                        background: '#dddddd',
+                    }
+                }>
+                    Right Click me!
+            </div>
+            <div id="bottomRight"
+                style={
+                    {
+                        position: 'absolute',
+                        width: 200,
+                        height: 200,
+                        right: 0,
+                        bottom: 10,
+                        background: '#dddddd',
+                    }
+                }>
+                    Right Click me!
+            </div>
+        </div>
+    );
+};
+
+
+ContextMenuDemo.story = {
+    name: 'Basic Demo',
+};
+
+export default {
+    title: 'ContextMenu',
+    component: ContextMenuDemo,
+};