From fcec3805ee8345576d8425bc33c6a39fa7ac6313 Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Thu, 16 Sep 2021 16:09:07 +0200
Subject: [PATCH] GREG-41: Adding simple dropdown menu for language selection
---
frontend/public/locales/en/common.json | 2 +-
frontend/public/locales/nn/common.json | 1 +
.../src/components/dropdownmenu/index.tsx | 108 ++++++++++++++++++
.../src/components/languageselector/index.tsx | 38 ++++++
frontend/src/routes/components/header.tsx | 3 +-
frontend/src/styled.d.ts | 1 +
frontend/src/themes/main.ts | 1 +
frontend/src/themes/uib.ts | 1 +
frontend/src/themes/uio.ts | 1 +
9 files changed, 154 insertions(+), 2 deletions(-)
create mode 100644 frontend/src/components/dropdownmenu/index.tsx
create mode 100644 frontend/src/components/languageselector/index.tsx
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index e49b5fe0..3e446301 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -8,7 +8,7 @@
},
"header": {
"applicationTitleShort": "GREG",
- "applicationTitleLong": "Gjesteregistrering",
+ "applicationTitleLong": "Guest Registration",
"selectLanguage": "Select language"
},
"loading": "Loading...",
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 30a0598a..92c11d0f 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -4,6 +4,7 @@
"test": "Dette er ein 'nested' verdi"
},
"language": {
+ "languageName": "Språk",
"change": "Bytt språk til {{lang}}"
},
"header":{
diff --git a/frontend/src/components/dropdownmenu/index.tsx b/frontend/src/components/dropdownmenu/index.tsx
new file mode 100644
index 00000000..9feb7fed
--- /dev/null
+++ b/frontend/src/components/dropdownmenu/index.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react'
+import styled from 'styled-components/macro'
+
+
+const DropDownMenu = styled.div`
+ position: relative;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ width: fit-content;
+ display: inline-block;
+`
+
+const DropDownList = styled.ul`
+ position: absolute;
+ right: 1rem;
+ top: 2rem;
+ border-radius: 1rem;
+ list-style-type: none;
+ min-width: 10rem;
+ max-height: 50rem;
+ z-index: 100;
+ background: ${({ theme }) => theme.colors.dropDownMenuBackground};
+`
+
+interface IDropDownOption {
+ name: string;
+ value: any;
+}
+
+const getValueName = (value: any, options: Array<IDropDownOption>): string => {
+ for (let i = 0; i < options.length; i += 1) {
+ if (options[i].value === value) {
+ return options[i].name
+ }
+ }
+ return ''
+}
+
+interface IProps {
+ options: any[];
+ placeholder?: string;
+ value: any;
+ onChange: (event: any) => void;
+}
+
+
+function DropDown(props: IProps) {
+ const [open, setOpen] = useState(false)
+
+ const {
+ options,
+ placeholder,
+ value,
+ onChange,
+ } = props
+
+ function handleClick(option: any) {
+ setOpen(!open)
+ onChange(option.value)
+ }
+
+ function openMenu() {
+ if (!open) {
+ setOpen(true)
+ }
+ }
+
+ return (
+ <DropDownMenu
+ aria-haspopup='true'
+ aria-expanded={open}
+ onFocus={openMenu}
+ tabIndex={0}
+ >
+ <div>
+ <div onClick={openMenu}>
+ {placeholder
+ ? placeholder
+ : getValueName(value, options).toLowerCase()}
+ </div>
+ </div>
+ <div>
+ {open && (
+ <DropDownList>
+ {options.map((option, index) => {
+ return (
+ <li
+ onClick={(
+ event: React.MouseEvent<HTMLElement, MouseEvent>,
+ ) => {
+ handleClick(option)
+ }}
+ >
+ <p>{option.name}</p>
+ </li>
+ )
+ })}
+ </DropDownList>
+ )}
+ </div>
+ </DropDownMenu>
+ )
+}
+
+export default DropDown
diff --git a/frontend/src/components/languageselector/index.tsx b/frontend/src/components/languageselector/index.tsx
new file mode 100644
index 00000000..575b56d7
--- /dev/null
+++ b/frontend/src/components/languageselector/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import DropDown from '../dropdownmenu'
+
+
+function LanguageSelector() {
+ const { i18n, t } = useTranslation('common')
+
+ const options = [
+ {
+ name: 'English',
+ value: 'en',
+ },
+ {
+ name: 'Norsk nynorsk',
+ value: 'nn',
+ },
+ {
+ name: 'Norsk bokmål',
+ value: 'nb',
+ },
+ ]
+
+
+ return (
+ <DropDown options={options}
+ placeholder={t('header.selectLanguage')}
+ value={options[2]}
+ onChange={newValue => {
+ i18n.changeLanguage(newValue)
+ }
+ }
+ />
+ )
+}
+
+
+export default LanguageSelector
diff --git a/frontend/src/routes/components/header.tsx b/frontend/src/routes/components/header.tsx
index 0038b8a7..0a4f62cb 100644
--- a/frontend/src/routes/components/header.tsx
+++ b/frontend/src/routes/components/header.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import styled from 'styled-components/macro'
import { useTranslation } from 'react-i18next'
import LogoBar from '../../components/logobars/LogoBar'
+import LanguageSelector from '../../components/languageselector'
const MainWrapper = styled.div`
@@ -54,7 +55,7 @@ function Header() {
</TitleBox>
<Menu>
<MenuItem>
- TODO Language
+ <LanguageSelector/>
</MenuItem>
</Menu>
</Main>
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
index 38f57535..7031296a 100644
--- a/frontend/src/styled.d.ts
+++ b/frontend/src/styled.d.ts
@@ -7,6 +7,7 @@ declare module 'styled-components' {
colors: {
main: string
secondary: string
+ dropDownMenuBackground: string
}
footer: {
backgroundColor: string
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index d3eb364f..8af960ea 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -6,6 +6,7 @@ const mainTheme: DefaultTheme = {
colors: {
main: 'hotPink',
secondary: 'white',
+ dropDownMenuBackground: 'grey'
},
footer: {
backgroundColor: 'black',
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index 0cd69cd5..2d272789 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -2,6 +2,7 @@ const uibTheme = {
colors: {
main: 'hotPink',
secondary: 'black',
+ dropDownMenuBackground: 'grey'
},
}
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 6481aeb8..6f0f9a1c 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -2,6 +2,7 @@ const uioTheme = {
colors: {
main: 'hotPink',
secondary: 'white',
+ dropDownMenuBackground: 'grey'
},
}
--
GitLab