Sammy/t 134 i see all filters in the dropdown (#78)

* feature: add filter dropdown

* test: add story for FilterDropdown

* feature: display filterOperand on top of dropdown

* feature: display filter operand

* feature: fix index and display selected filter

* refactor: set TopOption button inside dropdown file

* feature: move availableFilters outside the fitler component

* refactor: make the available sorts and filter optionnal

* refactor: rename availableSorts

* feature: add a resetState property on onOutsideClick

* feature: add filters and set  filters on Dropdown component

* feature: set filters on click in dropdown

* test: verify button is active after filters are set

* feature: display sorts and filters

* refactor: move SelectedFilters in SortAndFilter

* refactor: move SelectedFilters in dedicated file

* refactor: remove Id and use Key
This commit is contained in:
Sammy Teillet
2023-04-26 16:19:34 +02:00
committed by GitHub
parent 1c8a4058c3
commit 5aec7ca730
17 changed files with 521 additions and 70 deletions

View File

@ -9,7 +9,11 @@ import {
import TableHeader from './table-header/TableHeader';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import styled from '@emotion/styled';
import { SelectedSortType, SortType } from './table-header/SortAndFilterBar';
import {
FilterType,
SelectedSortType,
SortType,
} from './table-header/interface';
type OwnProps<TData, SortField> = {
data: Array<TData>;
@ -17,7 +21,8 @@ type OwnProps<TData, SortField> = {
viewName: string;
viewIcon?: IconProp;
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
sortsAvailable?: Array<SortType<SortField>>;
availableSorts?: Array<SortType<SortField>>;
availableFilters?: FilterType[];
};
const StyledTable = styled.table`
@ -77,7 +82,8 @@ function Table<TData, SortField extends string>({
viewName,
viewIcon,
onSortsUpdate,
sortsAvailable,
availableSorts,
availableFilters,
}: OwnProps<TData, SortField>) {
const table = useReactTable({
data,
@ -91,7 +97,8 @@ function Table<TData, SortField extends string>({
viewName={viewName}
viewIcon={viewIcon}
onSortsUpdate={onSortsUpdate}
sortsAvailable={sortsAvailable || []}
availableSorts={availableSorts}
availableFilters={availableFilters}
/>
<StyledTableScrollableContainer>
<StyledTable>