flowstudio
Version:
Enterprise Flow Designer
20 lines • 1.64 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Dialog, IconButton, Flex, Text, Separator } from '@radix-ui/themes';
import { Cross1Icon } from '@radix-ui/react-icons';
// import './style.css'
export default function Sheet({ children, open, setOpen, onClose, title = '', showCloseBtn = true, maxWidth = '500px', side = 'right', ...rest }) {
const [animationClass, setAnimationClass] = useState('');
useEffect(() => {
if (open) {
setAnimationClass(`slide-in-${side}`);
}
else {
setAnimationClass(`slide-out-${side}`);
onClose === null || onClose === void 0 ? void 0 : onClose();
}
}, [open, side]);
return (_jsx(Dialog.Root, { open: open, onOpenChange: setOpen, children: _jsx(Dialog.Content, { size: '1', className: `dialog-content ${animationClass}`, width: '100%', maxWidth: maxWidth, style: { padding: 0 }, ...rest, children: _jsxs(Flex, { direction: 'column', height: '100%', overflow: 'hidden', children: [_jsxs(Flex, { flexShrink: '0', justify: 'between', align: 'center', p: (title || showCloseBtn) ? '2' : '0', children: [_jsx(Dialog.Title, { size: '3', style: { fontWeight: 'normal', marginBottom: 0 }, children: title && _jsx(Text, { children: title }) }), showCloseBtn && _jsx(Dialog.Close, { children: _jsx(IconButton, { highContrast: true, size: '1', children: _jsx(Cross1Icon, {}) }) })] }), title && _jsx(Separator, { size: '4' }), _jsx(Flex, { flexGrow: '1', overflow: 'auto', p: '2', children: children })] }) }) }));
}
//# sourceMappingURL=index.js.map