import clsx from 'clsx'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import Button from '../button/button'; import { ButtonThemes } from '../button/useButtonStyles'; import HStack from '../hstack/hstack'; import IconButton from '../icon-button/icon-button'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, }); const widths = { xs: 'max-w-xs', sm: 'max-w-sm', md: 'max-w-base', lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl', '3xl': 'max-w-3xl', '4xl': 'max-w-4xl', }; interface IModal { /** Callback when the modal is cancelled. */ cancelAction?: () => void /** Cancel button text. */ cancelText?: React.ReactNode /** URL to an SVG icon for the close button. */ closeIcon?: string /** Position of the close button. */ closePosition?: 'left' | 'right' /** Callback when the modal is confirmed. */ confirmationAction?: (event?: React.MouseEvent) => void /** Whether the confirmation button is disabled. */ confirmationDisabled?: boolean /** Confirmation button text. */ confirmationText?: React.ReactNode /** Confirmation button theme. */ confirmationTheme?: ButtonThemes /** Whether to use full width style for confirmation button. */ confirmationFullWidth?: boolean /** Callback when the modal is closed. */ onClose?: () => void /** Callback when the secondary action is chosen. */ secondaryAction?: (event?: React.MouseEvent) => void /** Secondary button text. */ secondaryText?: React.ReactNode secondaryDisabled?: boolean /** Don't focus the "confirm" button on mount. */ skipFocus?: boolean /** Title text for the modal. */ title?: React.ReactNode width?: keyof typeof widths children?: React.ReactNode className?: string } /** Displays a modal dialog box. */ const Modal = React.forwardRef(({ cancelAction, cancelText, children, closeIcon = require('@tabler/icons/x.svg'), closePosition = 'right', confirmationAction, confirmationDisabled, confirmationText, confirmationTheme, confirmationFullWidth, onClose, secondaryAction, secondaryDisabled = false, secondaryText, skipFocus = false, title, width = 'xl', className, }, ref) => { const intl = useIntl(); const buttonRef = React.useRef(null); React.useEffect(() => { if (buttonRef?.current && !skipFocus) { buttonRef.current.focus(); } }, [skipFocus, buttonRef]); return (
{title && (

{title}

{onClose && ( )}
)} {title ? (
{children}
) : children}
{confirmationAction && (
{cancelAction && ( )}
{secondaryAction && ( )}
)}
); }); export default Modal;