gg13-tw-dropdown/dist/cjs/components/App.js

GG13 Dropdown component for React with Tailwind CSS

"use strict";
'use client';
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var gg13_transition_fade_1 = require("gg13-transition-fade");
function Dropdown(_a) {
    var children = _a.children, iconComponent = _a.iconComponent, _b = _a.containerClass, containerClass = _b === void 0 ? '' : _b, _c = _a.iconClass, iconClass = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.outsideClassName, outsideClassName = _e === void 0 ? '' : _e, _f = _a.isDropdownOpen, isDropdownOpen = _f === void 0 ? false : _f, onDropdownOpen = _a.onDropdownOpen, onContainerClick = _a.onContainerClick;
    var _g = (0, react_1.useState)(isDropdownOpen), isOpen = _g[0], setIsOpen = _g[1];
    var handleClick = function () {
        setIsOpen(!isOpen);
    };
    var handleClickOutside = function () {
        setIsOpen(false);
    };
    var handleContainerClick = function () {
        onContainerClick === null || onContainerClick === void 0 ? void 0 : onContainerClick();
    };
    (0, react_1.useEffect)(function () {
        onDropdownOpen === null || onDropdownOpen === void 0 ? void 0 : onDropdownOpen(isOpen);
    }, [isOpen]);
    (0, react_1.useEffect)(function () {
        setIsOpen(isDropdownOpen);
    }, [isDropdownOpen]);
    return (react_1["default"].createElement("div", { className: "relative ".concat(className) },
        react_1["default"].createElement("div", { className: "cursor-pointer relative ".concat(iconClass), onClick: handleClick, style: { zIndex: 3 } }, iconComponent),
        react_1["default"].createElement(gg13_transition_fade_1.TransitionFade, { isShown: isOpen },
            isOpen && (react_1["default"].createElement("div", { className: "fixed inset-0 ".concat(outsideClassName), onClick: handleClickOutside, style: { zIndex: 1 } })),
            react_1["default"].createElement("div", { className: "absolute right-0 mt-1 rounded-lg shadow-lg ".concat(containerClass, " ").concat(isOpen ? 'pointer-events-auto' : 'pointer-events-none'), style: { zIndex: 2 }, onClick: handleContainerClick }, children))));
}
exports["default"] = Dropdown;
//# sourceMappingURL=App.js.map