signal-desktop/ts/util/showConfirmationDialog.tsx
2023-03-29 17:03:25 -07:00

85 lines
2.3 KiB
TypeScript

// Copyright 2015 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { ConfirmationDialog } from '../components/ConfirmationDialog';
type ConfirmationDialogViewProps = {
onTopOfEverything?: boolean;
dialogName: string;
cancelText?: string;
confirmStyle?: 'affirmative' | 'negative';
title: string;
description?: string;
okText: string;
reject?: (error: Error) => void;
resolve: () => void;
};
let confirmationDialogViewNode: HTMLElement | undefined;
let confirmationDialogPreviousFocus: HTMLElement | undefined;
function removeConfirmationDialog() {
if (!confirmationDialogViewNode) {
return;
}
window.reduxActions.globalModals.toggleConfirmationModal(false);
unmountComponentAtNode(confirmationDialogViewNode);
document.body.removeChild(confirmationDialogViewNode);
if (
confirmationDialogPreviousFocus &&
typeof confirmationDialogPreviousFocus.focus === 'function'
) {
confirmationDialogPreviousFocus.focus();
}
confirmationDialogViewNode = undefined;
}
export function showConfirmationDialog(
options: ConfirmationDialogViewProps
): void {
if (confirmationDialogViewNode) {
removeConfirmationDialog();
}
window.reduxActions.globalModals.toggleConfirmationModal(true);
confirmationDialogViewNode = document.createElement('div');
document.body.appendChild(confirmationDialogViewNode);
confirmationDialogPreviousFocus = document.activeElement as HTMLElement;
render(
<ConfirmationDialog
dialogName={options.dialogName}
onTopOfEverything={options.onTopOfEverything}
actions={[
{
action: () => {
options.resolve();
},
style: options.confirmStyle,
text: options.okText || window.i18n('icu:ok'),
},
]}
cancelText={options.cancelText || window.i18n('icu:cancel')}
i18n={window.i18n}
onCancel={() => {
if (options.reject) {
options.reject(new Error('showConfirmationDialog: onCancel called'));
}
}}
onClose={() => {
removeConfirmationDialog();
}}
title={options.title}
>
{options.description}
</ConfirmationDialog>,
confirmationDialogViewNode
);
}