@ducor/react
Version:
admin template ui interface
247 lines (246 loc) • 10.5 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 { ReactNode, FC, forwardRef, ReactElement, createElement } from "react";
// import { twMerge } from "tailwind-merge";
// import Flex from "./flex";
// import Box from "./box";
// import { Heading, Text } from "./typography";
// import { BtnClose } from "./button";
// export interface DrawerProps {
// isOpen?: boolean;
// onClose?: () => void;
// children?: ReactNode | ReactElement;
// size?: "sm" | "md" | "lg" | "xl" | "2xl";
// placement?: "left" | "right" | "top" | "bottom";
// className?: string;
// }
// export interface DrawerHeaderProps {
// children?: ReactNode;
// className?: string;
// }
// export interface DrawerTitleProps {
// children?: ReactNode;
// className?: string;
// }
// export interface DrawerSubTitleProps {
// children?: ReactNode;
// className?: string;
// }
// export interface DrawerBodyProps {
// children?: ReactNode;
// className?: string;
// }
// export interface DrawerFooterProps {
// children?: ReactNode;
// className?: string;
// }
// const Drawer: FC<DrawerProps> = forwardRef<HTMLDivElement, DrawerProps>(
// ({ isOpen = false, size = "md", onClose = () => {}, children }, ref) => {
// const sizeClasses = {
// sm: "w-sm md:w-96", // 320px
// md: "w-sm md:w-[440px]", // 384px
// lg: "w-sm md:w-[640px]", // 640px
// xl: "w-sm md:w-[768px]", // 768px
// "2xl": "w-sm md:w-[1024px]", // 1024px
// };
// // css ba js diyekorlei hobe
// return (
// <Transition show={isOpen}>
// <Dialog
// className='fixed inset-0 z-50 overflow-hidden customizer'
// onClose={onClose}
// ref={ref} // Pass down the 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 opacity-50 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 right-0 flex max-w-full pl-10'>
// <TransitionChild
// enter='transform transition ease-in-out duration-300 sm:duration-500'
// enterFrom='translate-x-full'
// enterTo='translate-x-0'
// leave='transform transition ease-in-out duration-300 sm:duration-500'
// leaveFrom='translate-x-0'
// leaveTo='translate-x-full'
// >
// <DialogPanel
// className={twMerge(
// "pointer-events-auto ",
// sizeClasses[size]
// )}
// >
// <Box className='relative h-screen'>
// <div className='absolute top-5 right-3 size-5'>
// <BtnClose onClose={onClose} />
// </div>
// <Flex
// justify='between'
// direction='col'
// className='h-screen flex-col bg-white shadow-xl dark:bg-gray-800'
// >
// {children}
// </Flex>
// </Box>
// </DialogPanel>
// </TransitionChild>
// </div>
// </div>
// </div>
// </Dialog>
// </Transition>
// );
// }
// );
// const DrawerHeader: FC<DrawerHeaderProps> = ({
// children,
// className,
// ...res
// }) => {
// return createElement(
// "div",
// {
// className: twMerge(
// "block flex-none p-4 border-b border-gray-200 dark:border-gray-700",
// className
// ),
// ...res,
// },
// children
// );
// };
// const DrawerTitle: FC<DrawerTitleProps> = ({ children, className }) => {
// return (
// <Heading as='h4' className={className}>
// {children}
// </Heading>
// );
// };
// const DrawerSubTitle: FC<DrawerSubTitleProps> = ({ children, className }) => {
// return children ? <Text className={className}>{children}</Text> : null;
// };
// const DrawerBody: FC<DrawerBodyProps> = ({ children, className }) => {
// return (
// <div
// className={twMerge(
// "flex-1 p-4 h-full overflow-y-auto dark:text-gray-300",
// className
// )}
// >
// {children}
// </div>
// );
// };
// const DrawerFooter: FC<DrawerFooterProps> = ({ children, className }) => {
// return (
// <Flex
// justify='end'
// className={twMerge(
// "block flex-none p-4 border-t border-gray-200 dark:border-gray-700",
// className
// )}
// >
// {children}
// </Flex>
// );
// };
// export default Object.assign(Drawer, {
// Header: DrawerHeader,
// Title: DrawerTitle,
// SubTitle: DrawerSubTitle,
// Body: DrawerBody,
// Footer: DrawerFooter,
// });
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 = forwardRef(({ 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 (_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 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 ${placementClasses.container} flex max-w-full`, children: _jsx(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, children: _jsxs(DialogPanel, { className: twMerge("pointer-events-auto relative h-full flex flex-col", sizeClasses[size], className), children: [_jsx("div", { className: `absolute ${placementClasses.closeButtonPos} 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,
});