Refactor/filters (#498)

* wip * - Added scopes on useHotkeys - Use new EditableCellV2 - Implemented Recoil Scoped State with specific context - Implemented soft focus position - Factorized open/close editable cell - Removed editable relation old components - Broke down entity table into multiple components - Added Recoil Scope by CellContext - Added Recoil Scope by RowContext * First working version * Use a new EditableCellSoftFocusMode * Fixes * wip * wip * wip * Use company filters * Refactored FilterDropdown into multiple components * Refactored entity search select in dropdown * Renamed states * Fixed people filters * Removed unused code * Cleaned states * Cleaned state * Better naming * fixed rebase * Fix * Fixed stories and mocked data and displayName bug * Fixed cancel sort * Fixed naming * Fixed dropdown height * Fix * Fixed lint
2023-07-04 15:54:58 +02:00
parent 580e6024d0
commit 820ef184d3
78 changed files with 1631 additions and 1229 deletions
@@ -1,20 +1,17 @@
-import { useRef } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useTheme } from '@emotion/react';
 import { IconPlus } from '@tabler/icons-react';

 import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
 import { DropdownMenu } from '@/ui/components/menu/DropdownMenu';
 import { DropdownMenuButton } from '@/ui/components/menu/DropdownMenuButton';
-import { DropdownMenuItem } from '@/ui/components/menu/DropdownMenuItem';
 import { DropdownMenuItemContainer } from '@/ui/components/menu/DropdownMenuItemContainer';
 import { DropdownMenuSearch } from '@/ui/components/menu/DropdownMenuSearch';
-import { DropdownMenuSelectableItem } from '@/ui/components/menu/DropdownMenuSelectableItem';
 import { DropdownMenuSeparator } from '@/ui/components/menu/DropdownMenuSeparator';
-import { Avatar } from '@/users/components/Avatar';
 import { isDefined } from '@/utils/type-guards/isDefined';

-import { useEntitySelectLogic } from '../hooks/useEntitySelectLogic';
+import { useEntitySelectSearch } from '../hooks/useEntitySelectSearch';
+
+import { SingleEntitySelectBase } from './SingleEntitySelectBase';

 export type EntitiesForSingleEntitySelect<
  CustomEntityForSelect extends EntityForSelect,
@@ -35,28 +32,8 @@ export function SingleEntitySelect<
  onEntitySelected: (entity: CustomEntityForSelect) => void;
 }) {
  const theme = useTheme();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const entitiesInDropdown = isDefined(entities.selectedEntity)
-    ? [entities.selectedEntity, ...(entities.entitiesToSelect ?? [])]
-    : entities.entitiesToSelect ?? [];

-  const { hoveredIndex, searchFilter, handleSearchFilterChange } =
-    useEntitySelectLogic({
-      entities: entitiesInDropdown,
-      containerRef,
-    });
-
-  useHotkeys(
-    'enter',
-    () => {
-      onEntitySelected(entitiesInDropdown[hoveredIndex]);
-    },
-    {
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
-    [entitiesInDropdown, hoveredIndex, onEntitySelected],
-  );
+  const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();

  const showCreateButton = isDefined(onCreate) && searchFilter !== '';

@@ -70,7 +47,7 @@ export function SingleEntitySelect<
      <DropdownMenuSeparator />
      {showCreateButton && (
        <>
-          <DropdownMenuItemContainer>
+          <DropdownMenuItemContainer style={{ maxHeight: 180 }}>
            <DropdownMenuButton onClick={onCreate}>
              <IconPlus size={theme.icon.size.md} />
              Create new
@@ -79,27 +56,10 @@ export function SingleEntitySelect<
          <DropdownMenuSeparator />
        </>
      )}
-      <DropdownMenuItemContainer ref={containerRef}>
-        {entitiesInDropdown?.map((entity, index) => (
-          <DropdownMenuSelectableItem
-            key={entity.id}
-            selected={entities.selectedEntity?.id === entity.id}
-            hovered={hoveredIndex === index}
-            onClick={() => onEntitySelected(entity)}
-          >
-            <Avatar
-              avatarUrl={entity.avatarUrl}
-              placeholder={entity.name}
-              size={16}
-              type={entity.avatarType ?? 'rounded'}
-            />
-            {entity.name}
-          </DropdownMenuSelectableItem>
-        ))}
-        {entitiesInDropdown?.length === 0 && (
-          <DropdownMenuItem>No result</DropdownMenuItem>
-        )}
-      </DropdownMenuItemContainer>
+      <SingleEntitySelectBase
+        entities={entities}
+        onEntitySelected={onEntitySelected}
+      />
    </DropdownMenu>
  );
 }
@@ -0,0 +1,74 @@
+import { useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
+import { DropdownMenuItem } from '@/ui/components/menu/DropdownMenuItem';
+import { DropdownMenuItemContainer } from '@/ui/components/menu/DropdownMenuItemContainer';
+import { DropdownMenuSelectableItem } from '@/ui/components/menu/DropdownMenuSelectableItem';
+import { Avatar } from '@/users/components/Avatar';
+import { isDefined } from '@/utils/type-guards/isDefined';
+
+import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
+
+export type EntitiesForSingleEntitySelect<
+  CustomEntityForSelect extends EntityForSelect,
+> = {
+  selectedEntity: CustomEntityForSelect;
+  entitiesToSelect: CustomEntityForSelect[];
+};
+
+export function SingleEntitySelectBase<
+  CustomEntityForSelect extends EntityForSelect,
+>({
+  entities,
+  onEntitySelected,
+}: {
+  entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
+  onEntitySelected: (entity: CustomEntityForSelect) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const entitiesInDropdown = isDefined(entities.selectedEntity)
+    ? [entities.selectedEntity, ...(entities.entitiesToSelect ?? [])]
+    : entities.entitiesToSelect ?? [];
+
+  const { hoveredIndex } = useEntitySelectScroll({
+    entities: entitiesInDropdown,
+    containerRef,
+  });
+
+  useHotkeys(
+    'enter',
+    () => {
+      onEntitySelected(entitiesInDropdown[hoveredIndex]);
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [entitiesInDropdown, hoveredIndex, onEntitySelected],
+  );
+
+  return (
+    <DropdownMenuItemContainer ref={containerRef}>
+      {entitiesInDropdown?.map((entity, index) => (
+        <DropdownMenuSelectableItem
+          key={entity.id}
+          selected={entities.selectedEntity?.id === entity.id}
+          hovered={hoveredIndex === index}
+          onClick={() => onEntitySelected(entity)}
+        >
+          <Avatar
+            avatarUrl={entity.avatarUrl}
+            placeholder={entity.name}
+            size={16}
+            type={entity.avatarType ?? 'rounded'}
+          />
+          {entity.name}
+        </DropdownMenuSelectableItem>
+      ))}
+      {entitiesInDropdown?.length === 0 && (
+        <DropdownMenuItem>No result</DropdownMenuItem>
+      )}
+    </DropdownMenuItemContainer>
+  );
+}
@@ -1,14 +1,12 @@
-import { useState } from 'react';
-import { debounce } from 'lodash';
 import scrollIntoView from 'scroll-into-view';

 import { useUpDownHotkeys } from '@/hotkeys/hooks/useUpDownHotkeys';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';

-import { relationPickerSearchFilterScopedState } from '../states/relationPickerSearchFilterScopedState';
+import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
 import { EntityForSelect } from '../types/EntityForSelect';

-export function useEntitySelectLogic<
+export function useEntitySelectScroll<
  CustomEntityForSelect extends EntityForSelect,
 >({
  containerRef,
@@ -17,23 +15,10 @@ export function useEntitySelectLogic<
  entities: CustomEntityForSelect[];
  containerRef: React.RefObject<HTMLDivElement>;
 }) {
-  const [hoveredIndex, setHoveredIndex] = useState(0);
-
-  const [searchFilter, setSearchFilter] = useRecoilScopedState(
-    relationPickerSearchFilterScopedState,
+  const [hoveredIndex, setHoveredIndex] = useRecoilScopedState(
+    relationPickerHoverIndexScopedState,
  );

-  const debouncedSetSearchFilter = debounce(setSearchFilter, 100, {
-    leading: true,
-  });
-
-  function handleSearchFilterChange(
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) {
-    debouncedSetSearchFilter(event.currentTarget.value);
-    setHoveredIndex(0);
-  }
-
  useUpDownHotkeys(
    () => {
      setHoveredIndex((prevSelectedIndex) =>
@@ -82,7 +67,5 @@ export function useEntitySelectLogic<

  return {
    hoveredIndex,
-    searchFilter,
-    handleSearchFilterChange,
  };
 }
@@ -0,0 +1,32 @@
+import { debounce } from 'lodash';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+
+import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
+import { relationPickerSearchFilterScopedState } from '../states/relationPickerSearchFilterScopedState';
+
+export function useEntitySelectSearch() {
+  const [, setHoveredIndex] = useRecoilScopedState(
+    relationPickerHoverIndexScopedState,
+  );
+
+  const [searchFilter, setSearchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+
+  const debouncedSetSearchFilter = debounce(setSearchFilter, 100, {
+    leading: true,
+  });
+
+  function handleSearchFilterChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) {
+    debouncedSetSearchFilter(event.currentTarget.value);
+    setHoveredIndex(0);
+  }
+
+  return {
+    searchFilter,
+    handleSearchFilterChange,
+  };
+}
@@ -24,6 +24,8 @@ type ExtractEntityTypeFromQueryResponse<T> = T extends {

 const DEFAULT_SEARCH_REQUEST_LIMIT = 10;

+// TODO: use this for all search queries, because we need selectedEntities and entitiesToSelect each time we want to search
+// Filtered entities to select are
 export function useFilteredSearchEntityQuery<
  EntityType extends ExtractEntityTypeFromQueryResponse<QueryResponseForExtract> & {
    id: string;
@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const relationPickerHoverIndexScopedState = atomFamily<number, string>({
+  key: 'relationPickerHoverIndexScopedState',
+  default: 0,
+});