88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import type { FC, ReactNode } from 'react';
|
|
|
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { Button } from '@/mastodon/components/button';
|
|
import { IconButton } from '@/mastodon/components/icon_button';
|
|
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
|
|
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
|
|
|
export type { BaseConfirmationModalProps as DialogModalProps } from './confirmation_modals/confirmation_modal';
|
|
|
|
interface DialogModalProps {
|
|
className?: string;
|
|
title: ReactNode;
|
|
onClose: () => void;
|
|
description?: ReactNode;
|
|
wrapperClassName?: string;
|
|
children?: ReactNode;
|
|
noCancelButton?: boolean;
|
|
buttons?: ReactNode;
|
|
}
|
|
|
|
export const DialogModal: FC<DialogModalProps> = ({
|
|
className,
|
|
title,
|
|
onClose,
|
|
description,
|
|
wrapperClassName,
|
|
children,
|
|
noCancelButton = false,
|
|
buttons,
|
|
}) => {
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<div className={classNames('modal-root__modal dialog-modal', className)}>
|
|
<div className='dialog-modal__header'>
|
|
<IconButton
|
|
className='dialog-modal__header__close'
|
|
title={intl.formatMessage({
|
|
id: 'lightbox.close',
|
|
defaultMessage: 'Close',
|
|
})}
|
|
icon='close'
|
|
iconComponent={CloseIcon}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
<NavigationFocusTarget as='h1' className='dialog-modal__header__title'>
|
|
{title}
|
|
</NavigationFocusTarget>
|
|
</div>
|
|
|
|
<div className='dialog-modal__content'>
|
|
{description && (
|
|
<div className='dialog-modal__content__description'>
|
|
{description}
|
|
</div>
|
|
)}
|
|
<div
|
|
className={classNames(
|
|
'dialog-modal__content__form',
|
|
wrapperClassName,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
|
|
{(buttons || !noCancelButton) && (
|
|
<div className='dialog-modal__content__actions'>
|
|
{!noCancelButton && (
|
|
<Button onClick={onClose} secondary>
|
|
<FormattedMessage
|
|
id='confirmation_modal.cancel'
|
|
defaultMessage='Cancel'
|
|
/>
|
|
</Button>
|
|
)}
|
|
{buttons}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|