[React] How to customize OptimisticSorting / Feedback?
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
Hey guys,
I have a sortable grid that requires a bit of custom functionality. The grid needs to behave as such that if an item is dropped on the left/right 33% of another grid item, it's positioned on the left/right of it once the item is dropped. If it's dropped on the center it needs to be 'combined' into a folder.
To facilitate this, I've created a custom collisionDetector that adds a 'zone' to the returned data. This all seems to work as expected.
```
const getHorizontalZone: CollisionDetector = ({ dragOperation, droppable }) => {
const pointerCoordinates = dragOperation.position.current;
if (
!droppable.shape ||
!pointerCoordinates ||
!droppable.shape.containsPoint(pointerCoordinates)
) {
return null;
}
const droppingRect = droppable.shape.boundingRectangle;
const relativeX = pointerCoordinates.x - droppingRect.left;
const third = droppingRect.width / 3;
const zone: DropZone =
relativeX < third
? "left"
: relativeX < third * 2
? "middle"
: "right";
return {
id: droppable.id,
value: 1,
priority: CollisionPriority.Normal,
type: CollisionType.Collision,
data: {
zone,
},
};
};
// Within my grid item:
useSortable({ id: item.id, index, collisionDetector: getHorizontalZone });
```
The problems I'm facing is that I need to overrule the feedback and / or the optimistic sorting that happens and I'm not exactly sure how.
Ideally, I don't want to apply optimistic sorting and as feedback I'd like my grid items to 'make a little' space for the new item, but not as much as the whole item (as what currently happens). When the target zone is 'middle', the target item should scale a bit.
I've tried toying around with my own Feedback plugin based off of the actual Feedback plugin, but console.logs don't show up and any tweaks I make to the applied styles don't seem to work either :( The only this that gives me any effect really is changing the configuration 'feedback'. I'm kind of lost and frustrated at the moment...
Can anyone please give me some pointers on where I should start?
Contributor guide
Research direction
Start with the useSortable call and the custom collisionDetector shown in the issue, then read the existing Feedback plugin and the feedback configuration path. Determine which extension points control optimistic sorting, feedback styles, and the returned zone data. Done means identifying a supported way to suppress or adjust sorting feedback and handle the left, middle, and right zones.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100