fix: more review fixes

gravity-ui · Jan 18, 2024 · 52b9392 · 52b9392
1 parent 4b6d553
commit 52b9392
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 39 deletions.
diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -138,8 +138,8 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
                     id,
                     isGroup: id in listParsedState.groupsState,
                     isLastItem:
-                        listParsedState.existedFlattenIds[
-                            listParsedState.existedFlattenIds.length - 1
+                        listParsedState.visibleFlattenIds[
+                            listParsedState.visibleFlattenIds.length - 1
                         ] === id,
                     disabled: listState.disabledById[id],
                 });
@@ -151,7 +151,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
             onItemClick,
             listState,
             listParsedState.groupsState,
-            listParsedState.existedFlattenIds,
+            listParsedState.visibleFlattenIds,
             groupsBehavior,
             multiple,
             handleMultipleSelection,
@@ -166,7 +166,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
             const lastSelectedItemId = value[value.length - 1];
             containerRef.current?.focus();
 
-            const firstItemId = listParsedState.existedFlattenIds[0];
+            const firstItemId = listParsedState.visibleFlattenIds[0];
 
             listState.setActiveItemId(lastSelectedItemId ?? firstItemId);
 

diff --git a/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx b/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx
@@ -8,14 +8,14 @@ import type {RenderContainerProps} from '../../types';
 export const RenderVirtualizedContainer = <T,>({
     id,
     containerRef,
-    existedFlattenIds,
+    visibleFlattenIds,
     renderItem,
     size,
 }: RenderContainerProps<T>) => {
     return (
         <ListContainerView fixedHeight id={id} ref={containerRef}>
             <VirtualizedListContainer
-                items={existedFlattenIds}
+                items={visibleFlattenIds}
                 itemSize={(_index) => computeItemSize(size)}
             >
                 {renderItem}

diff --git a/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx b/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx
@@ -61,7 +61,7 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
                         setValue([id]);
                     }
                 }}
-                renderContainer={({renderItem, existedFlattenIds, containerRef, id}) => {
+                renderContainer={({renderItem, visibleFlattenIds, containerRef, id}) => {
                     return (
                         <DragDropContext onDragEnd={handleDrugEnd}>
                             <Droppable
@@ -71,7 +71,7 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
                                     snapshot: DraggableStateSnapshot,
                                     rubric: DraggableRubric,
                                 ) => {
-                                    return renderItem(existedFlattenIds[rubric.source.index], {
+                                    return renderItem(visibleFlattenIds[rubric.source.index], {
                                         provided,
                                         active: snapshot.isDragging,
                                     });
@@ -83,7 +83,7 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
                                             {...droppableProvided.droppableProps}
                                             ref={droppableProvided.innerRef}
                                         >
-                                            {existedFlattenIds.map((id) => renderItem(id))}
+                                            {visibleFlattenIds.map((id) => renderItem(id))}
                                             {droppableProvided.placeholder}
                                         </div>
                                     </ListContainerView>

diff --git a/src/components/useList/__stories__/components/FlattenList.tsx b/src/components/useList/__stories__/components/FlattenList.tsx
@@ -75,11 +75,11 @@ export const FlattenList = ({itemsCount, size}: FlattenListProps) => {
 
             <ListContainerView ref={containerRef}>
                 <VirtualizedListContainer
-                    items={list.existedFlattenIds}
+                    items={list.visibleFlattenIds}
                     itemSize={(index) =>
                         computeItemSize(
                             size,
-                            Boolean(get(list.itemsById[list.existedFlattenIds[index]], 'subtitle')),
+                            Boolean(get(list.itemsById[list.visibleFlattenIds[index]], 'subtitle')),
                         )
                     }
                 >

diff --git a/src/components/useList/__stories__/components/ListWithDnd.tsx b/src/components/useList/__stories__/components/ListWithDnd.tsx
@@ -90,7 +90,7 @@ export const ListWithDnd = ({size, itemsCount}: ListWithDndProps) => {
                     {(droppableProvided: DroppableProvided) => (
                         <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
                             <ListContainerView ref={containerRef}>
-                                {list.existedFlattenIds.map((id, index) => {
+                                {list.visibleFlattenIds.map((id, index) => {
                                     const {data, props} = getItemRenderState({
                                         id,
                                         size,

diff --git a/src/components/useList/__stories__/components/PopupWithTogglerList.tsx b/src/components/useList/__stories__/components/PopupWithTogglerList.tsx
@@ -47,7 +47,7 @@ export const PopupWithTogglerList = ({size, itemsCount}: PopupWithTogglerListPro
     React.useLayoutEffect(() => {
         if (open) {
             containerRef.current?.focus();
-            listState.setActiveItemId(selectedId ?? list.existedFlattenIds[0]);
+            listState.setActiveItemId(selectedId ?? list.visibleFlattenIds[0]);
 
             if (selectedId) {
                 scrollToListItem(selectedId, containerRef.current);

diff --git a/src/components/useList/__stories__/useList.mdx b/src/components/useList/__stories__/useList.mdx
@@ -176,7 +176,7 @@ interface ListTreeItemType<T> extends ListItemInitialProps {
 export type ListItemType<T> = ListTreeItemType<T> | ListFlattenItemType<T>;
 ```
 
--   `expandedById` - state for open/closed `List` elements. Affects the formation of the `existedFlattenIds` - if the element id in this object is set to `false` - all elements of this group and all nested groups will not be present in the final ids order;
+-   `expandedById` - state for open/closed `List` elements. Affects the formation of the `visibleFlattenIds` - if the element id in this object is set to `false` - all elements of this group and all nested groups will not be present in the final ids order;
 -   `getId` - the property is optional. Allows you to generate an id for a list item depending on the list data:
 
 ```tsx
@@ -230,7 +230,7 @@ const {byid} = useList({
 
 -   `groupsState` - a normalized representation of metadata about a group if the item is both a list item and a group:
     -   `childrenIds` - list of child element IDs;
--   `existedFlattenIds` - sequential representation of list items by id, taking into account invisible elements inside collapsed groups;
+-   `visibleFlattenIds` - sequential representation of list items by id, taking into account invisible elements inside collapsed groups;
 
 ### useListKeydown
 
@@ -240,7 +240,7 @@ Keyboard support
 
 -   `disabledById` - key-value representation of disabled elements that do not need to be taken into account when navigating through the `List`;
 -   `activeItemId` - current active item `id`;
--   `existedFlattenIds` - a flat list of elements to be navigated through; Collapsed groups must be taken into account in this array;
+-   `visibleFlattenIds` - a flat list of elements to be navigated through; Collapsed groups must be taken into account in this array;
 -   `onItemClick` - callback will be called when pressing the `Enter`, `Space` keys;
 -   `containerRef` - a reference to the DOM element of the List container inside which to search for its elements;
 -   `setActiveItemId` - Callback for setting the current active element;
@@ -437,13 +437,13 @@ Utility to compute list item height:
 
 ```tsx
 <VirtualizedListContainer // custom implementation
-    items={existedFlattenIds}
+    items={visibleFlattenIds}
     itemSize={(index) =>
         computeItemSize(
             // list size
             size,
             // has subrows
-            Boolean(get(itemsById[existedFlattenIds[index]], 'subtitle')),
+            Boolean(get(itemsById[visibleFlattenIds[index]], 'subtitle')),
         )
     }
 />
@@ -459,7 +459,7 @@ const containerRef = React.useRef<HTMLDivElement>(null);
 React.useLayoutEffect(() => {
     if (open) {
         containerRef.current?.focus();
-        listState.setActiveItemId(selectedId ?? list.existedFlattenIds[0]);
+        listState.setActiveItemId(selectedId ?? list.visibleFlattenIds[0]);
 
         if (selectedId) {
             scrollToListItem(selectedId, containerRef.current);

diff --git a/src/components/useList/hooks/useList.ts b/src/components/useList/hooks/useList.ts
@@ -23,7 +23,7 @@ export const useList = <T>({items, expandedById, getId}: UseListProps<T>): UseLi
         getId,
     });
 
-    const existedFlattenIds = useFlattenListItems({
+    const visibleFlattenIds = useFlattenListItems({
         items,
         /**
          * By default controlled from list items declaration state
@@ -32,5 +32,5 @@ export const useList = <T>({items, expandedById, getId}: UseListProps<T>): UseLi
         getId,
     });
 
-    return {items, existedFlattenIds, itemsById, groupsState, itemsState};
+    return {items, visibleFlattenIds, itemsById, groupsState, itemsState};
 };
diff --git a/src/components/useList/hooks/useListFilter.ts b/src/components/useList/hooks/useListFilter.ts
@@ -70,12 +70,12 @@ export function useListFilter<T>({
         setPrevItems(externalItems);
     }
 
-    const {onFilterUpdate, reset} = React.useMemo(() => {
-        const debouncedFn = debounce(
-            (value) => setItems(filterItemsFn(value, externalItems)),
-            debounceTimeout,
-        );
+    const debouncedFn = React.useCallback(
+        debounce((value) => setItems(filterItemsFn(value, externalItems)), debounceTimeout),
+        [setItems, filterItemsFn, debounceTimeout],
+    );
 
+    const {onFilterUpdate, reset} = React.useMemo(() => {
         return {
             reset: () => {
                 setFilter(initialFilterValue);
@@ -86,7 +86,7 @@ export function useListFilter<T>({
                 debouncedFn(nextFilterValue);
             },
         };
-    }, [debounceTimeout, externalItems, filterItemsFn, initialFilterValue]);
+    }, [debouncedFn, initialFilterValue]);
 
     return {
         filterRef,

diff --git a/src/components/useList/hooks/useListKeydown.tsx b/src/components/useList/hooks/useListKeydown.tsx
@@ -6,7 +6,7 @@ import {findNextIndex} from '../utils/findNextIndex';
 import {scrollToListItem} from '../utils/scrollToListItem';
 
 interface UseListKeydownProps extends Partial<Pick<ListState, 'disabledById' | 'activeItemId'>> {
-    existedFlattenIds: ListItemId[];
+    visibleFlattenIds: ListItemId[];
     onItemClick?(itemId: ListItemId): void;
     containerRef?: React.RefObject<HTMLDivElement>;
     setActiveItemId?(id: ListItemId): void;
@@ -15,7 +15,7 @@ interface UseListKeydownProps extends Partial<Pick<ListState, 'disabledById' | '
 
 // Use this hook if you need keyboard support for tree structure lists
 export const useListKeydown = ({
-    existedFlattenIds,
+    visibleFlattenIds,
     onItemClick,
     containerRef,
     disabledById = {},
@@ -25,33 +25,33 @@ export const useListKeydown = ({
 }: UseListKeydownProps) => {
     const activateItem = React.useCallback(
         (index?: number, scrollTo = true) => {
-            if (typeof index === 'number' && existedFlattenIds[index]) {
+            if (typeof index === 'number' && visibleFlattenIds[index]) {
                 if (scrollTo) {
-                    scrollToListItem(existedFlattenIds[index], containerRef?.current);
+                    scrollToListItem(visibleFlattenIds[index], containerRef?.current);
                 }
 
-                setActiveItemId?.(existedFlattenIds[index]);
+                setActiveItemId?.(visibleFlattenIds[index]);
             }
         },
-        [containerRef, existedFlattenIds, setActiveItemId],
+        [containerRef, visibleFlattenIds, setActiveItemId],
     );
 
     const handleKeyMove = React.useCallback(
         (event: KeyboardEvent, step: number, defaultItemIndex = 0) => {
             event.preventDefault();
 
-            const maybeIndex = existedFlattenIds.findIndex((i) => i === activeItemId);
+            const maybeIndex = visibleFlattenIds.findIndex((i) => i === activeItemId);
 
             const nextIndex = findNextIndex({
-                list: existedFlattenIds,
+                list: visibleFlattenIds,
                 index: (maybeIndex > -1 ? maybeIndex : defaultItemIndex) + step,
                 step: Math.sign(step),
                 disabledItems: disabledById,
             });
 
             activateItem(nextIndex);
         },
-        [activateItem, activeItemId, disabledById, existedFlattenIds],
+        [activateItem, activeItemId, disabledById, visibleFlattenIds],
     );
 
     React.useLayoutEffect(() => {

diff --git a/src/components/useList/types.ts b/src/components/useList/types.ts
@@ -99,5 +99,5 @@ export type ListState = {
 
 export type ListParsedState<T> = ParsedState<T> & {
     items: ListItemType<T>[];
-    existedFlattenIds: ListItemId[];
+    visibleFlattenIds: ListItemId[];
 };
diff --git a/src/components/useList/utils/getItemRenderState.tsx b/src/components/useList/utils/getItemRenderState.tsx
@@ -25,7 +25,7 @@ export const getItemRenderState = <T,>(
         expandedById,
         groupsState,
         onItemClick,
-        existedFlattenIds,
+        visibleFlattenIds,
         size = 'm',
         itemsState,
         selectedById,
@@ -37,7 +37,7 @@ export const getItemRenderState = <T,>(
     const context: RenderItemContext = {
         itemState: itemsState[id],
         groupState: groupsState[id],
-        isLastItem: id === existedFlattenIds[existedFlattenIds.length - 1],
+        isLastItem: id === visibleFlattenIds[visibleFlattenIds.length - 1],
     };
 
     let expanded;