From 9bbdf933e900b28ecf98b0c37c4a10a1b7d8a714 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 15 Aug 2023 05:11:00 +0200 Subject: [PATCH] Fix sort and filters behavior (#1211) --- .../components/DropdownButton.tsx | 10 ++++++ .../components/FilterDropdownButton.tsx | 3 ++ .../MultipleFiltersDropdownButton.tsx | 31 ++++++++++++------- .../components/SortAndFilterBar.tsx | 13 +++++--- .../components/SortDropdownButton.tsx | 15 +++------ 5 files changed, 47 insertions(+), 25 deletions(-) diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx index 78ac86c7c..b8f41cea5 100644 --- a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx @@ -13,6 +13,7 @@ type OwnProps = { isActive: boolean; children?: ReactNode; isUnfolded?: boolean; + icon?: ReactNode; onIsUnfoldedChange?: (newIsUnfolded: boolean) => void; resetState?: () => void; HotkeyScope: FiltersHotkeyScope; @@ -26,12 +27,19 @@ const StyledDropdownButtonContainer = styled.div` z-index: 1; `; +const StyledDropdownButtonIcon = styled.div` + display: flex; + justify-content: center; + margin-right: ${({ theme }) => theme.spacing(1)}; +`; + type StyledDropdownButtonProps = { isUnfolded: boolean; isActive: boolean; }; const StyledDropdownButton = styled.div` + align-items: center; background: ${({ theme }) => theme.background.primary}; border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ isActive, theme, color }) => @@ -58,6 +66,7 @@ function DropdownButton({ isUnfolded = false, onIsUnfoldedChange, HotkeyScope, + icon, color, }: OwnProps) { useScopedHotkeys( @@ -86,6 +95,7 @@ function DropdownButton({ aria-selected={isActive} color={color} > + {icon && {icon}} {label} {isUnfolded && ( diff --git a/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx index 43ba7911d..e09675afd 100644 --- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx @@ -13,11 +13,13 @@ export function FilterDropdownButton({ HotkeyScope, isPrimaryButton = false, color, + icon, label, }: { context: Context; HotkeyScope: FiltersHotkeyScope; isPrimaryButton?: boolean; + icon?: React.ReactNode; color?: string; label?: string; }) { @@ -35,6 +37,7 @@ export function FilterDropdownButton({ ; HotkeyScope: FiltersHotkeyScope; isPrimaryButton?: boolean; + icon?: React.ReactNode; color?: string; label?: string; }) { @@ -77,20 +79,26 @@ export function MultipleFiltersDropdownButton({ const [isSortAndFilterBarOpen, setIsSortAndFilterBarOpen] = useRecoilScopedState(sortAndFilterBarScopedState, context); - function handleIsUnfoldedChange(newIsUnfolded: boolean) { - if (newIsUnfolded && (!isFilterSelected || !isPrimaryButton)) { + function handleIsUnfoldedChange(unfolded: boolean) { + if (unfolded && isPrimaryButton) { + setIsSortAndFilterBarOpen(!isSortAndFilterBarOpen); + } + + if ( + unfolded && + ((isPrimaryButton && !isFilterSelected) || !isPrimaryButton) + ) { setHotkeyScope(HotkeyScope); setIsUnfolded(true); - setIsSortAndFilterBarOpen(true); - } else if (newIsUnfolded && isFilterSelected && isPrimaryButton) { - setIsSortAndFilterBarOpen(!isSortAndFilterBarOpen); - } else { - if (filterDefinitionUsedInDropdown?.type === 'entity') { - setHotkeyScope(HotkeyScope); - } - setIsUnfolded(false); - resetState(); + return; } + + if (filterDefinitionUsedInDropdown?.type === 'entity') { + setHotkeyScope(HotkeyScope); + } + + setIsUnfolded(false); + resetState(); } return ( @@ -98,6 +106,7 @@ export function MultipleFiltersDropdownButton({ label={label ?? 'Filter'} isActive={isFilterSelected} isUnfolded={isUnfolded} + icon={icon} onIsUnfoldedChange={handleIsUnfoldedChange} HotkeyScope={HotkeyScope} color={color} diff --git a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx index 34bb99028..26d961d8e 100644 --- a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx +++ b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx @@ -2,7 +2,11 @@ import { Context } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icon/index'; +import { + IconArrowNarrowDown, + IconArrowNarrowUp, + IconPlus, +} from '@/ui/icon/index'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useRemoveFilter } from '../hooks/useRemoveFilter'; @@ -48,7 +52,7 @@ const StyledChipcontainer = styled.div` const StyledCancelButton = styled.button` background-color: inherit; border: none; - color: ${({ theme }) => theme.font.color.secondary}; + color: ${({ theme }) => theme.font.color.tertiary}; cursor: pointer; font-weight: ${({ theme }) => theme.font.weight.medium}; margin-left: auto; @@ -162,8 +166,9 @@ function SortAndFilterBar({ } + label={`Add filter`} /> )} diff --git a/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx index 3eeaa4812..2eeea865b 100644 --- a/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx @@ -1,4 +1,4 @@ -import { Context, useCallback, useEffect, useState } from 'react'; +import { Context, useCallback, useState } from 'react'; import { useTheme } from '@emotion/react'; import { IconChevronDown } from '@tabler/icons-react'; @@ -32,7 +32,6 @@ export function SortDropdownButton({ onSortSelect, HotkeyScope, context, - isPrimaryButton, }: OwnProps) { const theme = useTheme(); @@ -53,8 +52,10 @@ export function SortDropdownButton({ setSelectedSortDirection('asc'); }, []); - const [isSortAndFilterBarOpen, setIsSortAndFilterBarOpen] = - useRecoilScopedState(sortAndFilterBarScopedState, context); + const [, setIsSortAndFilterBarOpen] = useRecoilScopedState( + sortAndFilterBarScopedState, + context, + ); function handleIsUnfoldedChange(newIsUnfolded: boolean) { if (newIsUnfolded) { @@ -65,12 +66,6 @@ export function SortDropdownButton({ } } - useEffect(() => { - if (isSortAndFilterBarOpen && isPrimaryButton && isSortSelected) { - setIsUnfolded(true); - } - }, [isPrimaryButton, isSortAndFilterBarOpen, isSortSelected]); - function handleAddSort(sort: SortType) { setIsUnfolded(false); onSortItemSelect(sort);