2.2.0
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
andisDropDisabled
to conditionally allow dropping on aDroppable
.
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!