@kiwicom/orbit-components/lib/HorizontalScroll/useScroll.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = require("react");

var _helpers = require("./helpers");

const timing = 1 / 60 * 1000; // eslint-disable-next-line no-bitwise

const decay = v => -0.1 * (1 / timing ^ 4) + v;

const useScroll = ref => {
  const [clickStartX, setClickStartX] = (0, _react.useState)();
  const [scrollStartX, setScrollStartX] = (0, _react.useState)();
  const [isDragging, setIsDragging] = (0, _react.useState)(false);
  const [direction, setDirection] = (0, _react.useState)(0);
  const [momentum, setMomentum] = (0, _react.useState)(0);
  const [lastScrollX, setLastScrollX] = (0, _react.useState)(0);
  const [speed, setSpeed] = (0, _react.useState)(0);
  const [reachedStart, setReachedStart] = (0, _react.useState)(false);
  const scrollWrapperCurrent = ref.current;
  const handleLastScrollX = (0, _react.useCallback)(x => setLastScrollX(x), []);
  const handleMomentum = (0, _helpers.throttle)(nextMomentum => {
    setMomentum(nextMomentum);

    if (scrollWrapperCurrent) {
      scrollWrapperCurrent.scrollLeft += nextMomentum * timing * direction;
    }
  }, timing);
  (0, _react.useEffect)(() => {
    if (direction !== 0) {
      if (momentum > 0.1 && !isDragging) {
        handleMomentum(decay(momentum));
      } else if (isDragging) {
        setMomentum(speed);
      } else {
        setDirection(0);
      }
    }
  }, [momentum, isDragging, speed, direction, handleMomentum]);
  (0, _react.useEffect)(() => {
    if (ref.current) {
      const handleDragStart = e => {
        var _ref$current;

        setClickStartX(e.screenX);
        setScrollStartX((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollLeft);
        setDirection(0);
      };

      const handleDragMove = e => {
        e.preventDefault();
        e.stopPropagation();

        if (clickStartX !== undefined && scrollStartX !== undefined && ref.current) {
          const touchDelta = clickStartX - e.screenX; // eslint-disable-next-line no-param-reassign

          ref.current.scrollLeft = scrollStartX + touchDelta;

          if (Math.abs(touchDelta) > 1) {
            setIsDragging(true);
            setDirection(touchDelta / Math.abs(touchDelta));
            setSpeed(Math.abs((lastScrollX - e.screenX) / timing));
            handleLastScrollX(e.screenX);
          }
        }
      };

      const handleDragEnd = () => {
        if (isDragging && clickStartX !== undefined) {
          var _ref$current2;

          setClickStartX(undefined);
          setScrollStartX(undefined);
          setIsDragging(false);

          if (((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollLeft) === 0) {
            setReachedStart(true);
          } else {
            setReachedStart(false);
          }
        }
      }; // $FlowFixMe: on mobile browser is null, on desktop is undefined


      if (ref.current && ref.current.ontouchstart === undefined) {
        // eslint-disable-next-line no-param-reassign
        ref.current.onmousedown = handleDragStart; // eslint-disable-next-line no-param-reassign

        ref.current.onmousemove = handleDragMove; // eslint-disable-next-line no-param-reassign

        ref.current.onmouseup = handleDragEnd; // eslint-disable-next-line no-param-reassign

        ref.current.onmouseleave = handleDragEnd;
      }
    }
  }, [scrollWrapperCurrent, clickStartX, isDragging, scrollStartX, handleLastScrollX, lastScrollX]);
  return {
    clickStartX,
    scrollStartX,
    isDragging,
    direction,
    momentum,
    lastScrollX,
    speed,
    reachedStart
  };
};

var _default = useScroll;
exports.default = _default;