Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-20 01:38:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: language select component

Browse Source
This commit is contained in:
undefined committed 2022-07-23 17:36:09 +08:00
1 parent ec512993ee
commit de04a852ed
4 files changed
+109 -128
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui-default/pages/problem_submit.page.tsx
+8 -73
View File
@@ -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;