feat: added useList docs

gravity-ui · Jan 17, 2024 · 0e4051c · 0e4051c
1 parent 6f0cc5d
commit 0e4051c
Show file tree

Hide file tree

Showing 24 changed files with 534 additions and 117 deletions.
diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -106,21 +106,21 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
 
     const handleItemClick = React.useCallback(
         (id: ListItemId) => {
-            // onItemClick = null - switch off default click behavior
+            // onItemClick = disabled - switch off default click behavior
             if (onItemClick === 'disabled') return undefined;
 
             const defaultHandleClick = () => {
                 if (listState.disabledById[id]) return;
 
+                // always activate selected item
                 listState.setActiveItemId(id);
 
                 const isGroup = id in listParsedState.groupsState;
 
                 if (isGroup && groupsBehavior === 'expandable') {
-                    // toggle group selection
                     listState.setExpanded((state) => ({
                         ...state,
-                        // by default all groups expanded
+                        // toggle expanded state by id, by default all groups expanded
                         [id]: typeof state[id] === 'boolean' ? !state[id] : false,
                     }));
                 } else if (multiple) {
@@ -135,7 +135,10 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
                 return onItemClick(defaultHandleClick, {
                     id,
                     isGroup: id in listParsedState.groupsState,
-                    isLastItem: listParsedState.lastItemId === id,
+                    isLastItem:
+                        listParsedState.flattenIdsOrder[
+                            listParsedState.flattenIdsOrder.length - 1
+                        ] === id,
                     disabled: listState.disabledById[id],
                 });
             }
@@ -146,7 +149,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
             onItemClick,
             listState,
             listParsedState.groupsState,
-            listParsedState.lastItemId,
+            listParsedState.flattenIdsOrder,
             groupsBehavior,
             multiple,
             handleMultipleSelection,

diff --git a/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx b/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx
@@ -6,8 +6,8 @@ import {Label} from '../../../Label';
 import {Loader} from '../../../Loader';
 import {Flex, spacing} from '../../../layout';
 import {ListItemView} from '../../../useList';
+import {IntersectionContainer} from '../../../useList/__stories__/components/IntersectionContainer/IntersectionContainer';
 import {useInfinityFetch} from '../../../useList/__stories__/utils/useInfinityFetch';
-import {IntersectionContainer} from '../../../useList/components/IntersectionContainer/IntersectionContainer';
 import {TreeSelect} from '../../TreeSelect';
 import type {TreeSelectProps} from '../../types';
 

diff --git a/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx b/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx
@@ -13,7 +13,7 @@ export const RenderVirtualizedContainer = <T,>({
     size,
 }: RenderContainerProps<T>) => {
     return (
-        <ListContainerView virtualized id={id} ref={containerRef}>
+        <ListContainerView fixedHeight id={id} ref={containerRef}>
             <VirtualizedListContainer
                 items={flattenIdsOrder}
                 itemSize={(_index) => computeItemSize(size)}

diff --git a/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx b/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx
@@ -75,7 +75,7 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
                                 ) => {
                                     return renderItem(flattenIdsOrder[rubric.source.index], {
                                         provided,
-                                        isDragging: snapshot.isDragging,
+                                        active: snapshot.isDragging,
                                     });
                                 }}
                             >
@@ -106,8 +106,8 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
                         return (
                             <DraggableListItem
                                 key={`item-key-${state.id}`}
-                                {...renderContextProps}
                                 {...commonProps}
+                                {...renderContextProps}
                             />
                         );
                     }
@@ -120,8 +120,8 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
                             {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
                                 <DraggableListItem
                                     provided={provided}
-                                    isDragging={snapshot.isDragging}
                                     {...commonProps}
+                                    active={snapshot.isDragging}
                                 />
                             )}
                         </Draggable>

diff --git a/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx b/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx
@@ -53,7 +53,7 @@ export const WithFiltrationAndControlsExample = ({
                 renderContainer={(props) => {
                     if (props.items.length === 0 && items.length > 0) {
                         return (
-                            <Flex direction="column" gap="3" className={spacing({p: 2})}>
+                            <Flex centerContent className={spacing({p: 2})} height="300px">
                                 <Text variant="subheader-1">Nothing found</Text>
                             </Flex>
                         );

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -6,24 +6,11 @@ import identity from 'lodash/identity';
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
 import {Flex, spacing} from '../../../layout';
-import {ListItemId, ListItemType, ListItemView, getListParsedState} from '../../../useList';
+import {ListItemId, ListItemView, getListParsedState} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
 import type {TreeSelectProps} from '../../types';
 
-const getItemsExpandedState = <T,>(items: ListItemType<T>[]) => {
-    return Object.entries(getListParsedState(items).groupsState).reduce<
-        Record<ListItemId, boolean>
-    >((acc, [groupId, {expanded}]) => {
-        acc[groupId] = true;
-
-        if (typeof expanded !== 'undefined') {
-            acc[groupId] = expanded;
-        }
-        return acc;
-    }, {});
-};
-
 export interface WithGroupSelectionControlledStateAndCustomIconExampleProps
     extends Omit<
         TreeSelectProps<{title: string}>,
@@ -39,8 +26,8 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
     const items = React.useMemo(() => createRandomizedData({num: itemsCount}), [itemsCount]);
 
     const [value, setValue] = React.useState<string[]>([]);
-    const [expandedById, setExpanded] = React.useState<Record<ListItemId, boolean>>(() =>
-        getItemsExpandedState(items),
+    const [expandedById, setExpanded] = React.useState<Record<ListItemId, boolean>>(
+        () => getListParsedState(items).initialState.expandedById,
     );
 
     return (

diff --git a/src/components/TreeSelect/index.ts b/src/components/TreeSelect/index.ts
@@ -1,2 +1,2 @@
 export {TreeSelect} from './TreeSelect';
-export type {TreeSelectProps} from './types';
+export type {TreeSelectProps, RenderItem} from './types';
diff --git a/src/components/useList/__stories__/components/InfinityScrollList.tsx b/src/components/useList/__stories__/components/InfinityScrollList.tsx
@@ -4,7 +4,6 @@ import {Button} from '../../../Button';
 import {Loader} from '../../../Loader';
 import {TextInput} from '../../../controls';
 import {Flex} from '../../../layout';
-import {IntersectionContainer} from '../../components/IntersectionContainer/IntersectionContainer';
 import {ListContainerView} from '../../components/ListContainerView/ListContainerView';
 import {ListItemView} from '../../components/ListItemView/ListItemView';
 import {ListItemRecursiveRenderer} from '../../components/ListRecursiveRenderer/ListRecursiveRenderer';
@@ -16,6 +15,8 @@ import type {ListItemId, ListSizeTypes} from '../../types';
 import {getItemRenderState} from '../../utils/getItemRenderState';
 import {useInfinityFetch} from '../utils/useInfinityFetch';
 
+import {IntersectionContainer} from './IntersectionContainer/IntersectionContainer';
+
 export interface InfinityScrollListProps {
     size: ListSizeTypes;
 }

diff --git a/...ectionContainer/IntersectionContainer.tsx → ...ectionContainer/IntersectionContainer.tsx b/...ectionContainer/IntersectionContainer.tsx → ...ectionContainer/IntersectionContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useIntersection} from '../../../../hooks';
+import {useIntersection} from '../../../../../hooks';
 
 interface IntersectionContainerProps {
     children: React.JSX.Element;

diff --git a/src/components/useList/__stories__/components/ListWithDnd.tsx b/src/components/useList/__stories__/components/ListWithDnd.tsx
@@ -113,7 +113,7 @@ export const ListWithDnd = ({size, itemsCount}: ListWithDndProps) => {
                                                     {...data}
                                                     {...provided.draggableProps}
                                                     {...provided.dragHandleProps}
-                                                    isDragging={snapshot.isDragging}
+                                                    active={snapshot.isDragging}
                                                     ref={provided.innerRef}
                                                     endSlot={<Icon data={Grip} size={16} />}
                                                 />