Skip to content
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

Merged
merged 1 commit into from
Aug 15, 2017
Merged

Animate cancel #30

merged 1 commit into from
Aug 15, 2017

Conversation

alexreardon
Copy link
Collaborator

@alexreardon alexreardon commented Aug 14, 2017

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

  • squash into single commit
  • review the hooks tests
  • ensure animations work with window and container scrolling

This PR also improves a few minor performance issues

  • selectors are no longer partially shared across connected components
  • user-select: none on placeholder

@alexreardon alexreardon force-pushed the animate-cancel branch 2 times, most recently from 4f65507 to 93b8a2e Compare August 15, 2017 00:20
Copy link
Collaborator Author

@alexreardon alexreardon left a 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 = {
Copy link
Collaborator Author

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.
Copy link
Collaborator Author

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,
Copy link
Collaborator Author

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',
Copy link
Collaborator Author

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',
Copy link
Collaborator Author

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', () => {
Copy link
Collaborator Author

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,
Copy link
Collaborator Author

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

@alexreardon
Copy link
Collaborator Author

Here is the new behaviour in action:

example

@alexreardon alexreardon merged commit feb04b7 into master Aug 15, 2017
@alexreardon alexreardon deleted the animate-cancel branch August 15, 2017 01:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant