@ducor/react
Version:
admin template ui interface
72 lines (71 loc) • 3.53 kB
JavaScript
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, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, createContext, useContext, createElement, useRef, } from "react";
import { twJoin, twMerge } from "tailwind-merge";
import { usePlacement, useOutsideClick } from "@ducor/hooks";
import MemoComponent from "./memo-component";
const PopoverContext = createContext(undefined);
const usePopover = () => {
const context = useContext(PopoverContext);
if (!context) {
throw new Error("Popover components must be used within a Popover");
}
return context;
};
const Popover = ({ children, className, placement = "left", }) => {
const [isOpen, setIsOpen] = useState(false);
const closePopover = () => setIsOpen(false);
const ref = useRef(null);
const { refs, styles, placement: resolvedPlacement, } = usePlacement({
isOpen,
strategy: "absolute",
defaultPlacement: placement,
defaultAlignment: "center",
});
useOutsideClick({
ref: ref,
handler: closePopover,
});
return (_jsx(PopoverContext.Provider, { value: {
placement: resolvedPlacement,
contentRef: refs.content,
referenceRef: refs.reference,
contentStyle: styles,
isOpen,
setIsOpen,
closePopover,
}, children: _jsx("div", { ref: ref, className: twMerge("relative", className), children: _jsx(MemoComponent, { component: children }) }) }));
};
const PopoverTrigger = (_a) => {
var { children, as: Component = "div", className } = _a, props = __rest(_a, ["children", "as", "className"]);
const { setIsOpen, referenceRef } = usePopover();
return createElement(Component, Object.assign({ ref: referenceRef, onClick: () => setIsOpen((prev) => !prev), className: twMerge("cursor-pointer", className) }, props), children);
};
const PopoverContent = ({ children, className, }) => {
const { contentRef, contentStyle, isOpen, placement } = usePopover();
if (!isOpen)
return null;
// const placementClass = {
// top: "left-1/2 -bottom-[7px] -translate-x-1/2 border-r-2 border-b-2",
// right: "top-1/2 -left-[7px] -translate-y-1/2 border-l-2 border-b-2",
// bottom: "left-1/2 -top-[7px] -translate-x-1/2 border-l-2 border-t-2",
// left: "top-1/2 -right-[7px] -translate-y-1/2 border-r-2 border-t-2",
// };
return (_jsx("div", { ref: contentRef, className: twMerge("absolute bg-white shadow-lg border border-gray-200 rounded-md z-10 min-w-64", "dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100", className), style: contentStyle, children: _jsxs("div", { className: 'relative', children: [_jsx("div", { className: twJoin("absolute size-3 rotate-45", " bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-600"
// placementClass[placement]
) }), _jsx("div", { className: 'p-3', children: children })] }) }));
};
export default Object.assign(Popover, {
Trigger: PopoverTrigger,
Content: PopoverContent,
});