135 lines
3.8 KiB
TypeScript
135 lines
3.8 KiB
TypeScript
import * as React from 'react';
|
|
import { Avatar } from './Avatar';
|
|
import { ConfirmationModal } from './ConfirmationModal';
|
|
import { ConversationType } from '../state/ducks/conversations';
|
|
import { LocalizerType } from '../types/Util';
|
|
|
|
type SafetyNumberProps = {
|
|
contactID: string;
|
|
onClose?: () => void;
|
|
};
|
|
|
|
export type Props = {
|
|
readonly contacts: Array<ConversationType>;
|
|
readonly i18n: LocalizerType;
|
|
readonly onCancel: () => void;
|
|
readonly onConfirm: () => void;
|
|
readonly renderSafetyNumber: (props: SafetyNumberProps) => JSX.Element;
|
|
};
|
|
|
|
type SafetyDialogContentProps = Props & {
|
|
readonly onView: (contact: ConversationType) => void;
|
|
};
|
|
|
|
const SafetyDialogContents = ({
|
|
contacts,
|
|
i18n,
|
|
onCancel,
|
|
onConfirm,
|
|
onView,
|
|
}: SafetyDialogContentProps): JSX.Element => {
|
|
const cancelButtonRef = React.createRef<HTMLButtonElement>();
|
|
|
|
React.useEffect(() => {
|
|
if (cancelButtonRef && cancelButtonRef.current) {
|
|
cancelButtonRef.current.focus();
|
|
}
|
|
}, [contacts]);
|
|
|
|
return (
|
|
<>
|
|
<h1 className="module-sfn-dialog__title">
|
|
{i18n('safetyNumberChanges')}
|
|
</h1>
|
|
<div className="module-sfn-dialog__message">
|
|
{i18n('changedVerificationWarning')}
|
|
</div>
|
|
<ul className="module-sfn-dialog__contacts">
|
|
{contacts.map((contact: ConversationType) => (
|
|
<li className="module-sfn-dialog__contact" key={contact.phoneNumber}>
|
|
<Avatar
|
|
avatarPath={contact.avatarPath}
|
|
color={contact.color}
|
|
conversationType="direct"
|
|
i18n={i18n}
|
|
name={contact.name}
|
|
phoneNumber={contact.phoneNumber}
|
|
profileName={contact.profileName}
|
|
size={52}
|
|
/>
|
|
<div className="module-sfn-dialog__contact--wrapper">
|
|
{contact.name && (
|
|
<>
|
|
<div className="module-sfn-dialog__contact--name">
|
|
{contact.name}
|
|
</div>
|
|
<div className="module-sfn-dialog__contact--number">
|
|
{contact.phoneNumber}
|
|
</div>
|
|
</>
|
|
)}
|
|
{!contact.name && (
|
|
<div className="module-sfn-dialog__contact--name">
|
|
{contact.phoneNumber}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
className="module-sfn-dialog__contact--view"
|
|
onClick={() => {
|
|
onView(contact);
|
|
}}
|
|
tabIndex={0}
|
|
>
|
|
{i18n('view')}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="module-sfn-dialog__actions">
|
|
<button
|
|
className="module-sfn-dialog__actions--cancel"
|
|
onClick={onCancel}
|
|
ref={cancelButtonRef}
|
|
tabIndex={0}
|
|
>
|
|
{i18n('cancel')}
|
|
</button>
|
|
<button
|
|
className="module-sfn-dialog__actions--confirm"
|
|
onClick={onConfirm}
|
|
tabIndex={0}
|
|
>
|
|
{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>
|
|
);
|
|
};
|