fix(withTableSettings): renderClone for dnd (#1463)

gravity-ui · Apr 5, 2024 · 76409f4 · 76409f4
1 parent 1e5380f
commit 76409f4
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 29 deletions.
diff --git 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,35 +157,28 @@ 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}
                 index={index}
                 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
@@ -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
@@ -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;