From 215c038e8cc471c7afce4cbb3c25d4c029facaeb Mon Sep 17 00:00:00 2001 From: GermanVor Date: Fri, 29 Mar 2024 13:52:22 +0100 Subject: [PATCH 1/3] fix: renderClone for dnd --- .../TableColumnSetup/TableColumnSetup.tsx | 69 ++++++++++++------- src/components/TreeSelect/TreeSelect.tsx | 4 +- src/components/TreeSelect/types.ts | 6 +- 3 files changed, 50 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..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; From e94a4947f4256eb592a7ec2c07b90051cbb12e2a Mon Sep 17 00:00:00 2001 From: GermanVor Date: Mon, 1 Apr 2024 19:04:09 +0200 Subject: [PATCH 2/3] chore: dragging property --- .../hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx index e9d78b769d..f50776c70f 100644 --- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx +++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx @@ -159,7 +159,7 @@ const useDndRenderItem = (sortable: boolean | undefined) => { {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} - active={snapshot.isDragging} + dragging={snapshot.isDragging} /> ); From d97832be5559b71a5dc3c520ae3558aa44732c3b Mon Sep 17 00:00:00 2001 From: GermanVor Date: Tue, 2 Apr 2024 17:32:23 +0200 Subject: [PATCH 3/3] chore: renderContainerProps --- .../TableColumnSetup/TableColumnSetup.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx index f50776c70f..a4309e2ec2 100644 --- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx +++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx @@ -69,7 +69,7 @@ const prepareValue = (tableColumnItems: TableColumnSetupItem[]) => { return selectedIds; }; -interface RenderContextProps { +interface RenderContainerProps { provided: DraggableProvided; snapshot: DraggableStateSnapshot; } @@ -105,11 +105,15 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine { - const renderContextProps: RenderContextProps = {provided, snapshot}; + const renderContainerProps: RenderContainerProps = { + provided, + snapshot, + }; + return renderItem( visibleFlattenIds[rubric.source.index], rubric.source.index, - renderContextProps, + renderContainerProps, ); }} > @@ -136,11 +140,11 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine }; const useDndRenderItem = (sortable: boolean | undefined) => { - const renderDndItem: TreeSelectRenderItem = ({ + const renderDndItem: TreeSelectRenderItem = ({ data, props, index, - renderContext: renderContextProps, + renderContainerProps, }) => { const isDragDisabled = sortable === false; @@ -163,8 +167,8 @@ const useDndRenderItem = (sortable: boolean | undefined) => { /> ); - if (renderContextProps) { - return renderItem(renderContextProps.provided, renderContextProps.snapshot); + if (renderContainerProps) { + return renderItem(renderContainerProps.provided, renderContainerProps.snapshot); } return (