Default disappearing message timeout fixes
This commit is contained in:
parent
c9415dcf67
commit
cd28e71bc6
25 changed files with 456 additions and 164 deletions
106
ts/components/DisappearingTimerSelect.tsx
Normal file
106
ts/components/DisappearingTimerSelect.tsx
Normal file
|
@ -0,0 +1,106 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useState, ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { LocalizerType } from '../types/Util';
|
||||
import * as expirationTimer from '../util/expirationTimer';
|
||||
import { DisappearingTimeDialog } from './DisappearingTimeDialog';
|
||||
|
||||
import { Select } from './Select';
|
||||
|
||||
const CSS_MODULE = 'module-disappearing-timer-select';
|
||||
|
||||
export type Props = {
|
||||
i18n: LocalizerType;
|
||||
|
||||
value?: number;
|
||||
onChange(value: number): void;
|
||||
};
|
||||
|
||||
export const DisappearingTimerSelect: React.FC<Props> = (props: Props) => {
|
||||
const { i18n, value = 0, onChange } = props;
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
let expirationTimerOptions: ReadonlyArray<{
|
||||
readonly value: number;
|
||||
readonly text: string;
|
||||
}> = expirationTimer.DEFAULT_DURATIONS_IN_SECONDS.map(seconds => {
|
||||
const text = expirationTimer.format(i18n, seconds, {
|
||||
capitalizeOff: true,
|
||||
});
|
||||
return {
|
||||
value: seconds,
|
||||
text,
|
||||
};
|
||||
});
|
||||
|
||||
const isCustomTimeSelected = !expirationTimer.DEFAULT_DURATIONS_SET.has(
|
||||
value
|
||||
);
|
||||
|
||||
const onSelectChange = (newValue: string) => {
|
||||
const intValue = parseInt(newValue, 10);
|
||||
if (intValue === -1) {
|
||||
setIsModalOpen(true);
|
||||
} else {
|
||||
onChange(intValue);
|
||||
}
|
||||
};
|
||||
|
||||
// Custom time...
|
||||
expirationTimerOptions = [
|
||||
...expirationTimerOptions,
|
||||
{
|
||||
value: -1,
|
||||
text: i18n(
|
||||
isCustomTimeSelected
|
||||
? 'selectedCustomDisappearingTimeOption'
|
||||
: 'customDisappearingTimeOption'
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
let modalNode: ReactNode = null;
|
||||
if (isModalOpen) {
|
||||
modalNode = (
|
||||
<DisappearingTimeDialog
|
||||
i18n={i18n}
|
||||
initialValue={value}
|
||||
onSubmit={newValue => {
|
||||
setIsModalOpen(false);
|
||||
onChange(newValue);
|
||||
}}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let info: ReactNode;
|
||||
if (isCustomTimeSelected) {
|
||||
info = (
|
||||
<div className={`${CSS_MODULE}__info`}>
|
||||
{expirationTimer.format(i18n, value)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
CSS_MODULE,
|
||||
isCustomTimeSelected ? `${CSS_MODULE}--custom-time` : false
|
||||
)}
|
||||
>
|
||||
<Select
|
||||
onChange={onSelectChange}
|
||||
value={isCustomTimeSelected ? -1 : value}
|
||||
options={expirationTimerOptions}
|
||||
/>
|
||||
{info}
|
||||
{modalNode}
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue