Default disappearing message timeout fixes

ts/components/DisappearingTimerSelect.tsx

@@ -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>
+  );
+};