Release 8.0.0 ยท atlassian/react-beautiful-dnd (original) (raw)
Improvements
23% faster ๐
We have shipped dragging performance improvements of 23% from cold start and 6% during subsequent drags
Measured on a list with 500
Draggables
We did this by:
- Less
DOM
reads #609 - Less state shape checking due to moving closer to an internal state machine #493
- No more double rendering of
Draggable
components for each mouse / touch movement #566. This involved working around a react-motion issue. - Audit and removal of redundant memoization layers. As a part of this work we ended up dropping reselect
18% smaller ๐ฅ #525
Our production builds have gone from 38 kb to 31 kb (gzip), a 18% reduction โ. The cost can be as low as 23 kb if you can deduplicate our dependencies (redux
, react-redux
and react-motion
are the main ones)
We did this by:
- Moving closer to an internal state machine #493. This resulted in less boilerplate code
- Refactoring ๐ค
- Dropping reselect and redux-thunk as dependencies. Not that they were very big to start with, but they were no longer needed.
- Stripping out
invariant
messages in production builds #597. Thanks @TrySound!!! - More aggressive use of production checks (
process.env.NODE_ENV === 'production'
) to strip out developer messaging in production builds - Moving to babel 7 #590. @TrySound did a great job getting this in!
- Removing timing debug code in production builds #603 Thanks @TrySound !!
Development messaging ๐โค๏ธ
Taking inspiration from React
, we have introduced a number of development only warnings to assist you with correctly using react-beautiful-dnd
:
provided.innerRef
: will now throw an exception if not provided with a HTMLElement. A common error is to incorrectly provide an instance of a component rather than a DOM reference. We also created a guide to assist users to correctly use theprovided.innerRef
callbacks: Using innerRef.DroppableProvided > placeholder
: if not included as a child of a Droppable a warning will be printed. Not including the placeholder can lead to space not being created in a list when being dragged over- Nested scroll containers: we currently do not support
Droppable
s that are in multiple scroll containers. Only single-level scroll containers are currently supported. We hope to add support for nested scroll containers soon: #131. In the meantime, we now warn users that nested scroll containers are not supported if we detect a nested scroll container.
These messages will be stripped in production builds
Improved recovery from any internal errors ๐๏ธ
Errors can happen (I know right!?). If react-beautiful-dnd
encounters an error in its code then it will attempt to recover as best as it can: clearing any existing drags and firing the appropriate DragDropContext > hook
functions. It will also log some helpful debug information in the console in development builds (process.env.ENV !== 'production'
)
Engineering health ๐ฉโโ๏ธ
- Moving closer to an internal state machine #493
- Fixing flakey browser test timeout issue #575. Thanks @RajaBellebon and @TrySound
- Moved from
flow
0.73
to0.75
#584 - Moving to prettier for style consistency enforcement rather than
eslint
. Still usingeslint
for non-style linting #552 - Upgrading dev dependencies to latest versions #584
- Continued investment in test improvement and refactoring #493
- Adding
stylelint
for internal examples #527. Thanks @xxhomey19
Other
- Allowing keyboard dragging between overlapping lists #317
- Fixing typo in
README.md
#535 Thanks @ipanasenko - Fixing link to portal guide #430. Thanks @gtgalone
- Adding Chinese ๐จ๐ณ translation to the repo #578. Thanks @chinanf-boy
Features
Drop information in the DraggableStateSnapshot
#559
We expose information to allow you to style a Draggable
while it is being dragged. This is done using the DraggableStateSnapshot
. We are adding an additional property isDropAnimating
which will be set to true when the Draggable
is drop animating. Not all drops have a drop animation. We do not animate a drop if the Draggable
is already in the correct spot when the drop occurs. This is commonly the case when dragging with a keyboard. isDragging
will continue to be set to true even when a drop is occurring. The drop animation is still apart of the 'drag' interaction and is not important when it comes to our public api. However, you can use the new isDropAnimating
property to apply some styles specifically when dropping if you would like to.
type DraggableStateSnapshot = {| isDragging: boolean,
- isDropAnimating: boolean, draggingOver: ?DroppableId, |};
This resulted in a minor version change
Changes
DraggableProvided > DraggableProps > DraggableStyle
Previously we were clearing the margin
off a dragging item. We realised this was not needed. Rather than keeping the margin
property around, we have decided to keep things as clean as possible and remove it.
type DraggingStyle = {| position: 'fixed', width: number, height: number, boxSizing: 'border-box', pointerEvents: 'none', top: number, left: number,
- margin: 0, transition: 'none', transform: ?string, zIndex: ZIndex, |}
This is a breaking change ๐ฅ as it is the removal of a property. Risk of breakage: low. This will only cause an issue if you were monkey patching the
margin
property.