You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import $ from 'jquery';
|
|
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('');
|
|
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}
|
|
/>,
|
|
);
|
|
}
|