Extend internal hooks to handle all dismissal interactions

Author: TimboKZ

docs/components/BasicGlobalMenu.js

@@ -1,6 +1,25 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ContextMenuWrapper } from 'react-context-menu-wrapper';
 
+const MyContextMenu = () => {
+    const [seconds, setSeconds] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => setSeconds(s => s + 1), 1000);
+        return () => clearInterval(timer);
+    });
+
+    return (
+        <div className="context-menu">
+            <p>
+                I am a custom <strong>global</strong> context menu!
+            </p>
+            <p>
+                Open for {seconds} {seconds === 1 ? 'second' : 'seconds'}.
+            </p>
+        </div>
+    );
+};
+
 const GlobalMenuExample = () => {
     const [globalMenuEnabled, setGlobalMenuEnabled] = useState(true);
     const onClick = useCallback(() => setGlobalMenuEnabled(!globalMenuEnabled), [globalMenuEnabled]);
@@ -17,9 +36,7 @@ const GlobalMenuExample = () => {
 
             {globalMenuEnabled && (
                 <ContextMenuWrapper global={true}>
-                    <div className="context-menu">
-                        <p>I am a global context menu!</p>
-                    </div>
+                    <MyContextMenu />
                 </ContextMenuWrapper>
             )}
         </React.Fragment>

docs/components/BasicLocalMenu.js

@@ -15,8 +15,10 @@ const LocalMenuExample = () => {
             </div>
 
             <ContextMenuWrapper id={menuId}>
-                <div className="context-menu">
-                    <p>I am component-local context menu!</p>
+                <div className="context-menu" style={{ backgroundColor: '#d6fffc' }}>
+                    <p>
+                        I am <strong>component-local</strong> context menu!
+                    </p>
                 </div>
             </ContextMenuWrapper>
         </React.Fragment>

docs/components/SharedMenu.js

@@ -1,14 +1,15 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { ContextMenuWrapper, useContextMenuEvent, useContextMenuHandlers } from 'react-context-menu-wrapper';
 
-const MyContextMenu = ({ toggleSelection }) => {
+const MyContextMenu = ({ selection, toggleSelection }) => {
     const menuEvent = useContextMenuEvent();
     if (!menuEvent) return null;
 
     const name = menuEvent.data;
     const onClick = useCallback(() => (name ? toggleSelection(name) : null), [name, toggleSelection]);
+    const style = { backgroundColor: selection[name] ? '#d6fffc' : '#ffe4e4' };
     return (
-        <div className="context-menu">
+        <div className="context-menu" style={style}>
             <p>You chose {name ? name : 'no one'}.</p>
             <button onClick={onClick}>Toggle state</button>
         </div>
@@ -48,8 +49,8 @@ const SharedMenu = () => {
                     <Box key={name} name={name} selected={selection[name]} menuId={menuId} />
                 ))}
             </div>
-            <ContextMenuWrapper id={menuId}>
-                <MyContextMenu toggleSelection={toggleSelection} />
+            <ContextMenuWrapper id={menuId} hideOnSelfClick={false}>
+                <MyContextMenu selection={selection} toggleSelection={toggleSelection} />
             </ContextMenuWrapper>
         </div>
     );

docs/markdown/2-Basic-menus.md

@@ -45,7 +45,7 @@ export const LocalMenuExample = () => {
 
     return (
         <React.Fragment>
-            // We attach `bannerRef` to the component that will trigger the context menu: 
+            {/* We attach `bannerRef` to the component that will trigger the context menu: */}
             <div ref={bannerRef} className="banner">Right click or long-press this box</div>
 
             <ContextMenuWrapper id={menuId}>

lib/ContextMenuWrapper.js

@@ -9,5 +9,5 @@ export declare const useContextMenuHandlers: (ref: React.RefObject<HTMLElement>,
     data?: any;
 }) => void;
 export declare const useMenuToggleMethods: (lastShowMenuEvent: Nullable<ContextMenuEvent>, setShowMenuEvent: (event: Nullable<ContextMenuEvent>) => void, onShow?: ((event: ContextMenuEvent) => void) | undefined, onHide?: (() => void) | undefined) => [(event: ContextMenuEvent) => void, () => void];
-export declare const useMenuPlacementStyle: (lastShowMenuEvent: Nullable<ContextMenuEvent>, setMenuPlacementStyle: (style: Nullable<React.CSSProperties>) => void, wrapperRef: React.RefObject<HTMLElement>) => void;
-export declare const useInternalHandlers: (showMenu: (event: ContextMenuEvent) => void, hideMenu: () => void, id?: string | undefined, global?: boolean | undefined, hideOnSelfClick?: boolean | undefined, hideOnOutsideClick?: boolean | undefined, hideOnEscape?: boolean | undefined, hideOnScroll?: boolean | undefined, hideOnWindowResize?: boolean | undefined) => void;
+export declare const useMenuPlacementStyle: (wrapperRef: React.RefObject<HTMLElement>, lastShowMenuEvent: Nullable<ContextMenuEvent>, setMenuPlacementStyle: (style: Nullable<React.CSSProperties>) => void) => void;
+export declare const useInternalHandlers: (wrapperRef: React.RefObject<HTMLElement>, lastShowMenuEvent: Nullable<ContextMenuEvent>, showMenu: (event: ContextMenuEvent) => void, hideMenu: () => void, id?: string | undefined, global?: boolean | undefined, hideOnSelfClick?: boolean | undefined, hideOnOutsideClick?: boolean | undefined, hideOnEscape?: boolean | undefined, hideOnScroll?: boolean | undefined, hideOnWindowResize?: boolean | undefined) => void;