phx-react
Version:
PHX REACT
64 lines • 5.61 kB
JavaScript
'use client';
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { motion } from 'framer-motion';
import React, { Fragment, useState } from 'react';
import { classNames } from '../types';
export const PHXDrawer = ({ open, defaultOpen = false, onClose, title = 'Panel Title', position = 'right', size = 'md', width = 420, height = 320, showFooter, onSave, onCancel, children, className = '', disabled, closeOutsideClick = true, topOffset = 0, bottomOffset = 0, showOverlay = true, }) => {
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const isControlled = open !== undefined;
const visible = isControlled ? open : internalOpen;
const isSide = position === 'left' || position === 'right';
const dimensionStyle = isSide
? {
width: '100vw',
maxWidth: width,
height: `calc(100vh - ${topOffset + bottomOffset}px)`,
marginTop: topOffset,
marginBottom: bottomOffset,
}
: { width: '100vw', height, maxHeight: '100vh' };
const sizeClass = size === 'sm' ? 'p-3 text-sm' : size === 'lg' ? 'p-6 text-base' : 'p-4 text-sm';
const drawerShapeClass = classNames(isSide &&
position === 'right' &&
'rounded-l-[20px] border-l border-t border-b border-[#E5E7EB] shadow-[-8px_0_24px_rgba(15,23,42,0.16)]', isSide && position === 'left' && 'rounded-r-[20px] border-r border-t border-b border-[#E5E7EB]', !isSide && position === 'top' && 'rounded-b-2xl border border-t-0 border-gray-200', !isSide && position === 'bottom' && 'rounded-t-2xl border border-b-0 border-gray-200');
const setDrawerOpen = (nextOpen) => {
if (!isControlled) {
setInternalOpen(nextOpen);
}
onClose === null || onClose === void 0 ? void 0 : onClose(nextOpen);
};
return (React.createElement(Transition.Root, { as: Fragment, show: visible },
React.createElement(Dialog, { as: 'div', className: 'relative z-50', onClose: () => {
if (!disabled && closeOutsideClick) {
setDrawerOpen(false);
}
} },
showOverlay && (React.createElement(Transition.Child, { as: Fragment, enter: 'ease-out duration-200', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'ease-in duration-150', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
React.createElement("div", { "aria-hidden": 'true', className: 'fixed inset-0 bg-black/55' }))),
React.createElement("div", { className: 'pointer-events-none fixed inset-y-0 right-0 flex w-full max-w-full sm:pl-10 md:pl-16' },
React.createElement("div", { className: classNames('absolute flex pointer-events-none max-w-full', isSide ? 'inset-y-0' : 'inset-x-0 justify-center', position === 'right' && 'right-0 pl-0 sm:pl-10 md:pl-16', position === 'left' && 'left-0 pl-0 sm:pl-10 md:pl-16') },
React.createElement(Transition.Child, { as: Fragment, enter: 'transform transition ease-out duration-300', enterFrom: position === 'right'
? 'translate-x-full'
: position === 'left'
? '-translate-x-full'
: position === 'top'
? '-translate-y-full'
: 'translate-y-full', enterTo: 'translate-x-0 translate-y-0', leave: 'transform transition ease-in duration-200', leaveFrom: 'translate-x-0 translate-y-0', leaveTo: position === 'right'
? 'translate-x-full'
: position === 'left'
? '-translate-x-full'
: position === 'top'
? '-translate-y-full'
: 'translate-y-full' },
React.createElement(Dialog.Panel, { as: motion.div, className: classNames('pointer-events-auto flex flex-col overflow-hidden bg-gray-50 text-gray-700', 'w-screen', drawerShapeClass, className), style: dimensionStyle },
React.createElement("div", { className: classNames('flex items-center justify-between bg-gray-50', sizeClass) },
React.createElement(Dialog.Title, { className: 'text-sm font-semibold text-gray-900' }, title),
!disabled && (React.createElement("button", { className: 'rounded-md text-gray-400 outline-none hover:text-gray-600', onClick: () => setDrawerOpen(false), type: 'button' },
React.createElement(XMarkIcon, { className: 'h-6 w-6' })))),
React.createElement("div", { className: classNames('flex-1 overflow-y-auto bg-gray-100 text-xs text-gray-500', sizeClass) }, children),
showFooter && (React.createElement("div", { className: classNames('flex items-center justify-end gap-3 border-t border-gray-200 bg-white', sizeClass) },
React.createElement("button", { className: 'rounded-md bg-gray-200 px-4 py-2 hover:bg-gray-300', disabled: disabled, onClick: onCancel !== null && onCancel !== void 0 ? onCancel : (() => setDrawerOpen(false)), type: 'button' }, "Cancel"),
React.createElement("button", { className: 'rounded-md bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700', disabled: disabled, onClick: onSave, type: 'button' }, "Save"))))))))));
};
//# sourceMappingURL=Drawer.js.map