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

Use SelectableList in RelationPicker, SingleEntitySelectBase and MultipleEntitySelect (#2949)

Browse Source 
* 2747-fix: conditional updation of selectedItemId

* 2747-fix: bug in toggling

* 2747-feat: SingleEntitySelectBase list changed to SelectableList

* 2747-feat: MultipleEntitySelect use SelectableList

* Fix lint

* 2747-fix: onEnter property fix for SingleEntitySelectBase

* 2747-fix: onEnter property fix for MultipleEntitySelect

* yarn fix in twenty-front

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Kanav Arora
2023-12-14 16:40:58 +05:30
committed by GitHub
parent 4673a302c7
commit ed2cd408bf
10 changed files with 297 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/.eslintrc.cjs
View File

@ -106,6 +106,7 @@ module.exports = {
'*.config.ts',
'*config.js',
'codegen*',
'tsup.ui.index.tsx'
],
overrides: [
{

2
packages/twenty-front/package.json
View File

@ -9,7 +9,6 @@
"build": "tsc && vite build && yarn build:inject-runtime-env",
"build:inject-runtime-env": "sh ./scripts/inject-runtime-env.sh",
"preview": "vite preview",
"eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
"fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
@ -66,6 +65,7 @@
"lodash.kebabcase": "^4.1.1",
"lodash.snakecase": "^4.1.1",
"luxon": "^3.3.0",
"nx": "17.2.3",
"react": "^18.2.0",
"react-data-grid": "7.0.0-beta.13",
"react-datepicker": "^4.11.0",

62
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleEntitySelect.tsx
View File

@ -1,11 +1,16 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { useRef } from 'react';
import { isNonEmptyString } from '@sniptt/guards';
import debounce from 'lodash.debounce';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@ -71,6 +76,8 @@ export const MultipleEntitySelect = <
},
});
const selectableItemIds = entitiesInDropdown.map((entity) => entity.id);
return (
<DropdownMenu ref={containerRef} data-select-disable>
<DropdownMenuSearchInput
@ -80,25 +87,46 @@ export const MultipleEntitySelect = <
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{entitiesInDropdown?.map((entity) => (
<MenuItemMultiSelectAvatar
key={entity.id}
selected={value[entity.id]}
onSelectChange={(newCheckedValue) =>
onChange({ ...value, [entity.id]: newCheckedValue })
<SelectableList
selectableListId="multiple-entity-select-list"
selectableItemIds={[selectableItemIds]}
hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
onEnter={(_itemId) => {
if (_itemId in value === false || value[_itemId] === false) {
onChange({ ...value, [_itemId]: true });
} else {
onChange({ ...value, [_itemId]: false });
}
avatar={
<Avatar
avatarUrl={entity.avatarUrl}
colorId={entity.id}
placeholder={entity.name}
size="md"
type={entity.avatarType ?? 'rounded'}
}}
>
{entitiesInDropdown?.map((entity) => (
<SelectableItem itemId={entity.id} key={entity.id}>
<MenuItemMultiSelectAvatar
key={entity.id}
isKeySelected={
useSelectableList({
selectableListId: 'multiple-entity-select-list',
itemId: entity.id,
}).isSelectedItemId
}
selected={value[entity.id]}
onSelectChange={(newCheckedValue) =>
onChange({ ...value, [entity.id]: newCheckedValue })
}
avatar={
<Avatar
avatarUrl={entity.avatarUrl}
colorId={entity.id}
placeholder={entity.name}
size="md"
type={entity.avatarType ?? 'rounded'}
/>
}
text={entity.name}
/>
}
text={entity.name}
/>
))}
</SelectableItem>
))}
</SelectableList>
{entitiesInDropdown?.length === 0 && <MenuItem text="No result" />}
</DropdownMenuItemsContainer>
</DropdownMenu>

84
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectBase.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { useRef } from 'react';
import { isNonEmptyString } from '@sniptt/guards';
import { Key } from 'ts-key-enum';
@ -6,6 +7,9 @@ import { IconPlus } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
@ -64,7 +68,7 @@ export const SingleEntitySelectBase = <
assertNotNull(entity) && isNonEmptyString(entity.name),
);
const { preselectedOptionId, resetScroll } = useEntitySelectScroll({
const { preselectedOptionId } = useEntitySelectScroll({
selectableOptionIds: [
EmptyButtonId,
...entitiesInDropdown.map((item) => item.id),
@ -73,24 +77,6 @@ export const SingleEntitySelectBase = <
containerRef,
});
useScopedHotkeys(
Key.Enter,
() => {
if (showCreateButton && preselectedOptionId === CreateButtonId) {
onCreate?.();
} else {
const entity = entitiesInDropdown.findIndex(
(entity) => entity.id === preselectedOptionId,
);
onEntitySelected(entitiesInDropdown[entity]);
}
resetScroll();
},
RelationPickerHotkeyScope.RelationPicker,
[entitiesInDropdown, preselectedOptionId, onEntitySelected],
);
useScopedHotkeys(
Key.Escape,
() => {
@ -100,6 +86,8 @@ export const SingleEntitySelectBase = <
[onCancel],
);
const selectableItemIds = entitiesInDropdown.map((entity) => entity.id);
return (
<div ref={containerRef}>
<DropdownMenuItemsContainer hasMaxHeight>
@ -130,23 +118,49 @@ export const SingleEntitySelectBase = <
/>
)}
{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'}
<SelectableList
selectableListId="single-entity-select-base-list"
selectableItemIds={[selectableItemIds]}
hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
onEnter={(_itemId) => {
if (
showCreateButton &&
preselectedOptionId === CreateButtonId
) {
onCreate?.();
} else {
const entity = entitiesInDropdown.findIndex(
(entity) => entity.id === _itemId,
);
onEntitySelected(entitiesInDropdown[entity]);
}
}}
>
<SelectableItem itemId={entity.id} key={entity.id}>
<MenuItemSelectAvatar
key={entity.id}
testId="menu-item"
onClick={() => onEntitySelected(entity)}
text={entity.name}
selected={selectedEntity?.id === entity.id}
hovered={
useSelectableList({
selectableListId: 'single-entity-select-base-list',
itemId: entity.id,
}).isSelectedItemId
}
avatar={
<Avatar
avatarUrl={entity.avatarUrl}
colorId={entity.id}
placeholder={entity.name}
size="md"
type={entity.avatarType ?? 'rounded'}
/>
}
/>
}
/>
</SelectableItem>
</SelectableList>
))}
</>
)}

1
packages/twenty-front/src/modules/object-record/utils/turnFiltersIntoWhereClause.ts
View File

@ -115,7 +115,6 @@ export const turnFiltersIntoObjectRecordFilters = (
);
}
// eslint-disable-next-line no-case-declarations
const parsedRecordIds = JSON.parse(rawUIFilter.value) as string[];
if (parsedRecordIds.length > 0) {

2
packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
View File

@ -1,4 +1,4 @@
import { Meta, Story, StoryObj } from '@storybook/react';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';

33
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx
View File

@ -16,8 +16,7 @@ export const useSelectableListHotKeys = (
selectedItemId?: string | null,
) => {
if (!selectedItemId) {
// If nothing is selected, return the default position
return { row: 0, col: 0 };
return { row: 0, col: -1 };
}
for (let row = 0; row < selectableItemIds.length; row++) {
@ -94,21 +93,23 @@ export const useSelectableListHotKeys = (
const nextId = computeNextId(direction);
if (nextId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: nextId,
});
set(isSelectedItemIdSelector, true);
set(selectedItemIdState, nextId);
}
if (!selectedItemId || (selectedItemId && selectedItemId !== nextId)) {
if (nextId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: nextId,
});
set(isSelectedItemIdSelector, true);
set(selectedItemIdState, nextId);
}
if (selectedItemId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: selectedItemId,
});
set(isSelectedItemIdSelector, false);
if (selectedItemId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: selectedItemId,
});
set(isSelectedItemIdSelector, false);
}
}
},
[scopeId],

8
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
View File

@ -19,6 +19,7 @@ const StyledLeftContentWithCheckboxContainer = styled.div`
type MenuItemMultiSelectAvatarProps = {
avatar?: ReactNode;
selected: boolean;
isKeySelected: boolean;
text: string;
className?: string;
onSelectChange?: (selected: boolean) => void;
@ -29,6 +30,7 @@ export const MenuItemMultiSelectAvatar = ({
text,
selected,
className,
isKeySelected,
onSelectChange,
}: MenuItemMultiSelectAvatarProps) => {
const handleOnClick = () => {
@ -36,7 +38,11 @@ export const MenuItemMultiSelectAvatar = ({
};
return (
<StyledMenuItemBase className={className} onClick={handleOnClick}>
<StyledMenuItemBase
className={className}
onClick={handleOnClick}
isKeySelected={isKeySelected}
>
<StyledLeftContentWithCheckboxContainer>
<Checkbox checked={selected} />
<StyledMenuItemLeftContent>

8
packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
View File

@ -7,6 +7,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
export type MenuItemBaseProps = {
accent?: MenuItemAccent;
isKeySelected?: boolean;
};
export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
@ -15,8 +16,13 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
align-items: center;
background: ${({ isKeySelected, theme }) =>
isKeySelected
? theme.background.transparent.light
: theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.sm};
cursor: pointer;
display: flex;
flex-direction: row;
@ -26,8 +32,8 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
gap: ${({ theme }) => theme.spacing(2)};
height: calc(32px - 2 * var(--vertical-padding));
justify-content: space-between;
padding: var(--vertical-padding) var(--horizontal-padding);
${hoverBackground};