98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { ContactName } from './ContactName';
|
|
import { Intl } from '../Intl';
|
|
import { LocalizerType } from '../../types/Util';
|
|
|
|
export type PropsData = {
|
|
type: 'fromOther' | 'fromMe' | 'fromSync';
|
|
phoneNumber?: string;
|
|
profileName?: string;
|
|
title: string;
|
|
name?: string;
|
|
disabled: boolean;
|
|
timespan: string;
|
|
};
|
|
|
|
type PropsHousekeeping = {
|
|
i18n: LocalizerType;
|
|
};
|
|
|
|
type Props = PropsData & PropsHousekeeping;
|
|
|
|
export class TimerNotification extends React.Component<Props> {
|
|
public renderContents() {
|
|
const {
|
|
i18n,
|
|
name,
|
|
phoneNumber,
|
|
profileName,
|
|
title,
|
|
timespan,
|
|
type,
|
|
disabled,
|
|
} = this.props;
|
|
const changeKey = disabled
|
|
? 'disabledDisappearingMessages'
|
|
: 'theyChangedTheTimer';
|
|
|
|
switch (type) {
|
|
case 'fromOther':
|
|
return (
|
|
<Intl
|
|
i18n={i18n}
|
|
id={changeKey}
|
|
components={{
|
|
name: (
|
|
<ContactName
|
|
key="external-1"
|
|
phoneNumber={phoneNumber}
|
|
profileName={profileName}
|
|
title={title}
|
|
name={name}
|
|
i18n={i18n}
|
|
/>
|
|
),
|
|
time: timespan,
|
|
}}
|
|
/>
|
|
);
|
|
case 'fromMe':
|
|
return disabled
|
|
? i18n('youDisabledDisappearingMessages')
|
|
: i18n('youChangedTheTimer', [timespan]);
|
|
case 'fromSync':
|
|
return disabled
|
|
? i18n('disappearingMessagesDisabled')
|
|
: i18n('timerSetOnSync', [timespan]);
|
|
default:
|
|
console.warn('TimerNotification: unsupported type provided:', type);
|
|
|
|
return null;
|
|
}
|
|
}
|
|
|
|
public render() {
|
|
const { timespan, disabled } = this.props;
|
|
|
|
return (
|
|
<div className="module-timer-notification">
|
|
<div className="module-timer-notification__icon-container">
|
|
<div
|
|
className={classNames(
|
|
'module-timer-notification__icon',
|
|
disabled ? 'module-timer-notification__icon--disabled' : null
|
|
)}
|
|
/>
|
|
<div className="module-timer-notification__icon-label">
|
|
{timespan}
|
|
</div>
|
|
</div>
|
|
<div className="module-timer-notification__message">
|
|
{this.renderContents()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|