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

Fix hook bug (#2995)

Browse Source 
* Fix hook bug

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-12-14 18:54:23 +01:00
committed by GitHub
parent 7f3d5e0e82
commit 468744298b
12 changed files with 170 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -138,7 +138,7 @@ export const IconPicker = ({
dropdownComponents={
<SelectableList
selectableListId="icon-list"
selectableItemIds={iconKeys2d}
selectableItemIdMatrix={iconKeys2d}
hotkeyScope={IconPickerHotkeyScope.IconPicker}
onEnter={(iconKey) => {
onChange({ iconKey, Icon: getIcon(iconKey) });

2
packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
const StyledCreateNewButton = styled(MenuItem)<{ hovered: boolean }>`
const StyledCreateNewButton = styled(MenuItem)<{ hovered?: boolean }>`
${({ hovered, theme }) =>
hovered &&
css`

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

@ -1,14 +1,19 @@
import React, { useEffect, useRef } from 'react';
import { ReactNode, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
type SelectableItemProps = {
export type SelectableItemProps = {
itemId: string;
children: React.ReactElement;
children: ReactNode;
className?: string;
};
export const SelectableItem = ({ itemId, children }: SelectableItemProps) => {
export const SelectableItem = ({
itemId,
children,
className,
}: SelectableItemProps) => {
const { isSelectedItemIdSelector } = useSelectableListScopedStates({
itemId: itemId,
});
@ -23,5 +28,9 @@ export const SelectableItem = ({ itemId, children }: SelectableItemProps) => {
}
}, [isSelectedItemId]);
return <div ref={scrollRef}>{children}</div>;
return (
<div className={className} ref={scrollRef}>
{children}
</div>
);
};

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

@ -1,28 +1,26 @@
import { ReactNode, useEffect } from 'react';
import styled from '@emotion/styled';
import { useSelectableListHotKeys } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { SelectableListScope } from '@/ui/layout/selectable-list/scopes/SelectableListScope';
import { arrayToChunks } from '~/utils/array/array-to-chunks';
type SelectableListProps = {
children: ReactNode;
selectableListId: string;
selectableItemIds: string[][];
selectableItemIdArray?: string[];
selectableItemIdMatrix?: string[][];
onSelect?: (selected: string) => void;
hotkeyScope: string;
onEnter?: (itemId: string) => void;
};
const StyledSelectableItemsContainer = styled.div`
width: 100%;
`;
export const SelectableList = ({
children,
selectableListId,
hotkeyScope,
selectableItemIds,
selectableItemIdArray,
selectableItemIdMatrix,
onEnter,
}: SelectableListProps) => {
useSelectableListHotKeys(selectableListId, hotkeyScope);
@ -36,14 +34,24 @@ export const SelectableList = ({
}, [onEnter, setSelectableListOnEnter]);
useEffect(() => {
setSelectableItemIds(selectableItemIds);
}, [selectableItemIds, setSelectableItemIds]);
if (!selectableItemIdArray && !selectableItemIdMatrix) {
throw new Error(
'Either selectableItemIdArray or selectableItemIdsMatrix must be provided',
);
}
if (selectableItemIdMatrix) {
setSelectableItemIds(selectableItemIdMatrix);
}
if (selectableItemIdArray) {
setSelectableItemIds(arrayToChunks(selectableItemIdArray, 1));
}
}, [selectableItemIdArray, selectableItemIdMatrix, setSelectableItemIds]);
return (
<SelectableListScope selectableListScopeId={selectableListId}>
<StyledSelectableItemsContainer>
{children}
</StyledSelectableItemsContainer>
{children}
</SelectableListScope>
);
};

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

@ -16,7 +16,7 @@ export const useSelectableListHotKeys = (
selectedItemId?: string | null,
) => {
if (!selectedItemId) {
return { row: 0, col: -1 };
return;
}
for (let row = 0; row < selectableItemIds.length; row++) {
@ -25,7 +25,6 @@ export const useSelectableListHotKeys = (
return { row, col };
}
}
return { row: 0, col: 0 };
};
const handleSelect = useRecoilCallback(
@ -41,12 +40,15 @@ export const useSelectableListHotKeys = (
selectableItemIdsState,
);
const { row: currentRow, col: currentCol } = findPosition(
selectableItemIds,
selectedItemId,
);
const currentPosition = findPosition(selectableItemIds, selectedItemId);
const computeNextId = (direction: Direction) => {
if (!selectedItemId || !currentPosition) {
return selectableItemIds[0][0];
}
const { row: currentRow, col: currentCol } = currentPosition;
if (selectableItemIds.length === 0) {
return;
}
@ -93,7 +95,7 @@ export const useSelectableListHotKeys = (
const nextId = computeNextId(direction);
if (!selectedItemId || (selectedItemId && selectedItemId !== nextId)) {
if (selectedItemId !== nextId) {
if (nextId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,

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

@ -19,7 +19,7 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
background: ${({ isKeySelected, theme }) =>
isKeySelected
? theme.background.transparent.light
: theme.background.primary};
: theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.sm};
cursor: pointer;