-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Animate cancel #30
Animate cancel #30
Conversation
4f65507
to
93b8a2e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👌
export type CancelAction = { | ||
type: 'CANCEL', | ||
payload: DraggableId | ||
type CleanAction = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Separating out 'clean' from 'cancel'. Clean is driven by errors, cancel is driven by the user
@@ -156,22 +159,33 @@ export const makeSelector = () => { | |||
return defaultMapProps; | |||
} | |||
|
|||
if (pending.last.current.id !== id) { | |||
if (pending.result.draggableId !== id) { | |||
// This flag is a matter of degree. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A little rough edge that try to balance correctness with an a constantly interactive application
@@ -81,7 +81,7 @@ export type DispatchProps = { | |||
export type MapProps = {| | |||
isDragging: boolean, | |||
isDropAnimating: boolean, | |||
isAnotherDragging: boolean, | |||
canLift: boolean, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More explicit
): NotDraggingStyle => { | ||
const style: NotDraggingStyle = { | ||
transition: canAnimate ? css.outOfTheWay : null, | ||
transform: movementStyle.transform, | ||
pointerEvents: isAnotherDragging ? 'none' : 'auto', | ||
pointerEvents: canLift ? 'auto' : 'none', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
now this reads really naturally
@@ -11,6 +11,7 @@ export default class Placeholder extends PureComponent { | |||
const style = { | |||
width: this.props.width, | |||
height: this.props.height, | |||
pointerEvents: 'none', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
a little optimisation
@@ -507,6 +681,97 @@ describe('Draggable - connected', () => { | |||
}); | |||
}); | |||
|
|||
describe('selector isolation', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
being super paranoid
makeMapStateToProps(), | ||
// returning a function to ensure each | ||
// Draggable gets its own selector | ||
makeMapStateToProps, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was previously an error that caused needless memoization cache busts in certain circumstances. Now returning a function that returns selectors to ensure that each component gets its own selector
93b8a2e
to
b8d37b6
Compare
Currently drag 'cancel' actions are not animated. This behaviour was accounted for a one point before this library was public. It must have regressed when I made some serious changes to draggable and drag handle around animations and pointer events
This PR also improves a few minor performance issues
user-select: none
on placeholder