@ducor/react
Version:
admin template ui interface
248 lines (247 loc) • 11.6 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 { Dialog, DialogPanel, Transition, TransitionChild, } from "@headlessui/react";
import { forwardRef, createElement } from "react";
import { twMerge } from "tailwind-merge";
import Flex from "./flex";
import { Heading, Text } from "./typography";
import { BtnClose } from "./button";
import { useAdmin } from "../hooks";
// const Drawer: FC<DrawerProps> = forwardRef<HTMLDivElement, DrawerProps>(
// (
// {
// isOpen = false,
// size = "md",
// placement = "right",
// onClose = () => {},
// children,
// className,
// },
// ref
// ) => {
// const { adminData } = useAdmin(); // Get direction from admin context
// const { HTML_DIRECTION } = adminData;
// const isRTL = HTML_DIRECTION === "rtl";
// const sizeClasses = {
// sm: "w-[320px]",
// md: "w-[440px]",
// lg: "w-[640px]",
// xl: "w-[768px]",
// "2xl": "w-[1024px]",
// };
// const getEffectivePlacement = () => {
// if (isRTL) {
// return placement === "left" ? "right" : "left";
// }
// return placement;
// };
// const getPlacementClasses = () => {
// const effectivePlacement = getEffectivePlacement();
// return {
// container: effectivePlacement === "left" ? "left-0" : "right-0",
// panel: effectivePlacement === "left" ? "mr-auto" : "ml-auto",
// enterFrom:
// effectivePlacement === "left"
// ? "-translate-x-full"
// : "translate-x-full",
// enterTo: "translate-x-0",
// leaveFrom: "translate-x-0",
// leaveTo:
// effectivePlacement === "left"
// ? "-translate-x-full"
// : "translate-x-full",
// closeButtonPos: effectivePlacement === "left" ? "right-3" : "left-3",
// };
// };
// const placementClasses = getPlacementClasses();
// return (
// <Transition show={isOpen}>
// <Dialog
// className="fixed inset-0 z-50 overflow-hidden"
// onClose={onClose}
// ref={ref}
// >
// <TransitionChild
// enter="transition-opacity ease-linear duration-300"
// enterFrom="opacity-0"
// enterTo="opacity-100"
// leave="transition-opacity ease-linear duration-300"
// leaveFrom="opacity-100"
// leaveTo="opacity-0"
// >
// <div
// className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-black dark:bg-opacity-50"
// onClick={onClose}
// />
// </TransitionChild>
// <div className="fixed inset-0 overflow-hidden">
// <div className="absolute inset-0 overflow-hidden">
// <div className={`pointer-events-none fixed inset-y-0 ${currentPlacement.container} flex max-w-full`}>
// <TransitionChild
// enter="transform transition ease-in-out duration-300 sm:duration-500"
// enterFrom={currentPlacement.enterFrom}
// enterTo={currentPlacement.enterTo}
// leave="transform transition ease-in-out duration-300 sm:duration-500"
// leaveFrom={currentPlacement.leaveFrom}
// leaveTo={currentPlacement.leaveTo}
// >
// <DialogPanel
// className={twMerge(
// "pointer-events-auto relative h-full flex flex-col bg-white shadow-xl dark:bg-gray-800",
// sizeClasses[size],
// className
// )}
// >
// <div className={`absolute ${currentPlacement.closeButtonPos} top-3 size-5`}>
// <BtnClose onClose={onClose} />
// </div>
// <Flex
// justify="between"
// direction="col"
// className="h-full flex-col overflow-hidden"
// >
// {children}
// </Flex>
// </DialogPanel>
// </TransitionChild>
// </div>
// </div>
// </div>
// </Dialog>
// </Transition>
// );
// // <Transition show={isOpen}>
// // <Dialog
// // className='fixed inset-0 z-50 overflow-hidden'
// // onClose={onClose}
// // ref={ref}
// // >
// // <TransitionChild
// // enter='transition-opacity ease-linear duration-300'
// // enterFrom='opacity-0'
// // enterTo='opacity-100'
// // leave='transition-opacity ease-linear duration-300'
// // leaveFrom='opacity-100'
// // leaveTo='opacity-0'
// // >
// // <div
// // className='fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-black dark:bg-opacity-50'
// // onClick={onClose}
// // />
// // </TransitionChild>
// // <div className='fixed inset-0 overflow-hidden'>
// // <div className='absolute inset-0 overflow-hidden'>
// // <div
// // className={`pointer-events-none fixed inset-y-0 ${placementClasses.container} flex max-w-full`}
// // >
// // <TransitionChild
// // enter='transform transition ease-in-out duration-300 sm:duration-500'
// // enterFrom={placementClasses.enterFrom}
// // enterTo={placementClasses.enterTo}
// // leave='transform transition ease-in-out duration-300 sm:duration-500'
// // leaveFrom={placementClasses.leaveFrom}
// // leaveTo={placementClasses.leaveTo}
// // >
// // <DialogPanel
// // className={twMerge(
// // "pointer-events-auto relative h-full flex flex-col",
// // sizeClasses[size],
// // className
// // )}
// // >
// // <div
// // className={`absolute ${placementClasses.closeButtonPos} top-3 size-5`}
// // >
// // <BtnClose onClose={onClose} />
// // </div>
// // <Flex
// // justify='between'
// // direction='col'
// // className='h-full flex-col overflow-hidden'
// // >
// // {children}
// // </Flex>
// // </DialogPanel>
// // </TransitionChild>
// // </div>
// // </div>
// // </div>
// // </Dialog>
// // </Transition>
// }
// );
const Drawer = forwardRef(({ isOpen = false, size = "md", placement = "right", onClose = () => { }, children, className, }, ref) => {
const { adminData } = useAdmin();
const { HTML_DIRECTION } = adminData;
const isRTL = HTML_DIRECTION === "rtl";
const sizeClasses = {
sm: "w-[320px]",
md: "w-[440px]",
lg: "w-[640px]",
xl: "w-[768px]",
"2xl": "w-[1024px]",
};
// Get actual placement considering RTL
const getActualPlacement = () => {
if (isRTL) {
return placement === "left" ? "right" : "left";
}
return placement;
};
const actualPlacement = getActualPlacement();
const placementClasses = {
left: {
container: "left-0",
panel: "mr-auto",
enterFrom: "-translate-x-full",
enterTo: "translate-x-0",
leaveFrom: "translate-x-0",
leaveTo: "-translate-x-full",
closeButtonPos: "right-3",
},
right: {
container: "right-0",
panel: "ml-auto",
enterFrom: "translate-x-full",
enterTo: "translate-x-0",
leaveFrom: "translate-x-0",
leaveTo: "translate-x-full",
closeButtonPos: "left-3",
},
};
const currentPlacement = placementClasses[actualPlacement];
return (_jsx(Transition, { show: isOpen, children: _jsxs(Dialog, { className: 'fixed inset-0 z-50 overflow-hidden', onClose: onClose, ref: ref, children: [_jsx(TransitionChild, { enter: 'transition-opacity ease-linear duration-300', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'transition-opacity ease-linear duration-300', leaveFrom: 'opacity-100', leaveTo: 'opacity-0', children: _jsx("div", { className: 'fixed inset-0 bg-gray-500 bg-opacity-75 opacity-50 transition-opacity dark:bg-black dark:bg-opacity-50', onClick: onClose }) }), _jsx("div", { className: 'fixed inset-0 overflow-hidden', children: _jsx("div", { className: 'absolute inset-0 overflow-hidden', children: _jsx("div", { className: `pointer-events-none fixed inset-y-0 ${currentPlacement.container} flex max-w-full`, children: _jsx(TransitionChild, { enter: 'transform transition ease-in-out duration-300 sm:duration-500', enterFrom: currentPlacement.enterFrom, enterTo: currentPlacement.enterTo, leave: 'transform transition ease-in-out duration-300 sm:duration-500', leaveFrom: currentPlacement.leaveFrom, leaveTo: currentPlacement.leaveTo, children: _jsxs(DialogPanel, { className: twMerge("pointer-events-auto relative h-full flex flex-col bg-white shadow-xl dark:bg-gray-800", sizeClasses[size], className), children: [_jsx("div", { className: `absolute top-3 size-5`, children: _jsx(BtnClose, { onClose: onClose }) }), _jsx(Flex, { justify: 'between', direction: 'col', className: 'h-full flex-col overflow-hidden', children: children })] }) }) }) }) })] }) }));
});
const DrawerHeader = (_a) => {
var { children, className } = _a, res = __rest(_a, ["children", "className"]);
return createElement("div", Object.assign({ className: twMerge("block flex-none p-4 border-b border-gray-200 dark:border-gray-700", className) }, res), children);
};
const DrawerTitle = ({ children, className }) => {
return (_jsx(Heading, { as: 'h4', className: className, children: children }));
};
const DrawerSubTitle = ({ children, className }) => {
return children ? _jsx(Text, { className: className, children: children }) : null;
};
const DrawerBody = ({ children, className }) => {
return (_jsx("div", { className: twMerge("flex-1 p-4 h-full overflow-y-auto dark:text-gray-300", className), children: children }));
};
const DrawerFooter = ({ children, className }) => {
return (_jsx(Flex, { justify: 'end', className: twMerge("block flex-none p-4 border-t border-gray-200 dark:border-gray-700", className), children: children }));
};
export default Object.assign(Drawer, {
Header: DrawerHeader,
Title: DrawerTitle,
SubTitle: DrawerSubTitle,
Body: DrawerBody,
Footer: DrawerFooter,
});