87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
|
import {
|
||
|
|
For,
|
||
|
|
onMount,
|
||
|
|
type Component,
|
||
|
|
type JSX,
|
||
|
|
} from "solid-js";
|
||
|
|
import Scaffold from "../material/Scaffold";
|
||
|
|
import {
|
||
|
|
AppBar,
|
||
|
|
IconButton,
|
||
|
|
List,
|
||
|
|
ListItemButton,
|
||
|
|
ListItemSecondaryAction,
|
||
|
|
ListItemText,
|
||
|
|
Radio,
|
||
|
|
Toolbar,
|
||
|
|
} from "@suid/material";
|
||
|
|
import { Close as CloseIcon } from "@suid/icons-material";
|
||
|
|
import iso639_1 from "iso-639-1";
|
||
|
|
import { createTranslator } from "../platform/i18n";
|
||
|
|
import { Title } from "../material/typography";
|
||
|
|
|
||
|
|
type ChooseTootLangProps = {
|
||
|
|
code: string;
|
||
|
|
onCodeChange: (ncode?: string) => void;
|
||
|
|
onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
|
||
|
|
};
|
||
|
|
|
||
|
|
const ChooseTootLang: Component<ChooseTootLangProps> = (props) => {
|
||
|
|
let listRef: HTMLUListElement;
|
||
|
|
const [t] = createTranslator(
|
||
|
|
(code) =>
|
||
|
|
import(`./i18n/${code}.json`) as Promise<{
|
||
|
|
default: Record<string, string | undefined>;
|
||
|
|
}>,
|
||
|
|
);
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
const code = props.code;
|
||
|
|
const el = listRef.querySelector(`[data-langcode="${code}"]`);
|
||
|
|
if (el) {
|
||
|
|
el.scrollIntoView({ behavior: "auto" });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Scaffold
|
||
|
|
topbar={
|
||
|
|
<AppBar position="static">
|
||
|
|
<Toolbar
|
||
|
|
variant="dense"
|
||
|
|
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||
|
|
>
|
||
|
|
<IconButton color="inherit" onClick={props.onClose} disableRipple>
|
||
|
|
<CloseIcon />
|
||
|
|
</IconButton>
|
||
|
|
<Title>{t("Choose Language")}</Title>
|
||
|
|
</Toolbar>
|
||
|
|
</AppBar>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<List
|
||
|
|
ref={listRef!}
|
||
|
|
sx={{
|
||
|
|
paddingBottom: "var(--safe-area-inset-bottom, 0)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<For each={iso639_1.getAllCodes()}>
|
||
|
|
{(code) => (
|
||
|
|
<ListItemButton
|
||
|
|
data-langcode={code}
|
||
|
|
onClick={() => props.onCodeChange(code)}
|
||
|
|
>
|
||
|
|
<ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
|
||
|
|
<ListItemSecondaryAction>
|
||
|
|
<Radio checked={props.code == code}></Radio>
|
||
|
|
</ListItemSecondaryAction>
|
||
|
|
</ListItemButton>
|
||
|
|
)}
|
||
|
|
</For>
|
||
|
|
</List>
|
||
|
|
</Scaffold>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ChooseTootLang;
|