@imposium-hub/components 2.2.38 → 2.2.39

package/dist/styles.css

@@ -2898,3 +2898,144 @@ h3 {
 #font-picker.expanded ul {
   max-height: 200px;
 }
+.contextmenu {
+  background: #161616;
+  position: absolute;
+  top: 20px;
+  min-width: 125px;
+  padding: 3px;
+  z-index: 1000;
+}
+.contextmenu .submenu {
+  position: relative;
+}
+.contextmenu .submenu:hover > .contextmenu__item {
+  background-color: #f1f1f1;
+}
+.contextmenu .submenu__item {
+  background-color: #ffffff;
+  border-radius: 4px;
+  border: solid 1px #cccccc;
+  left: 100%;
+  opacity: 0;
+  padding: 5px 0;
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+}
+.contextmenu .submenu > .contextmenu__item:after {
+  border-color: transparent transparent transparent #000000;
+  border-style: solid;
+  border-width: 5px 8px;
+  content: '';
+  height: 0;
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: 0.2s;
+  width: 0;
+}
+.contextmenu__item {
+  padding: 3px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.contextmenu__item:hover:not(.contextmenu__item--disabled) {
+  background-color: #393939;
+}
+.contextmenu__item--disabled {
+  cursor: no-drop;
+  opacity: 0.5;
+}
+.fade-enter {
+  opacity: 0;
+}
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 200ms;
+}
+.fade-exit {
+  opacity: 1;
+}
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+.zoom-enter {
+  opacity: 0;
+  transform-origin: top left;
+  transform: scale(0.8);
+}
+.zoom-enter-active {
+  opacity: 1;
+  transform-origin: top left;
+  transform: scale(1);
+  transition: opacity 200ms, transform 200ms;
+}
+.zoom-exit {
+  opacity: 1;
+  transform-origin: top left;
+  transform: scale(1);
+}
+.zoom-exit-active {
+  opacity: 0;
+  transform-origin: top left;
+  transform: scale(0.8);
+  transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-enter {
+  opacity: 0;
+  transform: translate(10px, 10px);
+}
+.toTopLeft-enter-active {
+  opacity: 1;
+  transform: translate(0px, 0px);
+  transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-exit {
+  opacity: 1;
+  transform: translate(0px, 0px);
+}
+.toTopLeft-exit-active {
+  opacity: 0;
+  transform: translate(10px, 10px);
+  transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-enter {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.rightToLeft-enter-active {
+  opacity: 1;
+  transform: translateX(0px);
+  transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-exit {
+  opacity: 1;
+  transform: translateX(0px);
+}
+.rightToLeft-exit-active {
+  opacity: 0;
+  transform: translateX(10px);
+  transition: opacity 200ms, transform 200ms;
+}
+.pop-enter {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.pop-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 200ms, transform 200ms;
+}
+.pop-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+.pop-exit-active {
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 200ms, transform 200ms;
+}

package/dist/styles.less

@@ -2977,3 +2977,148 @@ h3{
 	}
 }
 
+.contextmenu {
+	background: #161616;
+    position: absolute;
+    top: 20px;
+    min-width: 125px;
+    padding: 3px;
+    z-index: 1000;
+	.submenu {
+		position: relative;
+		&:hover>.contextmenu__item {
+			background-color: #f1f1f1;
+		}
+	}
+	.submenu__item {
+		background-color: #ffffff;
+		border-radius: 4px;
+		border: solid 1px #cccccc;
+		left: 100%;
+		opacity: 0;
+		padding: 5px 0;
+		position: absolute;
+		top: 0;
+		visibility: hidden;
+		width: 100%;
+	}
+	.submenu>.contextmenu__item {
+		&:after {
+			border-color: transparent transparent transparent #000000;
+			border-style: solid;
+			border-width: 5px 8px;
+			content: '';
+			height: 0;
+			position: absolute;
+			right: 0px;
+			top: 50%;
+			transform: translateY(-50%);
+			transition: 0.2s;
+			width: 0;
+		}
+	}
+}
+.contextmenu__item {
+	padding: 3px;
+    box-sizing: border-box; 
+    cursor: pointer;
+	&:hover {
+		&:not(.contextmenu__item--disabled) {
+			background-color: #393939;
+		}
+	}
+}
+.contextmenu__item--disabled {
+	cursor: no-drop;
+	opacity: 0.5;
+}
+.fade-enter {
+	opacity: 0;
+}
+.fade-enter-active {
+	opacity: 1;
+	transition: opacity 200ms;
+}
+.fade-exit {
+	opacity: 1;
+}
+.fade-exit-active {
+	opacity: 0;
+	transition: opacity 200ms;
+}
+.zoom-enter {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+}
+.zoom-enter-active {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.zoom-exit {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+}
+.zoom-exit-active {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-enter {
+	opacity: 0;
+	transform: translate(10px, 10px);
+}
+.toTopLeft-enter-active {
+	opacity: 1;
+	transform: translate(0px, 0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-exit {
+	opacity: 1;
+	transform: translate(0px, 0px);
+}
+.toTopLeft-exit-active {
+	opacity: 0;
+	transform: translate(10px, 10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-enter {
+	opacity: 0;
+	transform: translateX(10px);
+}
+.rightToLeft-enter-active {
+	opacity: 1;
+	transform: translateX(0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-exit {
+	opacity: 1;
+	transform: translateX(0px);
+}
+.rightToLeft-exit-active {
+	opacity: 0;
+	transform: translateX(10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-enter {
+	opacity: 0;
+	transform: scale(0.8);
+}
+.pop-enter-active {
+	opacity: 1;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-exit {
+	opacity: 1;
+	transform: scale(1);
+}
+.pop-exit-active {
+	opacity: 0;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}

package/less/components/context-menu.less

@@ -0,0 +1,145 @@
+.contextmenu {
+	background: #161616;
+    position: absolute;
+    top: 20px;
+    min-width: 125px;
+    padding: 3px;
+    z-index: 1000;
+	.submenu {
+		position: relative;
+		&:hover>.contextmenu__item {
+			background-color: #f1f1f1;
+		}
+	}
+	.submenu__item {
+		background-color: #ffffff;
+		border-radius: 4px;
+		border: solid 1px #cccccc;
+		left: 100%;
+		opacity: 0;
+		padding: 5px 0;
+		position: absolute;
+		top: 0;
+		visibility: hidden;
+		width: 100%;
+	}
+	.submenu>.contextmenu__item {
+		&:after {
+			border-color: transparent transparent transparent #000000;
+			border-style: solid;
+			border-width: 5px 8px;
+			content: '';
+			height: 0;
+			position: absolute;
+			right: 0px;
+			top: 50%;
+			transform: translateY(-50%);
+			transition: 0.2s;
+			width: 0;
+		}
+	}
+}
+.contextmenu__item {
+	padding: 3px;
+    box-sizing: border-box; 
+    cursor: pointer;
+	&:hover {
+		&:not(.contextmenu__item--disabled) {
+			background-color: #393939;
+		}
+	}
+}
+.contextmenu__item--disabled {
+	cursor: no-drop;
+	opacity: 0.5;
+}
+.fade-enter {
+	opacity: 0;
+}
+.fade-enter-active {
+	opacity: 1;
+	transition: opacity 200ms;
+}
+.fade-exit {
+	opacity: 1;
+}
+.fade-exit-active {
+	opacity: 0;
+	transition: opacity 200ms;
+}
+.zoom-enter {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+}
+.zoom-enter-active {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.zoom-exit {
+	opacity: 1;
+	transform-origin: top left;
+	transform: scale(1);
+}
+.zoom-exit-active {
+	opacity: 0;
+	transform-origin: top left;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-enter {
+	opacity: 0;
+	transform: translate(10px, 10px);
+}
+.toTopLeft-enter-active {
+	opacity: 1;
+	transform: translate(0px, 0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.toTopLeft-exit {
+	opacity: 1;
+	transform: translate(0px, 0px);
+}
+.toTopLeft-exit-active {
+	opacity: 0;
+	transform: translate(10px, 10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-enter {
+	opacity: 0;
+	transform: translateX(10px);
+}
+.rightToLeft-enter-active {
+	opacity: 1;
+	transform: translateX(0px);
+	transition: opacity 200ms, transform 200ms;
+}
+.rightToLeft-exit {
+	opacity: 1;
+	transform: translateX(0px);
+}
+.rightToLeft-exit-active {
+	opacity: 0;
+	transform: translateX(10px);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-enter {
+	opacity: 0;
+	transform: scale(0.8);
+}
+.pop-enter-active {
+	opacity: 1;
+	transform: scale(1);
+	transition: opacity 200ms, transform 200ms;
+}
+.pop-exit {
+	opacity: 1;
+	transform: scale(1);
+}
+.pop-exit-active {
+	opacity: 0;
+	transform: scale(0.8);
+	transition: opacity 200ms, transform 200ms;
+}

package/less/entry.less

@@ -36,4 +36,5 @@
 @import (inline) "components/variable-default-upload.less";
 @import (inline) "components/anchor-field.less";
 @import (inline) "components/advanced-number-field.less";
-@import (inline) "components/font-picker.less";
+@import (inline) "components/font-picker.less";
+@import (inline) "components/context-menu.less";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.2.38",
+    "version": "2.2.39",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -45,7 +45,8 @@
         "moment": "^2.29.1",
         "react-color": "^2.18.0",
         "react-merge-refs": "^1.1.0",
-        "react-moveable": "^0.26.1"
+        "react-moveable": "^0.26.1",
+        "react-transition-group": "^4.4.5"
     },
     "peerDependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import CSSTransition from 'react-transition-group/CSSTransition';
+
+const AnimateComponent = ({ children, isVisible, timeout, className }) => {
+    const nodeRef = React.useRef(null);
+
+    return (
+        <CSSTransition
+            nodeRef={nodeRef}
+            in={isVisible}
+            timeout={timeout}
+            classNames={className}
+            unmountOnExit>
+            {children}
+        </CSSTransition>
+    );
+};
+
+export default AnimateComponent;

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

@@ -0,0 +1,172 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { registerEvent, callHideEvent } from './registerEvent';
+import AnimateComponent from './AnimateComponent';
+import { throttle } from './helper';
+
+const ContextMenu = ({
+    children,
+    id,
+    appendTo,
+    hideOnLeave,
+    onMouseLeave,
+    onHide,
+    onShow,
+    preventHideOnScroll,
+    preventHideOnResize,
+    attributes,
+    animation
+}) => {
+    const contextMenuEl = useRef(null);
+    const [isVisible, setVisible] = useState(false);
+    const [clientPosition, setClientPosition] = useState(null);
+
+    const showMenu = (e) => {
+        const { position } = e;
+
+        setVisible(true);
+        setClientPosition(position);
+    };
+
+    const hideMenu = () => {
+        setVisible(false);
+        if (onHide) onHide();
+    };
+
+    const handleMouseLeave = useCallback((e) => {
+        e.preventDefault();
+
+        onMouseLeave(e);
+
+        if (hideOnLeave) callHideEvent(id);
+    }, []);
+
+    const clickOutsideCallback = (event) => {
+        if (contextMenuEl.current && !contextMenuEl.current.contains(event.target)) {
+            callHideEvent(id);
+        }
+    };
+
+    const contextMenuCallback = (event) => {
+        let targetElement = event.target;
+
+        do {
+            if (targetElement.classList && targetElement.classList.contains('menu-trigger')) {
+                return;
+            }
+            targetElement = targetElement.parentNode;
+        } while (targetElement);
+
+        callHideEvent(id);
+    };
+
+    const onScrollHideCallback = throttle(() => {
+        callHideEvent(id);
+    }, 200);
+
+    const onResizeHideCallback = throttle(() => {
+        callHideEvent(id);
+    }, 200);
+
+    useEffect(() => {
+        registerEvent(id, showMenu, hideMenu);
+
+        // detect click outside
+        document.addEventListener('mousedown', clickOutsideCallback);
+
+        // detect right click outside
+        document.addEventListener('contextmenu', contextMenuCallback);
+
+        // on scroll hide handled
+        if (!preventHideOnScroll) {
+            window.addEventListener('scroll', onScrollHideCallback);
+        }
+
+        // on resize hide handled
+        if (!preventHideOnResize) {
+            window.addEventListener('resize', onResizeHideCallback);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', clickOutsideCallback);
+            document.removeEventListener('contextmenu', contextMenuCallback);
+            window.removeEventListener('scroll', onScrollHideCallback);
+            window.removeEventListener('resize', onResizeHideCallback);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (isVisible) {
+            const { clientY, clientX } = clientPosition;
+            const { innerHeight: windowInnerHeight, innerWidth: windowInnerWidth } = window;
+            const { offsetHeight: elemHeight, offsetWidth: elemWidth } = contextMenuEl.current;
+
+            let newClientY = clientY;
+            let newClientX = clientX;
+
+            if (windowInnerHeight < clientY + elemHeight) newClientY = clientY - elemHeight;
+            if (windowInnerWidth < clientX + elemWidth) newClientX = clientX - elemWidth;
+
+            contextMenuEl.current.style.top = `${newClientY + 2}px`;
+            contextMenuEl.current.style.left = `${newClientX + 2}px`;
+
+            if (onShow) onShow();
+        }
+    }, [isVisible, clientPosition]);
+
+    const childrenWithProps = React.Children.map(children, (child) =>
+        React.cloneElement(child, { id })
+    );
+
+    const ContextComponent = () => (
+        <div
+            className={`contextmenu`}
+            ref={contextMenuEl}
+            onMouseLeave={handleMouseLeave}
+            {...attributes}>
+            {childrenWithProps}
+        </div>
+    );
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(<ContextComponent />, document.querySelector(appendTo));
+
+    if (document.readyState === 'complete' && appendTo) {
+        return animation ? (
+            <AnimateComponent
+                isVisible={isVisible}
+                timeout={200}
+                className={animation}>
+                <PortalContextComponent />
+            </AnimateComponent>
+        ) : (
+            <PortalContextComponent />
+        );
+    }
+
+    return animation ? (
+        <AnimateComponent
+            isVisible={isVisible}
+            timeout={200}
+            className={animation}>
+            <ContextComponent />
+        </AnimateComponent>
+    ) : (
+        <ContextComponent />
+    );
+};
+
+export default ContextMenu;
+
+ContextMenu.defaultProps = {
+    appendTo: null,
+    hideOnLeave: false,
+    preventHideOnResize: false,
+    preventHideOnScroll: false,
+    attributes: {},
+    className: '',
+    animation: 'fade',
+    onMouseLeave: () => null,
+    onHide: () => null,
+    onShow: () => null
+};

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

@@ -0,0 +1,34 @@
+import React, { useCallback, useRef } from 'react';
+import { callHideEvent } from './registerEvent';
+
+const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes, className }) => {
+    const contextMenuItem = useRef(null);
+
+    const handleClickEvent = useCallback((e) => {
+        if (disabled) return;
+        onClick(e);
+
+        if (!preventClose) callHideEvent('ID_NOT_REQUIRED');
+    }, []);
+
+    return (
+        <div
+            className={`${disabled ? 'contextmenu__item--disabled' : 'contextmenu__item'}`}
+            onClick={handleClickEvent}
+            {...attributes}
+            ref={contextMenuItem}>
+            {children}
+        </div>
+    );
+};
+
+export default ContextMenuItem;
+
+ContextMenuItem.defaultProps = {
+    disabled: false,
+    preventClose: false,
+    attributes: {},
+    className: '',
+    onClick: () => null,
+    onItemHover: () => null
+};