Universal Disappearing Messages

ts/components/Select.tsx

@@ -0,0 +1,39 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import classNames from 'classnames';
+
+export type Option = Readonly<{
+  text: string;
+  value: string | number;
+}>;
+
+export type PropsType = Readonly<{
+  moduleClassName?: string;
+  options: ReadonlyArray<Option>;
+  onChange(value: string): void;
+  value: string | number;
+}>;
+
+export function Select(props: PropsType): JSX.Element {
+  const { moduleClassName, value, options, onChange } = props;
+
+  const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <div className={classNames(['module-select', moduleClassName])}>
+      <select value={value} onChange={onSelectChange}>
+        {options.map(({ text, value: optionValue }) => {
+          return (
+            <option value={optionValue} key={optionValue} aria-label={text}>
+              {text}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+}