fix(TreeList): refactor item styles (#1439)

gravity-ui · Mar 22, 2024 · fdbb052 · fdbb052
1 parent ce75de8
commit fdbb052
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 63 deletions.
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -10,14 +10,13 @@ import {createOnKeyDownHandler} from '../../../../../hooks/useActionHandlers/use
 import {Button} from '../../../../Button';
 import {Icon} from '../../../../Icon';
 import {TreeSelect} from '../../../../TreeSelect/TreeSelect';
-import {TreeSelectItem} from '../../../../TreeSelect/TreeSelectItem';
-import type {TreeSelectItemProps} from '../../../../TreeSelect/TreeSelectItem';
 import type {
     TreeSelectProps,
     TreeSelectRenderContainer,
     TreeSelectRenderItem,
 } from '../../../../TreeSelect/types';
-import {ListContainerView} from '../../../../useList';
+import type {ListItemViewProps} from '../../../../useList';
+import {ListContainerView, ListItemView} from '../../../../useList';
 import {block} from '../../../../utils/cn';
 import type {TableColumnSetupItem, TableSetting} from '../withTableSettings';
 
@@ -84,14 +83,15 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine
         items: _items,
         containerRef,
         id,
+        className,
     }) => {
         const visibleFlattenItemList = visibleFlattenIds.map((visibleFlattenId, idx) =>
             renderItem(visibleFlattenId, idx),
         );
 
         return (
             <React.Fragment>
-                <ListContainerView ref={containerRef} id={id}>
+                <ListContainerView ref={containerRef} id={id} className={className}>
                     <DragDropContext onDragEnd={onDragEnd}>
                         <Droppable droppableId={uniqId}>
                             {(droppableProvided) => {
@@ -148,7 +148,7 @@ const useDndRenderItem = (sortable: boolean | undefined) => {
                     }
 
                     return (
-                        <TreeSelectItem
+                        <ListItemView
                             ref={provided.innerRef}
                             {...commonProps}
                             {...provided.draggableProps}
@@ -166,7 +166,7 @@ const useDndRenderItem = (sortable: boolean | undefined) => {
 };
 
 type Item = TableColumnSetupItem &
-    TreeSelectItemProps & {
+    ListItemViewProps & {
         id: string;
         isDragDisabled?: boolean;
     };

diff --git a/src/components/TreeList/__stories__/components/RenderVirtualizedContainer.tsx b/src/components/TreeList/__stories__/components/RenderVirtualizedContainer.tsx
@@ -11,9 +11,16 @@ export const RenderVirtualizedContainer = <T,>({
     visibleFlattenIds,
     renderItem,
     size,
+    className,
 }: TreeListRenderContainerProps<T>) => {
     return (
-        <ListContainerView fixedHeight id={id} ref={containerRef}>
+        <ListContainerView
+            fixedHeight
+            id={id}
+            ref={containerRef}
+            className={className}
+            extraProps={{style: {padding: 0}}}
+        >
             <VirtualizedListContainer
                 items={visibleFlattenIds}
                 itemSize={(_index) => computeItemSize(size)}

diff --git a/src/components/TreeSelect/TreeSelect.scss b/src/components/TreeSelect/TreeSelect.scss
@@ -14,4 +14,8 @@ $block: '.#{variables.$ns}tree-select';
         border-radius: 6px;
         overflow: hidden;
     }
+
+    &__list {
+        padding: 0 4px;
+    }
 }
diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -7,12 +7,11 @@ import {TreeList} from '../TreeList';
 import type {TreeListOnItemClick, TreeListRenderItem} from '../TreeList/types';
 import {Flex} from '../layout';
 import {useMobile} from '../mobile';
-import {scrollToListItem, useList, useListState} from '../useList';
+import {ListItemView, scrollToListItem, useList, useListState} from '../useList';
 import type {ListItemId} from '../useList';
 import {block} from '../utils/cn';
 import type {CnMods} from '../utils/cn';
 
-import {TreeSelectItem} from './TreeSelectItem';
 import {useTreeSelectSelection, useValue} from './hooks/useTreeSelectSelection';
 import type {TreeSelectProps, TreeSelectRenderControlProps} from './types';
 
@@ -21,7 +20,7 @@ import './TreeSelect.scss';
 const b = block('tree-select');
 
 const defaultItemRenderer: TreeListRenderItem<unknown> = (renderState) => {
-    return <TreeSelectItem {...renderState.props} {...renderState.renderContext} />;
+    return <ListItemView {...renderState.props} {...renderState.renderContext} />;
 };
 
 export const TreeSelect = React.forwardRef(function TreeSelect<T>(
@@ -241,7 +240,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
 
                 <TreeList<T>
                     size={size}
-                    className={containerClassName}
+                    className={b('list', containerClassName)}
                     qa={qa}
                     multiple={multiple}
                     id={`list-${treeSelectId}`}

diff --git a/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.scss b/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.scss
diff --git a/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx b/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx
diff --git a/src/components/TreeSelect/TreeSelectItem/index.ts b/src/components/TreeSelect/TreeSelectItem/index.ts
diff --git a/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx b/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx
@@ -4,10 +4,10 @@ import {Label} from '../../../Label';
 import {Loader} from '../../../Loader';
 import {RenderVirtualizedContainer} from '../../../TreeList/__stories__/components/RenderVirtualizedContainer';
 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 {TreeSelect} from '../../TreeSelect';
-import {TreeSelectItem} from '../../TreeSelectItem';
 import type {TreeSelectProps} from '../../types';
 
 function identity<T>(value: T): T {
@@ -43,9 +43,10 @@ export const InfinityScrollExample = ({
                 value={value}
                 renderItem={({data, props, itemState: {isLastItem, groupState}}) => {
                     const node = (
-                        <TreeSelectItem
+                        <ListItemView
                             {...props}
                             {...data}
+                            style={{marginInline: 4}}
                             endSlot={
                                 groupState ? (
                                     <Label>{groupState.childrenIds.length}</Label>

diff --git a/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx b/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx
@@ -12,20 +12,19 @@ import type {
 
 import {Icon} from '../../../Icon';
 import {Flex} from '../../../layout';
-import {ListContainerView} from '../../../useList';
+import type {ListItemViewProps} from '../../../useList';
+import {ListContainerView, ListItemView} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {reorderArray} from '../../../useList/__stories__/utils/reorderArray';
 import {TreeSelect} from '../../TreeSelect';
-import {TreeSelectItem} from '../../TreeSelectItem';
-import type {TreeSelectItemProps} from '../../TreeSelectItem';
 import type {TreeSelectProps, TreeSelectRenderContainer, TreeSelectRenderItem} from '../../types';
 
 const DraggableListItem = ({
     provided,
     ...props
-}: {provided?: DraggableProvided} & TreeSelectItemProps) => {
+}: {provided?: DraggableProvided} & ListItemViewProps) => {
     return (
-        <TreeSelectItem
+        <ListItemView
             {...provided?.dragHandleProps}
             {...provided?.draggableProps}
             ref={provided?.innerRef}
@@ -58,6 +57,7 @@ export const WithDndListExample = (storyProps: WithDndListExampleProps) => {
         visibleFlattenIds,
         containerRef,
         id,
+        className,
     }) => {
         const handleDrugEnd: OnDragEndResponder = ({destination, source}) => {
             if (typeof destination?.index === 'number' && destination.index !== source.index) {
@@ -89,7 +89,7 @@ export const WithDndListExample = (storyProps: WithDndListExampleProps) => {
                     }}
                 >
                     {(droppableProvided: DroppableProvided) => (
-                        <ListContainerView ref={containerRef} id={id}>
+                        <ListContainerView ref={containerRef} id={id} className={className}>
                             <div
                                 {...droppableProvided.droppableProps}
                                 ref={droppableProvided.innerRef}

diff --git a/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx b/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx
@@ -5,7 +5,7 @@ import {Text} from '../../../Text';
 import {RenderVirtualizedContainer} from '../../../TreeList/__stories__/components/RenderVirtualizedContainer';
 import {TextInput} from '../../../controls';
 import {Flex, spacing} from '../../../layout';
-import {useListFilter} from '../../../useList';
+import {ListItemView, useListFilter} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
 import type {TreeSelectProps, TreeSelectRenderContainer} from '../../types';
@@ -68,6 +68,11 @@ export const WithFiltrationAndControlsExample = ({
                         ref={filterState.filterRef}
                     />
                 }
+                renderItem={({props, data}) => (
+                    <div style={{paddingInline: 8}}>
+                        <ListItemView {...props} {...data} />
+                    </div>
+                )}
                 renderContainer={renderContainer}
                 slotAfterListBody={
                     <Flex gap="2" className={spacing({px: 2, py: 1})}>

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -5,11 +5,10 @@ import {ChevronDown, ChevronUp, Database, PlugConnection} from '@gravity-ui/icon
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
 import {Flex, spacing} from '../../../layout';
-import {getListParsedState} from '../../../useList';
+import {ListItemView, getListParsedState} from '../../../useList';
 import type {KnownItemStructure, ListItemId} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
-import {TreeSelectItem} from '../../TreeSelectItem';
 import type {TreeSelectProps} from '../../types';
 
 /**
@@ -62,7 +61,7 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                     itemState: {groupState},
                 }) => {
                     return (
-                        <TreeSelectItem
+                        <ListItemView
                             {...state}
                             {...mapCustomDataStructureToKnownProps(data)}
                             startSlot={

diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -7,9 +7,9 @@ import {DropdownMenu} from '../../../DropdownMenu';
 import {Icon} from '../../../Icon';
 import {Flex} from '../../../layout';
 import type {ListItemId} from '../../../useList';
+import {ListItemView} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
-import {TreeSelectItem} from '../../TreeSelectItem';
 import type {TreeSelectProps} from '../../types';
 
 function identity<T>(value: T): T {
@@ -60,7 +60,7 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
                             href="#"
                             style={{textDecoration: 'none', color: 'inherit', width: '100%'}}
                         >
-                            <TreeSelectItem
+                            <ListItemView
                                 {...data}
                                 {...state}
                                 endSlot={

diff --git a/src/components/TreeSelect/index.ts b/src/components/TreeSelect/index.ts
@@ -1,3 +1,2 @@
 export {TreeSelect} from './TreeSelect';
-export {TreeSelectItem, type TreeSelectItemProps} from './TreeSelectItem';
 export type {TreeSelectProps, TreeSelectRenderItem} from './types';
diff --git a/src/unstable.ts b/src/unstable.ts
@@ -8,8 +8,6 @@ export {
 export {
     TreeSelect as unstable_TreeSelect,
     type TreeSelectProps as unstable_TreeSelectProps,
-    TreeSelectItem as unstable_TreeSelectItem,
-    type TreeSelectItemProps as unstable_TreeSelectItemProps,
 } from './components/TreeSelect';
 export {
     TreeList as unstable_TreeList,