feat: update filtering
This commit is contained in:
parent
0e012a9ef2
commit
e6936593a6
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.0833 3.73916L10.2608 2.91666L6.99996 6.17749L3.73913 2.91666L2.91663 3.73916L6.17746 6.99999L2.91663 10.2608L3.73913 11.0833L6.99996 7.82249L10.2608 11.0833L11.0833 10.2608L7.82246 6.99999L11.0833 3.73916Z" fill="black"/>
|
||||
</svg>
|
After Width: | Height: | Size: 338 B |
|
@ -1,4 +1,6 @@
|
|||
import { defaultFilterState } from '@/states/filterState'
|
||||
import styled from '@emotion/styled'
|
||||
import { hookstate, useHookstate } from '@hookstate/core'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import Checkbox from './Checkbox' // Import the CustomCheckbox
|
||||
|
||||
|
@ -10,6 +12,10 @@ interface DropdownProps {
|
|||
prefill?: string[]
|
||||
}
|
||||
|
||||
const globalState = hookstate(() =>
|
||||
JSON.parse(JSON.stringify(defaultFilterState)),
|
||||
)
|
||||
|
||||
const Dropdown: React.FC<DropdownProps> = ({
|
||||
title,
|
||||
options,
|
||||
|
@ -17,18 +23,35 @@ const Dropdown: React.FC<DropdownProps> = ({
|
|||
onSelectionChange,
|
||||
prefill = [],
|
||||
}) => {
|
||||
const [updated, setUpdated] = useState(false)
|
||||
const [selectedOptions, setSelectedOptions] = useState<string[]>([])
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// If prefill is provided, set the selected options to the prefill
|
||||
const state = useHookstate(globalState)
|
||||
const defualtState = state.get()
|
||||
|
||||
useEffect(() => {
|
||||
if (defualtState[filterType]?.length === selectedOptions?.length) {
|
||||
setUpdated(false)
|
||||
}
|
||||
}, [defualtState, selectedOptions])
|
||||
|
||||
useEffect(() => {
|
||||
if (prefill?.length) {
|
||||
setSelectedOptions(prefill)
|
||||
}
|
||||
}, [prefill])
|
||||
|
||||
const handleUpdate = (selected: string[]) => {
|
||||
if (selected?.length !== options?.length) {
|
||||
setUpdated(true)
|
||||
} else {
|
||||
setUpdated(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = (option: string) => {
|
||||
let newSelectedOptions = []
|
||||
if (selectedOptions.includes(option)) {
|
||||
|
@ -38,16 +61,22 @@ const Dropdown: React.FC<DropdownProps> = ({
|
|||
}
|
||||
setSelectedOptions(newSelectedOptions)
|
||||
onSelectionChange(newSelectedOptions, filterType)
|
||||
|
||||
handleUpdate(newSelectedOptions)
|
||||
}
|
||||
|
||||
const selectAll = () => {
|
||||
setSelectedOptions(options)
|
||||
onSelectionChange(options, filterType)
|
||||
|
||||
setUpdated(false)
|
||||
}
|
||||
|
||||
const clearAll = () => {
|
||||
setSelectedOptions([])
|
||||
onSelectionChange([], filterType)
|
||||
|
||||
setUpdated(true)
|
||||
}
|
||||
|
||||
const toggleDropdown = () => {
|
||||
|
@ -77,7 +106,10 @@ const Dropdown: React.FC<DropdownProps> = ({
|
|||
return (
|
||||
<DropdownContainer ref={dropdownRef}>
|
||||
<DropdownHeader onClick={toggleDropdown} isExpanded={isExpanded}>
|
||||
<span>{title}</span>
|
||||
<TitleContainer>
|
||||
{updated && <Dot isExpanded={isExpanded} />}
|
||||
<span>{title}</span>
|
||||
</TitleContainer>
|
||||
<Chevron isExpanded={isExpanded}>
|
||||
<img src="/assets/chevron-down.svg" alt="chevron down" />
|
||||
</Chevron>
|
||||
|
@ -194,4 +226,17 @@ const ScrollDiv = styled.div`
|
|||
}
|
||||
`
|
||||
|
||||
const Dot = styled.div<{ isExpanded: boolean }>`
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')};
|
||||
`
|
||||
|
||||
const TitleContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
`
|
||||
|
||||
export default Dropdown
|
||||
|
|
|
@ -30,8 +30,8 @@ const filterOptions: FilterOption[] = [
|
|||
interface OperatorFilterProps {}
|
||||
|
||||
const OperatorFilter: React.FC<OperatorFilterProps> = () => {
|
||||
// checkbox based on filterOptions
|
||||
const [checked, setChecked] = useState<number | null>(null)
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{filterOptions.map((option, index) => (
|
||||
|
|
|
@ -53,6 +53,10 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
|
|||
state[filterType].set(selectedOptions)
|
||||
}
|
||||
|
||||
const handleResetAll = () => {
|
||||
state.set(defaultFilterState)
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<h1 className="section-title">Operators</h1>
|
||||
|
@ -99,6 +103,9 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
|
|||
filterType="background"
|
||||
prefill={filter.background.slice()}
|
||||
/>
|
||||
<ResetAll onClick={handleResetAll}>
|
||||
Reset All <img src="/assets/close-black.svg" />
|
||||
</ResetAll>
|
||||
</DropdownContainer>
|
||||
<OperatorGrid
|
||||
key={JSON.stringify(filter)}
|
||||
|
@ -137,6 +144,7 @@ const DropdownContainer = styled.div`
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
max-width: 911px;
|
||||
flex-wrap: wrap;
|
||||
|
@ -155,4 +163,23 @@ const DropdownContainer = styled.div`
|
|||
}
|
||||
`
|
||||
|
||||
const ResetAll = styled.button`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
color: black;
|
||||
border: none;
|
||||
height: 42px;
|
||||
padding: 10px 14px 10px 18px;
|
||||
gap: 14px;
|
||||
position: absolute;
|
||||
right: -136px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 1190px) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
export default ExploreSection
|
||||
|
|
Loading…
Reference in New Issue