@imposium-hub/components 2.2.38 → 2.2.40-0

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
 };

package/src/services/Auth0.ts

@@ -11,7 +11,6 @@ export interface IIdentity {
 
 export default class AuthService {
     private static readonly IMPOSIUM_APP_DEFAULTS: any = {
-        domain: 'imposium.auth0.com',
         scope: 'openid',
         responseType: 'token id_token',
         redirectUri: `${window.location.origin}/auth`
@@ -23,9 +22,10 @@ export default class AuthService {
     /*
         Initialize the auth0 web client with client ID for a given app-wrapper
      */
-    public static bindToClient = (clientID: string): void => {
+    public static bindToClient = (clientID: string, domain: string): void => {
         AuthService.auth0Client = new auth0.WebAuth({
             clientID,
+            domain,
             ...AuthService.IMPOSIUM_APP_DEFAULTS
         });
     };