Add onStartSwipe, onSwipeMove and onEndSwipe event handlers

[derUli]

Is your feature request related to a problem? Please describe.
I have to use react-swipeable-list in combination with the react-sortable-hoc node module.
Horizontally swipes are implemented with this module and the sorting is implemented with react-sortable-hoc.
My issue is, that if I swipe horizontally it also causes the sorting of the react-sortable-hoc component to start dragging at the same time.
My idea to fix this is to give the react-sortable-hoc component an higher drag delay than react-swipable list and to use it's shouldCancelStart callback, to disable its sorting while the user is swiping left or right.

Describe the solution you'd like
To detect if a swipe is in progress I need an onStartSwipe event, which is called if the user clicks / touches this component and moves his cursor horizontally and an onEndSwipe event which is called when the user aborts the swipe gesture or finishes it.
I need also the possibility to check how much percentage of an item is colored while the user does a swipe gesture, something like an "on move while mouse down".

[marekrozmus]

@derUli Thanks for feature proposal 🙂

Please check if this is what you wanted:
npm install git://github.com/sandstreamdev/react-swipeable-list.git#closes_issue_77

If yes then I'll add it in next release which should be ready at the begining of next week.

[derUli]

Thank you for your fast implementation.
It will take some time until I or a colleague has time to take a look at this, since we have currently other important things to work on.
Will post feedback when we integrate this into our product.

[derUli]

Code looks okay.
But since we use TypeScript we need also updated type declarations to use this new feature.
Would you add this to the branch, please?
Thank You.

https://github.com/sandstreamdev/react-swipeable-list/blob/closes_issue_77/src/module.d.ts

[marekrozmus]

d.ts is updated and changed the progress callback name. I'll try to make release this week if this version work for you 🙂

[derUli]

The new properties should always be optional, because else this will break existing code when developers update their node packages.

It works often but in sometimes I get this errors in the devtools console:

• Uncaught TypeError: Cannot read property 'offsetWidth' of null
• Uncaught TypeError: Cannot set property 'className' of null

If that happens my code behaves like previously the item drags and swipes at the same time

[marekrozmus]

My bad, I forgot the ? postfixes :/ It is fixed now.

About the errors: were they present in released version also or only in this branch?

[derUli]

There errors appear more often on mobile phones than in desktop browsers
The errors happen only if I have react-swipeable-list nested in a react-sortable-hoc as described in the initial issue description.
So it could be some conflict between react-sortable-hoc and react-swipeable-list.
However this don't happen always.

To give you some context here are some code excerpts around the line where the error happens from the browser's dev tools.

Uncaught TypeError: Cannot set property 'className' of null

      _defineProperty(_assertThisInitialized(_this), "handleDragEnd", function () {
        if (_this.isSwiping()) {
          var threshold = _this.props.threshold || 0.5;

          if (_this.left < _this.listElement.offsetWidth * threshold * -1) {
            _this.handleSwipedLeft();
          } else if (_this.left > _this.listElement.offsetWidth * threshold) {
            _this.handleSwipedRight();
          }

          if (_this.props.onSwipeEnd) {
            _this.props.onSwipeEnd();
          }
        }

        _this.resetState();

       // here happens the first null pointer 
        _this.listElement.className = styles$1.contentReturn;
        _this.listElement.style.transform = "translateX(".concat(_this.left, "px)"); // hide backgrounds

        if (_this.contentLeft) {
          _this.contentLeft.style.opacity = 0;
          _this.contentLeft.className = styles$1.contentLeftReturn;
        }

Uncaught TypeError: Cannot read property 'removeEventListener' of null

      _defineProperty(_assertThisInitialized(_this), "handleDragEndMouse", function () {
        window.removeEventListener('mouseup', _this.handleDragEndMouse);
        window.removeEventListener('mousemove', _this.handleMouseMove);
         // Nullpointer
        _this.wrapper.removeEventListener('mouseup', _this.handleDragEndMouse);

        _this.wrapper.removeEventListener('mousemove', _this.handleMouseMove);

        _this.handleDragEnd();
      });

[marekrozmus]

Thank you for such detailed answer :) I hope I'll have time to close this issue this week.

[marekrozmus]

@all-contributors please add @derUli for ideas

[allcontributors]

@marekrozmus

I've put up a pull request to add @derUli! 🎉

[derUli]

@marekrozmus
Unfortunately the nullpointer in handleDragEnd is still happening for me.
Uncaught TypeError: Cannot read property 'offsetWidth' of null