@setoelkahfi / personal-website
Code Commits Issues Pulls Sessions CI/CD
feature/ssr-deployment
development feature/musik88-api feature/ssr-deployment main testing typescript
tsx 121 lines 2.71 KB
Raw
1 import React, { Component } from 'react'
2
3 const listStyle = {
4 listStyle: 'none'
5 }
6
7 type OptionProps = {
8 value: string
9 name: string
10 }
11
12 class LanguageOption extends Component<OptionProps> {
13
14 render() {
15 return (
16 <option value={this.props.value}>{this.props.name}</option>
17 )
18 }
19 }
20
21 type LanguageDropdownProps = {
22 onChangeLanguage: (language: string) => void
23 }
24
25 type LanguageDropdownState = {}
26
27 class LanguageDropdown extends Component<LanguageDropdownProps, LanguageDropdownState> {
28
29 getLanguageList(): OptionProps[] {
30
31 const en = {
32 value: "en",
33 name: "🇺🇸 English"
34 }
35
36 const se = {
37 value: "se",
38 name: "🇸🇪 Swedish"
39 }
40
41 const id = {
42 value: "id",
43 name: "🇮🇩 Indonesian"
44 }
45
46 const fr = {
47 value: "fr",
48 name: "🇫🇷 Français"
49 }
50
51 const de = {
52 value: "de",
53 name: "🇩🇪 Deutsch"
54 }
55
56 const zh = {
57 value: "zh",
58 name: "🇨🇳 中国人"
59 }
60
61 const es = {
62 value: "es",
63 name: "🇪🇸 Español"
64 }
65
66 const ja = {
67 value: "ja",
68 name: "🇯🇵 日本語"
69 }
70
71 var languageList: OptionProps[] = []
72 languageList.push(id)
73 languageList.push(se)
74 languageList.push(en)
75 languageList.push(de)
76 languageList.push(fr)
77 languageList.push(zh)
78 languageList.push(es)
79 languageList.push(ja)
80
81 return this.shuffle(languageList)
82 }
83
84 shuffle(array: any[]) {
85 var currentIndex = array.length, temporaryValue, randomIndex;
86
87 // While there remain elements to shuffle...
88 while (0 !== currentIndex) {
89
90 // Pick a remaining element...
91 randomIndex = Math.floor(Math.random() * currentIndex);
92 currentIndex -= 1;
93
94 // And swap it with the current element.
95 temporaryValue = array[currentIndex];
96 array[currentIndex] = array[randomIndex];
97 array[randomIndex] = temporaryValue;
98 }
99
100 return array;
101 }
102
103 render() {
104
105 var languageList = [];
106
107 for (let language of this.getLanguageList()) {
108 languageList.push(<LanguageOption name={language.name} value={language.value} key={language.value}/>);
109 }
110
111 return (
112 <div>
113 <select style={listStyle} onChange={ e => this.props.onChangeLanguage(e.currentTarget.value) } defaultValue={"en"} >
114 {languageList}
115 </select>
116 </div>
117 )
118 }
119 }
120
121 export default LanguageDropdown;