@votercircle/clay-v2-trigger 1.0.0

package/index.d.ts

@@ -0,0 +1,3 @@
+export { Trigger } from './trigger';
+export type { TriggerProps } from './trigger';
+export type { PopupDirectionTypes } from './popup';

package/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.Trigger = void 0;
+var trigger_1 = require("./trigger");
+__createBinding(exports, trigger_1, "Trigger");

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-trigger",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}

package/popup.d.ts

@@ -0,0 +1,15 @@
+import { HideActionType, PositionProps } from './trigger.utils';
+declare const directionList: readonly ["bottom", "bottom-left", "bottom-right", "top", "top-left", "top-right", "left", "right"];
+export declare type PopupDirectionTypes = typeof directionList[number];
+declare type PopupProps = {
+    children?: any;
+    width?: number;
+    direction?: PopupDirectionTypes;
+    hideActionEventList?: HideActionType[];
+    position?: PositionProps;
+    portal?: Element;
+    autoAdjustDirection?: boolean;
+    onHide: Function;
+};
+export declare const PopUp: ({ children, width, position, direction, hideActionEventList, onHide, autoAdjustDirection, portal, }: PopupProps) => JSX.Element;
+export {};

package/popup.js

@@ -0,0 +1,258 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.PopUp = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var trigger_1 = require("./trigger");
+var trigger_utils_1 = require("./trigger.utils");
+var directionList = [
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'top',
+    'top-left',
+    'top-right',
+    'left',
+    'right',
+];
+var PopUp = function (_a) {
+    var children = _a.children, width = _a.width, position = _a.position, _b = _a.direction, direction = _b === void 0 ? 'bottom-left' : _b, hideActionEventList = _a.hideActionEventList, onHide = _a.onHide, _c = _a.autoAdjustDirection, autoAdjustDirection = _c === void 0 ? true : _c, portal = _a.portal;
+    var _d = (0, react_1.useState)(), _popup = _d[0], setPopup = _d[1];
+    var TriggerContext = (0, trigger_1.useTriggerContext)();
+    (0, react_1.useEffect)(function () {
+        setPopup(createPopup());
+        return function () {
+            _popup === null || _popup === void 0 ? void 0 : _popup.remove();
+            removeListeners();
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        setPopupAxis();
+        setListeners();
+        return function () {
+            removeListeners();
+        };
+    }, [_popup]);
+    function setPopupAxis() {
+        if (!_popup) {
+            return;
+        }
+        if (width) {
+            _popup.style.width = width + 'px';
+        }
+        setDirection(direction);
+        if (autoAdjustDirection) {
+            autoAdjust(direction);
+        }
+    }
+    function setDirection(newDirection) {
+        if (!_popup) {
+            return;
+        }
+        var popupRect = _popup.getBoundingClientRect();
+        switch (newDirection) {
+            case 'bottom':
+                _popup.style.left = "calc(".concat(position === null || position === void 0 ? void 0 : position.x, "px - ").concat(_popup.offsetWidth / 2, "px + ").concat(((TriggerContext === null || TriggerContext === void 0 ? void 0 : TriggerContext.getTriggerWidth) || 0) / 2, "px)");
+                _popup.style.top = (position === null || position === void 0 ? void 0 : position.y) + 'px';
+                break;
+            case 'bottom-right':
+                _popup.style.left = "calc(".concat(position === null || position === void 0 ? void 0 : position.x, "px - ").concat(_popup.offsetWidth, "px + ").concat(TriggerContext.getTriggerWidth, "px)");
+                _popup.style.top = (position === null || position === void 0 ? void 0 : position.y) + 'px';
+                break;
+            case 'bottom-left':
+                _popup.style.left = Math.ceil((position === null || position === void 0 ? void 0 : position.x) || 0) + 'px';
+                _popup.style.top = (position === null || position === void 0 ? void 0 : position.y) + 'px';
+                break;
+            case 'top':
+                _popup.style.left = "calc(".concat(position === null || position === void 0 ? void 0 : position.x, "px - ").concat(_popup.offsetWidth / 2, "px + ").concat(((TriggerContext === null || TriggerContext === void 0 ? void 0 : TriggerContext.getTriggerWidth) || 0) / 2, "px)");
+                _popup.style.top =
+                    ((position === null || position === void 0 ? void 0 : position.y) || 0) - popupRect.height - ((TriggerContext === null || TriggerContext === void 0 ? void 0 : TriggerContext.getTriggerHeight) || 0) + 'px';
+                break;
+            case 'top-right':
+                _popup.style.left = "calc(".concat(position === null || position === void 0 ? void 0 : position.x, "px - ").concat(_popup.offsetWidth, "px + ").concat(TriggerContext.getTriggerWidth, "px)");
+                _popup.style.top =
+                    ((position === null || position === void 0 ? void 0 : position.y) || 0) - popupRect.height - ((TriggerContext === null || TriggerContext === void 0 ? void 0 : TriggerContext.getTriggerHeight) || 0) + 'px';
+                break;
+            case 'top-left':
+                _popup.style.left = Math.ceil((position === null || position === void 0 ? void 0 : position.x) || 0) + 'px';
+                _popup.style.top =
+                    ((position === null || position === void 0 ? void 0 : position.y) || 0) - popupRect.height - ((TriggerContext === null || TriggerContext === void 0 ? void 0 : TriggerContext.getTriggerHeight) || 0) + 'px';
+                break;
+            case 'left':
+                _popup.style.left = "calc(".concat(position === null || position === void 0 ? void 0 : position.x, "px - ").concat(_popup.offsetWidth, "px)");
+                _popup.style.top =
+                    ((position === null || position === void 0 ? void 0 : position.y) || 0) -
+                        popupRect.height / 2 -
+                        ((TriggerContext === null || TriggerContext === void 0 ? void 0 : TriggerContext.getTriggerHeight) || 0) / 2 +
+                        'px';
+                break;
+            case 'right':
+                _popup.style.left = "calc(".concat(position === null || position === void 0 ? void 0 : position.x, "px + ").concat(TriggerContext.getTriggerWidth, "px)");
+                _popup.style.top =
+                    ((position === null || position === void 0 ? void 0 : position.y) || 0) -
+                        popupRect.height / 2 -
+                        ((TriggerContext === null || TriggerContext === void 0 ? void 0 : TriggerContext.getTriggerHeight) || 0) / 2 +
+                        'px';
+                break;
+        }
+    }
+    // if the popup goes beyond bounding box, adjust the direction
+    function autoAdjust(newDirection) {
+        if (!_popup) {
+            return;
+        }
+        var popupRect = _popup.getBoundingClientRect();
+        var _a = document.documentElement, clientHeight = _a.clientHeight, clientWidth = _a.clientWidth;
+        var isOverflowBottom = popupRect.bottom > clientHeight;
+        var isOverflowTop = popupRect.top < 0;
+        var isOverflowRight = popupRect.right > clientWidth;
+        var isOverflowLeft = popupRect.left < 0;
+        switch (newDirection) {
+            case 'left':
+                if (isOverflowLeft) {
+                    setDirection('right');
+                }
+                break;
+            case 'right':
+                if (isOverflowRight) {
+                    setDirection('left');
+                }
+                break;
+            case 'top':
+                if (isOverflowTop) {
+                    setDirection('bottom');
+                }
+                break;
+            case 'top-right':
+                if (isOverflowTop) {
+                    setDirection('bottom-right');
+                }
+                break;
+            case 'top-left':
+                if (isOverflowTop) {
+                    setDirection('bottom-left');
+                }
+                break;
+            case 'bottom':
+                if (isOverflowBottom) {
+                    setDirection('top');
+                }
+                break;
+            case 'bottom-right':
+                if (isOverflowBottom) {
+                    setDirection('top-right');
+                }
+                break;
+            case 'bottom-left':
+                if (isOverflowBottom) {
+                    setDirection('top-left');
+                }
+                break;
+        }
+        switch (newDirection) {
+            case 'left':
+            case 'right':
+                if (isOverflowBottom) {
+                    _popup.style.top = "calc(".concat(_popup.style.top, " + ").concat(clientHeight - popupRect.bottom, "px)");
+                }
+                else if (isOverflowTop) {
+                    _popup.style.top = '0px';
+                }
+                break;
+            case 'top':
+            case 'bottom':
+                if (isOverflowLeft) {
+                    _popup.style.left = '0px';
+                }
+                else if (isOverflowRight) {
+                    _popup.style.left = 'auto';
+                    _popup.style.right = '0px';
+                }
+                break;
+            case 'top-right':
+            case 'bottom-right':
+                if (isOverflowLeft) {
+                    _popup.style.left = '0px';
+                }
+                break;
+            case 'top-left':
+            case 'bottom-left':
+                if (isOverflowRight) {
+                    _popup.style.left = 'auto';
+                    _popup.style.right = '0px';
+                }
+                break;
+        }
+    }
+    /**
+     * We need to construct all the event listeners mentioned in the type HideActionType
+     */
+    function setListeners() {
+        if (hideActionEventList === null || hideActionEventList === void 0 ? void 0 : hideActionEventList.find(function (item) { return ['onClick', 'onOutsideClick'].includes(item); })) {
+            document.addEventListener('click', handleClickEvents, true);
+        }
+    }
+    /**
+     * We need to destruct all the event listeners mentioned in the type HideActionType
+     */
+    function removeListeners() {
+        if (hideActionEventList === null || hideActionEventList === void 0 ? void 0 : hideActionEventList.find(function (item) { return ['onClick', 'onOutsideClick'].includes(item); })) {
+            document.removeEventListener('click', handleClickEvents, true);
+        }
+    }
+    function createPopup() {
+        var popup = getContainer();
+        var popupPortal = portal;
+        if (!popupPortal) {
+            popupPortal = document.createElement('div');
+            popupPortal.setAttribute('id', trigger_utils_1.PORTAL_MAP.POPUP);
+            document.body.insertBefore(popupPortal, null);
+        }
+        popupPortal === null || popupPortal === void 0 ? void 0 : popupPortal.appendChild(popup);
+        return popup;
+    }
+    function getContainer() {
+        var popupContainer = window.document.createElement('div');
+        popupContainer.style.position = 'absolute';
+        popupContainer.style.top = '0';
+        popupContainer.style.left = '0';
+        popupContainer.style.zIndex = '99';
+        return popupContainer;
+    }
+    function handleClickEvents(event) {
+        if ((hideActionEventList === null || hideActionEventList === void 0 ? void 0 : hideActionEventList.includes('onOutsideClick')) && !(_popup === null || _popup === void 0 ? void 0 : _popup.contains(event.target))) {
+            onHide();
+        }
+        else if ((hideActionEventList === null || hideActionEventList === void 0 ? void 0 : hideActionEventList.includes('onClick')) && (_popup === null || _popup === void 0 ? void 0 : _popup.contains(event.target))) {
+            onHide();
+        }
+    }
+    return _popup ? react_dom_1["default"].createPortal(children, _popup) : react_1["default"].createElement(react_1["default"].Fragment, null);
+};
+exports.PopUp = PopUp;

package/target.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ShowActionType } from './trigger.utils';
+export declare type TargetProps = {
+    children?: any;
+    disabled?: boolean;
+    showAction?: ShowActionType[];
+    onTrigger: Function;
+};
+export declare const Target: React.ForwardRefExoticComponent<TargetProps & React.RefAttributes<HTMLElement>>;

package/target.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Target = void 0;
+var react_1 = __importDefault(require("react"));
+exports.Target = react_1["default"].forwardRef(function (_a, ref) {
+    var children = _a.children, onTrigger = _a.onTrigger, showAction = _a.showAction, disabled = _a.disabled;
+    /**
+     * Handles onClick event from Child node
+     */
+    var onClick = function () {
+        onTrigger();
+    };
+    /**
+     * Shallow bind required events to the child node
+     */
+    function destructureProps() {
+        var cloneProps = {
+            ref: ref
+        };
+        if (disabled) {
+            return;
+        }
+        if (showAction === null || showAction === void 0 ? void 0 : showAction.includes('onClick')) {
+            cloneProps.onClickCapture = onClick;
+        }
+        return cloneProps;
+    }
+    var TriggerChild = react_1["default"].Children.only(children);
+    return react_1["default"].cloneElement(TriggerChild, __assign({}, destructureProps()));
+});

package/trigger.d.ts

@@ -0,0 +1,29 @@
+import { PopupDirectionTypes } from './popup';
+import { ShowActionType, HideActionType } from './trigger.utils';
+export declare type TriggerProps = {
+    children?: any;
+    target?: any;
+    popup?: any;
+    popupWidth?: number;
+    popupDirection?: PopupDirectionTypes;
+    showActionEvents?: ShowActionType[];
+    hideActionEvents?: HideActionType[];
+    disabled?: boolean;
+    autoAdjustDirection?: boolean;
+    onClose?: Function;
+    onOpen?: Function;
+};
+declare type TriggerCloseProps = {
+    children?: any;
+    disabled?: boolean;
+};
+export declare const useTriggerContext: () => {
+    close: () => void;
+    getTriggerWidth?: number;
+    getTriggerHeight?: number;
+};
+export declare function Trigger({ target, popup, popupWidth, popupDirection, showActionEvents, hideActionEvents, disabled, autoAdjustDirection, onClose, onOpen, }: TriggerProps): JSX.Element;
+export declare namespace Trigger {
+    var Close: ({ children, disabled }: TriggerCloseProps) => JSX.Element;
+}
+export {};

package/trigger.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+exports.Trigger = exports.useTriggerContext = void 0;
+var react_1 = __importStar(require("react"));
+var popup_1 = require("./popup");
+var target_1 = require("./target");
+var trigger_utils_1 = require("./trigger.utils");
+var TriggerContext = react_1["default"].createContext({});
+var useTriggerContext = function () { return (0, react_1.useContext)(TriggerContext); };
+exports.useTriggerContext = useTriggerContext;
+function Trigger(_a) {
+    var target = _a.target, popup = _a.popup, popupWidth = _a.popupWidth, popupDirection = _a.popupDirection, showActionEvents = _a.showActionEvents, hideActionEvents = _a.hideActionEvents, disabled = _a.disabled, autoAdjustDirection = _a.autoAdjustDirection, onClose = _a.onClose, onOpen = _a.onOpen;
+    var _b = (0, react_1.useState)(false), showPopup = _b[0], setPopupState = _b[1];
+    var _c = (0, react_1.useState)(), popupPortal = _c[0], setPopupPortal = _c[1];
+    var _d = (0, react_1.useState)(), popupPosition = _d[0], setPopupPosition = _d[1];
+    var _e = (0, react_1.useState)(), triggerDimension = _e[0], setTriggerDimension = _e[1];
+    var elRef = (0, react_1.createRef)();
+    (0, react_1.useEffect)(function () {
+        var parentPortal = (0, trigger_utils_1.getParentPortal)(elRef === null || elRef === void 0 ? void 0 : elRef.current);
+        if (parentPortal) {
+            setPopupPortal(parentPortal);
+        }
+    }, []);
+    function showPopupState() {
+        var _a;
+        var el = (_a = elRef === null || elRef === void 0 ? void 0 : elRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        var absolutePosition = (0, trigger_utils_1.getElementPosition)(elRef === null || elRef === void 0 ? void 0 : elRef.current);
+        var p = { x: el.x || 0, y: (absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.y) || 0 };
+        if (!showPopup && p) {
+            setPopupPosition(p);
+            setTriggerDimension({ width: el.width, height: el.height });
+        }
+        setPopupState(true);
+        if (onOpen) {
+            onOpen();
+        }
+    }
+    function hidePopup() {
+        setTimeout(function () { return setPopupState(false); });
+        if (onClose) {
+            onClose();
+        }
+    }
+    return (react_1["default"].createElement(TriggerContext.Provider, { value: {
+            close: hidePopup,
+            getTriggerWidth: triggerDimension === null || triggerDimension === void 0 ? void 0 : triggerDimension.width,
+            getTriggerHeight: triggerDimension === null || triggerDimension === void 0 ? void 0 : triggerDimension.height
+        } },
+        react_1["default"].createElement(target_1.Target, { ref: elRef, onTrigger: showPopupState, showAction: showActionEvents, disabled: disabled }, target),
+        showPopup && (react_1["default"].createElement(popup_1.PopUp, { width: popupWidth, direction: popupDirection, position: popupPosition, hideActionEventList: hideActionEvents, onHide: hidePopup, portal: popupPortal, autoAdjustDirection: autoAdjustDirection }, popup))));
+}
+exports.Trigger = Trigger;
+/**
+ * This helps to manually hide the popup by trigerring a close event inside the popup
+ */
+Trigger.Close = function (_a) {
+    var children = _a.children, disabled = _a.disabled;
+    var triggerContext = (0, exports.useTriggerContext)();
+    function closePopup() {
+        triggerContext.close();
+    }
+    return (react_1["default"].createElement(target_1.Target, { onTrigger: closePopup, disabled: disabled, showAction: ['onClick'] }, children));
+};

package/trigger.utils.d.ts

@@ -0,0 +1,15 @@
+declare const ShowActionList: readonly ["onClick"];
+declare const HideActionList: readonly ["onClick", "onOutsideClick"];
+export declare enum PORTAL_MAP {
+    DIALOG = "clay-ui-dialog-portal-container",
+    POPUP = "clay-ui-popup-portal-container"
+}
+export declare type ShowActionType = typeof ShowActionList[number];
+export declare type HideActionType = typeof HideActionList[number];
+export declare type PositionProps = {
+    x: number;
+    y: number;
+};
+export declare function getElementPosition(targetEl: any): PositionProps | null;
+export declare function getParentPortal(targetEl: Element): Element | null;
+export {};

package/trigger.utils.js

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.getParentPortal = exports.getElementPosition = exports.PORTAL_MAP = void 0;
+var ShowActionList = ['onClick'];
+var HideActionList = ['onClick', 'onOutsideClick'];
+var PORTAL_MAP;
+(function (PORTAL_MAP) {
+    PORTAL_MAP["DIALOG"] = "clay-ui-dialog-portal-container";
+    PORTAL_MAP["POPUP"] = "clay-ui-popup-portal-container";
+})(PORTAL_MAP = exports.PORTAL_MAP || (exports.PORTAL_MAP = {}));
+function getElementPosition(targetEl) {
+    if (!targetEl) {
+        return null;
+    }
+    var element = targetEl;
+    var p = {
+        x: element.offsetLeft || 0,
+        y: targetEl.offsetHeight + (element.offsetTop || 0)
+    };
+    while ((element = element.offsetParent)) {
+        p.x += element.offsetLeft;
+        p.y += element.offsetTop;
+    }
+    return p;
+}
+exports.getElementPosition = getElementPosition;
+function getParentPortal(targetEl) {
+    if (!targetEl) {
+        return null;
+    }
+    return [PORTAL_MAP.DIALOG].includes(targetEl.id)
+        ? targetEl
+        : getParentPortal(targetEl.parentNode);
+}
+exports.getParentPortal = getParentPortal;