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,
};
};