feat(useList): redesigned api

gravity-ui · Jun 19, 2024 · 40fd1df · 40fd1df
1 parent 38fe431
commit 40fd1df
Show file tree

Hide file tree

Showing 70 changed files with 1,746 additions and 2,230 deletions.
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -113,8 +113,7 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine
 
     const dndRenderContainer: TreeSelectRenderContainer<TableColumnSetupItem> = ({
         renderItem,
-        visibleFlattenIds,
-        itemsById,
+        list,
         containerRef,
         id,
         className,
@@ -126,15 +125,15 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine
             };
 
             return renderItem(
-                visibleFlattenIds[rubric.source.index],
+                list.structure.visibleFlattenIds[rubric.source.index],
                 rubric.source.index,
                 renderContainerProps,
             );
         };
 
         const {stickyStartItemIdList, sortableItemIdList, stickyEndItemIdList} = prepareStickyState(
-            itemsById,
-            visibleFlattenIds,
+            list.structure.itemsById,
+            list.structure.visibleFlattenIds,
         );
 
         const stickyStartItemList = stickyStartItemIdList.map((visibleFlattenId, idx) => {

diff --git a/src/components/TreeList/TreeList.tsx b/src/components/TreeList/TreeList.tsx
@@ -3,104 +3,59 @@
 import React from 'react';
 
 import {useUniqId} from '../../hooks';
-import {ListItemView, getItemRenderState, useList, useListKeydown} from '../useList';
+import {ListItemView, getItemRenderState, useListItemClick, useListKeydown} from '../useList';
 import type {ListItemId} from '../useList';
 import {block} from '../utils/cn';
 
 import {TreeListContainer} from './components/TreeListContainer/TreeListContainer';
-import type {TreeListProps, TreeListRenderContainerProps} from './types';
+import type {
+    TreeListOnItemClickPayload,
+    TreeListProps,
+    TreeListRenderContainerProps,
+} from './types';
 
 const b = block('tree-list');
 
 export const TreeList = <T,>({
     qa,
     id,
     size = 'm',
-    items,
     className,
-    expandedById: propsExpandedById,
-    disabledById: propsDisabledById,
-    selectedById: propsSelectedById,
-    activeItemId,
-    defaultGroupsExpanded = true,
-    getItemId,
+    list,
     renderItem: propsRenderItem,
     renderContainer = TreeListContainer,
-    onItemClick,
+    onItemClick: propsOnItemClick,
     multiple,
-    setActiveItemId,
     containerRef: propsContainerRef,
+    withItemClick,
     mapItemDataToProps,
 }: TreeListProps<T>) => {
     const uniqId = useUniqId();
     const treeListId = id ?? uniqId;
     const containerRefLocal = React.useRef<HTMLDivElement>(null);
     const containerRef = propsContainerRef ?? containerRefLocal;
 
-    const listParsedState = useList({
-        items,
-        getItemId,
-        // used not all of all properties but it may be needed in future
-        expandedById: propsExpandedById,
-        disabledById: propsDisabledById,
-        selectedById: propsSelectedById,
-        activeItemId,
-    });
+    const defaultOnItemClick = useListItemClick({list, multiple});
 
-    const expandedById = propsExpandedById || listParsedState.initialState.expandedById;
-    const disabledById = propsDisabledById || listParsedState.initialState.disabledById;
-    const selectedById = propsSelectedById || listParsedState.initialState.selectedById;
+    const onItemClick = React.useMemo(() => {
+        if (propsOnItemClick === null) {
+            return undefined;
+        }
 
-    const handleItemClick = React.useMemo(() => {
-        if (onItemClick) {
-            return (listItemId: ListItemId) => {
-                onItemClick?.({
-                    id: listItemId,
-                    index: listParsedState.idToFlattenIndex[listItemId],
-                    data: listParsedState.itemsById[listItemId],
-                    expanded:
-                        // eslint-disable-next-line no-nested-ternary
-                        expandedById && listItemId in expandedById
-                            ? expandedById[listItemId]
-                            : listItemId in listParsedState.initialState.expandedById
-                              ? listParsedState.initialState.expandedById[listItemId]
-                              : defaultGroupsExpanded,
-                    disabled: disabledById
-                        ? Boolean(disabledById[listItemId])
-                        : Boolean(listParsedState.initialState.disabledById[listItemId]),
-                    selected: selectedById
-                        ? Boolean(selectedById[listItemId])
-                        : Boolean(listParsedState.initialState.selectedById[listItemId]),
+        const onClick = propsOnItemClick ?? defaultOnItemClick;
 
-                    context: {
-                        isLastItem:
-                            listParsedState.visibleFlattenIds[
-                                listParsedState.visibleFlattenIds.length - 1
-                            ] === listItemId,
-                        groupState: listParsedState.groupsState[listItemId],
-                        itemState: listParsedState.itemsState[listItemId],
-                    },
-                });
-            };
-        }
+        return ({id}: {id: ListItemId}) => {
+            const payload: TreeListOnItemClickPayload<T> = {id, list};
 
-        return undefined;
-    }, [
-        defaultGroupsExpanded,
-        disabledById,
-        expandedById,
-        selectedById,
-        listParsedState,
-        onItemClick,
-    ]);
+            onClick(payload);
+            withItemClick?.(payload);
+        };
+    }, [defaultOnItemClick, list, propsOnItemClick, withItemClick]);
 
     useListKeydown({
         containerRef,
-        onItemClick: handleItemClick,
-        ...listParsedState,
-        activeItemId,
-        disabledById,
-        setActiveItemId,
+        onItemClick,
+        list,
     });
 
     const renderItem: TreeListRenderContainerProps<T>['renderItem'] = (
@@ -114,13 +69,8 @@ export const TreeList = <T,>({
             size,
             multiple,
             mapItemDataToProps,
-            onItemClick: handleItemClick,
-            ...listParsedState,
-            expandedById,
-            disabledById,
-            activeItemId,
-            selectedById,
-            defaultExpanded: defaultGroupsExpanded,
+            onItemClick,
+            list,
         });
 
         if (propsRenderItem) {
@@ -130,6 +80,7 @@ export const TreeList = <T,>({
                 context: renderState.context,
                 index,
                 renderContainerProps,
+                list,
             });
         }
 
@@ -143,12 +94,7 @@ export const TreeList = <T,>({
         size,
         containerRef,
         className: b(null, className),
-        ...listParsedState,
-        expandedById,
-        disabledById,
-        activeItemId,
-        selectedById,
+        list,
         renderItem,
-        getItemId,
     });
 };
diff --git a/src/components/TreeList/__stories__/Docs.mdx b/src/components/TreeList/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+
+import TreeListDocs from './TreeListDocs.md?raw';
+
+<Meta title="Lab/TreeList" />
+
+<Markdown>{TreeListDocs}</Markdown>