From 76409f4c382bf9a73a9619cde84f11d77e78f3d7 Mon Sep 17 00:00:00 2001
From: zzman <43282255+GermanVor@users.noreply.github.com>
Date: Fri, 5 Apr 2024 21:16:45 +0200
Subject: [PATCH] fix(withTableSettings): renderClone for dnd (#1463)

---
 .../TableColumnSetup/TableColumnSetup.tsx     | 73 ++++++++++++-------
 src/components/TreeSelect/TreeSelect.tsx      |  4 +-
 src/components/TreeSelect/types.ts            |  6 +-
 3 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
index 46e3ca8be2..a4309e2ec2 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 RenderContainerProps {
+    provided: DraggableProvided;
+    snapshot: DraggableStateSnapshot;
+}
+
 interface SwitcherProps {
     onKeyDown: React.KeyboardEventHandler<HTMLElement>;
     onClick: React.MouseEventHandler<HTMLElement>;
@@ -93,7 +102,21 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine
             <React.Fragment>
                 <ListContainerView ref={containerRef} id={id} className={className}>
                     <DragDropContext onDragEnd={onDragEnd}>
-                        <Droppable droppableId={uniqId}>
+                        <Droppable
+                            droppableId={uniqId}
+                            renderClone={(provided, snapshot, rubric) => {
+                                const renderContainerProps: RenderContainerProps = {
+                                    provided,
+                                    snapshot,
+                                };
+
+                                return renderItem(
+                                    visibleFlattenIds[rubric.source.index],
+                                    rubric.source.index,
+                                    renderContainerProps,
+                                );
+                            }}
+                        >
                             {(droppableProvided) => {
                                 return (
                                     <div
@@ -117,7 +140,12 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine
 };
 
 const useDndRenderItem = (sortable: boolean | undefined) => {
-    const renderDndItem: TreeSelectRenderItem<Item> = ({data, props, index}) => {
+    const renderDndItem: TreeSelectRenderItem<Item, RenderContainerProps> = ({
+        data,
+        props,
+        index,
+        renderContainerProps,
+    }) => {
         const isDragDisabled = sortable === false;
 
         const endSlot =
@@ -129,6 +157,20 @@ const useDndRenderItem = (sortable: boolean | undefined) => {
             endSlot,
         };
 
+        const renderItem = (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
+            <ListItemView
+                {...commonProps}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+                ref={provided.innerRef}
+                dragging={snapshot.isDragging}
+            />
+        );
+
+        if (renderContainerProps) {
+            return renderItem(renderContainerProps.provided, renderContainerProps.snapshot);
+        }
+
         return (
             <Draggable
                 draggableId={data.id}
@@ -136,28 +178,7 @@ const useDndRenderItem = (sortable: boolean | undefined) => {
                 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 (
-                        <ListItemView
-                            ref={provided.innerRef}
-                            {...commonProps}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            style={style}
-                            dragging={snapshot.isDragging}
-                        />
-                    );
-                }}
+                {renderItem}
             </Draggable>
         );
     };
@@ -186,7 +207,7 @@ export interface TableColumnSetupProps {
     sortable?: boolean;
 
     onUpdate: (newSettings: TableSetting[]) => void;
-    popupWidth?: TreeSelectProps<any>['popupWidth'];
+    popupWidth?: TreeSelectProps<unknown>['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<T>(
             </SelectPopup>
         </Flex>
     );
-}) as <T>(props: TreeSelectProps<T> & {ref?: React.Ref<HTMLDivElement>}) => React.ReactElement;
+}) as <T, P extends {} = {}>(
+    props: TreeSelectProps<T, P> & {ref?: React.Ref<HTMLDivElement>},
+) => 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<T, P extends {} = {}> = (props: {
 export type TreeSelectRenderContainerProps<T> = TreeListRenderContainerProps<T>;
 export type TreeSelectRenderContainer<T> = TreeListRenderContainer<T>;
 
-export interface TreeSelectProps<T> extends QAProps, Partial<Omit<ListState, 'selectedById'>> {
+export interface TreeSelectProps<T, P extends {} = {}>
+    extends QAProps,
+        Partial<Omit<ListState, 'selectedById'>> {
     value?: ListItemId[];
     defaultOpen?: boolean;
     defaultValue?: ListItemId[];
@@ -95,7 +97,7 @@ export interface TreeSelectProps<T> extends QAProps, Partial<Omit<ListState, 'se
     /**
      * Override list item content by you custom node.
      */
-    renderItem?: TreeSelectRenderItem<T>;
+    renderItem?: TreeSelectRenderItem<T, P>;
     onClose?(): void;
     onUpdate?(value: ListItemId[], selectedItems: T[]): void;
     onOpenChange?(open: boolean): void;