diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx index 46e3ca8be2..e9d78b769d 100644 --- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx +++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx @@ -2,7 +2,11 @@ import React from 'react'; import {Gear, Grip, Lock} from '@gravity-ui/icons'; import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd'; -import type {OnDragEndResponder} from 'react-beautiful-dnd'; +import type { + DraggableProvided, + DraggableStateSnapshot, + OnDragEndResponder, +} from 'react-beautiful-dnd'; import {useUniqId} from '../../../../../hooks'; import type {PopperPlacement} from '../../../../../hooks/private'; @@ -65,6 +69,11 @@ const prepareValue = (tableColumnItems: TableColumnSetupItem[]) => { return selectedIds; }; +interface RenderContextProps { + provided: DraggableProvided; + snapshot: DraggableStateSnapshot; +} + interface SwitcherProps { onKeyDown: React.KeyboardEventHandler; onClick: React.MouseEventHandler; @@ -93,7 +102,17 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine - + { + const renderContextProps: RenderContextProps = {provided, snapshot}; + return renderItem( + visibleFlattenIds[rubric.source.index], + rubric.source.index, + renderContextProps, + ); + }} + > {(droppableProvided) => { return (
{ - const renderDndItem: TreeSelectRenderItem = ({data, props, index}) => { + const renderDndItem: TreeSelectRenderItem = ({ + data, + props, + index, + renderContext: renderContextProps, + }) => { const isDragDisabled = sortable === false; const endSlot = @@ -129,6 +153,20 @@ const useDndRenderItem = (sortable: boolean | undefined) => { endSlot, }; + const renderItem = (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( + + ); + + if (renderContextProps) { + return renderItem(renderContextProps.provided, renderContextProps.snapshot); + } + return ( { key={`item-key-${data.id}`} isDragDisabled={isDragDisabled} > - {(provided, snapshot) => { - const style: React.CSSProperties = { - ...provided.draggableProps.style, - }; - - // not expected offset appears, one way to fix - remove this offsets explicitly - if (snapshot.isDragging) { - style.left = undefined; - style.top = undefined; - } - - return ( - - ); - }} + {renderItem} ); }; @@ -186,7 +203,7 @@ export interface TableColumnSetupProps { sortable?: boolean; onUpdate: (newSettings: TableSetting[]) => void; - popupWidth?: TreeSelectProps['popupWidth']; + popupWidth?: TreeSelectProps['popupWidth']; popupPlacement?: PopperPlacement; /** diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx index 2028e17a3d..1c271ee78b 100644 --- a/src/components/TreeSelect/TreeSelect.tsx +++ b/src/components/TreeSelect/TreeSelect.tsx @@ -258,4 +258,6 @@ export const TreeSelect = React.forwardRef(function TreeSelect( ); -}) as (props: TreeSelectProps & {ref?: React.Ref}) => React.ReactElement; +}) as ( + props: TreeSelectProps & {ref?: React.Ref}, +) => React.ReactElement; diff --git a/src/components/TreeSelect/types.ts b/src/components/TreeSelect/types.ts index ed9f8848c9..8e80fea9fe 100644 --- a/src/components/TreeSelect/types.ts +++ b/src/components/TreeSelect/types.ts @@ -43,7 +43,9 @@ export type TreeSelectRenderItem = (props: { export type TreeSelectRenderContainerProps = TreeListRenderContainerProps; export type TreeSelectRenderContainer = TreeListRenderContainer; -export interface TreeSelectProps extends QAProps, Partial> { +export interface TreeSelectProps + extends QAProps, + Partial> { value?: ListItemId[]; defaultOpen?: boolean; defaultValue?: ListItemId[]; @@ -95,7 +97,7 @@ export interface TreeSelectProps extends QAProps, Partial; + renderItem?: TreeSelectRenderItem; onClose?(): void; onUpdate?(value: ListItemId[], selectedItems: T[]): void; onOpenChange?(open: boolean): void;