docker-multiarch/openwrt-firmware-selector
1
0
Fork 0
mirror of https://git.netzspielplatz.de/docker-multiarch/openwrt-firmware-selector.git synced 2025-11-08 22:09:25 +00:00
Code Issues Projects Releases Wiki Activity

adds translation support via i18n.js

Browse source 
Uses react-i18next library to provide APIs for translational
purposes.
Translation data is loaded from `src/locales/{{lng}}/translation.json`
and is accessed by dot notation.
The data can be translated in two ways:
1. In functional components, a method `t` can be instantiated using the
`useTranslation` method from rect-18next.
2. In class components, a method `t` can be accessed via props while
exporting the component with `withTranslation` method from react-i18next
library.

The syntax will look like `t('data.data')` or `this.props.t('data.data')`

Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
This commit is contained in:
Sudhanshu Gautam 2019-06-29 02:40:53 +05:30
parent 8f68dc328e
commit 07b13c3f7a
10 changed files with 156 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/components/header.js
View file

@ -1,25 +1,67 @@
import React from "react";
import AppBar from '@material-ui/core/AppBar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import LanguageIcon from '@material-ui/icons/Language';
import { Toolbar } from '@material-ui/core';
import { Toolbar, Typography, AppBar, Button, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Popper, Fade, Paper } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';
class Header extends React.Component {
render() {
return (
<AppBar position="static">
<Toolbar>
<Typography edge="start" variant="h6">OpenWrt Firmware Selector Wizard</Typography>
<div style={{flexGrow: 1}}></div>
<Button color="secondary" variant="contained">
Change Language &nbsp;
<LanguageIcon />
</Button>
</Toolbar>
</AppBar>
);
export default function Header() {
const { t, i18n } = useTranslation();
const [value, setValue] = React.useState('en');
const [anchorEl, setAnchorEl] = React.useState(null);
const changeLanguage = event => {
var val = event.target.value;
i18n.changeLanguage(val);
setAnchorEl(null);
};
const openChangeLanguagePopper = event => {
setValue(i18next.language.substring(0, 2));
setAnchorEl(anchorEl ? null : event.currentTarget);
}
}
export default Header;
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<AppBar position="static">
<Toolbar>
<Typography edge="start" variant="h6">OpenWrt Firmware Selector Wizard</Typography>
<div style={{flexGrow: 1}}></div>
<Button aria-describedby={id} color="secondary" variant="contained" onClick={openChangeLanguagePopper}>
{t('components.changeLanguage')} &nbsp;
<LanguageIcon />
</Button>
<Popper
id={id}
open={open}
anchorEl={anchorEl}
transition
disablePortal = {true}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper className="language-selector-popper">
<FormControl component="fieldset">
<FormLabel component="legend">Change Language</FormLabel>
<br />
<RadioGroup
aria-label="Language"
name="language"
value={value}
onChange={changeLanguage}
>
<FormControlLabel value="en" control={<Radio />} label="English" />
<FormControlLabel value="de" control={<Radio />} label="German" />
</RadioGroup>
</FormControl>
</Paper>
</Fade>
)}
</Popper>
</Toolbar>
</AppBar>
);
}