@ducor/react
Version:
admin template ui interface
94 lines (93 loc) • 4.57 kB
JavaScript
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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, createContext, useContext, createElement, useRef, } from "react";
import { twMerge } from "tailwind-merge";
import { useOutsideClick } from "../hooks";
var DropdownContext = createContext(undefined);
var useDropdown = function () {
var context = useContext(DropdownContext);
if (!context) {
throw new Error("Dropdown must be used within a DropdownProvider");
}
return context;
};
// 🔹 Main Dropdown Component
var Dropdown = function (_a) {
var children = _a.children, className = _a.className;
var ref = useRef(null);
var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
var closeDropdown = function () { return setIsOpen(false); };
useOutsideClick({
ref: ref,
handler: closeDropdown,
});
return (_jsx(DropdownContext.Provider, { value: { isOpen: isOpen, setIsOpen: setIsOpen, closeDropdown: closeDropdown }, children: _jsx("div", { ref: ref, className: twMerge("relative inline-block", className), children: children }) }));
};
// 🔹 Dropdown Toggle Button
var DropdownToggle = function (_a) {
var children = _a.children, rightIcon = _a.rightIcon, _b = _a.as, Component = _b === void 0 ? "button" : _b, className = _a.className, props = __rest(_a, ["children", "rightIcon", "as", "className"]);
var _c = useDropdown(), isOpen = _c.isOpen, setIsOpen = _c.setIsOpen;
return createElement(Component, __assign({ onClick: function () { return setIsOpen(function (prev) { return !prev; }); }, className: twMerge("flex items-center cursor-pointer", className) }, props), _jsxs(_Fragment, { children: [children, rightIcon && _jsx("span", { className: 'ml-2', children: rightIcon })] }));
};
// 🔹 Get Placement Classes
var getPlacementClasses = function (placement) {
switch (placement) {
case "top-left":
return "top-0 left-0 top-12";
case "top-right":
return "top-0 right-0 top-12";
case "bottom-left":
return "bottom-0 left-0 bottom-12";
case "bottom-right":
return "bottom-0 right-0 bottom-12";
default:
return "top-10 right-0 top-12";
}
};
// 🔹 Dropdown Menu
var DropdownMenu = function (_a) {
var children = _a.children, className = _a.className, _b = _a.placement, placement = _b === void 0 ? "top-right" : _b;
var isOpen = useDropdown().isOpen;
if (!isOpen)
return null;
return (_jsx("div", { className: twMerge("absolute min-w-[150px] max-h-[80vh] overflow-y-auto bg-white shadow-lg border border-gray-200 rounded-md z-50 p-2", "dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600", getPlacementClasses(placement), className), children: children }));
};
// 🔹 Dropdown Item
var DropdownItem = function (_a) {
var children = _a.children, onClick = _a.onClick, className = _a.className, to = _a.to, props = __rest(_a, ["children", "onClick", "className", "to"]);
var closeDropdown = useDropdown().closeDropdown;
var handleClick = function (event) {
event.stopPropagation();
if (onClick)
onClick();
closeDropdown();
};
return createElement(to ? "a" : "div", __assign(__assign({ onClick: handleClick, className: twMerge("block px-4 py-2 text-gray-700 hover:bg-gray-100 cursor-pointer rounded-md", "dark:text-gray-300 ", "transition duration-200 ease-in-out dark:hover:bg-gray-700/50", className) }, (to ? { href: to } : {})), props), children);
};
// 🔹 Export Components
export default Object.assign(Dropdown, {
Toggle: DropdownToggle,
Menu: DropdownMenu,
Item: DropdownItem,
});