1 files changed, 68 insertions, 43 deletions
diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 536e5b89a..6eb72a266 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2019 Taler Systems SA
+ (C) 2022 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -14,55 +14,80 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { JSX } from "preact/jsx-runtime";
-import { NiceSelect } from "./styled/index";
-import { h } from "preact";
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { NiceSelect } from "./styled/index.js";
 
 interface Props {
   value?: string;
-  onChange: (s: string) => void;
-  label: string;
+  onChange?: (s: string) => void;
+  label: VNode | TranslatedString;
   list: {
-    [label: string]: string
-  }
+    [label: string]: string;
+  };
   name: string;
   description?: string;
   canBeNull?: boolean;
+  maxWidth?: boolean;
 }
 
-export function SelectList({ name, value, list, canBeNull, onChange, label, description }: Props): JSX.Element {
-  return <div>
-    <label
-      htmlFor={`text-${name}`}
-      style={{ marginLeft: "0.5em", fontWeight: "bold" }}
-    > {label}</label>
-    <NiceSelect>
-      <select name={name} onChange={(e) => {
-        console.log(e.currentTarget.value, value)
-        onChange(e.currentTarget.value)
-      }}>
-        {value !== undefined ? <option selected>
-          {list[value]}
-        </option> : <option selected disabled>
-            Select one option
-        </option>}
-        {Object.keys(list)
-          .filter((l) => l !== value)
-          .map(key => <option value={key} key={key}>{list[key]}</option>)
-        }
-      </select>
-    </NiceSelect>
-    {description && <span
-      style={{
-        color: "#383838",
-        fontSize: "smaller",
-        display: "block",
-        marginLeft: "2em",
-      }}
-    >
-      {description}
-    </span>}
-
-  </div>
-
+export function SelectList({
+  name,
+  value,
+  list,
+  onChange,
+  label,
+  maxWidth,
+  description,
+  canBeNull,
+}: Props): VNode {
+  const { i18n } = useTranslationContext();
+  return (
+    <Fragment>
+      <label
+        htmlFor={`text-${name}`}
+        style={{ marginLeft: "0.5em", fontWeight: "bold" }}
+      >
+        {" "}
+        {label}
+      </label>
+      <NiceSelect>
+        <select
+          name={name}
+          value={value}
+          style={maxWidth ? { width: "100%" } : undefined}
+          onChange={(e) => {
+            if (onChange) onChange(e.currentTarget.value);
+          }}
+        >
+          {value === undefined ||
+            (canBeNull && (
+              <option selected disabled>
+                <i18n.Translate>Select one option</i18n.Translate>
+              </option>
+            ))}
+          {Object.keys(list)
+            // .filter((l) => l !== value)
+            .map((key) => (
+              <option value={key} key={key}>
+                {list[key]}
+              </option>
+            ))}
+        </select>
+      </NiceSelect>
+      {description && (
+        <span
+          style={{
+            color: "#383838",
+            fontSize: "smaller",
+            display: "block",
+            marginLeft: "2em",
+          }}
+        >
+          {description}
+        </span>
+      )}
+    </Fragment>
+  );
 }