Add filter list style (#19)
* Add filter list style * Make FilterList work with pages Co-authored-by: Szymon Szlachtowicz <szymon.szlachtowicz@Szymons-MacBook-Pro.local>
This commit is contained in:
Maria Rushkova
GitHub
parent
8f977fdd8f
commit
96129d1bae
|
|
@ -1,11 +1,50 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Colors } from '../constants/styles'
|
||||
import filterIcon from '../assets/images/filter.svg'
|
||||
import arrowDownIcon from '../assets/images/arrowDown.svg'
|
||||
|
||||
export const Filter = styled.select`
|
||||
width: 175px;
|
||||
padding: 2px 10px 2px 30px;
|
||||
export type FilterListProps = {
|
||||
value: number
|
||||
setValue: (value: number) => void
|
||||
options: { value: number; text: string }[]
|
||||
}
|
||||
|
||||
export const FilterList = ({ value, setValue, options }: FilterListProps) => {
|
||||
const [isOpened, setIsOpened] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('click', () => setIsOpened(false))
|
||||
return () => {
|
||||
window.removeEventListener('click', () => setIsOpened(false))
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Filter
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setIsOpened(!isOpened)
|
||||
}}
|
||||
>
|
||||
<Select>
|
||||
<SelectTrigger>{options.find((option) => option.value === value)?.text}</SelectTrigger>
|
||||
<SelectOptions className={isOpened ? 'opened' : undefined}>
|
||||
{options.map((option, key) => (
|
||||
<SelectOption key={key} onClick={() => setValue(option.value)}>
|
||||
{option.text}
|
||||
</SelectOption>
|
||||
))}
|
||||
</SelectOptions>
|
||||
</Select>
|
||||
</Filter>
|
||||
)
|
||||
}
|
||||
|
||||
const Filter = styled.button`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
|
@ -13,10 +52,86 @@ export const Filter = styled.select`
|
|||
border: 1px solid #e6ecf0;
|
||||
border-radius: 14px;
|
||||
appearance: none;
|
||||
background: url(${filterIcon}) no-repeat 5px center, url(${arrowDownIcon}) no-repeat right 10px center;
|
||||
outline: none;
|
||||
position: relative;
|
||||
|
||||
&:focus {
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid ${Colors.Violet};
|
||||
}
|
||||
`
|
||||
|
||||
const Select = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`
|
||||
const SelectTrigger = styled.div`
|
||||
position: relative;
|
||||
width: 175px;
|
||||
padding: 0 22px 0 25px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
background-image: url(${filterIcon});
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background-image: url(${arrowDownIcon});
|
||||
}
|
||||
`
|
||||
const SelectOptions = styled.div`
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: calc(100% + 7px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid ${Colors.GrayBorder};
|
||||
border-radius: 16px 4px 16px 16px;
|
||||
|
||||
&.opened {
|
||||
opacity: 1;
|
||||
background: ${Colors.White};
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
z-index: 10;
|
||||
}
|
||||
`
|
||||
const SelectOption = styled.span`
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
padding: 11px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid ${Colors.GrayBorder};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${Colors.Violet};
|
||||
color: ${Colors.White};
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@ import styled from 'styled-components'
|
|||
import { CommunityDetail, DirectorySortingEnum } from '../../models/community'
|
||||
import { useCommunities } from '../hooks/useCommunities'
|
||||
import { getCommunitiesInDirectory } from '../../helpers/apiMock'
|
||||
import { Filter } from '../Filter'
|
||||
import { FilterList } from '../Filter'
|
||||
import { Search } from '../Input'
|
||||
import { PageBar } from '../PageBar'
|
||||
import { DirectorySortingOptions } from '../../constants/SortingOptions'
|
||||
|
||||
interface DirectoryCardProps {
|
||||
community: CommunityDetail
|
||||
|
|
@ -49,14 +50,7 @@ export function DirectoryCards() {
|
|||
value={searchField}
|
||||
onChange={(e) => setSearchField(e.currentTarget.value)}
|
||||
/>
|
||||
<Filter value={sortingType} onChange={(e) => setSortingType(parseInt(e.currentTarget.value))}>
|
||||
<option value={DirectorySortingEnum.IncludedRecently}>Included Recently</option>
|
||||
<option value={DirectorySortingEnum.IncludedLongAgo}>Included Long Ago</option>
|
||||
<option value={DirectorySortingEnum.AtoZ}>A to Z</option>
|
||||
<option value={DirectorySortingEnum.ZtoA}>Z to A</option>
|
||||
<option value={DirectorySortingEnum.LeastVotes}>Least Votes</option>
|
||||
<option value={DirectorySortingEnum.MostVotes}>Most Votes</option>
|
||||
</Filter>
|
||||
<FilterList value={sortingType} setValue={setSortingType} options={DirectorySortingOptions} />
|
||||
</PageBar>
|
||||
<Voting>
|
||||
{communities.map((community) => (
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import { Card, CardCommunity, CardVote } from '../Card'
|
|||
import { getCommunitiesUnderVote } from '../../helpers/apiMock'
|
||||
import { CommunityDetail, VotingSortingEnum } from '../../models/community'
|
||||
import styled from 'styled-components'
|
||||
import { Filter } from '../Filter'
|
||||
import { FilterList } from '../Filter'
|
||||
import { Search } from '../Input'
|
||||
import { PageBar } from '../PageBar'
|
||||
import { useCommunities } from '../hooks/useCommunities'
|
||||
import { VotingSortingOptions } from '../../constants/SortingOptions'
|
||||
|
||||
interface VotingCardProps {
|
||||
community: CommunityDetail
|
||||
|
|
@ -56,15 +57,7 @@ export function VotingCards() {
|
|||
value={searchField}
|
||||
onChange={(e) => setSearchField(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Filter value={sortingType} onChange={(e) => setSortingType(parseInt(e.currentTarget.value))}>
|
||||
<option value={VotingSortingEnum.EndingSoonest}>Ending Soonest</option>
|
||||
<option value={VotingSortingEnum.EndingLatest}>Ending Latest</option>
|
||||
<option value={VotingSortingEnum.AtoZ}>A to Z</option>
|
||||
<option value={VotingSortingEnum.ZtoA}>Z to A</option>
|
||||
<option value={VotingSortingEnum.LeastVotes}>Least Votes</option>
|
||||
<option value={VotingSortingEnum.MostVotes}>Most Votes</option>
|
||||
</Filter>
|
||||
<FilterList value={sortingType} setValue={setSortingType} options={VotingSortingOptions} />
|
||||
</PageBar>
|
||||
<Voting>
|
||||
{communities.map((community) => (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import { DirectorySortingEnum, VotingSortingEnum } from '../models/community'
|
||||
|
||||
export const VotingSortingOptions = [
|
||||
{ value: VotingSortingEnum.EndingSoonest, text: 'Ending Soonest' },
|
||||
{ value: VotingSortingEnum.EndingLatest, text: 'Ending Latest' },
|
||||
{ value: VotingSortingEnum.MostVotes, text: 'Most Votes' },
|
||||
{ value: VotingSortingEnum.LeastVotes, text: 'Least Votes' },
|
||||
{ value: VotingSortingEnum.AtoZ, text: 'A to Z' },
|
||||
{ value: VotingSortingEnum.ZtoA, text: 'Z to A' },
|
||||
]
|
||||
|
||||
export const DirectorySortingOptions = [
|
||||
{ value: DirectorySortingEnum.IncludedRecently, text: 'Included Recently' },
|
||||
{ value: DirectorySortingEnum.IncludedLongAgo, text: 'Included Long Ago' },
|
||||
{ value: DirectorySortingEnum.MostVotes, text: 'Most Votes' },
|
||||
{ value: DirectorySortingEnum.LeastVotes, text: 'Least Votes' },
|
||||
{ value: DirectorySortingEnum.AtoZ, text: 'A to Z' },
|
||||
{ value: DirectorySortingEnum.ZtoA, text: 'Z to A' },
|
||||
]
|
||||
Loading…
Reference in New Issue