@memori.ai/memori-react/esm/components/ui/Drawer.js

[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useEffect, useState, useCallback, } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import Spin from './Spin';
import Button from './Button';
import Close from '../icons/Close';
import cx from 'classnames';
import { useTranslation } from 'react-i18next';
import ConfirmDialog from './ConfirmDialog';
const Drawer = ({ title, open = false, data, onClose = () => { }, children, width = '80%', footer, extra, className, placement = 'right', description, loading = false, animated = true, closable = true, widthMd = '80%', widthLg = '60%', confirmDialogTitle, confirmDialogMessage, }) => {
    const [originalData, setOriginalData] = useState(null);
    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
    const { t } = useTranslation();
    useEffect(() => {
        if (open && data && !originalData) {
            setOriginalData(data);
        }
        if (!open) {
            setOriginalData(null);
        }
    }, [open, data, originalData]);
    const checkChanges = useCallback(() => {
        if (!data || Object.keys(data).length === 0) {
            return onClose();
        }
        if (originalData && JSON.stringify(originalData) !== JSON.stringify(data)) {
            setConfirmDialogOpen(true);
        }
        else {
            onClose();
        }
    }, [data, originalData, onClose]);
    const handleClose = useCallback(() => {
        checkChanges();
    }, [checkChanges]);
    const handleConfirmUnsavedChanges = useCallback(() => {
        setConfirmDialogOpen(false);
        onClose();
    }, [onClose]);
    return (_jsxs(_Fragment, { children: [_jsx(ConfirmDialog, { isOpen: confirmDialogOpen, onClose: () => setConfirmDialogOpen(false), onConfirm: handleConfirmUnsavedChanges, title: confirmDialogTitle || t('confirmDialog.title'), message: confirmDialogMessage || t('confirmDialog.message'), confirmText: t('confirm') || 'Confirm', cancelText: t('cancel') || 'Cancel' }), _jsx(Transition, { appear: true, show: open, as: React.Fragment, children: _jsxs(Dialog, { open: open, onClose: handleClose, className: cx('memori-drawer', className), children: [_jsx(Transition.Child, { as: React.Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in duration-200", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx("div", { className: "memori-drawer--backdrop" }) }), _jsx("div", { className: "memori-drawer--container", children: _jsx("div", { className: "memori-drawer--container-scrollable", children: _jsx(Transition.Child, { static: true, as: React.Fragment, enter: "ease-out duration-300", enterFrom: animated ? 'max-w-0 opacity-0' : 'opacity-0', enterTo: "max-w-80 opacity-100", leave: "ease-in duration-200", leaveFrom: "max-w-80 opacity-100", leaveTo: animated ? 'max-w-0 opacity-0' : 'opacity-0', children: _jsxs(Dialog.Panel, { className: cx('memori-drawer--panel', {
                                            'memori-drawer--panel-left': placement === 'left',
                                            'memori-drawer--with-footer': !!footer,
                                        }), style: {
                                            '--memori-drawer--width': width,
                                            '--memori-drawer--width--lg': widthLg,
                                            '--memori-drawer--width--md': widthMd,
                                        }, children: [closable && (_jsx("div", { className: "memori-drawer--close", children: _jsx(Button, { shape: "circle", outlined: true, icon: _jsx(Close, {}), onClick: handleClose }) })), _jsx(Spin, { spinning: loading, children: _jsxs("div", { className: "memori-drawer--content", children: [title && (_jsx(Dialog.Title, { className: "memori-drawer--title", children: title })), description && (_jsx(Dialog.Description, { className: "memori-drawer--description", children: description })), _jsx("div", { className: "memori-drawer--content--scrollable", children: children })] }) }), footer && (_jsxs("div", { className: "memori-drawer--footer", children: [footer.leftAction && (_jsx("div", { className: 'memori-drawer--footer-left-action ' +
                                                            (footer.leftActionClassName || ''), children: footer.leftAction })), footer.onSubmit && (_jsxs("div", { className: "memori-drawer--footer-actions", children: [_jsx(Button, { outlined: true, onClick: handleClose, children: t('cancel') }), _jsx(Button, { htmlType: "submit", onClick: footer.onSubmit, loading: footer.loading, className: "memori-drawer--footer-confirm", children: t('confirm') })] })), extra && (_jsx("div", { className: "memori-drawer--extra", children: extra }))] }))] }) }) }) })] }) })] }));
};
Drawer.displayName = 'Drawer';
export default Drawer;
//# sourceMappingURL=Drawer.js.map