status-im/MyCrypto
2
0
Fork 0
mirror of https://github.com/status-im/MyCrypto.git synced 2025-01-10 19:16:10 +00:00
Code Issues Projects Releases Wiki Activity

Create LanguageDropdownComponent with working, adjustable local state.

Browse Source
This commit is contained in:
Daniel Ternyak 2017-04-13 20:25:08 -05:00
parent 746d2f5802
commit f91f47b877
1 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
common/components/Header/components/LanguageDropdownComponent.jsx Normal file
View File

@ -0,0 +1,97 @@
import React, {Component} from 'react'
const languages = [
{
'sign': 'en',
'name': 'English'
},
{
'sign': 'de',
'name': 'Deutsch'
},
{
'sign': 'el',
'name': 'Ελληνικά'
},
// {
// "sign": 'el',
// "name": 'Ελληνικά'
// },
// {
// "sign": 'el',
// "name": 'Ελληνικά'
// },
// {
// "sign": 'el',
// "name": 'Ελληνικά'
// },
// {
// "sign": 'el',
// "name": 'Ελληνικά'
// },
// {
// "sign": 'el',
// "name": 'Ελληνικά'
// },
]
export default class LanguageDropdownComponent extends Component {
constructor(props) {
super(props);
this.state = {
languageToggle: false,
languageSelection: 0
}
}
languageToggle() {
let nextState = this.state;
nextState['languageToggle'] = !nextState['languageToggle'];
this.setState(nextState)
}
changeLanguage(i) {
let nextState = this.state;
nextState["languageSelection"] = i;
nextState['languageToggle'] = false;
this.setState(nextState);
}
render() {
return (
<span className="dropdown">
<a tabIndex="0" aria-haspopup="true" aria-expanded="false"
aria-label="change language. current language English"
className="dropdown-toggle"
onClick={() => this.languageToggle()}>
{languages[this.state.languageSelection].name}
<i className="caret"/>
</a>
{
this.state.languageToggle &&
<ul className="dropdown-menu">
{languages.map((object, i) => {
return (
<li key={i}>
<a className={i === this.state.languageSelection ? 'active' : ''}
onClick={() => this.changeLanguage(i)}>
{object.name}
</a>
</li>
)
})}
<li role="separator" className="divider"/>
<li>
<a data-toggle="modal" data-target="#disclaimerModal">
Disclaimer
</a>
</li>
</ul>
}
</span>
)
}
}