ui: language select component

packages/ui-default/components/languageselect.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import i18n from 'vj/utils/i18n';
+
+export default function LanguageSelect({
+  fieldSelector, firstLoadMain, firstLoadSub, availableLangs, mainLangs,
+}) {
+  const [main, setMain] = React.useState(firstLoadMain);
+  const [sub, setSub] = React.useState(firstLoadSub);
+
+  const options = {};
+  for (const key in availableLangs) {
+    if (key.startsWith(`${main}.`)) options[key.split('.')[1]] = availableLangs[key].display;
+  }
+  React.useEffect(() => {
+    $(fieldSelector).val(sub ? `${main}.${sub}` : main);
+  }, [main, sub]);
+  React.useEffect(() => {
+    const subselections = Object.keys(options).length;
+    if (options[sub]) return;
+    if (!subselections) setSub('');
+    if (subselections === 1) setSub(Object.keys(options)[0]);
+  }, [main]);
+
+  return (
+    <>
+      {(Object.keys(mainLangs).length > 1 || Object.keys(options).length === 1) && (
+        <div className="medium-5 columns form__item end">
+          <label>
+            {i18n('Code language')}
+            <div className="select-container">
+              <select value={main} onChange={(ev) => setMain(ev.target.value)} className="select">
+                {Object.keys(mainLangs).map((key) => (
+                  <option key={key} value={key}>{mainLangs[key]}</option>
+                ))}
+              </select>
+            </div>
+          </label>
+        </div>
+      )}
+      {(Object.keys(options).length > 1 || Object.keys(mainLangs).length === 1) && (
+        <div className="medium-5 columns form__item end">
+          <label>
+            {i18n('Code language')}
+            <div className="select-container">
+              <select value={sub} onChange={(ev) => setSub(ev.target.value)} className="select">
+                {Object.keys(options).map((i) => (
+                  <option value={i} key={i}>{options[i]}</option>
+                ))}
+              </select>
+            </div>
+          </label>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function renderLanguageSelect(onElement, fieldSelector, availableLangs, mainLangs, preferences) {
+  const [firstLoadMain, firstLoadSub] = (() => {
+    for (const preference of preferences) {
+      if (preference.includes('.')) {
+        const [l, r] = preference.split('.');
+        if (availableLangs[preference]) return [l, r];
+        if (availableLangs[l]) return [l, ''];
+      } else if (availableLangs[preference]) {
+        return [preference, ''];
+      }
+    }
+    const selected = Object.keys(mainLangs)[0];
+    for (const key in availableLangs) {
+      if (key.startsWith(`${selected}.`)) return [selected, key.split('.')[1]];
+    }
+    return [selected, ''];
+  })();
+
+  ReactDOM.createRoot(onElement).render(
+    <LanguageSelect
+      fieldSelector={fieldSelector}
+      mainLangs={mainLangs}
+      availableLangs={availableLangs}
+      firstLoadMain={firstLoadMain}
+      firstLoadSub={firstLoadSub}
+    />,
+  );
+}