react-film/lib/hooks/internal/useAnimateScrollLeft.js

React component for showing carousel just like a film strip

"use strict";

require("core-js/modules/es.object.define-property.js");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = useAnimateScrollLeft;

require("core-js/modules/es.math.sign.js");

require("core-js/modules/es.date.now.js");

require("core-js/modules/es.date.to-string.js");

var _react = require("react");

function step(from, to, stepper, index) {
  var next = from;

  for (var i = 0; i < index; i++) {
    next = stepper(next, to);
  }

  return next;
}

function squareStepper(current, to) {
  var sign = Math.sign(to - current);
  var step = Math.sqrt(Math.abs(to - current));
  var next = current + step * sign;

  if (sign > 0) {
    return Math.min(to, next);
  }

  return Math.max(to, next);
}

function useAnimateScrollLeft(element, to, onEnd) {
  (0, _react.useEffect)(function () {
    if (element) {
      var start = Date.now();
      var animator;

      var animate = function animate(from) {
        animator = requestAnimationFrame(function () {
          // eslint-disable-next-line no-magic-numbers
          var nextValue = step(from, to, squareStepper, (Date.now() - start) / 5); // eslint-disable-next-line no-magic-numbers

          if (Math.abs(to - nextValue) < 0.5) {
            nextValue = to;
          }

          element.scrollLeft = nextValue;

          if (to === nextValue) {
            onEnd && onEnd(true);
          } else {
            animate(from);
          }
        });
      };

      animate(element.scrollLeft);
      return function () {
        return cancelAnimationFrame(animator);
      };
    }
  }, [element, to, onEnd]);
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ob29rcy9pbnRlcm5hbC91c2VBbmltYXRlU2Nyb2xsTGVmdC5qcyJdLCJuYW1lcyI6WyJzdGVwIiwiZnJvbSIsInRvIiwic3RlcHBlciIsImluZGV4IiwibmV4dCIsImkiLCJzcXVhcmVTdGVwcGVyIiwiY3VycmVudCIsInNpZ24iLCJNYXRoIiwic3FydCIsImFicyIsIm1pbiIsIm1heCIsInVzZUFuaW1hdGVTY3JvbGxMZWZ0IiwiZWxlbWVudCIsIm9uRW5kIiwic3RhcnQiLCJEYXRlIiwibm93IiwiYW5pbWF0b3IiLCJhbmltYXRlIiwicmVxdWVzdEFuaW1hdGlvbkZyYW1lIiwibmV4dFZhbHVlIiwic2Nyb2xsTGVmdCIsImNhbmNlbEFuaW1hdGlvbkZyYW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7QUFFQSxTQUFTQSxJQUFULENBQWNDLElBQWQsRUFBb0JDLEVBQXBCLEVBQXdCQyxPQUF4QixFQUFpQ0MsS0FBakMsRUFBd0M7QUFDdEMsTUFBSUMsSUFBSSxHQUFHSixJQUFYOztBQUVBLE9BQUssSUFBSUssQ0FBQyxHQUFHLENBQWIsRUFBZ0JBLENBQUMsR0FBR0YsS0FBcEIsRUFBMkJFLENBQUMsRUFBNUIsRUFBZ0M7QUFDOUJELElBQUFBLElBQUksR0FBR0YsT0FBTyxDQUFDRSxJQUFELEVBQU9ILEVBQVAsQ0FBZDtBQUNEOztBQUVELFNBQU9HLElBQVA7QUFDRDs7QUFFRCxTQUFTRSxhQUFULENBQXVCQyxPQUF2QixFQUFnQ04sRUFBaEMsRUFBb0M7QUFDbEMsTUFBTU8sSUFBSSxHQUFHQyxJQUFJLENBQUNELElBQUwsQ0FBVVAsRUFBRSxHQUFHTSxPQUFmLENBQWI7QUFDQSxNQUFNUixJQUFJLEdBQUdVLElBQUksQ0FBQ0MsSUFBTCxDQUFVRCxJQUFJLENBQUNFLEdBQUwsQ0FBU1YsRUFBRSxHQUFHTSxPQUFkLENBQVYsQ0FBYjtBQUNBLE1BQU1ILElBQUksR0FBR0csT0FBTyxHQUFHUixJQUFJLEdBQUdTLElBQTlCOztBQUVBLE1BQUlBLElBQUksR0FBRyxDQUFYLEVBQWM7QUFDWixXQUFPQyxJQUFJLENBQUNHLEdBQUwsQ0FBU1gsRUFBVCxFQUFhRyxJQUFiLENBQVA7QUFDRDs7QUFFRCxTQUFPSyxJQUFJLENBQUNJLEdBQUwsQ0FBU1osRUFBVCxFQUFhRyxJQUFiLENBQVA7QUFDRDs7QUFFYyxTQUFTVSxvQkFBVCxDQUE4QkMsT0FBOUIsRUFBdUNkLEVBQXZDLEVBQTJDZSxLQUEzQyxFQUFrRDtBQUMvRCx3QkFBVSxZQUFNO0FBQ2QsUUFBSUQsT0FBSixFQUFhO0FBQ1gsVUFBTUUsS0FBSyxHQUFHQyxJQUFJLENBQUNDLEdBQUwsRUFBZDtBQUVBLFVBQUlDLFFBQUo7O0FBRUEsVUFBTUMsT0FBTyxHQUFHLFNBQVZBLE9BQVUsQ0FBQXJCLElBQUksRUFBSTtBQUN0Qm9CLFFBQUFBLFFBQVEsR0FBR0UscUJBQXFCLENBQUMsWUFBTTtBQUNyQztBQUNBLGNBQUlDLFNBQVMsR0FBR3hCLElBQUksQ0FBQ0MsSUFBRCxFQUFPQyxFQUFQLEVBQVdLLGFBQVgsRUFBMEIsQ0FBQ1ksSUFBSSxDQUFDQyxHQUFMLEtBQWFGLEtBQWQsSUFBdUIsQ0FBakQsQ0FBcEIsQ0FGcUMsQ0FJckM7O0FBQ0EsY0FBSVIsSUFBSSxDQUFDRSxHQUFMLENBQVNWLEVBQUUsR0FBR3NCLFNBQWQsSUFBMkIsR0FBL0IsRUFBb0M7QUFDbENBLFlBQUFBLFNBQVMsR0FBR3RCLEVBQVo7QUFDRDs7QUFFRGMsVUFBQUEsT0FBTyxDQUFDUyxVQUFSLEdBQXFCRCxTQUFyQjs7QUFFQSxjQUFJdEIsRUFBRSxLQUFLc0IsU0FBWCxFQUFzQjtBQUNwQlAsWUFBQUEsS0FBSyxJQUFJQSxLQUFLLENBQUMsSUFBRCxDQUFkO0FBQ0QsV0FGRCxNQUVPO0FBQ0xLLFlBQUFBLE9BQU8sQ0FBQ3JCLElBQUQsQ0FBUDtBQUNEO0FBQ0YsU0FoQitCLENBQWhDO0FBaUJELE9BbEJEOztBQW9CQXFCLE1BQUFBLE9BQU8sQ0FBQ04sT0FBTyxDQUFDUyxVQUFULENBQVA7QUFFQSxhQUFPO0FBQUEsZUFBTUMsb0JBQW9CLENBQUNMLFFBQUQsQ0FBMUI7QUFBQSxPQUFQO0FBQ0Q7QUFDRixHQTlCRCxFQThCRyxDQUFDTCxPQUFELEVBQVVkLEVBQVYsRUFBY2UsS0FBZCxDQTlCSDtBQStCRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0JztcblxuZnVuY3Rpb24gc3RlcChmcm9tLCB0bywgc3RlcHBlciwgaW5kZXgpIHtcbiAgbGV0IG5leHQgPSBmcm9tO1xuXG4gIGZvciAobGV0IGkgPSAwOyBpIDwgaW5kZXg7IGkrKykge1xuICAgIG5leHQgPSBzdGVwcGVyKG5leHQsIHRvKTtcbiAgfVxuXG4gIHJldHVybiBuZXh0O1xufVxuXG5mdW5jdGlvbiBzcXVhcmVTdGVwcGVyKGN1cnJlbnQsIHRvKSB7XG4gIGNvbnN0IHNpZ24gPSBNYXRoLnNpZ24odG8gLSBjdXJyZW50KTtcbiAgY29uc3Qgc3RlcCA9IE1hdGguc3FydChNYXRoLmFicyh0byAtIGN1cnJlbnQpKTtcbiAgY29uc3QgbmV4dCA9IGN1cnJlbnQgKyBzdGVwICogc2lnbjtcblxuICBpZiAoc2lnbiA+IDApIHtcbiAgICByZXR1cm4gTWF0aC5taW4odG8sIG5leHQpO1xuICB9XG5cbiAgcmV0dXJuIE1hdGgubWF4KHRvLCBuZXh0KTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlQW5pbWF0ZVNjcm9sbExlZnQoZWxlbWVudCwgdG8sIG9uRW5kKSB7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGVsZW1lbnQpIHtcbiAgICAgIGNvbnN0IHN0YXJ0ID0gRGF0ZS5ub3coKTtcblxuICAgICAgbGV0IGFuaW1hdG9yO1xuXG4gICAgICBjb25zdCBhbmltYXRlID0gZnJvbSA9PiB7XG4gICAgICAgIGFuaW1hdG9yID0gcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tbWFnaWMtbnVtYmVyc1xuICAgICAgICAgIGxldCBuZXh0VmFsdWUgPSBzdGVwKGZyb20sIHRvLCBzcXVhcmVTdGVwcGVyLCAoRGF0ZS5ub3coKSAtIHN0YXJ0KSAvIDUpO1xuXG4gICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLW1hZ2ljLW51bWJlcnNcbiAgICAgICAgICBpZiAoTWF0aC5hYnModG8gLSBuZXh0VmFsdWUpIDwgMC41KSB7XG4gICAgICAgICAgICBuZXh0VmFsdWUgPSB0bztcbiAgICAgICAgICB9XG5cbiAgICAgICAgICBlbGVtZW50LnNjcm9sbExlZnQgPSBuZXh0VmFsdWU7XG5cbiAgICAgICAgICBpZiAodG8gPT09IG5leHRWYWx1ZSkge1xuICAgICAgICAgICAgb25FbmQgJiYgb25FbmQodHJ1ZSk7XG4gICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIGFuaW1hdGUoZnJvbSk7XG4gICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgIH07XG5cbiAgICAgIGFuaW1hdGUoZWxlbWVudC5zY3JvbGxMZWZ0KTtcblxuICAgICAgcmV0dXJuICgpID0+IGNhbmNlbEFuaW1hdGlvbkZyYW1lKGFuaW1hdG9yKTtcbiAgICB9XG4gIH0sIFtlbGVtZW50LCB0bywgb25FbmRdKTtcbn1cbiJdfQ==