frontend/src/components/SelectMenu.tsx

118 lines
2.7 KiB
TypeScript
Raw Normal View History

2020-12-02 09:04:06 +01:00
import { ClickAwayListener } from '@material-ui/core';
import React, { useState } from 'react';
import styled from 'styled-components';
import { ExpandIcon } from './CourseCard';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-top: 15px;
2020-12-03 23:46:45 +01:00
min-width:130px;
2020-12-02 09:04:06 +01:00
font-family: 'Roboto', sans-serif;
background-color: #f1f2f5;
color: black;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
2020-12-05 18:06:26 +01:00
2020-12-02 09:04:06 +01:00
&:focus {
outline: none;
}
padding-left: 15px;
cursor: pointer;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
user-select: none;
`;
const Header = styled.div`
display: flex;
2020-12-03 23:46:45 +01:00
width:100%;
2020-12-02 09:04:06 +01:00
align-items: center;
2020-12-03 23:46:45 +01:00
justify-content: space-between;
2020-12-02 09:04:06 +01:00
`;
const HeaderTitle = styled.div`
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
`;
const List = styled.ul`
2020-12-03 23:46:45 +01:00
position: absolute;
top: 50px;
2020-12-02 09:04:06 +01:00
list-style-type: none;
margin: 0;
padding: 0;
2020-12-03 23:46:45 +01:00
margin-left: -15px;
2020-12-02 09:04:06 +01:00
background-color: #f2f4f7;
`;
const ListItem = styled.li`
font-family: 'Roboto', sans-serif;
font-size: 16px;
user-select: none;
2020-12-03 23:46:45 +01:00
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 37px;
2020-12-02 09:04:06 +01:00
font-weight: 400;
:hover {
background-color: #eceef4;
}
2020-12-03 23:46:45 +01:00
:first-child{
margin-top:10px;
}
2020-12-02 09:04:06 +01:00
`;
const ExpandIconSelect = styled(ExpandIcon)`
width: 10px;
height: 10px;
`;
2020-12-05 18:06:26 +01:00
interface SelectMenuProps {
changeSelectedOption: (option: string) => void;
changeDropdownOpen: (dropdownState: boolean) => void;
selectedOption:string;
}
export const SelectMenu = ({changeSelectedOption,changeDropdownOpen, selectedOption}:SelectMenuProps) => {
2020-12-02 09:04:06 +01:00
const [isOpen, setIsOpen] = useState(false);
2020-12-05 18:06:26 +01:00
2020-12-02 09:04:06 +01:00
return (
<ClickAwayListener
onClickAway={() => {
setIsOpen(false);
}}
>
2020-12-05 18:06:26 +01:00
<Wrapper onClick={() => {changeDropdownOpen(false)}}>
2020-12-02 09:04:06 +01:00
<Header
onClick={() => {
console.log('clicked');
setIsOpen(!isOpen);
}}
>
<HeaderTitle>{selectedOption}</HeaderTitle>
<ExpandIconSelect selected={isOpen} />
</Header>
{isOpen && (
<List>
<ListItem
onClick={() => {
2020-12-05 18:06:26 +01:00
changeSelectedOption('przedmioty');
2020-12-03 23:46:45 +01:00
setIsOpen(false);
2020-12-02 09:04:06 +01:00
}}
>
przedmioty
</ListItem>
<ListItem
onClick={() => {
2020-12-05 18:06:26 +01:00
changeSelectedOption('studenci');
2020-12-03 23:46:45 +01:00
setIsOpen(false);
2020-12-02 09:04:06 +01:00
}}
>
studenci
</ListItem>
</List>
)}
</Wrapper>
</ClickAwayListener>
);
};