@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
92 lines (91 loc) • 4.49 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Transition, TransitionChild } from "@headlessui/react";
import external_clsx_default from "clsx";
import { Fragment, cloneElement, useEffect, useState } from "react";
import { twMerge } from "tailwind-merge";
import Loader_mjs_default from "../assets/icons/Loader.mjs";
import { useConfig } from "../context/ConfigContext.mjs";
import { slugify } from "../utils/tools.mjs";
import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "./radix/Dialog.mjs";
import { VisuallyHiddenRoot } from "./radix/VisuallyHidden.mjs";
const ClientActionDialog = ({ resource, resourceIds, onClose, action })=>{
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState(null);
const { apiBasePath } = useConfig();
useEffect(()=>{
setIsLoading(true);
const params = new URLSearchParams();
params.set("ids", resourceIds.join(","));
if (action.depth) params.set("depth", Math.max(1, action.depth).toString());
fetch(`${apiBasePath}/${slugify(resource)}/raw?${params.toString()}`).then((res)=>res.json()).then(setData).finally(()=>{
setIsLoading(false);
});
}, [
resource,
resourceIds
]);
return /*#__PURE__*/ jsx(DialogRoot, {
open: true,
onOpenChange: (open)=>{
if (!open) onClose();
},
modal: true,
children: /*#__PURE__*/ jsx(DialogPortal, {
forceMount: true,
children: /*#__PURE__*/ jsxs(Transition, {
show: true,
as: "div",
children: [
/*#__PURE__*/ jsx(TransitionChild, {
as: Fragment,
enter: "transition-opacity ease-in-out duration-300",
enterFrom: "opacity-0",
enterTo: "opacity-100",
leaveFrom: "opacity-100",
leaveTo: "opacity-0",
leave: "transition-opacity ease-in-out duration-300",
children: /*#__PURE__*/ jsx(DialogOverlay, {
forceMount: true
})
}),
/*#__PURE__*/ jsx(TransitionChild, {
as: Fragment,
enter: "transition-opacity ease-in-out duration-300",
enterFrom: "opacity-0",
enterTo: "opacity-100",
leaveFrom: "opacity-100",
leaveTo: "opacity-0",
leave: "transition-opacity ease-in-out duration-300",
children: /*#__PURE__*/ jsxs(DialogContent, {
className: twMerge(external_clsx_default("max-h-[90vh] max-w-screen-md max-w-xl overflow-y-auto outline-none md:left-[50%] md:top-[50%]", action?.className)),
forceMount: true,
"aria-describedby": void 0,
children: [
/*#__PURE__*/ jsx(VisuallyHiddenRoot, {
asChild: true,
children: /*#__PURE__*/ jsx(DialogTitle, {
children: action.title
})
}),
isLoading && /*#__PURE__*/ jsx("div", {
className: "flex items-center justify-center",
children: /*#__PURE__*/ jsx(Loader_mjs_default, {
className: "stroke-nextadmin-content-default dark:stroke-dark-nextadmin-content-default h-6 w-6 animate-spin dark:stroke-gray-300"
})
}),
data && /*#__PURE__*/ cloneElement(action.component, {
data: data,
resource,
resourceIds,
onClose
})
]
})
})
]
})
})
});
};
const components_ClientActionDialog = ClientActionDialog;
export { components_ClientActionDialog as default };