You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
|
|
import { PropsForExpirationTimer } from '../../state/ducks/conversations';
|
|
import { assertUnreachable } from '../../types/sqlSharedTypes';
|
|
|
|
import { ExpirableReadableMessage } from './message/message-item/ExpirableReadableMessage';
|
|
import { SessionIcon } from '../icon';
|
|
import { SpacerSM, Text } from '../basic/Text';
|
|
import { Flex } from '../basic/Flex';
|
|
import styled from 'styled-components';
|
|
|
|
const StyledTimerNotification = styled(Flex)`
|
|
text-align: center;
|
|
`;
|
|
|
|
export const TimerNotification = (props: PropsForExpirationTimer) => {
|
|
const { messageId, pubkey, profileName, expirationType, timespan, type, disabled } = props;
|
|
|
|
const contact = profileName || pubkey;
|
|
// TODO legacy messages support will be removed in a future release
|
|
const mode =
|
|
expirationType === 'legacy'
|
|
? null
|
|
: expirationType === 'deleteAfterRead'
|
|
? window.i18n('timerModeRead')
|
|
: window.i18n('timerModeSent');
|
|
|
|
let textToRender: string | undefined;
|
|
switch (type) {
|
|
case 'fromOther':
|
|
textToRender = disabled
|
|
? window.i18n('disabledDisappearingMessages', [contact, timespan])
|
|
: mode
|
|
? window.i18n('theyChangedTheTimer', [contact, timespan, mode])
|
|
: window.i18n('theyChangedTheTimerLegacy', [contact, timespan]);
|
|
break;
|
|
case 'fromMe':
|
|
case 'fromSync':
|
|
textToRender = disabled
|
|
? window.i18n('youDisabledDisappearingMessages')
|
|
: mode
|
|
? window.i18n('youChangedTheTimer', [timespan, mode])
|
|
: window.i18n('youChangedTheTimerLegacy', [timespan]);
|
|
break;
|
|
default:
|
|
assertUnreachable(type, `TimerNotification: Missing case error "${type}"`);
|
|
}
|
|
|
|
if (!textToRender || textToRender.length === 0) {
|
|
throw new Error('textToRender invalid key used TimerNotification');
|
|
}
|
|
|
|
return (
|
|
<ExpirableReadableMessage
|
|
messageId={messageId}
|
|
direction={type === 'fromOther' ? 'incoming' : 'outgoing'}
|
|
isCentered={true}
|
|
marginInlineStart={'calc(var(--margins-lg) + 6px)'}
|
|
marginInlineEnd={'calc(var(--margins-lg) + 6px)'}
|
|
key={`readable-message-${messageId}`}
|
|
dataTestId={'disappear-control-message'}
|
|
>
|
|
<StyledTimerNotification
|
|
container={true}
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
width="90%"
|
|
maxWidth="700px"
|
|
margin="10px auto"
|
|
padding="5px 10px"
|
|
>
|
|
<SessionIcon iconType="stopwatch" iconColor="inherit" iconSize="medium" />
|
|
<SpacerSM />
|
|
<Text text={textToRender} />
|
|
</StyledTimerNotification>
|
|
</ExpirableReadableMessage>
|
|
);
|
|
};
|