Replaces ConfirmationModal with ConfirmationDialog

This commit is contained in:
Josh Perez 2021-04-27 12:29:59 -07:00 committed by GitHub
parent c9d74654bf
commit e75bba1c52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 456 additions and 737 deletions

View file

@ -2,10 +2,12 @@
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import { noop } from 'lodash';
import { Avatar } from './Avatar';
import { ConfirmationModal } from './ConfirmationModal';
import { ConfirmationDialog } from './ConfirmationDialog';
import { InContactsIcon } from './InContactsIcon';
import { Modal } from './Modal';
import { ConversationType } from '../state/ducks/conversations';
import { LocalizerType } from '../types/Util';
@ -24,18 +26,17 @@ export type Props = {
readonly renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
};
type SafetyDialogContentProps = Props & {
readonly onView: (contact: ConversationType) => void;
};
const SafetyDialogContents = ({
export const SafetyNumberChangeDialog = ({
confirmText,
contacts,
i18n,
onCancel,
onConfirm,
onView,
}: SafetyDialogContentProps): JSX.Element => {
renderSafetyNumber,
}: Props): JSX.Element => {
const [selectedContact, setSelectedContact] = React.useState<
ConversationType | undefined
>(undefined);
const cancelButtonRef = React.createRef<HTMLButtonElement>();
React.useEffect(() => {
@ -44,20 +45,46 @@ const SafetyDialogContents = ({
}
}, [cancelButtonRef, contacts]);
const onClose = selectedContact
? () => {
setSelectedContact(undefined);
}
: onCancel;
if (selectedContact) {
return (
<Modal i18n={i18n}>
{renderSafetyNumber({ contactID: selectedContact.id, onClose })}
</Modal>
);
}
return (
<>
<h1 className="module-sfn-dialog__title">
{i18n('safetyNumberChanges')}
</h1>
<div className="module-sfn-dialog__message">
<ConfirmationDialog
actions={[
{
action: onConfirm,
text: confirmText || i18n('sendMessageToContact'),
style: 'affirmative',
},
]}
i18n={i18n}
onCancel={onClose}
onClose={noop}
title={i18n('safetyNumberChanges')}
>
<div className="module-SafetyNumberChangeDialog__message">
{i18n('changedVerificationWarning')}
</div>
<ul className="module-sfn-dialog__contacts">
<ul className="module-SafetyNumberChangeDialog__contacts">
{contacts.map((contact: ConversationType) => {
const shouldShowNumber = Boolean(contact.name || contact.profileName);
return (
<li className="module-sfn-dialog__contact" key={contact.id}>
<li
className="module-SafetyNumberChangeDialog__contact"
key={contact.id}
>
<Avatar
avatarPath={contact.avatarPath}
color={contact.color}
@ -69,8 +96,8 @@ const SafetyDialogContents = ({
title={contact.title}
size={52}
/>
<div className="module-sfn-dialog__contact--wrapper">
<div className="module-sfn-dialog__contact--name">
<div className="module-SafetyNumberChangeDialog__contact--wrapper">
<div className="module-SafetyNumberChangeDialog__contact--name">
{contact.title}
{contact.name ? (
<span>
@ -80,15 +107,15 @@ const SafetyDialogContents = ({
) : null}
</div>
{shouldShowNumber ? (
<div className="module-sfn-dialog__contact--number">
<div className="module-SafetyNumberChangeDialog__contact--number">
{contact.phoneNumber}
</div>
) : null}
</div>
<button
className="module-sfn-dialog__contact--view"
className="module-SafetyNumberChangeDialog__contact--view"
onClick={() => {
onView(contact);
setSelectedContact(contact);
}}
tabIndex={0}
type="button"
@ -99,52 +126,6 @@ const SafetyDialogContents = ({
);
})}
</ul>
<div className="module-sfn-dialog__actions">
<button
className="module-sfn-dialog__actions--cancel"
onClick={onCancel}
ref={cancelButtonRef}
tabIndex={0}
type="button"
>
{i18n('cancel')}
</button>
<button
className="module-sfn-dialog__actions--confirm"
onClick={onConfirm}
tabIndex={0}
type="button"
>
{confirmText || i18n('sendMessageToContact')}
</button>
</div>
</>
);
};
export const SafetyNumberChangeDialog = (props: Props): JSX.Element => {
const { i18n, onCancel, renderSafetyNumber } = props;
const [contact, setViewSafetyNumber] = React.useState<
ConversationType | undefined
>(undefined);
const onClose = contact
? () => {
setViewSafetyNumber(undefined);
}
: onCancel;
return (
<ConfirmationModal actions={[]} i18n={i18n} onClose={onClose}>
{contact && renderSafetyNumber({ contactID: contact.id, onClose })}
{!contact && (
<SafetyDialogContents
{...props}
onView={selectedContact => {
setViewSafetyNumber(selectedContact);
}}
/>
)}
</ConfirmationModal>
</ConfirmationDialog>
);
};