|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { Cross2Icon } from '@radix-ui/react-icons'; |
| 4 | +import { cx } from 'class-variance-authority'; |
| 5 | +import { useCallback } from 'react'; |
| 6 | +import { Button } from '../../button'; |
| 7 | +import { Flex } from '../../flex'; |
| 8 | +import styles from '../data-view.module.css'; |
| 9 | +import { useDataView } from '../hooks/useDataView'; |
| 10 | +import { |
| 11 | + countLeafRows, |
| 12 | + getClientHiddenLeafRowCount, |
| 13 | + hasActiveTableFiltering |
| 14 | +} from '../utils'; |
| 15 | + |
| 16 | +export interface DataViewClearFiltersProps { |
| 17 | + className?: string; |
| 18 | +} |
| 19 | + |
| 20 | +/** |
| 21 | + * The filter-summary row plus a "Clear Filters" action. Reads everything from |
| 22 | + * `DataView` context and renders nothing when there is nothing to clear. |
| 23 | + * |
| 24 | + * Flat by default (the footer `DataView.List` renders when rows are hidden by |
| 25 | + * filters); a bordered panel in the empty state. Shared between the List footer |
| 26 | + * and `DataView.ClearFilters` so the markup lives in one place. |
| 27 | + * |
| 28 | + * Internal — not exported from the package. |
| 29 | + */ |
| 30 | +export function FilterSummary({ className }: DataViewClearFiltersProps) { |
| 31 | + const { |
| 32 | + table, |
| 33 | + mode, |
| 34 | + isLoading, |
| 35 | + totalRowCount, |
| 36 | + isEmptyState, |
| 37 | + updateTableQuery |
| 38 | + } = useDataView(); |
| 39 | + |
| 40 | + const rows = table?.getRowModel()?.rows ?? []; |
| 41 | + const hiddenLeafRowCount = |
| 42 | + mode === 'client' |
| 43 | + ? getClientHiddenLeafRowCount(table) |
| 44 | + : totalRowCount !== undefined |
| 45 | + ? Math.max(0, totalRowCount - countLeafRows(rows)) |
| 46 | + : null; |
| 47 | + const hasActiveFiltering = !isLoading && hasActiveTableFiltering(table); |
| 48 | + const showFilterSummary = |
| 49 | + hasActiveFiltering && |
| 50 | + (mode === 'server' || |
| 51 | + (typeof hiddenLeafRowCount === 'number' && hiddenLeafRowCount > 0)); |
| 52 | + |
| 53 | + const handleClearFilters = useCallback(() => { |
| 54 | + updateTableQuery(prev => ({ ...prev, filters: [], search: '' })); |
| 55 | + }, [updateTableQuery]); |
| 56 | + |
| 57 | + // Matches DataTable: render only when rows are hidden by filters. |
| 58 | + // `isEmptyState` controls styling (bordered panel), not visibility. |
| 59 | + if (!showFilterSummary) return null; |
| 60 | + |
| 61 | + return ( |
| 62 | + <Flex |
| 63 | + className={cx( |
| 64 | + styles.filterSummaryFooter, |
| 65 | + isEmptyState && styles.filterSummaryFooterEmpty, |
| 66 | + className |
| 67 | + )} |
| 68 | + justify='center' |
| 69 | + align='center' |
| 70 | + > |
| 71 | + {mode === 'server' && hiddenLeafRowCount === null ? ( |
| 72 | + <span className={styles.filterSummaryLabel}> |
| 73 | + Some items might be hidden by filters |
| 74 | + </span> |
| 75 | + ) : ( |
| 76 | + <Flex align='center' gap={2}> |
| 77 | + <span className={styles.filterSummaryCount}> |
| 78 | + {hiddenLeafRowCount} |
| 79 | + </span> |
| 80 | + <span className={styles.filterSummaryLabel}> |
| 81 | + items hidden by filters |
| 82 | + </span> |
| 83 | + </Flex> |
| 84 | + )} |
| 85 | + <Button |
| 86 | + variant='text' |
| 87 | + color='neutral' |
| 88 | + size='small' |
| 89 | + trailingIcon={<Cross2Icon />} |
| 90 | + onClick={handleClearFilters} |
| 91 | + > |
| 92 | + Clear Filters |
| 93 | + </Button> |
| 94 | + </Flex> |
| 95 | + ); |
| 96 | +} |
| 97 | + |
| 98 | +FilterSummary.displayName = 'DataView.FilterSummary'; |
| 99 | + |
| 100 | +/** |
| 101 | + * Surfaces the bordered "Clear Filters" panel in the empty state (a query |
| 102 | + * returned no rows). Place it as a sibling of `DataView.List` — separate from |
| 103 | + * `DataView.EmptyState`. Renders nothing outside the empty state; the flat |
| 104 | + * footer for the data state is rendered automatically by `DataView.List`. |
| 105 | + */ |
| 106 | +export function DataViewClearFilters({ className }: DataViewClearFiltersProps) { |
| 107 | + const { isEmptyState } = useDataView(); |
| 108 | + if (!isEmptyState) return null; |
| 109 | + return <FilterSummary className={className} />; |
| 110 | +} |
| 111 | + |
| 112 | +DataViewClearFilters.displayName = 'DataView.ClearFilters'; |
0 commit comments