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

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.38.20",
+  "version": "4.38.21",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/home_preference.page.jsx

@@ -1,71 +1,31 @@
 import { NamedPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
 import tpl from 'vj/utils/tpl';
+import getAvailableLangs from 'vj/utils/availableLangs';
+import { renderLanguageSelect } from 'vj/components/languageselect';
+import delay from 'vj/utils/delay';
 
-function initCodeLangHelper() {
-  function setOptions($el, options) {
-    $el.empty();
-    $.each(options, (key, value) => {
-      $el.append($('<option></option>').attr('value', key).text(value));
-    });
-  }
-
-  const $el = $(tpl`\
-<div class="row">
-  <div class="medium-5 columns form__item end">
-    <label>
-      ${i18n('Code language')}
-      <div name="form_item_lang" class="select-container">
-        <select id="codelang-main-select" class="select"></select>
-      </div>
-    </label>
-  </div>
-  <div class="medium-5 columns form__item end" style="display: none" id="codelang-sub-container">
-    <label>
-      ${i18n('Code language')}
-      <div name="form_item_lang" class="select-container">
-        <select id="codelang-sub-select" class="select"></select>
-      </div>
-    </label>
-  </div>
-</div>
-`);
+async function initCodeLangHelper() {
+  const $el = $(tpl`<div class="row" id="codelang-select"></div>`);
   $('[name="codeLang"]')
     .parent().parent().parent()
     .parent()
     .hide()
     .after($el);
 
-  function onChangeMain(update = true) {
-    const options = {};
-    for (const key in window.LANGS) {
-      if (key.startsWith(`${this.value}.`) && key !== this.value) options[key] = window.LANGS[key].display;
-    }
-    if (Object.keys(options).length > 1) {
-      setOptions($('#codelang-sub-select'), options);
-      $('#codelang-sub-container').show();
-      if (update) $('[name="codeLang"]').val($('#codelang-sub-select').val());
-    } else {
-      $('#codelang-sub-container').hide();
-      if (update) $('[name="codeLang"]').val(this.value);
-    }
-  }
   const main = {};
   for (const key in window.LANGS) {
     if (!key.includes('.') && !window.LANGS[key].hidden) main[key] = window.LANGS[key].display;
   }
-  setOptions($('#codelang-main-select'), main);
-  const current = $('[name="codeLang"]').val();
-  if (current.includes('.')) {
-    const [m] = current.split('.');
-    $('#codelang-main-select').val(m);
-    onChangeMain.call({ value: m }, false);
-    $('#codelang-sub-select').val(current);
-  } else $('#codelang-main-select').val(current);
-  $('#codelang-main-select').on('change', onChangeMain);
-  $('#codelang-sub-select').on('change', function () {
-    $('[name="codeLang"]').val(this.value);
-  });
+
+  await delay(50);
+  renderLanguageSelect(
+    document.getElementById('codelang-select'),
+    $('[name="codeLang"]'),
+    getAvailableLangs(),
+    main,
+    [$('[name="codeLang"]').val()],
+  );
 }
 
 function supportFontFamily(f) {

packages/ui-default/pages/problem_submit.page.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import i18n from 'vj/utils/i18n';
 import { NamedPage } from 'vj/misc/Page';
 import getAvailableLangs from 'vj/utils/availableLangs';
+import { renderLanguageSelect } from 'vj/components/languageselect';
 
 const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
   const { config } = UiContext.pdoc;
@@ -23,76 +21,13 @@ const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', '
     if (window.LANGS[key].pretest?.split('.')[0] === preferences[0].split('.')[0]) preferences.push(key);
   }
 
-  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, ''];
-  })();
-
-  function LanguageSelect() {
-    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(() => {
-      $('[name="lang"]').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>
-        )}
-      </>
-    );
-  }
-
-  ReactDOM.createRoot(document.getElementById('codelang-selector')).render(<LanguageSelect />);
+  renderLanguageSelect(
+    document.getElementById('codelang-selector'),
+    '[name="lang"]',
+    availableLangs,
+    mainLangs,
+    preferences,
+  );
 });
 
 export default page;