88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import type { FC, TeactNode } from '../../lib/teact/teact';
|
|
import React, { memo, useCallback, useRef } from '../../lib/teact/teact';
|
|
|
|
import type { TextPart } from '../../types';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
import useLang from '../../hooks/useLang';
|
|
import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
|
|
|
|
import Modal from './Modal';
|
|
import Button from './Button';
|
|
|
|
type OwnProps = {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onCloseAnimationEnd?: () => void;
|
|
title?: string;
|
|
header?: TeactNode;
|
|
textParts?: TextPart;
|
|
text?: string;
|
|
confirmLabel?: string;
|
|
confirmHandler: () => void;
|
|
confirmIsDestructive?: boolean;
|
|
areButtonsInColumn?: boolean;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
};
|
|
|
|
const ConfirmDialog: FC<OwnProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onCloseAnimationEnd,
|
|
title,
|
|
header,
|
|
text,
|
|
textParts,
|
|
confirmLabel = 'Confirm',
|
|
confirmHandler,
|
|
confirmIsDestructive,
|
|
areButtonsInColumn,
|
|
className,
|
|
children,
|
|
}) => {
|
|
const lang = useLang();
|
|
|
|
// eslint-disable-next-line no-null/no-null
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleSelectWithEnter = useCallback((index: number) => {
|
|
if (index === -1) confirmHandler();
|
|
}, [confirmHandler]);
|
|
|
|
const handleKeyDown = useKeyboardListNavigation(containerRef, isOpen, handleSelectWithEnter, '.Button');
|
|
|
|
return (
|
|
<Modal
|
|
className={buildClassName('confirm', className)}
|
|
title={title || lang('Telegram')}
|
|
header={header}
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
onCloseAnimationEnd={onCloseAnimationEnd}
|
|
>
|
|
{text && text.split('\\n').map((textPart) => (
|
|
<p>{textPart}</p>
|
|
))}
|
|
{textParts || children}
|
|
<div
|
|
className={areButtonsInColumn ? 'dialog-buttons-column' : 'dialog-buttons mt-2'}
|
|
ref={containerRef}
|
|
onKeyDown={handleKeyDown}
|
|
>
|
|
<Button
|
|
className="confirm-dialog-button"
|
|
isText
|
|
onClick={confirmHandler}
|
|
color={confirmIsDestructive ? 'danger' : 'primary'}
|
|
>
|
|
{confirmLabel}
|
|
</Button>
|
|
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default memo(ConfirmDialog);
|