@imposium-hub/components 2.2.38 → 2.2.39

package/src/components/context-menu/ContextMenuTrigger.tsx

@@ -0,0 +1,47 @@
+import React, { useRef, useCallback } from 'react';
+import { callShowEvent, callHideEvent } from './registerEvent';
+
+const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes, disable }) => {
+    const menuTrigger = useRef(null);
+
+    const handleContextMenu = useCallback((e) => {
+        if (disable) return;
+        if (disableWhileShiftPressed && e.nativeEvent.shiftKey) {
+            callHideEvent(id);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+
+        const { clientX, clientY } = e.nativeEvent;
+        const opts = {
+            position: {
+                clientY,
+                clientX
+            },
+            id
+        };
+
+        callShowEvent(opts);
+    }, []);
+
+    return (
+        <div
+            className='menu-trigger'
+            ref={menuTrigger}
+            {...attributes}
+            onContextMenu={(e) => handleContextMenu(e)}>
+            {children}
+        </div>
+    );
+};
+
+export default ContextMenuTrigger;
+
+ContextMenuTrigger.defaultProps = {
+    attributes: {},
+    disable: false,
+    renderTag: 'div',
+    disableWhileShiftPressed: false,
+    className: ''
+};

package/src/components/context-menu/SubMenu.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useState, useRef } from 'react';
+import ContextMenuItem from './ContextMenuItem';
+
+const Submenu = ({ children, title, attributes, className }) => {
+    const [submenuStyle, setSubmenuStyle] = useState(null);
+    const submenuEl = useRef(null);
+    const submenuItem = useRef(null);
+
+    const calculateSubmenuPos = useCallback(() => {
+        const { innerHeight: windowInnerHeight, innerWidth: windowInnerWidth } = window;
+        const {
+            left: itemLeft,
+            top: itemTop,
+            width: itemWidth,
+            height: itemHeight
+        } = submenuItem.current.getBoundingClientRect();
+        const { width: submenuWidth, height: submenuHeight } =
+            submenuEl.current.getBoundingClientRect();
+        const style = {
+            opacity: 1,
+            visibility: 'visible'
+        };
+
+        if (itemTop + submenuHeight + itemHeight > windowInnerHeight) {
+            style['top'] = 'inherit';
+            style['bottom'] = '0';
+        }
+        if (itemLeft + submenuWidth + itemWidth > windowInnerWidth) {
+            style['left'] = 'inherit';
+            style['right'] = '100%';
+        }
+
+        setSubmenuStyle(style);
+    }, []);
+
+    const hideSubmenu = useCallback(() => {
+        const style = {
+            opacity: 0,
+            visibility: 'hidden'
+        };
+
+        setSubmenuStyle(style);
+    }, []);
+
+    return (
+        <div
+            className='submenu'
+            onMouseOver={() => calculateSubmenuPos()}
+            onMouseOut={() => hideSubmenu()}
+            onFocus={() => null}
+            onBlur={() => null}
+            ref={submenuItem}
+            {...attributes}>
+            <ContextMenuItem>{title}</ContextMenuItem>
+            <div
+                className='submenu__item'
+                ref={submenuEl}
+                style={submenuStyle}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default Submenu;
+
+Submenu.defaultProps = {
+    title: 'Sub Menu',
+    className: ''
+};

package/src/components/context-menu/helper.ts

@@ -0,0 +1,21 @@
+export const uniqueId = () => `_${Math.random().toString(36).substr(2, 9)}`;
+
+export const throttle = (func, limit) => {
+    let lastFunc;
+    let lastRan;
+    return (...args) => {
+        const context = window;
+        if (!lastRan) {
+            func.apply(context, args);
+            lastRan = Date.now();
+        } else {
+            clearTimeout(lastFunc);
+            lastFunc = setTimeout(() => {
+                if (Date.now() - lastRan >= limit) {
+                    func.apply(context, args);
+                    lastRan = Date.now();
+                }
+            }, limit - (Date.now() - lastRan));
+        }
+    };
+};

package/src/components/context-menu/registerEvent.ts

@@ -0,0 +1,46 @@
+import { uniqueId } from './helper';
+
+const events = {};
+
+let activeEvent = {
+    id: '',
+    showMenu: null,
+    hideMenu: null
+};
+
+const registerEvent = (id, showMenu, hideMenu) => {
+    const _ = uniqueId();
+
+    events[_] = {
+        id,
+        showMenu,
+        hideMenu
+    };
+
+    return id;
+};
+
+const callShowEvent = (opts) => {
+    const { hideMenu } = activeEvent;
+    if (hideMenu) hideMenu();
+    Object.keys(events).forEach((key) => {
+        if (events[key].id && events[key].id === opts.id) {
+            events[key].showMenu(opts);
+            activeEvent = events[key];
+        }
+    });
+};
+
+const callHideEvent = (menuId) => {
+    const { id, hideMenu } = activeEvent;
+    if (id === menuId || menuId === 'ID_NOT_REQUIRED') {
+        if (hideMenu) hideMenu();
+        activeEvent = {
+            id: '',
+            showMenu: null,
+            hideMenu: null
+        };
+    }
+};
+
+export { registerEvent, callShowEvent, callHideEvent };

package/src/index.ts

@@ -155,6 +155,10 @@ import FontPicker from './components/font-picker/FontPicker';
 import AudioPreview from './components/players/AudioPreview';
 import { renderTooltipProps, renderTooltip } from './components/Tooltip';
 import AssetsTableRateCell from './components/assets/AssetsTableRateCell';
+import ContextMenu from './components/context-menu/ContextMenu';
+import ContextMenuItem from './components/context-menu/ContextMenuItem';
+import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
+import Submenu from './components/context-menu/SubMenu';
 
 export {
     AppWrapper,
@@ -301,5 +305,9 @@ export {
     cancelAssetUpload,
     getLastModifiedStoryInOrg,
     renderTooltipProps,
-    renderTooltip
+    renderTooltip,
+    ContextMenu,
+    ContextMenuItem,
+    ContextMenuTrigger,
+    Submenu
 };