react-carousel-query/dist/hooks/useOffset.js

A infinite carousel component made with react that handles the pagination for you.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const useOffset = ({
  currentIndex,
  itemWidth,
  total
}) => {
  const [offset, setOffset] = _react.default.useState(0);
  const maxOffset = (total - 1) * itemWidth;
  const increaseOffset = () => setOffset(currentOffset => {
    const newOffset = currentOffset + itemWidth;
    if (newOffset > maxOffset) {
      return currentOffset;
    }
    return currentOffset + itemWidth;
  });
  const decreaseOffset = () => setOffset(currentOffset => {
    if (currentOffset === 0) {
      return currentOffset;
    }
    return currentOffset - itemWidth;
  });
  const setNextOffset = () => setOffset((currentIndex + 1) * itemWidth);
  const setPreviousOffset = () => setOffset((currentIndex - 1) * itemWidth);

  // When window size changes we need to react!
  _react.default.useLayoutEffect(() => {
    setOffset(currentIndex * itemWidth);
  }, [itemWidth, currentIndex]);
  return {
    offset,
    maxOffset,
    setOffset,
    increaseOffset,
    decreaseOffset,
    setNextOffset,
    setPreviousOffset
  };
};
var _default = exports.default = useOffset;