✅ Format

Author: totase

src/components/ContextMenu.tsx

@@ -36,11 +36,7 @@ interface ContextMenuState {
 const HIDE_ON_EVENTS: (keyof GlobalEventHandlersEventMap)[] = ['click', 'resize', 'scroll', 'contextmenu'];
 
 const ContextMenu = ({ triggerId, children, triggerEvent = 'contextmenu', animateExit = true }: ContextMenuProps) => {
-  const [state, setState] = useState<ContextMenuState>({
-    active: false,
-    leaving: false,
-    position: { x: 0, y: 0 },
-  });
+  const [state, setState] = useState<ContextMenuState>({ active: false, leaving: false, position: { x: 0, y: 0 } });
 
   const contextMenuRef = useRef<HTMLDivElement>(null);
 
@@ -54,26 +50,16 @@ const ContextMenu = ({ triggerId, children, triggerEvent = 'contextmenu', animat
       event.stopPropagation();
       event.preventDefault();
 
-      setState((prev) => ({
-        ...prev,
-        active: true,
-        position,
-      }));
+      setState((prev) => ({ ...prev, active: true, position }));
     },
     [state.position],
   );
 
   const hide = useCallback(() => {
     if (animateExit) {
-      setState((prev) => ({
-        ...prev,
-        leaving: true,
-      }));
+      setState((prev) => ({ ...prev, leaving: true }));
     } else {
-      setState((prev) => ({
-        ...prev,
-        active: false,
-      }));
+      setState((prev) => ({ ...prev, active: false }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -82,22 +68,15 @@ const ContextMenu = ({ triggerId, children, triggerEvent = 'contextmenu', animat
     const { leaving, active } = state;
 
     if (leaving && active) {
-      setState((prev) => ({
-        ...prev,
-        active: false,
-        leaving: false,
-      }));
+      setState((prev) => ({ ...prev, active: false, leaving: false }));
     }
   }, [state]);
 
   useEffect(() => {
     const { position } = state;
 
     if (state.active)
-      setState((prev) => ({
-        ...prev,
-        position: validateMenuPosition(position, contextMenuRef.current),
-      }));
+      setState((prev) => ({ ...prev, position: validateMenuPosition(position, contextMenuRef.current) }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.active]);
 
@@ -119,17 +98,12 @@ const ContextMenu = ({ triggerId, children, triggerEvent = 'contextmenu', animat
 
   if (!state.active) return null;
 
-  const classNames = cx('react-context-menu', {
-    'react-context-menu--exit': state.leaving,
-  });
+  const classNames = cx('react-context-menu', { 'react-context-menu--exit': state.leaving });
 
   return (
     <div
       className={classNames}
-      style={{
-        left: state.position.x,
-        top: state.position.y,
-      }}
+      style={{ left: state.position.x, top: state.position.y }}
       role="menu"
       ref={contextMenuRef}
       onAnimationEnd={handleAnimationEnd}

src/components/MenuItem.tsx

@@ -33,10 +33,7 @@ const MenuItem = ({ children, onClick, className, disabled = false, ...rest }: M
       event.stopPropagation();
 
       if (!disabled && onClick) {
-        setState({
-          clicked: true,
-          eventRef: event,
-        });
+        setState({ clicked: true, eventRef: event });
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/SubMenu.tsx

@@ -61,9 +61,7 @@ const SubMenu = ({ label, children, className, disabled = false, ...rest }: SubM
     }, CLOSE_DELAY);
   }, [clearTimer]);
 
-  const classNames = cx('react-context-menu__item', className, {
-    'react-context-menu__item--disabled': disabled,
-  });
+  const classNames = cx('react-context-menu__item', className, { 'react-context-menu__item--disabled': disabled });
 
   return (
     <div
@@ -82,9 +80,7 @@ const SubMenu = ({ label, children, className, disabled = false, ...rest }: SubM
       </div>
       <div
         ref={subMenuRef}
-        style={{
-          visibility: active ? 'visible' : 'hidden',
-        }}
+        style={{ visibility: active ? 'visible' : 'hidden' }}
         className="react-context-menu__submenu"
       >
         {/* rest is sent from the ContextMenu element */}