From fdbb0525bf9991baa68ff0d3786050cac480f78f Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Fri, 22 Mar 2024 14:19:23 +0300 Subject: [PATCH] fix(TreeList): refactor item styles (#1439) --- .../TableColumnSetup/TableColumnSetup.tsx | 12 ++++----- .../components/RenderVirtualizedContainer.tsx | 9 ++++++- src/components/TreeSelect/TreeSelect.scss | 4 +++ src/components/TreeSelect/TreeSelect.tsx | 7 +++-- .../TreeSelectItem/TreeSelectItem.scss | 7 ----- .../TreeSelectItem/TreeSelectItem.tsx | 27 ------------------- .../TreeSelect/TreeSelectItem/index.ts | 1 - .../components/InfinityScrollExample.tsx | 5 ++-- .../components/WithDndListExample.tsx | 12 ++++----- .../WithFiltrationAndControlsExample.tsx | 7 ++++- ...pSelectionControlledStateAndCustomIcon.tsx | 5 ++-- .../WithItemLinksAndActionsExample.tsx | 4 +-- src/components/TreeSelect/index.ts | 1 - src/unstable.ts | 2 -- 14 files changed, 40 insertions(+), 63 deletions(-) delete mode 100644 src/components/TreeSelect/TreeSelectItem/TreeSelectItem.scss delete mode 100644 src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx delete mode 100644 src/components/TreeSelect/TreeSelectItem/index.ts diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx index 396d3b465d..46e3ca8be2 100644 --- 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,6 +83,7 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine items: _items, containerRef, id, + className, }) => { const visibleFlattenItemList = visibleFlattenIds.map((visibleFlattenId, idx) => renderItem(visibleFlattenId, idx), @@ -91,7 +91,7 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine return ( - + {(droppableProvided) => { @@ -148,7 +148,7 @@ const useDndRenderItem = (sortable: boolean | undefined) => { } return ( - { }; 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 index 0ed4d69b01..a751e3601d 100644 --- a/src/components/TreeList/__stories__/components/RenderVirtualizedContainer.tsx +++ b/src/components/TreeList/__stories__/components/RenderVirtualizedContainer.tsx @@ -11,9 +11,16 @@ export const RenderVirtualizedContainer = ({ visibleFlattenIds, renderItem, size, + className, }: TreeListRenderContainerProps) => { return ( - + computeItemSize(size)} diff --git a/src/components/TreeSelect/TreeSelect.scss b/src/components/TreeSelect/TreeSelect.scss index cde4d6d39b..bd7e427649 100644 --- 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 index 1372871224..f0d5ccf763 100644 --- 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 = (renderState) => { - return ; + return ; }; export const TreeSelect = React.forwardRef(function TreeSelect( @@ -241,7 +240,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect( 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 deleted file mode 100644 index 1e9abaf47d..0000000000 --- a/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '../../variables'; - -$block: '.#{variables.$ns}tree-select-item'; - -#{$block} { - padding: 0 var(--g-spacing-1); -} diff --git a/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx b/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx deleted file mode 100644 index 6a28815dea..0000000000 --- a/src/components/TreeSelect/TreeSelectItem/TreeSelectItem.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import {ListItemView} from '../../useList'; -import type {ListItemViewProps} from '../../useList'; -import {block} from '../../utils/cn'; - -import './TreeSelectItem.scss'; - -const b = block('tree-select-item'); - -export interface TreeSelectItemProps extends Omit { - as?: 'div' | 'li'; - wrapperClassName?: string; -} - -export const TreeSelectItem = React.forwardRef(function TreeSelectItem( - {as = 'div', className, wrapperClassName, ...props}: TreeSelectItemProps, - ref?: any, -) { - const Tag: React.ElementType = as; - - return ( - - - - ); -}); diff --git a/src/components/TreeSelect/TreeSelectItem/index.ts b/src/components/TreeSelect/TreeSelectItem/index.ts deleted file mode 100644 index 8bde947111..0000000000 --- a/src/components/TreeSelect/TreeSelectItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TreeSelectItem'; diff --git a/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx b/src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx index 138583ed83..0761d9f4f7 100644 --- 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(value: T): T { @@ -43,9 +43,10 @@ export const InfinityScrollExample = ({ value={value} renderItem={({data, props, itemState: {isLastItem, groupState}}) => { const node = ( - {groupState.childrenIds.length} diff --git a/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx b/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx index 8d5303c5b2..02bc54f54c 100644 --- 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 ( - { 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) => ( - +
} + renderItem={({props, data}) => ( +
+ +
+ )} renderContainer={renderContainer} slotAfterListBody={ diff --git a/src/components/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/src/components/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx index a761906164..754874cf2c 100644 --- a/src/components/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx +++ b/src/components/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 ( - (value: T): T { @@ -60,7 +60,7 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa href="#" style={{textDecoration: 'none', color: 'inherit', width: '100%'}} > -