You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.4 KiB
49 lines
1.4 KiB
2 years ago
|
import { LanguageSelector } from "@/components/LanguageSelector";
|
||
|
import { useModal, withModal } from "@/modules/modals";
|
||
|
import { useEnabledLanguages } from "@/utilities/languages";
|
||
|
import { FunctionComponent, useCallback, useMemo, useState } from "react";
|
||
|
import { Button, Form } from "react-bootstrap";
|
||
|
import { availableTranslation } from "../toolOptions";
|
||
|
import { useProcess } from "./ToolContext";
|
||
|
|
||
|
const TranslationTool: FunctionComponent = () => {
|
||
|
const { data: languages } = useEnabledLanguages();
|
||
|
|
||
|
const available = useMemo(
|
||
|
() => languages.filter((v) => v.code2 in availableTranslation),
|
||
|
[languages]
|
||
|
);
|
||
|
|
||
|
const Modal = useModal();
|
||
|
|
||
|
const [selectedLanguage, setLanguage] =
|
||
|
useState<Nullable<Language.Info>>(null);
|
||
|
|
||
|
const process = useProcess();
|
||
|
|
||
|
const submit = useCallback(() => {
|
||
|
if (selectedLanguage) {
|
||
|
process("translate", { language: selectedLanguage.code2 });
|
||
|
}
|
||
|
}, [process, selectedLanguage]);
|
||
|
|
||
|
const footer = (
|
||
|
<Button disabled={!selectedLanguage} onClick={submit}>
|
||
|
Translate
|
||
|
</Button>
|
||
|
);
|
||
|
return (
|
||
|
<Modal title="Translation" footer={footer}>
|
||
|
<Form.Label>
|
||
|
Enabled languages not listed here are unsupported by Google Translate.
|
||
|
</Form.Label>
|
||
|
<LanguageSelector
|
||
|
options={available}
|
||
|
onChange={setLanguage}
|
||
|
></LanguageSelector>
|
||
|
</Modal>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default withModal(TranslationTool, "translation-tool");
|