fix: change TreeSelect interfaces names

gravity-ui · Feb 11, 2024 · 74c180c · 74c180c
1 parent 10a34fd
commit 74c180c
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 55 deletions.
diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -20,7 +20,7 @@ import type {CnMods} from '../utils/cn';
 import {TreeSelectItem} from './TreeSelectItem';
 import {TreeListContainer} from './components/TreeListContainer/TreeListContainer';
 import {useTreeSelectSelection, useValue} from './hooks/useTreeSelectSelection';
-import type {RenderControlProps, TreeSelectProps} from './types';
+import type {TreeSelectProps, TreeSelectRenderControlProps} from './types';
 
 import './TreeSelect.scss';
 
@@ -193,7 +193,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
 
     const handleClose = React.useCallback(() => toggleOpen(false), [toggleOpen]);
 
-    const controlProps: RenderControlProps = {
+    const controlProps: TreeSelectRenderControlProps = {
         open,
         toggleOpen,
         clearValue: handleClearValue,
@@ -282,13 +282,13 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
                             Boolean(multiple) && !renderState.context.groupState;
 
                         if (renderItem) {
-                            return renderItem(
-                                renderState.data,
-                                renderState.props,
-                                renderState.context,
+                            return renderItem({
+                                data: renderState.data,
+                                props: renderState.props,
+                                itemState: renderState.context,
                                 index,
-                                renderContextProps,
-                            );
+                                renderContext: renderContextProps,
+                            });
                         }
 
                         const itemData = listParsedState.itemsById[id];

diff --git a/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx b/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx
@@ -18,10 +18,13 @@ export interface InfinityScrollExampleProps
     itemsCount?: number;
 }
 
-export const InfinityScrollExample = ({itemsCount = 5, ...props}: InfinityScrollExampleProps) => {
+export const InfinityScrollExample = ({
+    itemsCount = 5,
+    ...storyProps
+}: InfinityScrollExampleProps) => {
     const [value, setValue] = React.useState<string[]>([]);
     const {
-        data = [],
+        data: items = [],
         onFetchMore,
         canFetchMore,
         isLoading,
@@ -30,14 +33,14 @@ export const InfinityScrollExample = ({itemsCount = 5, ...props}: InfinityScroll
     return (
         <Flex>
             <TreeSelect<{title: string}>
-                {...props}
-                items={data}
+                {...storyProps}
+                items={items}
                 value={value}
-                renderItem={(item, state, {isLastItem, groupState}) => {
+                renderItem={({data, props, itemState: {isLastItem, groupState}}) => {
                     const node = (
                         <TreeSelectItem
-                            {...state}
-                            {...item}
+                            {...props}
+                            {...data}
                             endSlot={
                                 groupState ? (
                                     <Label>{groupState.childrenIds.length}</Label>

diff --git a/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx b/src/components/TreeSelect/__stories__/components/RenderVirtualizedContainer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {ListContainerView, computeItemSize} from '../../../useList';
 import {VirtualizedListContainer} from '../../../useList/__stories__/components/VirtualizedListContainer';
-import type {RenderContainerProps} from '../../types';
+import type {TreeSelectRenderContainerProps} from '../../types';
 
 // custom container renderer example
 export const RenderVirtualizedContainer = <T,>({
@@ -11,7 +11,7 @@ export const RenderVirtualizedContainer = <T,>({
     visibleFlattenIds,
     renderItem,
     size,
-}: RenderContainerProps<T>) => {
+}: TreeSelectRenderContainerProps<T>) => {
     return (
         <ListContainerView fixedHeight id={id} ref={containerRef}>
             <VirtualizedListContainer

diff --git a/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx b/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx
@@ -48,7 +48,7 @@ const randomItems: CustomDataType[] = createRandomizedData({
     getData: (title) => title,
 }).map(({data}, idx) => ({someRandomKey: data, id: String(idx)}));
 
-export const WithDndListExample = (props: WithDndListExampleProps) => {
+export const WithDndListExample = (storyProps: WithDndListExampleProps) => {
     const [items, setItems] = React.useState(randomItems);
     const [value, setValue] = React.useState<string[]>([]);
 
@@ -61,7 +61,7 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
     return (
         <Flex>
             <TreeSelect
-                {...props}
+                {...storyProps}
                 value={value}
                 items={items}
                 // you can omit this prop here. Id if passed, would taken by default
@@ -111,11 +111,11 @@ export const WithDndListExample = (props: WithDndListExampleProps) => {
                         </DragDropContext>
                     );
                 }}
-                renderItem={(item, state, _context, index, renderContextProps) => {
+                renderItem={({data, props, index, renderContext: renderContextProps}) => {
                     const commonProps = {
-                        ...state,
+                        ...props,
                         // selected: value.initem.uniqId,
-                        title: item.someRandomKey,
+                        title: data.someRandomKey,
                         endSlot: <Icon data={Grip} size={16} />,
                     };
 

diff --git a/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx b/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx
@@ -7,7 +7,7 @@ import {Flex, spacing} from '../../../layout';
 import {useListFilter} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
-import type {RenderContainerProps, TreeSelectProps} from '../../types';
+import type {TreeSelectProps, TreeSelectRenderContainerProps} from '../../types';
 
 import {RenderVirtualizedContainer} from './RenderVirtualizedContainer';
 
@@ -21,11 +21,11 @@ export interface WithFiltrationAndControlsExampleProps
 
 export const WithFiltrationAndControlsExample = ({
     itemsCount = 5,
-    ...props
+    ...treeSelectProps
 }: WithFiltrationAndControlsExampleProps) => {
     const {items, renderContainer} = React.useMemo(() => {
         const baseItems = createRandomizedData({num: itemsCount});
-        const containerRenderer = (props: RenderContainerProps<{title: string}>) => {
+        const containerRenderer = (props: TreeSelectRenderContainerProps<{title: string}>) => {
             if (props.items.length === 0 && baseItems.length > 0) {
                 return (
                     <Flex centerContent className={spacing({p: 2})} height="300px">
@@ -47,13 +47,12 @@ export const WithFiltrationAndControlsExample = ({
     return (
         <Flex>
             <TreeSelect
-                {...props}
+                {...treeSelectProps}
                 multiple
                 open={open}
                 onOpenChange={onOpenChange}
                 slotBeforeListBody={
                     <TextInput
-                        autoFocus
                         hasClear
                         placeholder="Type for search..."
                         className={spacing({px: 2, py: 1})}

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -53,18 +53,18 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                 renderControlContent={mapCustomDataStructureToKnownProps}
                 expandedById={expandedById}
                 value={value}
-                renderItem={(
-                    item,
-                    {
+                renderItem={({
+                    data,
+                    props: {
                         expanded, // don't use default ListItemView expand icon
                         ...state
                     },
-                    {groupState},
-                ) => {
+                    itemState: {groupState},
+                }) => {
                     return (
                         <TreeSelectItem
                             {...state}
-                            {...mapCustomDataStructureToKnownProps(item)}
+                            {...mapCustomDataStructureToKnownProps(data)}
                             startSlot={
                                 <Icon size={16} data={groupState ? Database : PlugConnection} />
                             }

diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -42,22 +42,22 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
                     setOpen((x) => !x);
                 }}
                 expandedById={expandedById}
-                renderItem={(
-                    item,
-                    {
+                renderItem={({
+                    data,
+                    props: {
                         expanded, // don't use build in expand icon ListItemView behavior
                         ...state
                     },
-                    {groupState},
-                ) => {
+                    itemState: {groupState},
+                }) => {
                     return (
                         // eslint-disable-next-line jsx-a11y/anchor-is-valid
                         <a
                             href="#"
                             style={{textDecoration: 'none', color: 'inherit', width: '100%'}}
                         >
                             <TreeSelectItem
-                                {...item}
+                                {...data}
                                 {...state}
                                 endSlot={
                                     <DropdownMenu

diff --git a/src/components/TreeSelect/components/TreeListContainer/TreeListContainer.tsx b/src/components/TreeSelect/components/TreeListContainer/TreeListContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {RenderContainerProps} from 'src/components/TreeSelect/types';
+import type {TreeSelectRenderContainerProps} from 'src/components/TreeSelect/types';
 
 import {ListContainerView} from '../../../useList';
 import {ListItemRecursiveRenderer} from '../../../useList/components/ListRecursiveRenderer/ListRecursiveRenderer';
@@ -13,7 +13,7 @@ export const TreeListContainer = <T,>({
     renderItem,
     className,
     idToFlattenIndex,
-}: RenderContainerProps<T> & {className?: string}) => {
+}: TreeSelectRenderContainerProps<T> & {className?: string}) => {
     return (
         <ListContainerView ref={containerRef} className={className} id={id}>
             {items.map((itemSchema, index) => (

diff --git a/src/components/TreeSelect/index.ts b/src/components/TreeSelect/index.ts
@@ -1,3 +1,3 @@
 export {TreeSelect} from './TreeSelect';
 export {TreeSelectItem, type TreeSelectItemProps} from './TreeSelectItem';
-export type {TreeSelectProps, RenderItem} from './types';
+export type {TreeSelectProps, TreeSelectRenderItem} from './types';
diff --git a/src/components/TreeSelect/types.ts b/src/components/TreeSelect/types.ts
@@ -13,7 +13,7 @@ import type {
     RenderItemState,
 } from '../useList';
 
-export type RenderControlProps = {
+export type TreeSelectRenderControlProps = {
     open: boolean;
     toggleOpen(): void;
     clearValue(): void;
@@ -24,17 +24,17 @@ export type RenderControlProps = {
     activeItemId?: ListItemId;
 };
 
-export type RenderItem<T> = (
-    item: T,
+export type TreeSelectRenderItem<T, P extends {} = {}> = (props: {
+    data: T;
     // required item props to render
-    state: RenderItemState,
+    props: RenderItemState;
     // internal list context props
-    context: RenderItemContext,
-    index: number,
-    renderContextProps?: Object,
-) => React.JSX.Element;
+    itemState: RenderItemContext;
+    index: number;
+    renderContext?: P;
+}) => React.JSX.Element;
 
-export type RenderContainerProps<T> = ListParsedState<T> &
+export type TreeSelectRenderContainerProps<T> = ListParsedState<T> &
     ListState & {
         id: string;
         size: ListItemSize;
@@ -43,7 +43,9 @@ export type RenderContainerProps<T> = ListParsedState<T> &
         className?: string;
     };
 
-export type RenderTreeListContainer<T> = (props: RenderContainerProps<T>) => React.JSX.Element;
+export type TreeSelectRenderContainer<T> = (
+    props: TreeSelectRenderContainerProps<T>,
+) => React.JSX.Element;
 
 interface TreeSelectBaseProps<T> extends QAProps, Partial<Omit<ListState, 'selectedById'>> {
     value?: ListItemId[];
@@ -88,15 +90,15 @@ interface TreeSelectBaseProps<T> extends QAProps, Partial<Omit<ListState, 'selec
     /**
      * Ability to override custom toggler btn
      */
-    renderControl?(props: RenderControlProps): React.JSX.Element;
+    renderControl?(props: TreeSelectRenderControlProps): React.JSX.Element;
     /**
      * Override list item content by you custom node.
      */
-    renderItem?: RenderItem<T>;
+    renderItem?: TreeSelectRenderItem<T>;
     onClose?(): void;
     onUpdate?(value: ListItemId[], selectedItems: T[]): void;
     onOpenChange?(open: boolean): void;
-    renderContainer?: RenderTreeListContainer<T>;
+    renderContainer?: TreeSelectRenderContainer<T>;
     /**
      * If you wont to disable default behavior pass `disabled` as a value;
      */

diff --git a/src/components/useList/types.ts b/src/components/useList/types.ts
@@ -54,6 +54,11 @@ export interface OverrideItemContext {
 }
 
 export type RenderItemContext = {
+    /**
+     * optional, because ids may be skipped in the flatten order list,
+     * depending on the expanded state
+     */
+    visibleFlattenIndex?: number;
     itemState: ItemState;
     /**
      * Exists if item is group

diff --git a/src/components/useList/utils/getItemRenderState.tsx b/src/components/useList/utils/getItemRenderState.tsx
@@ -31,10 +31,12 @@ export const getItemRenderState = <T,>(
         selectedById,
         activeItemId,
         id,
+        idToFlattenIndex,
     }: ItemRendererProps<T>,
     {defaultExpanded = true}: {defaultExpanded?: boolean} = {},
 ) => {
     const context: RenderItemContext = {
+        visibleFlattenIndex: idToFlattenIndex[id],
         itemState: itemsState[id],
         groupState: groupsState[id],
         isLastItem: id === visibleFlattenIds[visibleFlattenIds.length - 1],