admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Adds KeyBoard Navigation to ObjectFilterDropDownFilterSelect ( #4365 ) (#6613)

Browse Source 
fixes #4365

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Faisal-imtiyaz123
2024-09-06 23:43:51 +05:30
committed by GitHub
parent c0d0f8d78d
commit 99f8f8fedb
14 changed files with 183 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableItem.tsx
View File

@ -2,6 +2,12 @@ import { ReactNode, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import styled from '@emotion/styled';
const StyledContainer = styled.div`
height: 100%;
width: 100%;
`;
export type SelectableItemProps = {
itemId: string;
@ -27,8 +33,8 @@ export const SelectableItem = ({
}, [isSelectedItemId]);
return (
<div className={className} ref={scrollRef}>
<StyledContainer className={className} ref={scrollRef}>
{children}
</div>
</StyledContainer>
);
};

17
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts
View File

@ -1,8 +1,4 @@
import {
useRecoilCallback,
useResetRecoilState,
useSetRecoilState,
} from 'recoil';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
@ -24,16 +20,11 @@ export const useSelectableList = (selectableListId?: string) => {
selectableListOnEnterState,
);
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
const resetSelectedItem = () => {
resetSelectedItemIdState();
};
const handleResetSelectedPosition = useRecoilCallback(
const resetSelectedItem = useRecoilCallback(
({ snapshot, set }) =>
() => {
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
if (isDefined(selectedItemId)) {
set(selectedItemIdState, null);
set(isSelectedItemIdSelector(selectedItemId), false);
@ -44,11 +35,9 @@ export const useSelectableList = (selectableListId?: string) => {
return {
selectableListId: scopeId,
setSelectableItemIds,
isSelectedItemIdSelector,
setSelectableListOnEnter,
resetSelectedItem,
handleResetSelectedPosition,
};
};