Fallback for the SafetyNumberViewer
This commit is contained in:
parent
f152496b21
commit
e9af730eda
|
@ -74,35 +74,8 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__close-button {
|
&__buttons {
|
||||||
display: flex;
|
text-align: right;
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: inherit;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
@include keyboard-mode {
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid $color-ultramarine;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
|
|
||||||
@include light-theme {
|
|
||||||
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
||||||
}
|
|
||||||
@include dark-theme {
|
|
||||||
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
|
|
|
@ -21,7 +21,7 @@ import { AvatarColors } from '../types/Colors';
|
||||||
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
|
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
|
||||||
import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource';
|
import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource';
|
||||||
import { setupI18n } from '../util/setupI18n';
|
import { setupI18n } from '../util/setupI18n';
|
||||||
import type { Props as SafetyNumberViewerProps } from '../state/smart/SafetyNumberViewer';
|
import type { SafetyNumberProps } from './SafetyNumberChangeDialog';
|
||||||
import enMessages from '../../_locales/en/messages.json';
|
import enMessages from '../../_locales/en/messages.json';
|
||||||
import { ThemeType } from '../types/Util';
|
import { ThemeType } from '../types/Util';
|
||||||
|
|
||||||
|
@ -89,7 +89,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
|
||||||
openSystemPreferencesAction: action('open-system-preferences-action'),
|
openSystemPreferencesAction: action('open-system-preferences-action'),
|
||||||
playRingtone: action('play-ringtone'),
|
playRingtone: action('play-ringtone'),
|
||||||
renderDeviceSelection: () => <div />,
|
renderDeviceSelection: () => <div />,
|
||||||
renderSafetyNumberViewer: (_: SafetyNumberViewerProps) => <div />,
|
renderSafetyNumberViewer: (_: SafetyNumberProps) => <div />,
|
||||||
setGroupCallVideoRequest: action('set-group-call-video-request'),
|
setGroupCallVideoRequest: action('set-group-call-video-request'),
|
||||||
setIsCallActive: action('set-is-call-active'),
|
setIsCallActive: action('set-is-call-active'),
|
||||||
setLocalAudio: action('set-local-audio'),
|
setLocalAudio: action('set-local-audio'),
|
||||||
|
|
|
@ -16,7 +16,7 @@ import { isInSystemContacts } from '../util/isInSystemContacts';
|
||||||
|
|
||||||
export type SafetyNumberProps = {
|
export type SafetyNumberProps = {
|
||||||
contactID: string;
|
contactID: string;
|
||||||
onClose?: () => void;
|
onClose: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
|
@ -59,7 +59,7 @@ export const SafetyNumberChangeDialog = ({
|
||||||
|
|
||||||
if (selectedContact) {
|
if (selectedContact) {
|
||||||
return (
|
return (
|
||||||
<Modal i18n={i18n} onClose={onClose}>
|
<Modal hasXButton i18n={i18n} onClose={onClose}>
|
||||||
{renderSafetyNumber({ contactID: selectedContact.id, onClose })}
|
{renderSafetyNumber({ contactID: selectedContact.id, onClose })}
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { SafetyNumberViewer } from './SafetyNumberViewer';
|
||||||
|
|
||||||
type PropsType = {
|
type PropsType = {
|
||||||
toggleSafetyNumberModal: () => unknown;
|
toggleSafetyNumberModal: () => unknown;
|
||||||
} & SafetyNumberViewerPropsType;
|
} & Omit<SafetyNumberViewerPropsType, 'onClose'>;
|
||||||
|
|
||||||
export const SafetyNumberModal = ({
|
export const SafetyNumberModal = ({
|
||||||
i18n,
|
i18n,
|
||||||
|
@ -20,10 +20,14 @@ export const SafetyNumberModal = ({
|
||||||
hasXButton
|
hasXButton
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
moduleClassName="module-SafetyNumberViewer__modal"
|
moduleClassName="module-SafetyNumberViewer__modal"
|
||||||
onClose={() => toggleSafetyNumberModal()}
|
onClose={toggleSafetyNumberModal}
|
||||||
title={i18n('SafetyNumberModal__title')}
|
title={i18n('SafetyNumberModal__title')}
|
||||||
>
|
>
|
||||||
<SafetyNumberViewer i18n={i18n} {...safetyNumberViewerProps} />
|
<SafetyNumberViewer
|
||||||
|
i18n={i18n}
|
||||||
|
onClose={toggleSafetyNumberModal}
|
||||||
|
{...safetyNumberViewerProps}
|
||||||
|
/>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -58,7 +58,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||||
? overrideProps.verificationDisabled
|
? overrideProps.verificationDisabled
|
||||||
: false
|
: false
|
||||||
),
|
),
|
||||||
onClose: overrideProps.onClose,
|
onClose: action('onClose'),
|
||||||
});
|
});
|
||||||
|
|
||||||
const story = storiesOf('Components/SafetyNumberViewer', module);
|
const story = storiesOf('Components/SafetyNumberViewer', module);
|
||||||
|
|
|
@ -8,10 +8,10 @@ import { Intl } from './Intl';
|
||||||
import type { LocalizerType } from '../types/Util';
|
import type { LocalizerType } from '../types/Util';
|
||||||
|
|
||||||
export type PropsType = {
|
export type PropsType = {
|
||||||
contact?: ConversationType;
|
contact: ConversationType;
|
||||||
generateSafetyNumber: (contact: ConversationType) => void;
|
generateSafetyNumber: (contact: ConversationType) => void;
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
onClose?: () => void;
|
onClose: () => void;
|
||||||
safetyNumber: string;
|
safetyNumber: string;
|
||||||
toggleVerified: (contact: ConversationType) => void;
|
toggleVerified: (contact: ConversationType) => void;
|
||||||
verificationDisabled: boolean;
|
verificationDisabled: boolean;
|
||||||
|
@ -41,7 +41,16 @@ export const SafetyNumberViewer = ({
|
||||||
if (!contact.phoneNumber) {
|
if (!contact.phoneNumber) {
|
||||||
return (
|
return (
|
||||||
<div className="module-SafetyNumberViewer">
|
<div className="module-SafetyNumberViewer">
|
||||||
{i18n('cannotGenerateSafetyNumber')}
|
<div>{i18n('cannotGenerateSafetyNumber')}</div>
|
||||||
|
<div className="module-SafetyNumberViewer__buttons">
|
||||||
|
<Button
|
||||||
|
className="module-SafetyNumberViewer__button"
|
||||||
|
onClick={() => onClose?.()}
|
||||||
|
variant={ButtonVariant.Primary}
|
||||||
|
>
|
||||||
|
{i18n('ok')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -60,13 +69,6 @@ export const SafetyNumberViewer = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="module-SafetyNumberViewer">
|
<div className="module-SafetyNumberViewer">
|
||||||
{onClose && (
|
|
||||||
<div className="module-SafetyNumberViewer__close-button">
|
|
||||||
<button onClick={onClose} tabIndex={0} type="button">
|
|
||||||
<span />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="module-SafetyNumberViewer__number">
|
<div className="module-SafetyNumberViewer__number">
|
||||||
{safetyNumber || getPlaceholder()}
|
{safetyNumber || getPlaceholder()}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,24 +6,14 @@ import { Provider } from 'react-redux';
|
||||||
|
|
||||||
import type { Store } from 'redux';
|
import type { Store } from 'redux';
|
||||||
|
|
||||||
|
import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
|
||||||
import { SmartSafetyNumberViewer } from '../smart/SafetyNumberViewer';
|
import { SmartSafetyNumberViewer } from '../smart/SafetyNumberViewer';
|
||||||
|
|
||||||
// Workaround: A react component's required properties are filtering up through connect()
|
|
||||||
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
|
|
||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
||||||
const FilteredSafetyNumberViewer = SmartSafetyNumberViewer as any;
|
|
||||||
/* eslint-enable @typescript-eslint/no-explicit-any */
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
contactID: string;
|
|
||||||
onClose?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const createSafetyNumberViewer = (
|
export const createSafetyNumberViewer = (
|
||||||
store: Store,
|
store: Store,
|
||||||
props: Props
|
props: SafetyNumberProps
|
||||||
): React.ReactElement => (
|
): React.ReactElement => (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<FilteredSafetyNumberViewer {...props} />
|
<SmartSafetyNumberViewer {...props} />
|
||||||
</Provider>
|
</Provider>
|
||||||
);
|
);
|
||||||
|
|
|
@ -22,7 +22,7 @@ import { CallMode, CallState } from '../../types/Calling';
|
||||||
import type { StateType } from '../reducer';
|
import type { StateType } from '../reducer';
|
||||||
import { missingCaseError } from '../../util/missingCaseError';
|
import { missingCaseError } from '../../util/missingCaseError';
|
||||||
import { SmartCallingDeviceSelection } from './CallingDeviceSelection';
|
import { SmartCallingDeviceSelection } from './CallingDeviceSelection';
|
||||||
import type { Props as SafetyNumberViewerProps } from './SafetyNumberViewer';
|
import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
|
||||||
import { SmartSafetyNumberViewer } from './SafetyNumberViewer';
|
import { SmartSafetyNumberViewer } from './SafetyNumberViewer';
|
||||||
import { callingTones } from '../../util/callingTones';
|
import { callingTones } from '../../util/callingTones';
|
||||||
import {
|
import {
|
||||||
|
@ -41,7 +41,7 @@ function renderDeviceSelection(): JSX.Element {
|
||||||
return <SmartCallingDeviceSelection />;
|
return <SmartCallingDeviceSelection />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderSafetyNumberViewer(props: SafetyNumberViewerProps): JSX.Element {
|
function renderSafetyNumberViewer(props: SafetyNumberProps): JSX.Element {
|
||||||
return <SmartSafetyNumberViewer {...props} />;
|
return <SmartSafetyNumberViewer {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,16 +5,12 @@ import { connect } from 'react-redux';
|
||||||
import { mapDispatchToProps } from '../actions';
|
import { mapDispatchToProps } from '../actions';
|
||||||
import { SafetyNumberViewer } from '../../components/SafetyNumberViewer';
|
import { SafetyNumberViewer } from '../../components/SafetyNumberViewer';
|
||||||
import type { StateType } from '../reducer';
|
import type { StateType } from '../reducer';
|
||||||
|
import type { SafetyNumberProps } from '../../components/SafetyNumberChangeDialog';
|
||||||
import { getContactSafetyNumber } from '../selectors/safetyNumber';
|
import { getContactSafetyNumber } from '../selectors/safetyNumber';
|
||||||
import { getConversationSelector } from '../selectors/conversations';
|
import { getConversationSelector } from '../selectors/conversations';
|
||||||
import { getIntl } from '../selectors/user';
|
import { getIntl } from '../selectors/user';
|
||||||
|
|
||||||
export type Props = {
|
const mapStateToProps = (state: StateType, props: SafetyNumberProps) => {
|
||||||
contactID: string;
|
|
||||||
onClose?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapStateToProps = (state: StateType, props: Props) => {
|
|
||||||
return {
|
return {
|
||||||
...props,
|
...props,
|
||||||
...getContactSafetyNumber(state, props),
|
...getContactSafetyNumber(state, props),
|
||||||
|
|
Loading…
Reference in New Issue