mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
made filter-dropdown-navigable
This commit is contained in:
parent
39512a779e
commit
898a0e16a3
@ -10,6 +10,10 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
|
||||
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
|
||||
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
|
||||
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
|
||||
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
|
||||
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
|
||||
|
||||
export const StyledInput = styled.input`
|
||||
background: transparent;
|
||||
@ -53,7 +57,15 @@ export const ObjectFilterDropdownFilterSelect = () => {
|
||||
const { getIcon } = useIcons();
|
||||
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
|
||||
const {isSelectedItemIdSelector} = useSelectableList(OBJECT_FILTER_DROPDOWN_ID)
|
||||
const isSelectedItemId = (id:string)=> useRecoilValue(isSelectedItemIdSelector(id));
|
||||
const refactoredAvailableFilterDefinitions = [...availableFilterDefinitions]
|
||||
.sort((a, b) => a.label.localeCompare(b.label))
|
||||
.filter((item) =>
|
||||
item.label
|
||||
.toLocaleLowerCase()
|
||||
.includes(searchText.toLocaleLowerCase()),
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<StyledInput
|
||||
@ -64,18 +76,14 @@ export const ObjectFilterDropdownFilterSelect = () => {
|
||||
setSearchText(event.target.value)
|
||||
}
|
||||
/>
|
||||
<SelectableList hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton} selectableItemIdArray={refactoredAvailableFilterDefinitions.map((item)=>item.fieldMetadataId)} selectableListId={OBJECT_FILTER_DROPDOWN_ID}>
|
||||
<DropdownMenuItemsContainer>
|
||||
{[...availableFilterDefinitions]
|
||||
.sort((a, b) => a.label.localeCompare(b.label))
|
||||
.filter((item) =>
|
||||
item.label
|
||||
.toLocaleLowerCase()
|
||||
.includes(searchText.toLocaleLowerCase()),
|
||||
)
|
||||
{refactoredAvailableFilterDefinitions
|
||||
.map((availableFilterDefinition, index) => (
|
||||
<MenuItem
|
||||
key={`select-filter-${index}`}
|
||||
testId={`select-filter-${index}`}
|
||||
hovered={isSelectedItemId(availableFilterDefinition.fieldMetadataId)}
|
||||
onClick={() => {
|
||||
setFilterDefinitionUsedInDropdown(availableFilterDefinition);
|
||||
|
||||
@ -97,6 +105,8 @@ export const ObjectFilterDropdownFilterSelect = () => {
|
||||
/>
|
||||
))}
|
||||
</DropdownMenuItemsContainer>
|
||||
</SelectableList>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -27,7 +27,6 @@ export const SelectableMenuItemSelect = ({
|
||||
);
|
||||
|
||||
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(entity.id));
|
||||
|
||||
return (
|
||||
<StyledSelectableItem itemId={entity.id} key={entity.id}>
|
||||
<MenuItemSelectAvatar
|
||||
|
@ -20,6 +20,7 @@ export type MenuItemIconButton = {
|
||||
};
|
||||
|
||||
export type MenuItemProps = {
|
||||
hovered?:boolean;
|
||||
accent?: MenuItemAccent;
|
||||
className?: string;
|
||||
iconButtons?: MenuItemIconButton[];
|
||||
@ -36,6 +37,7 @@ export type MenuItemProps = {
|
||||
|
||||
export const MenuItem = ({
|
||||
accent = 'default',
|
||||
hovered,
|
||||
className,
|
||||
iconButtons,
|
||||
isIconDisplayedOnHoverOnly = true,
|
||||
@ -60,6 +62,7 @@ export const MenuItem = ({
|
||||
|
||||
return (
|
||||
<StyledHoverableMenuItemBase
|
||||
hovered={hovered}
|
||||
data-testid={testId ?? undefined}
|
||||
onClick={handleMenuItemClick}
|
||||
className={className}
|
||||
|
@ -8,12 +8,13 @@ export type MenuItemBaseProps = {
|
||||
accent?: MenuItemAccent;
|
||||
isKeySelected?: boolean;
|
||||
isHoverBackgroundDisabled?: boolean;
|
||||
hovered?:boolean;
|
||||
};
|
||||
|
||||
export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
|
||||
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
|
||||
--vertical-padding: ${({ theme }) => theme.spacing(2)};
|
||||
|
||||
background-color: ${({ theme,hovered }) => hovered && theme.background.transparent.light};
|
||||
align-items: center;
|
||||
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
|
Loading…
Reference in New Issue
Block a user