react-smooth-carousel-dots/dist/cjs/use-carousel-dots.js

Custom Carousel Dots component to plug in to any your Carousels.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = require("react");

var _usePrevious = _interopRequireDefault(require("./use-previous"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var range = function range(start, end) {
  if (start === 0 && end === 0) return [0];
  return Array(end - start + 1).fill().map(function (_, idx) {
    return start + idx;
  });
};

var defaultHolderStyle = {
  display: "flex",
  alignItems: "center",
  overflow: "hidden",
  transition: "all 0.5s ease"
};
var defaultDotsStyle = {
  flexShrink: 0,
  transition: "all 0.5s ease"
};
var defaultDotStyle = {
  width: "100%",
  height: "100%",
  borderRadius: "50%",
  backgroundColor: "rgba(255, 255, 255, 0.5)",
  flexShrink: 0,
  transition: "transform 0.5s ease, background 0.3s ease-in-out, opacity 0.3s ease-in-out"
};
var defaultActiveDotStyle = {
  backgroundColor: "white"
};
var defaultVisibleDotStyle = {
  opacity: 1
};
var defaultSmallDotStyle = {
  transform: "scale(0.6667)"
};
var defaultMediumDotStyle = {
  transform: "scale(0.8333)"
};
var defaultBigDotStyle = {
  transform: "scale(1)"
};

var useCarouselDots = function useCarouselDots(props) {
  var total = props.total,
      current = props.current,
      _props$size = props.size,
      size = _props$size === void 0 ? 12 : _props$size,
      _props$margin = props.margin,
      margin = _props$margin === void 0 ? 3 : _props$margin,
      _props$padding = props.padding,
      padding = _props$padding === void 0 ? 16 : _props$padding,
      _props$visible = props.visible,
      visible = _props$visible === void 0 ? 3 : _props$visible;

  if (total == null) {
    throw new Error("'total' cannot be null/undefined");
  }

  if (total <= 0) {
    throw new Error("'total' cannot be less than or equal to 0");
  }

  if (visible < 3) {
    throw new Error("'visible' cannot be less than 3");
  }

  var _visible = visible;

  if (total <= 3) {
    _visible = total;
  }

  if (_visible > 3 && _visible !== total && visible % 2 === 0) {
    throw new Error("'visible' cannot be an even number");
  }

  if (_visible > total) {
    throw new Error("'visible' cannot be more than 'total'");
  }

  var prevCurrent = (0, _usePrevious["default"])(current);
  var dotFullWidth = size + margin * 2;
  var center = Math.round(_visible / 2);
  var centerIndex = Math.floor(_visible / 2);

  var _useState = (0, _react.useState)(0),
      translate = _useState[0],
      setTranslate = _useState[1];

  var _useState2 = (0, _react.useState)(range(0, _visible - 1)),
      visibleDots = _useState2[0],
      setVisibleDots = _useState2[1];

  var _useState3 = (0, _react.useState)(range(0, centerIndex + centerIndex - 1)),
      mediumDots = _useState3[0],
      setMediumDots = _useState3[1];

  var _useState4 = (0, _react.useState)(range(0, centerIndex)),
      bigDots = _useState4[0],
      setBigDots = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      isLooping = _useState5[0],
      setIsLooping = _useState5[1];

  (0, _react.useEffect)(function () {
    if (current < centerIndex) {
      setTranslate(0);
      setVisibleDots(range(0, _visible - 1));
    } else if (total - center < current) {
      setTranslate((total - _visible) * dotFullWidth);
      setVisibleDots(range(total - _visible, total - 1));
    } else {
      setTranslate((current - centerIndex) * dotFullWidth);
      setVisibleDots(range(current - centerIndex, current + centerIndex));
    }
  }, [current, center, centerIndex, dotFullWidth, total, _visible]);
  (0, _react.useEffect)(function () {
    if (current < center) {
      if (_visible === 3) {
        setMediumDots(range(0, _visible));
      } else {
        setMediumDots(range(0, centerIndex + centerIndex - 1));
      }

      setBigDots(range(0, centerIndex));
    } else if (total - center - 1 < current) {
      if (_visible === 3) {
        setMediumDots(range(total - _visible, total - 1));
      } else {
        setMediumDots(range(total - centerIndex - centerIndex, total - 1));
      }

      setBigDots(range(total - center, total - 1));
    } else {
      if (_visible === 3) {
        setMediumDots(range(current - 1, current + 1));
        setBigDots([current]);
      } else {
        setMediumDots(range(current - 2, current + 2));
        setBigDots(range(current - 1, current + 1));
      }
    }
  }, [current, center, centerIndex, total, _visible]);
  (0, _react.useEffect)(function () {
    if (prevCurrent === 0 && current === total - 1 || prevCurrent === total - 1 && current === 0) {
      setIsLooping(true);
      setTimeout(function () {
        return setIsLooping(false);
      }, 300);
    }
  }, [current, prevCurrent, total]);
  var getHolderStyle = {
    height: size,
    paddingLeft: padding,
    paddingRight: padding,
    width: _visible * dotFullWidth + padding * 2
  };
  var getDotsStyle = {
    height: size,
    width: size,
    marginRight: margin,
    marginLeft: margin,
    transform: "translateX(-" + translate + "px)"
  };

  var getDotStyle = _objectSpread({
    opacity: 0
  }, isLooping && {
    opacity: 1,
    transform: "scale(1)"
  });

  if (total === visible || total <= 3) {
    return {
      defaultHolderStyle: defaultHolderStyle,
      getHolderStyle: getHolderStyle,
      dots: range(0, total - 1),
      defaultDotsStyle: defaultDotsStyle,
      getDotsStyle: getDotsStyle,
      defaultDotStyle: defaultDotStyle,
      getDotStyle: getDotStyle,
      defaultVisibleDotStyle: defaultVisibleDotStyle,
      defaultActiveDotStyle: defaultActiveDotStyle,
      defaultSmallDotStyle: defaultSmallDotStyle,
      defaultMediumDotStyle: defaultMediumDotStyle,
      defaultBigDotStyle: defaultBigDotStyle,
      isSmall: function isSmall() {
        return false;
      },
      isMedium: function isMedium() {
        return false;
      },
      isBig: function isBig() {
        return true;
      },
      isActive: function isActive(dot) {
        return current === dot;
      },
      isVisible: function isVisible(dot) {
        return visibleDots.includes(dot);
      }
    };
  }

  return {
    defaultHolderStyle: defaultHolderStyle,
    getHolderStyle: getHolderStyle,
    dots: range(0, total - 1),
    defaultDotsStyle: defaultDotsStyle,
    getDotsStyle: getDotsStyle,
    defaultDotStyle: defaultDotStyle,
    getDotStyle: getDotStyle,
    defaultVisibleDotStyle: defaultVisibleDotStyle,
    defaultActiveDotStyle: defaultActiveDotStyle,
    defaultSmallDotStyle: defaultSmallDotStyle,
    defaultMediumDotStyle: defaultMediumDotStyle,
    defaultBigDotStyle: defaultBigDotStyle,
    isSmall: function isSmall(dot) {
      return !mediumDots.includes(dot);
    },
    isMedium: function isMedium(dot) {
      return mediumDots.includes(dot);
    },
    isBig: function isBig(dot) {
      return bigDots.includes(dot);
    },
    isActive: function isActive(dot) {
      return current === dot;
    },
    isVisible: function isVisible(dot) {
      return visibleDots.includes(dot);
    }
  };
};

var _default = useCarouselDots;
exports["default"] = _default;
//# sourceMappingURL=use-carousel-dots.js.map