78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import React, { Component } from 'react'
|
|
import i18next from 'i18next'
|
|
import { connect } from 'react-redux'
|
|
|
|
import { ReactComponent as EnFlag } from '../../images/flags/en.svg'
|
|
import { ReactComponent as FrFlag } from '../../images/flags/fr.svg'
|
|
import { setLanguage } from '../../actions/index'
|
|
|
|
const languages = [
|
|
{
|
|
name: 'en',
|
|
selected: true,
|
|
flag: <EnFlag />,
|
|
},
|
|
{
|
|
name: 'fr',
|
|
selected: false,
|
|
flag: <FrFlag />,
|
|
},
|
|
]
|
|
|
|
class Dropdown extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
isOpen: false,
|
|
}
|
|
}
|
|
|
|
toggleDropdown() {
|
|
this.setState(prevState => ({
|
|
isOpen: !prevState.isOpen,
|
|
}))
|
|
}
|
|
|
|
render() {
|
|
const { isOpen } = this.state
|
|
const { language: selected, onUpdateLanguage } = this.props
|
|
return (
|
|
<div className="dropdown-wrapper" onClick={() => this.toggleDropdown()}>
|
|
<ul className="dropdown-list i18n-flag">
|
|
{languages
|
|
.filter(language =>
|
|
isOpen ? language : language.name === selected
|
|
)
|
|
.map(language => (
|
|
<li
|
|
className={`dropdown-item${
|
|
language.name === selected && isOpen
|
|
? ' dropdown-item-selected'
|
|
: ''
|
|
}`}
|
|
key={language.name}
|
|
onClick={() => onUpdateLanguage(language.name, selected)}
|
|
>
|
|
{language.flag} {language.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
state => ({
|
|
language: state.language,
|
|
}),
|
|
dispatch => ({
|
|
onUpdateLanguage: (lang, selected) => {
|
|
if (lang !== selected) {
|
|
i18next.changeLanguage(lang)
|
|
dispatch(setLanguage(lang))
|
|
}
|
|
},
|
|
})
|
|
)(Dropdown)
|