初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React, { useState } from 'react'
import CategoriesFilter from './category-filter'
import TagFilter from './tag-filter'
import SearchBox from './search-box'
import { usePluginPageContext } from '../context'
 
export type FilterState = {
  categories: string[]
  tags: string[]
  searchQuery: string
}
 
type FilterManagementProps = {
  onFilterChange: (filters: FilterState) => void
}
 
const FilterManagement: React.FC<FilterManagementProps> = ({ onFilterChange }) => {
  const initFilters = usePluginPageContext(v => v.filters) as FilterState
  const [filters, setFilters] = useState<FilterState>(initFilters)
 
  const updateFilters = (newFilters: Partial<FilterState>) => {
    const updatedFilters = { ...filters, ...newFilters }
    setFilters(updatedFilters)
    onFilterChange(updatedFilters)
  }
 
  return (
    <div className='flex items-center gap-2 self-stretch'>
      <CategoriesFilter
        value={filters.categories}
        onChange={categories => updateFilters({ categories })}
      />
      <TagFilter
        value={filters.tags}
        onChange={tags => updateFilters({ tags })}
      />
      <SearchBox
        searchQuery={filters.searchQuery}
        onChange={searchQuery => updateFilters({ searchQuery })}
      />
    </div>
  )
}
 
export default FilterManagement