Skip to content

N
Neos
Commit c4792a39 authored by BBeretta's avatar BBeretta
Browse files
Options

feat/language-translation (new packeged react-flag-kit added + I18NSelector layout changed)

parent 84966516
Pipeline #27846 passed with stages
            in 8 minutes and 17 seconds
            Hide whitespace changes
            Inline Side-by-side
            Showing with 64 additions and 35 deletions
            package-lock.json
            View file @ c4792a39
            ...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
            "react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
            "react-dnd-multi-backend": "^8.0.3", "react-dnd-multi-backend": "^8.0.3",
            "react-dom": "^18.2.0", "react-dom": "^18.2.0",
            "react-flag-kit": "^1.1.1",
            "react-i18next": "^14.1.1", "react-i18next": "^14.1.1",
            "react-router-dom": "^6.15.0", "react-router-dom": "^6.15.0",
            "react-use-websocket": "^4.5.0", "react-use-websocket": "^4.5.0",
            ...@@ -2518,12 +2519,12 @@ ...@@ -2518,12 +2519,12 @@
            } }
            }, },
            "node_modules/braces": { "node_modules/braces": {
            "version": "3.0.2", "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
            "devOptional": true, "devOptional": true,
            "dependencies": { "dependencies": {
            "fill-range": "^7.0.1" "fill-range": "^7.1.1"
            }, },
            "engines": { "engines": {
            "node": ">=8" "node": ">=8"
            ...@@ -3624,9 +3625,9 @@ ...@@ -3624,9 +3625,9 @@
            } }
            }, },
            "node_modules/fill-range": { "node_modules/fill-range": {
            "version": "7.0.1", "version": "7.1.1",
            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
            "devOptional": true, "devOptional": true,
            "dependencies": { "dependencies": {
            "to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
            ...@@ -5925,6 +5926,17 @@ ...@@ -5925,6 +5926,17 @@
            "react": "^18.2.0" "react": "^18.2.0"
            } }
            }, },
            "node_modules/react-flag-kit": {
            "version": "1.1.1",
            "resolved": "https://registry.npmjs.org/react-flag-kit/-/react-flag-kit-1.1.1.tgz",
            "integrity": "sha512-sgelSGSl0HxSL8lMM1TEBidgiGV2hOi+GaLNKeg10aBnL07vpwKvmfILlc1SzOdVyH48NElFyMj4NQn8F+/FHw==",
            "engines": {
            "node": ">=14"
            },
            "peerDependencies": {
            "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
            }
            },
            "node_modules/react-i18next": { "node_modules/react-i18next": {
            "version": "14.1.1", "version": "14.1.1",
            "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz",
            ...@@ -8809,12 +8821,12 @@ ...@@ -8809,12 +8821,12 @@
            } }
            }, },
            "braces": { "braces": {
            "version": "3.0.2", "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
            "devOptional": true, "devOptional": true,
            "requires": { "requires": {
            "fill-range": "^7.0.1" "fill-range": "^7.1.1"
            } }
            }, },
            "browserslist": { "browserslist": {
            ...@@ -9587,9 +9599,9 @@ ...@@ -9587,9 +9599,9 @@
            } }
            }, },
            "fill-range": { "fill-range": {
            "version": "7.0.1", "version": "7.1.1",
            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
            "devOptional": true, "devOptional": true,
            "requires": { "requires": {
            "to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
            ...@@ -11170,6 +11182,12 @@ ...@@ -11170,6 +11182,12 @@
            "scheduler": "^0.23.0" "scheduler": "^0.23.0"
            } }
            }, },
            "react-flag-kit": {
            "version": "1.1.1",
            "resolved": "https://registry.npmjs.org/react-flag-kit/-/react-flag-kit-1.1.1.tgz",
            "integrity": "sha512-sgelSGSl0HxSL8lMM1TEBidgiGV2hOi+GaLNKeg10aBnL07vpwKvmfILlc1SzOdVyH48NElFyMj4NQn8F+/FHw==",
            "requires": {}
            },
            "react-i18next": { "react-i18next": {
            "version": "14.1.1", "version": "14.1.1",
            "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz",
            ......
            src/ui/I18N/I18NSelector/index.tsx
            View file @ c4792a39
            import { Checkbox, Col, Row, Tooltip } from "antd";
            import React, { useEffect } from "react"; import React, { useEffect } from "react";
            import { FlagIcon, FlagIconCode } from "react-flag-kit";
            import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
            import { Select } from "@/ui/Shared";
            import { useI18N } from "../I18NContext"; import { useI18N } from "../I18NContext";
            const languageOptions: { value: string; label: string; flag: FlagIconCode }[] =
            [
            { value: "cn", label: "简体中文", flag: "CN" as FlagIconCode },
            { value: "en", label: "English", flag: "US" as FlagIconCode },
            { value: "fr", label: "Français", flag: "FR" as FlagIconCode },
            { value: "ja", label: "日本語", flag: "JP" as FlagIconCode },
            { value: "br", label: "Português do Brasil", flag: "BR" as FlagIconCode },
            { value: "pt", label: "Português", flag: "PT" as FlagIconCode },
            { value: "es", label: "Castellano", flag: "ES" as FlagIconCode },
            ];
            export const I18NSelector: React.FC = () => { export const I18NSelector: React.FC = () => {
            const { i18n } = useTranslation(); const { i18n } = useTranslation();
            const { language, changeLanguage } = useI18N(); const { language, changeLanguage } = useI18N();
            const onClickLanguageChange = (language: any) => { const onClickLanguageChange = (selectedLanguage: string) => {
            changeLanguage(language); changeLanguage(selectedLanguage);
            i18n.changeLanguage(language); i18n.changeLanguage(selectedLanguage);
            }; };
            useEffect(() => { useEffect(() => {
            // Adding language state as a dependency to force re-render
            // when the language changes
            i18n.changeLanguage(language); i18n.changeLanguage(language);
            }, [i18n.language]); }, [language]);
            return ( return (
            <Select <Row gutter={[16, 16]}>
            value={i18n.language} {languageOptions.map((lang) => (
            onChange={onClickLanguageChange} <Col key={lang.value}>
            options={[ <Tooltip title={lang.label}>
            { value: "cn", label: "简体中文" }, <Checkbox
            { value: "en", label: "English" }, checked={i18n.language === lang.value}
            { value: "fr", label: "Français" }, onChange={() => onClickLanguageChange(lang.value)}
            { value: "ja", label: "日本語" }, >
            { value: "br", label: "Português do Brasil" }, <FlagIcon code={lang.flag} size={26} />
            { value: "pt", label: "Português" }, </Checkbox>
            { value: "es", label: "Castellano" }, </Tooltip>
            ]} </Col>
            /> ))}
            </Row>
            ); );
            }; };
            Markdown is supported
            0% or
            You are about to add 0 people to the discussion. Proceed with caution.
            Finish editing this message first!
            Please register or to comment