Add search filter bar components
This commit is contained in:
parent
2f350ede0e
commit
35aafeefaf
6 changed files with 534 additions and 0 deletions
0
components/CharacterSearchFilterBar/index.scss
Normal file
0
components/CharacterSearchFilterBar/index.scss
Normal file
205
components/CharacterSearchFilterBar/index.tsx
Normal file
205
components/CharacterSearchFilterBar/index.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
import SearchFilter from '~components/SearchFilter'
|
||||
import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
|
||||
|
||||
import './index.scss'
|
||||
import { emptyElementState, emptyProficiencyState, emptyRarityState } from '~utils/emptyStates'
|
||||
import { elements, proficiencies, rarities } from '~utils/stateValues'
|
||||
|
||||
interface Props {
|
||||
sendFilters: (filters: { [key: string]: number[] }) => void
|
||||
}
|
||||
|
||||
const CharacterSearchFilterBar = (props: Props) => {
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
const [rarityMenu, setRarityMenu] = useState(false)
|
||||
const [elementMenu, setElementMenu] = useState(false)
|
||||
const [proficiency1Menu, setProficiency1Menu] = useState(false)
|
||||
const [proficiency2Menu, setProficiency2Menu] = useState(false)
|
||||
|
||||
const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
|
||||
const [elementState, setElementState] = useState<ElementState>(emptyElementState)
|
||||
const [proficiency1State, setProficiency1State] = useState<ProficiencyState>(emptyProficiencyState)
|
||||
const [proficiency2State, setProficiency2State] = useState<ProficiencyState>(emptyProficiencyState)
|
||||
|
||||
function rarityMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(true)
|
||||
setElementMenu(false)
|
||||
setProficiency1Menu(false)
|
||||
setProficiency2Menu(false)
|
||||
} else setRarityMenu(false)
|
||||
}
|
||||
|
||||
function elementMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(false)
|
||||
setElementMenu(true)
|
||||
setProficiency1Menu(false)
|
||||
setProficiency2Menu(false)
|
||||
} else setElementMenu(false)
|
||||
}
|
||||
|
||||
function proficiency1MenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(false)
|
||||
setElementMenu(false)
|
||||
setProficiency1Menu(true)
|
||||
setProficiency2Menu(false)
|
||||
} else setProficiency1Menu(false)
|
||||
}
|
||||
|
||||
function proficiency2MenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(false)
|
||||
setElementMenu(false)
|
||||
setProficiency1Menu(false)
|
||||
setProficiency2Menu(true)
|
||||
} else setProficiency2Menu(false)
|
||||
}
|
||||
|
||||
function handleRarityChange(checked: boolean, key: string) {
|
||||
let newRarityState = cloneDeep(rarityState)
|
||||
newRarityState[key].checked = checked
|
||||
setRarityState(newRarityState)
|
||||
}
|
||||
|
||||
function handleElementChange(checked: boolean, key: string) {
|
||||
let newElementState = cloneDeep(elementState)
|
||||
newElementState[key].checked = checked
|
||||
setElementState(newElementState)
|
||||
}
|
||||
|
||||
function handleProficiency1Change(checked: boolean, key: string) {
|
||||
let newProficiencyState = cloneDeep(proficiency1State)
|
||||
newProficiencyState[key].checked = checked
|
||||
setProficiency1State(newProficiencyState)
|
||||
}
|
||||
|
||||
function handleProficiency2Change(checked: boolean, key: string) {
|
||||
let newProficiencyState = cloneDeep(proficiency2State)
|
||||
newProficiencyState[key].checked = checked
|
||||
setProficiency2State(newProficiencyState)
|
||||
}
|
||||
|
||||
function sendFilters() {
|
||||
const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
|
||||
const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
|
||||
const checkedProficiency1Filters = Object.values(proficiency1State).filter(x => x.checked).map((x, i) => x.id)
|
||||
const checkedProficiency2Filters = Object.values(proficiency2State).filter(x => x.checked).map((x, i) => x.id)
|
||||
|
||||
const filters = {
|
||||
rarity: checkedRarityFilters,
|
||||
element: checkedElementFilters,
|
||||
proficiency1: checkedProficiency1Filters,
|
||||
proficiency2: checkedProficiency2Filters
|
||||
}
|
||||
|
||||
props.sendFilters(filters)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
sendFilters()
|
||||
}, [rarityState, elementState, proficiency1State, proficiency2State])
|
||||
|
||||
function renderProficiencyFilter(proficiency: 1 | 2) {
|
||||
const onCheckedChange = (proficiency == 1) ? handleProficiency1Change : handleProficiency2Change
|
||||
const numSelected = (proficiency == 1)
|
||||
? Object.values(proficiency1State).map(x => x.checked).filter(Boolean).length
|
||||
: Object.values(proficiency2State).map(x => x.checked).filter(Boolean).length
|
||||
const open = (proficiency == 1) ? proficiency1Menu : proficiency2Menu
|
||||
const onOpenChange = (proficiency == 1) ? proficiency1MenuOpened : proficiency2MenuOpened
|
||||
|
||||
return (
|
||||
<SearchFilter
|
||||
label={`${t('filters.labels.proficiency')} ${proficiency}`}
|
||||
numSelected={numSelected}
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}>
|
||||
<DropdownMenu.Label className="Label">{`${t('filters.labels.proficiency')} ${proficiency}`}</DropdownMenu.Label>
|
||||
<section>
|
||||
<DropdownMenu.Group className="Group">
|
||||
{ Array.from(Array(proficiencies.length / 2)).map((x, i) => {
|
||||
const checked = (proficiency == 1)
|
||||
? proficiency1State[proficiencies[i]].checked
|
||||
: proficiency2State[proficiencies[i]].checked
|
||||
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={proficiencies[i]}
|
||||
onCheckedChange={onCheckedChange}
|
||||
checked={checked}
|
||||
valueKey={proficiencies[i]}>
|
||||
{t(`proficiencies.${proficiencies[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Group className="Group">
|
||||
{ Array.from(Array(proficiencies.length / 2)).map((x, i) => {
|
||||
const checked = (proficiency == 1)
|
||||
? proficiency1State[proficiencies[i + (proficiencies.length / 2)]].checked
|
||||
: proficiency2State[proficiencies[i + (proficiencies.length / 2)]].checked
|
||||
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={proficiencies[i + (proficiencies.length / 2)]}
|
||||
onCheckedChange={onCheckedChange}
|
||||
checked={checked}
|
||||
valueKey={proficiencies[i + (proficiencies.length / 2)]}>
|
||||
{t(`proficiencies.${proficiencies[i + (proficiencies.length / 2)]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</DropdownMenu.Group>
|
||||
</section>
|
||||
</SearchFilter>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="SearchFilterBar">
|
||||
<SearchFilter label={t('filters.labels.rarity')} numSelected={Object.values(rarityState).map(x => x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.rarity')}</DropdownMenu.Label>
|
||||
{ Array.from(Array(rarities.length)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={rarities[i]}
|
||||
onCheckedChange={handleRarityChange}
|
||||
checked={rarityState[rarities[i]].checked}
|
||||
valueKey={rarities[i]}>
|
||||
{t(`rarities.${rarities[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</SearchFilter>
|
||||
|
||||
<SearchFilter label={t('filters.labels.element')} numSelected={Object.values(elementState).map(x => x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.element')}</DropdownMenu.Label>
|
||||
{ Array.from(Array(elements.length)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={elements[i]}
|
||||
onCheckedChange={handleElementChange}
|
||||
checked={elementState[elements[i]].checked}
|
||||
valueKey={elements[i]}>
|
||||
{t(`elements.${elements[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</SearchFilter>
|
||||
|
||||
{ renderProficiencyFilter(1) }
|
||||
{ renderProficiencyFilter(2) }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CharacterSearchFilterBar
|
||||
0
components/SummonSearchFilterBar/index.scss
Normal file
0
components/SummonSearchFilterBar/index.scss
Normal file
105
components/SummonSearchFilterBar/index.tsx
Normal file
105
components/SummonSearchFilterBar/index.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
import SearchFilter from '~components/SearchFilter'
|
||||
import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
|
||||
|
||||
import './index.scss'
|
||||
import { emptyElementState, emptyRarityState } from '~utils/emptyStates'
|
||||
import { elements, rarities } from '~utils/stateValues'
|
||||
|
||||
interface Props {
|
||||
sendFilters: (filters: { [key: string]: number[] }) => void
|
||||
}
|
||||
|
||||
const SummonSearchFilterBar = (props: Props) => {
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
const [rarityMenu, setRarityMenu] = useState(false)
|
||||
const [elementMenu, setElementMenu] = useState(false)
|
||||
|
||||
const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
|
||||
const [elementState, setElementState] = useState<ElementState>(emptyElementState)
|
||||
|
||||
function rarityMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(true)
|
||||
setElementMenu(false)
|
||||
} else setRarityMenu(false)
|
||||
}
|
||||
|
||||
function elementMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(false)
|
||||
setElementMenu(true)
|
||||
} else setElementMenu(false)
|
||||
}
|
||||
|
||||
function handleRarityChange(checked: boolean, key: string) {
|
||||
let newRarityState = cloneDeep(rarityState)
|
||||
newRarityState[key].checked = checked
|
||||
setRarityState(newRarityState)
|
||||
}
|
||||
|
||||
function handleElementChange(checked: boolean, key: string) {
|
||||
let newElementState = cloneDeep(elementState)
|
||||
newElementState[key].checked = checked
|
||||
setElementState(newElementState)
|
||||
}
|
||||
|
||||
function sendFilters() {
|
||||
const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
|
||||
const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
|
||||
|
||||
const filters = {
|
||||
rarity: checkedRarityFilters,
|
||||
element: checkedElementFilters
|
||||
}
|
||||
|
||||
props.sendFilters(filters)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
sendFilters()
|
||||
}, [rarityState, elementState])
|
||||
|
||||
return (
|
||||
<div className="SearchFilterBar">
|
||||
<SearchFilter label={t('filters.labels.rarity')} numSelected={Object.values(rarityState).map(x => x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.rarity')}</DropdownMenu.Label>
|
||||
{ Array.from(Array(rarities.length)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={rarities[i]}
|
||||
onCheckedChange={handleRarityChange}
|
||||
checked={rarityState[rarities[i]].checked}
|
||||
valueKey={rarities[i]}>
|
||||
{t(`rarities.${rarities[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</SearchFilter>
|
||||
|
||||
<SearchFilter label={t('filters.labels.element')} numSelected={Object.values(elementState).map(x => x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.element')}</DropdownMenu.Label>
|
||||
{ Array.from(Array(elements.length)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={elements[i]}
|
||||
onCheckedChange={handleElementChange}
|
||||
checked={elementState[elements[i]].checked}
|
||||
valueKey={elements[i]}>
|
||||
{t(`elements.${elements[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</SearchFilter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SummonSearchFilterBar
|
||||
0
components/WeaponSearchFilterBar/index.scss
Normal file
0
components/WeaponSearchFilterBar/index.scss
Normal file
224
components/WeaponSearchFilterBar/index.tsx
Normal file
224
components/WeaponSearchFilterBar/index.tsx
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
import SearchFilter from '~components/SearchFilter'
|
||||
import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
|
||||
|
||||
import './index.scss'
|
||||
import { emptyElementState, emptyProficiencyState, emptyRarityState, emptyWeaponSeriesState } from '~utils/emptyStates'
|
||||
import { elements, proficiencies, rarities, weaponSeries } from '~utils/stateValues'
|
||||
|
||||
interface Props {
|
||||
sendFilters: (filters: { [key: string]: number[] }) => void
|
||||
}
|
||||
|
||||
const WeaponSearchFilterBar = (props: Props) => {
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
const [rarityMenu, setRarityMenu] = useState(false)
|
||||
const [elementMenu, setElementMenu] = useState(false)
|
||||
const [proficiencyMenu, setProficiencyMenu] = useState(false)
|
||||
const [seriesMenu, setSeriesMenu] = useState(false)
|
||||
|
||||
const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
|
||||
const [elementState, setElementState] = useState<ElementState>(emptyElementState)
|
||||
const [proficiencyState, setProficiencyState] = useState<ProficiencyState>(emptyProficiencyState)
|
||||
const [seriesState, setSeriesState] = useState<WeaponSeriesState>(emptyWeaponSeriesState)
|
||||
|
||||
function rarityMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(true)
|
||||
setElementMenu(false)
|
||||
setProficiencyMenu(false)
|
||||
setSeriesMenu(false)
|
||||
} else setRarityMenu(false)
|
||||
}
|
||||
|
||||
function elementMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(false)
|
||||
setElementMenu(true)
|
||||
setProficiencyMenu(false)
|
||||
setSeriesMenu(false)
|
||||
} else setElementMenu(false)
|
||||
}
|
||||
|
||||
function proficiencyMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(false)
|
||||
setElementMenu(false)
|
||||
setProficiencyMenu(true)
|
||||
setSeriesMenu(false)
|
||||
} else setProficiencyMenu(false)
|
||||
}
|
||||
|
||||
function seriesMenuOpened(open: boolean) {
|
||||
if (open) {
|
||||
setRarityMenu(false)
|
||||
setElementMenu(false)
|
||||
setProficiencyMenu(false)
|
||||
setSeriesMenu(true)
|
||||
} else setSeriesMenu(false)
|
||||
}
|
||||
|
||||
function handleRarityChange(checked: boolean, key: string) {
|
||||
let newRarityState = cloneDeep(rarityState)
|
||||
newRarityState[key].checked = checked
|
||||
setRarityState(newRarityState)
|
||||
}
|
||||
|
||||
function handleElementChange(checked: boolean, key: string) {
|
||||
let newElementState = cloneDeep(elementState)
|
||||
newElementState[key].checked = checked
|
||||
setElementState(newElementState)
|
||||
}
|
||||
|
||||
function handleProficiencyChange(checked: boolean, key: string) {
|
||||
let newProficiencyState = cloneDeep(proficiencyState)
|
||||
newProficiencyState[key].checked = checked
|
||||
setProficiencyState(newProficiencyState)
|
||||
}
|
||||
|
||||
function handleSeriesChange(checked: boolean, key: string) {
|
||||
let newSeriesState = cloneDeep(seriesState)
|
||||
newSeriesState[key].checked = checked
|
||||
setSeriesState(newSeriesState)
|
||||
}
|
||||
|
||||
function sendFilters() {
|
||||
const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
|
||||
const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
|
||||
const checkedProficiencyFilters = Object.values(proficiencyState).filter(x => x.checked).map((x, i) => x.id)
|
||||
const checkedSeriesFilters = Object.values(seriesState).filter(x => x.checked).map((x, i) => x.id)
|
||||
|
||||
const filters = {
|
||||
rarity: checkedRarityFilters,
|
||||
element: checkedElementFilters,
|
||||
proficiency1: checkedProficiencyFilters,
|
||||
series: checkedSeriesFilters
|
||||
}
|
||||
|
||||
props.sendFilters(filters)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
sendFilters()
|
||||
}, [rarityState, elementState, proficiencyState, seriesState])
|
||||
|
||||
return (
|
||||
<div className="SearchFilterBar">
|
||||
<SearchFilter label={t('filters.labels.rarity')} numSelected={Object.values(rarityState).map(x => x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.rarity')}</DropdownMenu.Label>
|
||||
{ Array.from(Array(rarities.length)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={rarities[i]}
|
||||
onCheckedChange={handleRarityChange}
|
||||
checked={rarityState[rarities[i]].checked}
|
||||
valueKey={rarities[i]}>
|
||||
{t(`rarities.${rarities[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</SearchFilter>
|
||||
|
||||
<SearchFilter label={t('filters.labels.element')} numSelected={Object.values(elementState).map(x => x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.element')}</DropdownMenu.Label>
|
||||
{ Array.from(Array(elements.length)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={elements[i]}
|
||||
onCheckedChange={handleElementChange}
|
||||
checked={elementState[elements[i]].checked}
|
||||
valueKey={elements[i]}>
|
||||
{t(`elements.${elements[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</SearchFilter>
|
||||
|
||||
<SearchFilter label={t('filters.labels.proficiency')} numSelected={Object.values(proficiencyState).map(x => x.checked).filter(Boolean).length} open={proficiencyMenu} onOpenChange={proficiencyMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.proficiency')}</DropdownMenu.Label>
|
||||
<section>
|
||||
<DropdownMenu.Group className="Group">
|
||||
{ Array.from(Array(proficiencies.length / 2)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={proficiencies[i]}
|
||||
onCheckedChange={handleProficiencyChange}
|
||||
checked={proficiencyState[proficiencies[i]].checked}
|
||||
valueKey={proficiencies[i]}>
|
||||
{t(`proficiencies.${proficiencies[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Group className="Group">
|
||||
{ Array.from(Array(proficiencies.length / 2)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={proficiencies[i + (proficiencies.length / 2)]}
|
||||
onCheckedChange={handleProficiencyChange}
|
||||
checked={proficiencyState[proficiencies[i + (proficiencies.length / 2)]].checked}
|
||||
valueKey={proficiencies[i + (proficiencies.length / 2)]}>
|
||||
{t(`proficiencies.${proficiencies[i + (proficiencies.length / 2)]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</DropdownMenu.Group>
|
||||
</section>
|
||||
</SearchFilter>
|
||||
|
||||
<SearchFilter label={t('filters.labels.series')} numSelected={Object.values(seriesState).map(x => x.checked).filter(Boolean).length} open={seriesMenu} onOpenChange={seriesMenuOpened}>
|
||||
<DropdownMenu.Label className="Label">{t('filters.labels.series')}</DropdownMenu.Label>
|
||||
<section>
|
||||
<DropdownMenu.Group className="Group">
|
||||
{ Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={weaponSeries[i]}
|
||||
onCheckedChange={handleSeriesChange}
|
||||
checked={seriesState[weaponSeries[i]].checked}
|
||||
valueKey={weaponSeries[i]}>
|
||||
{t(`series.${weaponSeries[i]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Group className="Group">
|
||||
{ Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={weaponSeries[i + (weaponSeries.length / 3)]}
|
||||
onCheckedChange={handleSeriesChange}
|
||||
checked={seriesState[weaponSeries[i + (weaponSeries.length / 3)]].checked}
|
||||
valueKey={weaponSeries[i + (weaponSeries.length / 3)]}>
|
||||
{t(`series.${weaponSeries[i + (weaponSeries.length / 3)]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Group className="Group">
|
||||
{ Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
|
||||
return (
|
||||
<SearchFilterCheckboxItem
|
||||
key={weaponSeries[i + (2 * (weaponSeries.length / 3))]}
|
||||
onCheckedChange={handleSeriesChange}
|
||||
checked={seriesState[weaponSeries[i + (2 * (weaponSeries.length / 3))]].checked}
|
||||
valueKey={weaponSeries[i + (2 * (weaponSeries.length / 3))]}>
|
||||
{t(`series.${weaponSeries[i + (2 * (weaponSeries.length / 3))]}`)}
|
||||
</SearchFilterCheckboxItem>
|
||||
)}
|
||||
) }
|
||||
</DropdownMenu.Group>
|
||||
</section>
|
||||
</SearchFilter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WeaponSearchFilterBar
|
||||
Loading…
Reference in a new issue