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 styled from '@emotion/styled'
|
||||||
|
import { hookstate, useHookstate } from '@hookstate/core'
|
||||||
import React, { useEffect, useRef, useState } from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
import Checkbox from './Checkbox' // Import the CustomCheckbox
|
import Checkbox from './Checkbox' // Import the CustomCheckbox
|
||||||
|
|
||||||
|
@ -10,6 +12,10 @@ interface DropdownProps {
|
||||||
prefill?: string[]
|
prefill?: string[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const globalState = hookstate(() =>
|
||||||
|
JSON.parse(JSON.stringify(defaultFilterState)),
|
||||||
|
)
|
||||||
|
|
||||||
const Dropdown: React.FC<DropdownProps> = ({
|
const Dropdown: React.FC<DropdownProps> = ({
|
||||||
title,
|
title,
|
||||||
options,
|
options,
|
||||||
|
@ -17,18 +23,35 @@ const Dropdown: React.FC<DropdownProps> = ({
|
||||||
onSelectionChange,
|
onSelectionChange,
|
||||||
prefill = [],
|
prefill = [],
|
||||||
}) => {
|
}) => {
|
||||||
|
const [updated, setUpdated] = useState(false)
|
||||||
const [selectedOptions, setSelectedOptions] = useState<string[]>([])
|
const [selectedOptions, setSelectedOptions] = useState<string[]>([])
|
||||||
const [isExpanded, setIsExpanded] = useState(false)
|
const [isExpanded, setIsExpanded] = useState(false)
|
||||||
|
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
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(() => {
|
useEffect(() => {
|
||||||
if (prefill?.length) {
|
if (prefill?.length) {
|
||||||
setSelectedOptions(prefill)
|
setSelectedOptions(prefill)
|
||||||
}
|
}
|
||||||
}, [prefill])
|
}, [prefill])
|
||||||
|
|
||||||
|
const handleUpdate = (selected: string[]) => {
|
||||||
|
if (selected?.length !== options?.length) {
|
||||||
|
setUpdated(true)
|
||||||
|
} else {
|
||||||
|
setUpdated(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleSelect = (option: string) => {
|
const handleSelect = (option: string) => {
|
||||||
let newSelectedOptions = []
|
let newSelectedOptions = []
|
||||||
if (selectedOptions.includes(option)) {
|
if (selectedOptions.includes(option)) {
|
||||||
|
@ -38,16 +61,22 @@ const Dropdown: React.FC<DropdownProps> = ({
|
||||||
}
|
}
|
||||||
setSelectedOptions(newSelectedOptions)
|
setSelectedOptions(newSelectedOptions)
|
||||||
onSelectionChange(newSelectedOptions, filterType)
|
onSelectionChange(newSelectedOptions, filterType)
|
||||||
|
|
||||||
|
handleUpdate(newSelectedOptions)
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectAll = () => {
|
const selectAll = () => {
|
||||||
setSelectedOptions(options)
|
setSelectedOptions(options)
|
||||||
onSelectionChange(options, filterType)
|
onSelectionChange(options, filterType)
|
||||||
|
|
||||||
|
setUpdated(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearAll = () => {
|
const clearAll = () => {
|
||||||
setSelectedOptions([])
|
setSelectedOptions([])
|
||||||
onSelectionChange([], filterType)
|
onSelectionChange([], filterType)
|
||||||
|
|
||||||
|
setUpdated(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleDropdown = () => {
|
const toggleDropdown = () => {
|
||||||
|
@ -77,7 +106,10 @@ const Dropdown: React.FC<DropdownProps> = ({
|
||||||
return (
|
return (
|
||||||
<DropdownContainer ref={dropdownRef}>
|
<DropdownContainer ref={dropdownRef}>
|
||||||
<DropdownHeader onClick={toggleDropdown} isExpanded={isExpanded}>
|
<DropdownHeader onClick={toggleDropdown} isExpanded={isExpanded}>
|
||||||
|
<TitleContainer>
|
||||||
|
{updated && <Dot isExpanded={isExpanded} />}
|
||||||
<span>{title}</span>
|
<span>{title}</span>
|
||||||
|
</TitleContainer>
|
||||||
<Chevron isExpanded={isExpanded}>
|
<Chevron isExpanded={isExpanded}>
|
||||||
<img src="/assets/chevron-down.svg" alt="chevron down" />
|
<img src="/assets/chevron-down.svg" alt="chevron down" />
|
||||||
</Chevron>
|
</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
|
export default Dropdown
|
||||||
|
|
|
@ -30,8 +30,8 @@ const filterOptions: FilterOption[] = [
|
||||||
interface OperatorFilterProps {}
|
interface OperatorFilterProps {}
|
||||||
|
|
||||||
const OperatorFilter: React.FC<OperatorFilterProps> = () => {
|
const OperatorFilter: React.FC<OperatorFilterProps> = () => {
|
||||||
// checkbox based on filterOptions
|
|
||||||
const [checked, setChecked] = useState<number | null>(null)
|
const [checked, setChecked] = useState<number | null>(null)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
{filterOptions.map((option, index) => (
|
{filterOptions.map((option, index) => (
|
||||||
|
|
|
@ -53,6 +53,10 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
|
||||||
state[filterType].set(selectedOptions)
|
state[filterType].set(selectedOptions)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleResetAll = () => {
|
||||||
|
state.set(defaultFilterState)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<h1 className="section-title">Operators</h1>
|
<h1 className="section-title">Operators</h1>
|
||||||
|
@ -99,6 +103,9 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
|
||||||
filterType="background"
|
filterType="background"
|
||||||
prefill={filter.background.slice()}
|
prefill={filter.background.slice()}
|
||||||
/>
|
/>
|
||||||
|
<ResetAll onClick={handleResetAll}>
|
||||||
|
Reset All <img src="/assets/close-black.svg" />
|
||||||
|
</ResetAll>
|
||||||
</DropdownContainer>
|
</DropdownContainer>
|
||||||
<OperatorGrid
|
<OperatorGrid
|
||||||
key={JSON.stringify(filter)}
|
key={JSON.stringify(filter)}
|
||||||
|
@ -137,6 +144,7 @@ const DropdownContainer = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
max-width: 911px;
|
max-width: 911px;
|
||||||
flex-wrap: wrap;
|
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
|
export default ExploreSection
|
||||||
|
|
Loading…
Reference in New Issue