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

GG13 Dropdown component for React with Tailwind CSS

'use client';
import React, { useEffect, useState } from 'react';
import { TransitionFade } from 'gg13-transition-fade';
export default 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 = 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();
    };
    useEffect(function () {
        onDropdownOpen === null || onDropdownOpen === void 0 ? void 0 : onDropdownOpen(isOpen);
    }, [isOpen]);
    useEffect(function () {
        setIsOpen(isDropdownOpen);
    }, [isDropdownOpen]);
    return (React.createElement("div", { className: "relative ".concat(className) },
        React.createElement("div", { className: "cursor-pointer relative ".concat(iconClass), onClick: handleClick, style: { zIndex: 3 } }, iconComponent),
        React.createElement(TransitionFade, { isShown: isOpen },
            isOpen && (React.createElement("div", { className: "fixed inset-0 ".concat(outsideClassName), onClick: handleClickOutside, style: { zIndex: 1 } })),
            React.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))));
}
//# sourceMappingURL=App.js.map