89 lines
2.6 KiB
JavaScript
89 lines
2.6 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import reduxLang from '../../middleware/lang';
|
|
import { updateURLS, urlWithoutLocale } from '../../utils';
|
|
|
|
@reduxLang('AppContent')
|
|
class LangDropMenu extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.dropdownLinks = [
|
|
{ linkText: 'EN', val: 'en'},
|
|
{ linkText: 'DE', val: 'de'},
|
|
{ linkText: 'FR', val: 'fr'},
|
|
{ linkText: 'IT', val: 'it'}
|
|
];
|
|
|
|
this.state = {
|
|
showMenu: false,
|
|
selectedLanguage: this.dropdownLinks.filter(lang => {
|
|
return lang.val == this.props.locale;
|
|
})[0]
|
|
};
|
|
|
|
this.showMenu = this.showMenu.bind(this);
|
|
this.setLanguage = this.setLanguage.bind(this);
|
|
this.closeMenu = this.closeMenu.bind(this);
|
|
|
|
}
|
|
|
|
showMenu(event) {
|
|
event.preventDefault();
|
|
this.setState({ showMenu: true }, () => {
|
|
document.addEventListener('click', this.closeMenu);
|
|
|
|
});
|
|
}
|
|
|
|
setLanguage(language) {
|
|
console.log(language);
|
|
this.setState({selectedLanguage: language});
|
|
localStorage.setItem('userLang', language.val);
|
|
|
|
this.props.setLocale(language.val);
|
|
updateURLS(language.val, this.props.dispatch);
|
|
window.location.replace("/" + language.val + urlWithoutLocale(window.location.pathname));
|
|
}
|
|
|
|
closeMenu(event) {
|
|
if (!this.dropdownMenu.contains(event.target) || this.dropdownMenu.contains(event.target)) {
|
|
|
|
this.setState({ showMenu: false }, () => {
|
|
document.removeEventListener('click', this.closeMenu);
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let dropdownMenuShow = null;
|
|
if (this.state.showMenu) {
|
|
dropdownMenuShow = <ul
|
|
className="dropdown-menu"
|
|
ref={(element) => {
|
|
this.dropdownMenu = element;
|
|
}}>
|
|
{this.dropdownLinks.map((dropdownLink, index) => {
|
|
return (
|
|
<li key={index}>
|
|
<NavLink to="#" onClick={() => this.setLanguage(dropdownLink)} className="dropdown-item small-text" exact>
|
|
<span>{dropdownLink.linkText}</span>
|
|
</NavLink>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
}
|
|
return (
|
|
<div className="dropdown HeaderBurger lang-dropdown">
|
|
<NavLink to='#' className='lang-links small-text' onClick={this.showMenu}>
|
|
<span>{this.state.selectedLanguage.linkText}</span>
|
|
<i className='fas fa-caret-down' />
|
|
</NavLink>
|
|
{dropdownMenuShow}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
export default LangDropMenu;
|