@baseplate-dev/ui-components
Version:
Shared UI component library
48 lines • 2.66 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { useComponentStrings } from '#src/contexts/component-strings.js';
import { useConfirmDialogState } from '#src/hooks/use-confirm-dialog.js';
import { Button } from '../button/button.js';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../dialog/dialog.js';
/**
* A confirm dialog that is placed at the top level of the page
* enabling the use of the useConfirmDialog hook.
*/
function ConfirmDialog() {
const { confirmOptions, setConfirmOptions } = useConfirmDialogState();
const strings = useComponentStrings();
// We need to store the text content in a ref because the Dialog component
// will transition to fade so we need to cache the text while we close.
const textOptionsCached = useRef(null);
useEffect(() => {
if (confirmOptions) {
textOptionsCached.current = {
title: confirmOptions.title,
content: confirmOptions.content,
buttonCancelText: confirmOptions.buttonCancelText,
buttonConfirmText: confirmOptions.buttonConfirmText,
buttonConfirmVariant: confirmOptions.buttonConfirmVariant,
};
}
}, [confirmOptions]);
const { title, content, onCancel, onConfirm, buttonCancelText = strings.buttonCancel, buttonConfirmText = strings.buttonConfirm, buttonConfirmVariant, } = {
...textOptionsCached.current,
...confirmOptions,
};
return (_jsx(Dialog, { open: !!confirmOptions, onOpenChange: () => {
setConfirmOptions(undefined);
}, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: title }) }), _jsx(DialogDescription, { children: content }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: (e) => {
onCancel?.(e);
if (e.defaultPrevented)
return;
setConfirmOptions(undefined);
}, children: buttonCancelText }), _jsx(Button, { onClick: (e) => {
onConfirm?.(e);
if (e.defaultPrevented)
return;
setConfirmOptions(undefined);
}, variant: buttonConfirmVariant, children: buttonConfirmText })] })] }) }));
}
export { ConfirmDialog };
//# sourceMappingURL=confirm-dialog.js.map