yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-13 16:52:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15192 from strapi/fix/relation-reordering-scrolling

Browse Source
This commit is contained in:
Josh 2022-12-16 14:17:02 +00:00 committed by GitHub
commit 1ad8af4237
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/docs/core/content-manager/hooks/use-drag-and-drop.mdx
View File

@ -132,7 +132,16 @@ import { ConnectDropTarget, ConnectDragSource, ConnectDragPreview } from 'react-
interface UseDragAndDropOptions { interface UseDragAndDropOptions {
index: number; index: number;
onMoveItem: (newIndex: number, currentIndex: number) => void; onMoveItem: (newIndex: number, currentIndex: number) => void;
/**
* @default "regular"
* Defines whether the change in index should be immediately over another
* dropzone or half way over it (regular).
*/
dropSensitivity?: 'immediate' | 'regular';
item?: object; item?: object;
/**
* @default 'STRAPI_DND'
*/
type?: string; type?: string;
onCancel?: (index: number) => void; onCancel?: (index: number) => void;
onDropItem?: (index: number) => void; onDropItem?: (index: number) => void;

4
packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
View File

@ -352,9 +352,7 @@ const RelationInput = ({
relations, relations,
updatePositionOfRelation: handleUpdatePositionOfRelation, updatePositionOfRelation: handleUpdatePositionOfRelation,
}} }}
itemKey={(index, { relations: relationsItems }) => itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
`${relationsItems[index].mainField}_${relationsItems[index].id}`
}
innerElementType="ol" innerElementType="ol"
> >
{ListItem} {ListItem}

2
packages/core/admin/admin/src/content-manager/components/RelationInput/components/RelationItem.js
View File

@ -50,11 +50,13 @@ export const RelationItem = ({
item: { item: {
displayedValue: displayValue, displayedValue: displayValue,
status, status,
id,
}, },
onGrabItem, onGrabItem,
onDropItem, onDropItem,
onCancel, onCancel,
onMoveItem: updatePositionOfRelation, onMoveItem: updatePositionOfRelation,
dropSensitivity: 'immediate',
}); });
const composedRefs = composeRefs(relationRef, dragRef); const composedRefs = composeRefs(relationRef, dragRef);

36
packages/core/admin/admin/src/content-manager/hooks/useDragAndDrop.js
View File

@ -12,6 +12,7 @@ import { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';
* item?: object, * item?: object,
* onStart?: () => void, * onStart?: () => void,
* onEnd?: () => void, * onEnd?: () => void,
* dropSensitivity?: 'regular' | 'immediate'
* } & import('./useKeyboardDragAndDrop').UseKeyboardDragAndDropCallbacks} * } & import('./useKeyboardDragAndDrop').UseKeyboardDragAndDropCallbacks}
*/ */
@ -39,6 +40,7 @@ export const useDragAndDrop = (
onDropItem, onDropItem,
onCancel, onCancel,
onMoveItem, onMoveItem,
dropSensitivity = 'regular',
} }
) => { ) => {
const objectRef = useRef(null); const objectRef = useRef(null);
@ -62,19 +64,21 @@ export const useDragAndDrop = (
return; return;
} }
const hoverBoundingRect = objectRef.current.getBoundingClientRect(); if (dropSensitivity === 'regular') {
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; const hoverBoundingRect = objectRef.current.getBoundingClientRect();
const clientOffset = monitor.getClientOffset(); const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
const hoverClientY = clientOffset.y - hoverBoundingRect.top; const clientOffset = monitor.getClientOffset();
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
// Dragging downwards // Dragging downwards
if (dragIndex < newInd && hoverClientY < hoverMiddleY) { if (dragIndex < newInd && hoverClientY < hoverMiddleY) {
return; return;
} }
// Dragging upwards // Dragging upwards
if (dragIndex > newInd && hoverClientY > hoverMiddleY) { if (dragIndex > newInd && hoverClientY > hoverMiddleY) {
return; return;
}
} }
// Time to actually perform the action // Time to actually perform the action
@ -104,6 +108,16 @@ export const useDragAndDrop = (
} }
}, },
canDrag: active, canDrag: active,
/**
* This is for useful when the item is in a virtualized list.
* However, if we don't have an ID then we want the libraries
* defaults to take care of this.
*/
isDragging: item.id
? (monitor) => {
return item.id === monitor.getItem().id;
}
: undefined,
collect: (monitor) => ({ collect: (monitor) => ({
isDragging: monitor.isDragging(), isDragging: monitor.isDragging(),
}), }),