phx-react
Version:
PHX REACT
69 lines • 6.13 kB
JavaScript
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXDrawer = void 0;
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
const outline_1 = require("@heroicons/react/24/outline");
const framer_motion_1 = require("framer-motion");
const react_2 = tslib_1.__importStar(require("react"));
const types_1 = require("../types");
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] = (0, react_2.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 = (0, types_1.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_2.default.createElement(react_1.Transition.Root, { as: react_2.Fragment, show: visible },
react_2.default.createElement(react_1.Dialog, { as: 'div', className: 'relative z-50', onClose: () => {
if (!disabled && closeOutsideClick) {
setDrawerOpen(false);
}
} },
showOverlay && (react_2.default.createElement(react_1.Transition.Child, { as: react_2.Fragment, enter: 'ease-out duration-200', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'ease-in duration-150', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
react_2.default.createElement("div", { "aria-hidden": 'true', className: 'fixed inset-0 bg-black/55' }))),
react_2.default.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_2.default.createElement("div", { className: (0, types_1.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_2.default.createElement(react_1.Transition.Child, { as: react_2.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_2.default.createElement(react_1.Dialog.Panel, { as: framer_motion_1.motion.div, className: (0, types_1.classNames)('pointer-events-auto flex flex-col overflow-hidden bg-gray-50 text-gray-700', 'w-screen', drawerShapeClass, className), style: dimensionStyle },
react_2.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-between bg-gray-50', sizeClass) },
react_2.default.createElement(react_1.Dialog.Title, { className: 'text-sm font-semibold text-gray-900' }, title),
!disabled && (react_2.default.createElement("button", { className: 'rounded-md text-gray-400 outline-none hover:text-gray-600', onClick: () => setDrawerOpen(false), type: 'button' },
react_2.default.createElement(outline_1.XMarkIcon, { className: 'h-6 w-6' })))),
react_2.default.createElement("div", { className: (0, types_1.classNames)('flex-1 overflow-y-auto bg-gray-100 text-xs text-gray-500', sizeClass) }, children),
showFooter && (react_2.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-end gap-3 border-t border-gray-200 bg-white', sizeClass) },
react_2.default.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_2.default.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"))))))))));
};
exports.PHXDrawer = PHXDrawer;
//# sourceMappingURL=Drawer.js.map