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

2495 fix cmdk removal and added toggle functionality (#2528)

Browse Source 
* 2495-fix(front): cmdk removed; custom styles added

* 2495-fix(front): search issue fixed

* 2495-feat(front): Menu toggle funct added

* 2495-fix(front): onclick handler added

* 2495-fix(front): Focus with ArrowKeys added; cmdk removed

* Remove cmdk

* Introduce Selectable list

* Improve api

* Improve api

* Complete refactoring

* Fix ui regressions

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Kanav Arora
2023-11-28 23:20:23 +05:30
committed by GitHub
parent 784db18347
commit 74e2464939
27 changed files with 619 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
front/src/modules/ui/layout/selectable-list/components/SelectableItem.tsx Normal file
View File

@ -0,0 +1,27 @@
import React, { useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
type SelectableItemProps = {
itemId: string;
children: React.ReactElement;
};
export const SelectableItem = ({ itemId, children }: SelectableItemProps) => {
const { isSelectedItemIdSelector } = useSelectableListScopedStates({
itemId: itemId,
});
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
const scrollRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (isSelectedItemId) {
scrollRef.current?.scrollIntoView({ block: 'nearest' });
}
}, [isSelectedItemId]);
return <div ref={scrollRef}>{children}</div>;
};

30
front/src/modules/ui/layout/selectable-list/components/SelectableList.tsx Normal file
View File

@ -0,0 +1,30 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { useSelectableListHotKeys } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys';
import { SelectableListScope } from '@/ui/layout/selectable-list/scopes/SelectableListScope';
type SelectableListProps = {
children: ReactNode;
selectableListId: string;
selectableItemIds: string[];
onSelect?: (selected: string) => void;
};
const StyledSelectableItemsContainer = styled.div`
width: 100%;
`;
export const SelectableList = ({
children,
selectableListId,
}: SelectableListProps) => {
useSelectableListHotKeys(selectableListId);
return (
<SelectableListScope selectableListScopeId={selectableListId}>
<StyledSelectableItemsContainer>
{children}
</StyledSelectableItemsContainer>
</SelectableListScope>
);
};

88
front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx Normal file
View File

@ -0,0 +1,88 @@
import { isNull } from '@sniptt/guards';
import { useRecoilCallback } from 'recoil';
import { Key } from 'ts-key-enum';
import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
export const useSelectableListHotKeys = (scopeId: string) => {
const handleSelect = useRecoilCallback(
({ snapshot, set }) =>
(direction: 'up' | 'down') => {
const { selectedItemIdState, selectableItemIdsState } =
getSelectableListScopedStates({
selectableListScopeId: scopeId,
});
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
const selectableItemIds = getSnapshotValue(
snapshot,
selectableItemIdsState,
);
const computeNextId = (direction: 'up' | 'down') => {
if (selectableItemIds.length === 0) {
return;
}
if (isNull(selectedItemId)) {
return direction === 'up'
? selectableItemIds[selectableItemIds.length - 1]
: selectableItemIds[0];
}
const currentIndex = selectableItemIds.indexOf(selectedItemId);
if (currentIndex === -1) {
return direction === 'up'
? selectableItemIds[selectableItemIds.length - 1]
: selectableItemIds[0];
}
return direction === 'up'
? currentIndex == 0
? selectableItemIds[selectableItemIds.length - 1]
: selectableItemIds[currentIndex - 1]
: currentIndex == selectableItemIds.length - 1
? selectableItemIds[0]
: selectableItemIds[currentIndex + 1];
};
const nextId = computeNextId(direction);
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);
}
},
[scopeId],
);
useScopedHotkeys(
Key.ArrowUp,
() => handleSelect('up'),
AppHotkeyScope.CommandMenu,
[],
);
useScopedHotkeys(
Key.ArrowDown,
() => handleSelect('down'),
AppHotkeyScope.CommandMenu,
[],
);
return <></>;
};

34
front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates.ts Normal file
View File

@ -0,0 +1,34 @@
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type UseSelectableListScopedStatesProps = {
selectableListScopeId?: string;
itemId?: string;
};
export const useSelectableListScopedStates = (
args?: UseSelectableListScopedStatesProps,
) => {
const { selectableListScopeId, itemId } = args ?? {};
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
selectableListScopeId,
);
const {
selectedItemIdState,
selectableItemIdsState,
isSelectedItemIdSelector,
} = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: itemId,
});
return {
scopeId,
isSelectedItemIdSelector,
selectableItemIdsState,
selectedItemIdState,
};
};

33
front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts Normal file
View File

@ -0,0 +1,33 @@
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type UseSelectableListProps = {
selectableListId?: string;
itemId?: string;
};
export const useSelectableList = (props?: UseSelectableListProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
props?.selectableListId,
);
const { selectableItemIdsState, isSelectedItemIdSelector } =
useSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: props?.itemId,
});
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
return {
setSelectableItemIds,
isSelectedItemId,
selectableListId: scopeId,
isSelectedItemIdSelector,
};
};

21
front/src/modules/ui/layout/selectable-list/scopes/SelectableListScope.tsx Normal file
View File

@ -0,0 +1,21 @@
import { ReactNode } from 'react';
import { SelectableListScopeInternalContext } from './scope-internal-context/SelectableListScopeInternalContext';
type SelectableListScopeProps = {
children: ReactNode;
selectableListScopeId: string;
};
export const SelectableListScope = ({
children,
selectableListScopeId,
}: SelectableListScopeProps) => {
return (
<SelectableListScopeInternalContext.Provider
value={{ scopeId: selectableListScopeId }}
>
{children}
</SelectableListScopeInternalContext.Provider>
);
};

7
front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts Normal file
View File

@ -0,0 +1,7 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
type SelectableListScopeInternalContextProps = ScopedStateKey;
export const SelectableListScopeInternalContext =
createScopeInternalContext<SelectableListScopeInternalContextProps>();

9
front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState.ts Normal file
View File

@ -0,0 +1,9 @@
import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
export const isSelectedItemIdMapScopedFamilyState = createScopedFamilyState<
boolean,
string
>({
key: 'isSelectedItemIdMapScopedFamilyState',
defaultValue: false,
});

6
front/src/modules/ui/layout/selectable-list/states/selectableItemIdsScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const selectableItemIdsScopedState = createScopedState<string[]>({
key: 'selectableItemIdsScopedState',
defaultValue: [],
});

6
front/src/modules/ui/layout/selectable-list/states/selectedItemIdScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const selectedItemIdScopedState = createScopedState<string | null>({
key: 'selectedItemIdScopedState',
defaultValue: null,
});

26
front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector.ts Normal file
View File

@ -0,0 +1,26 @@
import { selectorFamily } from 'recoil';
import { isSelectedItemIdMapScopedFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState';
export const isSelectedItemIdScopedFamilySelector = selectorFamily({
key: 'isSelectedItemIdScopedFamilySelector',
get:
({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
({ get }) =>
get(
isSelectedItemIdMapScopedFamilyState({
scopeId: scopeId,
familyKey: itemId,
}),
),
set:
({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
({ set }, newValue) =>
set(
isSelectedItemIdMapScopedFamilyState({
scopeId: scopeId,
familyKey: itemId,
}),
newValue,
),
});

35
front/src/modules/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates.ts Normal file
View File

@ -0,0 +1,35 @@
import { selectableItemIdsScopedState } from '@/ui/layout/selectable-list/states/selectableItemIdsScopedState';
import { selectedItemIdScopedState } from '@/ui/layout/selectable-list/states/selectedItemIdScopedState';
import { isSelectedItemIdScopedFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
const UNDEFINED_SELECTABLE_ITEM_ID = 'UNDEFINED_SELECTABLE_ITEM_ID';
export const getSelectableListScopedStates = ({
selectableListScopeId,
itemId,
}: {
selectableListScopeId: string;
itemId?: string;
}) => {
const isSelectedItemIdSelector = isSelectedItemIdScopedFamilySelector({
scopeId: selectableListScopeId,
itemId: itemId ?? UNDEFINED_SELECTABLE_ITEM_ID,
});
const selectedItemIdState = getScopedState(
selectedItemIdScopedState,
selectableListScopeId,
);
const selectableItemIdsState = getScopedState(
selectableItemIdsScopedState,
selectableListScopeId,
);
return {
isSelectedItemIdSelector,
selectableItemIdsState,
selectedItemIdState,
};
};

15
front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
View File

@ -1,6 +1,5 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Command } from 'cmdk';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@ -27,10 +26,12 @@ const StyledBigIconContainer = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
`;
const StyledMenuItemCommandContainer = styled(Command.Item)`
const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center;
background: ${({ isSelected, theme }) =>
isSelected ? theme.background.transparent.light : theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
@ -38,8 +39,6 @@ const StyledMenuItemCommandContainer = styled(Command.Item)`
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.sm};
gap: ${({ theme }) => theme.spacing(2)};
height: calc(32px - 2 * var(--vertical-padding));
height: 24px;
justify-content: space-between;
padding: var(--vertical-padding) var(--horizontal-padding);
position: relative;
@ -69,6 +68,7 @@ export type MenuItemCommandProps = {
firstHotKey?: string;
secondHotKey?: string;
className?: string;
isSelected?: boolean;
onClick?: () => void;
};
@ -78,12 +78,17 @@ export const MenuItemCommand = ({
firstHotKey,
secondHotKey,
className,
isSelected,
onClick,
}: MenuItemCommandProps) => {
const theme = useTheme();
return (
<StyledMenuItemCommandContainer onSelect={onClick} className={className}>
<StyledMenuItemCommandContainer
onClick={onClick}
className={className}
isSelected={isSelected}
>
<StyledMenuItemLeftContent>
{LeftIcon && (
<StyledBigIconContainer>

39
front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
View File

@ -1,5 +1,4 @@
import { Meta, StoryObj } from '@storybook/react';
import { Command } from 'cmdk';
import { IconBell } from '@/ui/display/icon';
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
@ -24,16 +23,15 @@ export const Default: Story = {
secondHotKey: '1',
},
render: (props) => (
<Command>
<MenuItemCommand
LeftIcon={props.LeftIcon}
text={props.text}
firstHotKey={props.firstHotKey}
secondHotKey={props.secondHotKey}
className={props.className}
onClick={props.onClick}
></MenuItemCommand>
</Command>
<MenuItemCommand
LeftIcon={props.LeftIcon}
text={props.text}
firstHotKey={props.firstHotKey}
secondHotKey={props.secondHotKey}
className={props.className}
onClick={props.onClick}
isSelected={false}
></MenuItemCommand>
),
decorators: [ComponentDecorator],
};
@ -83,16 +81,15 @@ export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
},
},
render: (props) => (
<Command>
<MenuItemCommand
LeftIcon={props.LeftIcon}
text={props.text}
firstHotKey={props.firstHotKey}
secondHotKey={props.secondHotKey}
className={props.className}
onClick={props.onClick}
></MenuItemCommand>
</Command>
<MenuItemCommand
LeftIcon={props.LeftIcon}
text={props.text}
firstHotKey={props.firstHotKey}
secondHotKey={props.secondHotKey}
className={props.className}
onClick={props.onClick}
isSelected={false}
></MenuItemCommand>
),
decorators: [CatalogDecorator],
};