search

markusenglund / react-switch

A draggable toggle-switch component for React. Check out the demo at:
https://react-switch.netlify.com/
MIT License
1.33k stars 100 forks source link

Add threshold check on pill's position #10

Closed gustavovnicius closed 6 years ago

gustavovnicius commented 6 years ago

It will only set $isDragging to true after the pill's position reaches a minimum threshold. If it doesn't, then it's considered a normal click event.

markusenglund commented 6 years ago

I understand what you're going for here. It's tough to say when something should be considered a click vs a drag. Personally, I think that 10 pixels is too far of a drag to be considered a click. Maybe somewhere in the area of 2-5 px would be good?

Right now the PR has the problem that the transition animations are dependent on the $isDragging variable. Transitions should be always off when dragging, but the change messes that up which makes dragging the first 10 pixels feel a little unresponsive.

Thinking off the top of my head here, but maybe a time based solution could also work? Clicks are usually short so it would be possible to set a maximum time threshold, where before the threshold everything is considered click but not after. Just a thought.

gustavovnicius commented 6 years ago

Yeah, I agree, 10px is too much. Perhaps both position and time then, whichever is reached first changes the event to drag. I'm gonna work a bit more on it, fix the problems, and push the changes soon.

markusenglund commented 6 years ago

Cool, I'm curious to see what you come up with.

markusenglund commented 6 years ago

I've implemented a time-based solution to the problem at #11