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

fix: Update company picker keyboard navigation (#1628)

Browse Source 
* fix: scroll

* fix: use ref

* fix: new changes

* fix: remove ref

* fix: state

* chore: clean up

* Include Empty option

* Include Empty option

* Include Empty option

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Nafees Nazik
2023-09-22 01:23:07 +05:30
committed by GitHub
parent 7ce03ffdd1
commit a59f5acd5e
10 changed files with 175 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx
View File

@ -2,19 +2,24 @@ import { useRef } from 'react';
import { Key } from 'ts-key-enum';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { IconPlus } from '@/ui/icon';
import type { IconComponent } from '@/ui/icon/types/IconComponent';
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
import { MenuItemSelect } from '@/ui/menu-item/components/MenuItemSelect';
import { MenuItemSelectAvatar } from '@/ui/menu-item/components/MenuItemSelectAvatar';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { Avatar } from '@/users/components/Avatar';
import { assertNotNull } from '~/utils/assert';
import { isNonEmptyString } from '~/utils/isNonEmptyString';
import { CreateButtonId, EmptyButtonId } from '../constants';
import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
import { EntityForSelect } from '../types/EntityForSelect';
import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
import { DropdownMenuSkeletonItem } from './skeletons/DropdownMenuSkeletonItem';
import { CreateNewButton } from './CreateNewButton';
export type SingleEntitySelectBaseProps<
CustomEntityForSelect extends EntityForSelect,
@ -26,6 +31,8 @@ export type SingleEntitySelectBaseProps<
onCancel?: () => void;
onEntitySelected: (entity?: CustomEntityForSelect) => void;
selectedEntity?: CustomEntityForSelect;
onCreate?: () => void;
showCreateButton?: boolean;
};
export const SingleEntitySelectBase = <
@ -38,6 +45,8 @@ export const SingleEntitySelectBase = <
onCancel,
onEntitySelected,
selectedEntity,
onCreate,
showCreateButton,
}: SingleEntitySelectBaseProps<CustomEntityForSelect>) => {
const containerRef = useRef<HTMLDivElement>(null);
const entitiesInDropdown = [selectedEntity, ...entitiesToSelect].filter(
@ -45,19 +54,31 @@ export const SingleEntitySelectBase = <
assertNotNull(entity) && isNonEmptyString(entity.name.trim()),
);
const { hoveredIndex, resetScroll } = useEntitySelectScroll({
entities: entitiesInDropdown,
const { preselectedOptionId, resetScroll } = useEntitySelectScroll({
selectableOptionIds: [
EmptyButtonId,
...entitiesInDropdown.map((item) => item.id),
...(showCreateButton ? [CreateButtonId] : []),
],
containerRef,
});
useScopedHotkeys(
Key.Enter,
() => {
onEntitySelected(entitiesInDropdown[hoveredIndex]);
if (showCreateButton && preselectedOptionId === CreateButtonId) {
onCreate?.();
} else {
const entity = entitiesInDropdown.findIndex(
(entity) => entity.id === preselectedOptionId,
);
onEntitySelected(entitiesInDropdown[entity]);
}
resetScroll();
},
RelationPickerHotkeyScope.RelationPicker,
[entitiesInDropdown, hoveredIndex, onEntitySelected],
[entitiesInDropdown, preselectedOptionId, onEntitySelected],
);
useScopedHotkeys(
@ -70,39 +91,56 @@ export const SingleEntitySelectBase = <
);
return (
<StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
{emptyLabel && (
<MenuItem
onClick={() => onEntitySelected()}
LeftIcon={EmptyIcon}
text={emptyLabel}
/>
)}
{loading ? (
<DropdownMenuSkeletonItem />
) : entitiesInDropdown.length === 0 ? (
<MenuItem text="No result" />
) : (
entitiesInDropdown?.map((entity) => (
<MenuItemSelectAvatar
key={entity.id}
testId="menu-item"
selected={selectedEntity?.id === entity.id}
onClick={() => onEntitySelected(entity)}
text={entity.name}
hovered={hoveredIndex === entitiesInDropdown.indexOf(entity)}
avatar={
<Avatar
avatarUrl={entity.avatarUrl}
colorId={entity.id}
placeholder={entity.name}
size="md"
type={entity.avatarType ?? 'rounded'}
/>
}
<>
<StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
{emptyLabel && (
<MenuItemSelect
onClick={() => onEntitySelected()}
LeftIcon={EmptyIcon}
text={emptyLabel}
hovered={preselectedOptionId === EmptyButtonId}
selected={!selectedEntity}
/>
))
)}
{loading ? (
<DropdownMenuSkeletonItem />
) : entitiesInDropdown.length === 0 ? (
<MenuItem text="No result" />
) : (
entitiesInDropdown?.map((entity) => (
<MenuItemSelectAvatar
key={entity.id}
testId="menu-item"
selected={selectedEntity?.id === entity.id}
onClick={() => onEntitySelected(entity)}
text={entity.name}
hovered={preselectedOptionId === entity.id}
avatar={
<Avatar
avatarUrl={entity.avatarUrl}
colorId={entity.id}
placeholder={entity.name}
size="md"
type={entity.avatarType ?? 'rounded'}
/>
}
/>
))
)}
</StyledDropdownMenuItemsContainer>
{showCreateButton && (
<>
<StyledDropdownMenuItemsContainer hasMaxHeight>
<StyledDropdownMenuSeparator />
<CreateNewButton
onClick={onCreate}
LeftIcon={IconPlus}
text="Add New"
hovered={preselectedOptionId === CreateButtonId}
/>
</StyledDropdownMenuItemsContainer>
</>
)}
</StyledDropdownMenuItemsContainer>
</>
);
};