atlassian/react-beautiful-dnd v2.2.0

2.2.0

on GitHub

Features

Moving between lists 🎉 #2 #3 #4

Horizontal	Vertical (more complex than a board)

• Adding support for moving between vertical and horizontal lists
• Works with both mouse and keyboard (thats right - keyboard!!)
• You can now utilise type and isDropDisabled to conditionally allow dropping on a Droppable.

This was a mammoth effort with 135 commits, 120 files changed and 176 new tests. But what is harder to see how much @jaredcrowe and I wrestled with creating a transition experience that is robust, flexible and natural. I will be writing a blog soon about some of the algorithms (a small collision engine) we came up to drive our beautiful and natural experience.

Thanks so much to @jaredcrowe for his significant contributions - both in code as well as discussions.

Changes

DraggableProvided placeholder

In order to support moving between lists a Droppable is now provided with a placeholder element (similar to that of a Draggable)

type DroppableProvided = {|
  innerRef: (?HTMLElement) => void,
+ placeholder: ?ReactElement,
|}

The Droppable placeholder needs to be inside the element that you are providing. This is not like Draggable where the placeholder needs to be a sibling of the provided element.

<Droppable droppableId="droppable-1">
  {(provided, snapshot) => (
    <div ref={provided.innerRef}>
      Good to go

+    {provided.placeholder}
    </div>
  )}
</Droppable>;

Is that all?

Yep! The original API was designed with this feature in mind so there is no other changes required. In order to allow Draggables to transition to different Droppables ensure that they share the same type prop (which can be the default type if no type prop is provided). That's, all! Enjoy!

Improvements

• Increased the React peer dependency range. #84 Thanks @pofigizm!
• Tones of refactoring and engineering health efforts all over the code base #2

Notes

This release brings to a close the first milestone for this project: Tree fort. Be sure to check out the other milestones to see what is coming next.

Thanks everyone!