Replaces ConfirmationModal with ConfirmationDialog
This commit is contained in:
parent
c9d74654bf
commit
e75bba1c52
25 changed files with 456 additions and 737 deletions
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue