feat: refactor context menu to support sub menu (#122)

* add option list and favor it over context menu

* replace context with option list

* change the context menu usage

* fix some bug in flipping

* add copy as json

* toolbar now no longer rely on useContextMenuProvider

* fixing code smell

* fixing Sonar error

Author: invisal

src/renderer/App.css

@@ -16,7 +16,7 @@ body {
 
   --color-text: #000;
   --color-text-link: #1a64f4;
-  --color-text-disabled: #555;
+  --color-text-disabled: #aaa;
 
   /* For Button */
   --color-surface-light: #ecf0f1;

src/renderer/components/AvoidOffscreen/index.tsx

@@ -0,0 +1,61 @@
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export default function AvoidOffscreen({ children }: PropsWithChildren) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [computed, setComputed] = useState(false);
+  const [offsetTop, setOffsetTop] = useState(0);
+  const [flip, setFlip] = useState(false);
+
+  const computePosition = useCallback(() => {
+    if (ref.current) {
+      const bound = ref.current.getBoundingClientRect();
+      const viewportWidth =
+        window.innerWidth || document.documentElement.clientWidth;
+      const viewportHeight =
+        window.innerHeight || document.documentElement.clientHeight;
+
+      if (offsetTop === 0) {
+        setOffsetTop(Math.min(0, viewportHeight - bound.bottom));
+      }
+
+      if (bound.width === 0) return false;
+
+      if (!flip) {
+        setFlip(bound.right > viewportWidth);
+      }
+
+      setComputed(true);
+    }
+  }, [ref, setOffsetTop, setFlip, flip, offsetTop, setComputed]);
+
+  useEffect(() => {
+    if (ref.current) {
+      const resizeObserver = new ResizeObserver(() => {
+        computePosition();
+      });
+
+      resizeObserver.observe(ref.current);
+      return () => resizeObserver.disconnect();
+    }
+  }, [ref, computePosition]);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        visibility: computed ? 'visible' : 'hidden',
+        position: 'absolute',
+        top: offsetTop,
+        ...(flip ? { right: '100%' } : { left: '100%' }),
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/renderer/components/ContextMenu/AttachedContextMenu.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useRef, useState } from 'react';
+import { ReactElement, useRef, useEffect, useState } from 'react';
 import ContextMenu, { ContextMenuItemProps } from '.';
 
 interface AttachedContextMenuProps {
@@ -39,16 +39,15 @@ export default function AttachedContextMenu({
         {activator({ isOpened: open })}
       </div>
       <ContextMenu
-        status={{ open, x, y }}
         minWidth={minWidth}
+        items={items}
+        open={open}
+        x={x}
+        y={y}
         onClose={() => {
           setOpen(false);
         }}
-      >
-        {items.map((item, idx) => (
-          <ContextMenu.Item {...item} key={idx} />
-        ))}
-      </ContextMenu>
+      />
     </>
   );
 }

src/renderer/components/ContextMenu/index.tsx

@@ -1,58 +1,68 @@
-import {
-  CSSProperties,
-  PropsWithChildren,
-  ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import styles from './styles.module.scss';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { useEffect } from 'react';
+import AvoidOffscreen from '../AvoidOffscreen';
+import OptionList from '../OptionList';
+import OptionListItem, {
+  OptionListItemProps,
+} from '../OptionList/OptionListItem';
+import DropContainer from '../DropContainer';
 
-export interface ContextMenuItemProps {
-  text: string;
-  icon?: ReactNode;
-  hotkey?: string;
-  disabled?: boolean;
-  destructive?: boolean;
-  onClick?: () => void;
-  separator?: boolean;
-  tick?: boolean;
+export interface ContextMenuItemProps extends OptionListItemProps {
+  children?: ContextMenuItemProps[];
 }
 
-interface ContextMenuStatus {
+interface ContextMenuProps {
+  items: ContextMenuItemProps[];
   x: number;
   y: number;
-  open: boolean;
+  open?: boolean;
+  minWidth?: number;
+  onClose?: () => void;
 }
 
-const ContextMenuContext = createContext<{ handleClose: () => void }>({
-  handleClose: () => {
-    return;
-  },
-});
+function renderArrayOfMenu(
+  items: ContextMenuItemProps[],
+  onClose?: () => void,
+  minWidth?: number
+) {
+  return (
+    <DropContainer>
+      <OptionList minWidth={minWidth}>
+        {items.map((value, idx) => {
+          const key = value.text + idx;
+          const { children, onClick, ...props } = value;
+
+          const overrideOnClick = (e: React.MouseEvent) => {
+            if (onClick) onClick(e);
+            if (onClose) onClose();
+          };
+
+          if (children && children.length > 0) {
+            return (
+              <OptionListItem {...props} key={key} onClick={overrideOnClick}>
+                {renderArrayOfMenu(children, onClose)}
+              </OptionListItem>
+            );
+          }
+          return (
+            <OptionListItem key={key} {...props} onClick={overrideOnClick} />
+          );
+        })}
+      </OptionList>
+    </DropContainer>
+  );
+}
 
 export default function ContextMenu({
-  children,
-  status,
+  items,
+  x,
+  y,
   onClose,
+  open,
   minWidth,
-}: PropsWithChildren<{
-  status: ContextMenuStatus;
-  onClose: () => void;
-  minWidth?: number;
-}>) {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const [menuWidth, setMenuWidth] = useState(0);
-  const [menuHeight, setMenuHeight] = useState(0);
-
+}: ContextMenuProps) {
   useEffect(() => {
     const onDocumentClicked = () => {
-      onClose();
+      if (onClose) onClose();
     };
 
     document.addEventListener('mousedown', onDocumentClicked);
@@ -61,79 +71,16 @@ export default function ContextMenu({
     };
   }, [onClose]);
 
-  useEffect(() => {
-    if (menuRef.current) {
-      const { width, height } = menuRef.current.getBoundingClientRect();
-      setMenuWidth(width);
-      setMenuHeight(height);
-    }
-  }, [status.open]);
-
-  const viewportWidth =
-    window.innerWidth || document.documentElement.clientWidth;
-  const viewportHeight =
-    window.innerHeight || document.documentElement.clientHeight;
-
-  const menuStyle: CSSProperties = {
-    visibility: status.open ? 'visible' : 'hidden',
-    top: Math.min(status.y, viewportHeight - menuHeight - 10),
-    left: Math.min(status.x, viewportWidth - menuWidth - 10),
-    minWidth,
-  };
-
-  return (
-    <ContextMenuContext.Provider value={{ handleClose: onClose }}>
-      <div
-        ref={menuRef}
-        className={styles.contextMenu}
-        style={menuStyle}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        <ul>{children}</ul>
-      </div>
-    </ContextMenuContext.Provider>
-  );
-}
-
-ContextMenu.Item = function ({
-  text,
-  onClick,
-  icon,
-  tick,
-  disabled,
-  destructive,
-  separator,
-  hotkey,
-}: ContextMenuItemProps) {
-  const { handleClose } = useContext(ContextMenuContext);
-
-  const onMenuClicked = useCallback(() => {
-    if (onClick) {
-      onClick();
-    }
-    handleClose();
-  }, [handleClose, onClick]);
-
-  return (
-    <li
-      onClick={!disabled ? onMenuClicked : undefined}
-      className={[
-        disabled ? styles.disabled : undefined,
-        separator ? styles.separator : undefined,
-        !disabled && destructive ? styles.destructive : undefined,
-      ]
-        .filter(Boolean)
-        .join(' ')}
+  return open ? (
+    <div
+      style={{ position: 'fixed', zIndex: 90000, left: x, top: y }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+      }}
     >
-      <div className={styles.icon}>
-        <span>{tick ? <FontAwesomeIcon icon={faCheck} /> : icon}</span>
-      </div>
-      <div className={styles.text}>
-        <span>{text}</span>
-      </div>
-      <div className={styles.hotkey}>
-        <span>{hotkey}</span>
-      </div>
-    </li>
-  );
-};
+      <AvoidOffscreen>
+        {renderArrayOfMenu(items, onClose, minWidth)}
+      </AvoidOffscreen>
+    </div>
+  ) : null;
+}