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

React component for showing carousel just like a film strip

import "core-js/modules/es.math.sign.js";
import "core-js/modules/es.date.now.js";
import "core-js/modules/es.date.to-string.js";
import { useEffect } from '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);
}

export default function useAnimateScrollLeft(element, to, onEnd) {
  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9ob29rcy9pbnRlcm5hbC91c2VBbmltYXRlU2Nyb2xsTGVmdC5qcyJdLCJuYW1lcyI6WyJ1c2VFZmZlY3QiLCJzdGVwIiwiZnJvbSIsInRvIiwic3RlcHBlciIsImluZGV4IiwibmV4dCIsImkiLCJzcXVhcmVTdGVwcGVyIiwiY3VycmVudCIsInNpZ24iLCJNYXRoIiwic3FydCIsImFicyIsIm1pbiIsIm1heCIsInVzZUFuaW1hdGVTY3JvbGxMZWZ0IiwiZWxlbWVudCIsIm9uRW5kIiwic3RhcnQiLCJEYXRlIiwibm93IiwiYW5pbWF0b3IiLCJhbmltYXRlIiwicmVxdWVzdEFuaW1hdGlvbkZyYW1lIiwibmV4dFZhbHVlIiwic2Nyb2xsTGVmdCIsImNhbmNlbEFuaW1hdGlvbkZyYW1lIl0sIm1hcHBpbmdzIjoiOzs7QUFBQSxTQUFTQSxTQUFULFFBQTBCLE9BQTFCOztBQUVBLFNBQVNDLElBQVQsQ0FBY0MsSUFBZCxFQUFvQkMsRUFBcEIsRUFBd0JDLE9BQXhCLEVBQWlDQyxLQUFqQyxFQUF3QztBQUN0QyxNQUFJQyxJQUFJLEdBQUdKLElBQVg7O0FBRUEsT0FBSyxJQUFJSyxDQUFDLEdBQUcsQ0FBYixFQUFnQkEsQ0FBQyxHQUFHRixLQUFwQixFQUEyQkUsQ0FBQyxFQUE1QixFQUFnQztBQUM5QkQsSUFBQUEsSUFBSSxHQUFHRixPQUFPLENBQUNFLElBQUQsRUFBT0gsRUFBUCxDQUFkO0FBQ0Q7O0FBRUQsU0FBT0csSUFBUDtBQUNEOztBQUVELFNBQVNFLGFBQVQsQ0FBdUJDLE9BQXZCLEVBQWdDTixFQUFoQyxFQUFvQztBQUNsQyxNQUFNTyxJQUFJLEdBQUdDLElBQUksQ0FBQ0QsSUFBTCxDQUFVUCxFQUFFLEdBQUdNLE9BQWYsQ0FBYjtBQUNBLE1BQU1SLElBQUksR0FBR1UsSUFBSSxDQUFDQyxJQUFMLENBQVVELElBQUksQ0FBQ0UsR0FBTCxDQUFTVixFQUFFLEdBQUdNLE9BQWQsQ0FBVixDQUFiO0FBQ0EsTUFBTUgsSUFBSSxHQUFHRyxPQUFPLEdBQUdSLElBQUksR0FBR1MsSUFBOUI7O0FBRUEsTUFBSUEsSUFBSSxHQUFHLENBQVgsRUFBYztBQUNaLFdBQU9DLElBQUksQ0FBQ0csR0FBTCxDQUFTWCxFQUFULEVBQWFHLElBQWIsQ0FBUDtBQUNEOztBQUVELFNBQU9LLElBQUksQ0FBQ0ksR0FBTCxDQUFTWixFQUFULEVBQWFHLElBQWIsQ0FBUDtBQUNEOztBQUVELGVBQWUsU0FBU1Usb0JBQVQsQ0FBOEJDLE9BQTlCLEVBQXVDZCxFQUF2QyxFQUEyQ2UsS0FBM0MsRUFBa0Q7QUFDL0RsQixFQUFBQSxTQUFTLENBQUMsWUFBTTtBQUNkLFFBQUlpQixPQUFKLEVBQWE7QUFDWCxVQUFNRSxLQUFLLEdBQUdDLElBQUksQ0FBQ0MsR0FBTCxFQUFkO0FBRUEsVUFBSUMsUUFBSjs7QUFFQSxVQUFNQyxPQUFPLEdBQUcsU0FBVkEsT0FBVSxDQUFBckIsSUFBSSxFQUFJO0FBQ3RCb0IsUUFBQUEsUUFBUSxHQUFHRSxxQkFBcUIsQ0FBQyxZQUFNO0FBQ3JDO0FBQ0EsY0FBSUMsU0FBUyxHQUFHeEIsSUFBSSxDQUFDQyxJQUFELEVBQU9DLEVBQVAsRUFBV0ssYUFBWCxFQUEwQixDQUFDWSxJQUFJLENBQUNDLEdBQUwsS0FBYUYsS0FBZCxJQUF1QixDQUFqRCxDQUFwQixDQUZxQyxDQUlyQzs7QUFDQSxjQUFJUixJQUFJLENBQUNFLEdBQUwsQ0FBU1YsRUFBRSxHQUFHc0IsU0FBZCxJQUEyQixHQUEvQixFQUFvQztBQUNsQ0EsWUFBQUEsU0FBUyxHQUFHdEIsRUFBWjtBQUNEOztBQUVEYyxVQUFBQSxPQUFPLENBQUNTLFVBQVIsR0FBcUJELFNBQXJCOztBQUVBLGNBQUl0QixFQUFFLEtBQUtzQixTQUFYLEVBQXNCO0FBQ3BCUCxZQUFBQSxLQUFLLElBQUlBLEtBQUssQ0FBQyxJQUFELENBQWQ7QUFDRCxXQUZELE1BRU87QUFDTEssWUFBQUEsT0FBTyxDQUFDckIsSUFBRCxDQUFQO0FBQ0Q7QUFDRixTQWhCK0IsQ0FBaEM7QUFpQkQsT0FsQkQ7O0FBb0JBcUIsTUFBQUEsT0FBTyxDQUFDTixPQUFPLENBQUNTLFVBQVQsQ0FBUDtBQUVBLGFBQU87QUFBQSxlQUFNQyxvQkFBb0IsQ0FBQ0wsUUFBRCxDQUExQjtBQUFBLE9BQVA7QUFDRDtBQUNGLEdBOUJRLEVBOEJOLENBQUNMLE9BQUQsRUFBVWQsRUFBVixFQUFjZSxLQUFkLENBOUJNLENBQVQ7QUErQkQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCc7XG5cbmZ1bmN0aW9uIHN0ZXAoZnJvbSwgdG8sIHN0ZXBwZXIsIGluZGV4KSB7XG4gIGxldCBuZXh0ID0gZnJvbTtcblxuICBmb3IgKGxldCBpID0gMDsgaSA8IGluZGV4OyBpKyspIHtcbiAgICBuZXh0ID0gc3RlcHBlcihuZXh0LCB0byk7XG4gIH1cblxuICByZXR1cm4gbmV4dDtcbn1cblxuZnVuY3Rpb24gc3F1YXJlU3RlcHBlcihjdXJyZW50LCB0bykge1xuICBjb25zdCBzaWduID0gTWF0aC5zaWduKHRvIC0gY3VycmVudCk7XG4gIGNvbnN0IHN0ZXAgPSBNYXRoLnNxcnQoTWF0aC5hYnModG8gLSBjdXJyZW50KSk7XG4gIGNvbnN0IG5leHQgPSBjdXJyZW50ICsgc3RlcCAqIHNpZ247XG5cbiAgaWYgKHNpZ24gPiAwKSB7XG4gICAgcmV0dXJuIE1hdGgubWluKHRvLCBuZXh0KTtcbiAgfVxuXG4gIHJldHVybiBNYXRoLm1heCh0bywgbmV4dCk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUFuaW1hdGVTY3JvbGxMZWZ0KGVsZW1lbnQsIHRvLCBvbkVuZCkge1xuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChlbGVtZW50KSB7XG4gICAgICBjb25zdCBzdGFydCA9IERhdGUubm93KCk7XG5cbiAgICAgIGxldCBhbmltYXRvcjtcblxuICAgICAgY29uc3QgYW5pbWF0ZSA9IGZyb20gPT4ge1xuICAgICAgICBhbmltYXRvciA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB7XG4gICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLW1hZ2ljLW51bWJlcnNcbiAgICAgICAgICBsZXQgbmV4dFZhbHVlID0gc3RlcChmcm9tLCB0bywgc3F1YXJlU3RlcHBlciwgKERhdGUubm93KCkgLSBzdGFydCkgLyA1KTtcblxuICAgICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1tYWdpYy1udW1iZXJzXG4gICAgICAgICAgaWYgKE1hdGguYWJzKHRvIC0gbmV4dFZhbHVlKSA8IDAuNSkge1xuICAgICAgICAgICAgbmV4dFZhbHVlID0gdG87XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgZWxlbWVudC5zY3JvbGxMZWZ0ID0gbmV4dFZhbHVlO1xuXG4gICAgICAgICAgaWYgKHRvID09PSBuZXh0VmFsdWUpIHtcbiAgICAgICAgICAgIG9uRW5kICYmIG9uRW5kKHRydWUpO1xuICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBhbmltYXRlKGZyb20pO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICB9O1xuXG4gICAgICBhbmltYXRlKGVsZW1lbnQuc2Nyb2xsTGVmdCk7XG5cbiAgICAgIHJldHVybiAoKSA9PiBjYW5jZWxBbmltYXRpb25GcmFtZShhbmltYXRvcik7XG4gICAgfVxuICB9LCBbZWxlbWVudCwgdG8sIG9uRW5kXSk7XG59XG4iXX0=