Swiper stateless component for react

Swiper.js

import * as React from 'react';

class Swiper extends React.PureComponent {
  startPointX = 0;
  startPointY = 0;
  direction = null;
  clicked = false;

  onMoveStart = ({ event, x, y }) => {
    const { onMoveStart } = this.props;
    this.startPointX = x;
    this.startPointY = y;

    if (typeof onMoveStart === 'function') {
      onMoveStart({ event, x, y });
    }
  };

  onMove = ({ event, x, y }) => {
    const { onMove } = this.props;

    const currentTranslateX: number = x - this.startPointX;
    const currentTranslateY: number = y - this.startPointY;

    if (this.direction === null && (currentTranslateX !== 0 || currentTranslateY !== 0)) {
      if (Math.abs(currentTranslateX) > Math.abs(currentTranslateY)) {
        this.direction = 'X';
      } else {
        this.direction = 'Y';
      }
    }

    if (this.direction !== null && typeof onMove === 'function') {
      onMove({
        event,
        x: currentTranslateX,
        y: currentTranslateY,
        direction: this.direction
      });
    }
  };

  onMoveEnd = ({ event, x, y }) => {
    const { onMoveEnd } = this.props;

    if (typeof onMoveEnd === 'function') {
      onMoveEnd({
        event,
        x: x - this.startPointX,
        y: y - this.startPointY,
        direction: this.direction
      });
    }

    this.startPointX = 0;
    this.startPointY = 0;
    this.direction = null;
  };

  onTouchStart = (event) => {
    event.preventDefault();

    const changedTouch = event.changedTouches[0];

    this.onMoveStart({
      event,
      x: changedTouch.clientX,
      y: changedTouch.clientY
    });
  };

  onTouchMove = (event) => {
    event.preventDefault();

    const changedTouch = event.changedTouches[0];

    this.onMove({
      event,
      x: changedTouch.clientX,
      y: changedTouch.clientY
    });
  };

  onTouchEnd = (event) => {
    const changedTouch = event.changedTouches[0];

    this.onMoveEnd({
      event,
      x: changedTouch.clientX,
      y: changedTouch.clientY
    });
  };

  onMouseStart = (event) => {
    this.clicked = true;

    this.onMoveStart({
      event,
      x: event.pageX,
      y: event.pageY
    });
  };

  onMouseMove = (event) => {
    if (event.buttons === 1 && this.clicked) {
      event.preventDefault();

      this.onMove({
        event,
        x: event.pageX,
        y: event.pageY
      });
    }
  };

  onMouseEnd = (event) => {
    this.clicked = false;

    this.onMoveEnd({
      event,
      x: event.pageX,
      y: event.pageY
    });
  };

  render() {
    return (
      <div
        onTouchStart={this.onTouchStart}
        onTouchMove={this.onTouchMove}
        onTouchEnd={this.onTouchEnd}
        onMouseDown={this.onMouseStart}
        onMouseMove={this.onMouseMove}
        onMouseUp={this.onMouseEnd}
        onMouseLeave={this.onMouseEnd}
      >
        {this.props.children}
      </div>
    );
  }
}

export { Swiper };