@6thquake/react-material/esm/Carousel/CarouselDots.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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

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

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

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

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _dot;

var styles = {
  root: {
    position: 'absolute',
    width: '100%',
    height: '0',
    textAlign: 'center',
    bottom: '2em',
    zIndex: 2
  },
  dot: (_dot = {
    display: 'inline-block',
    width: '10px',
    background: 'green',
    margin: '0 0.5em',
    height: '5px',
    textIndent: '-10000px',
    overflow: 'hidden',
    transition: 'all .5s',
    WebkitTransition: 'all .5s'
  }, (0, _defineProperty2.default)(_dot, "background", 'rgba(255,255,255,0.5)'), (0, _defineProperty2.default)(_dot, "cursor", 'pointer'), _dot),
  actived: {
    width: '30px',
    background: 'rgba(255,255,255,1)'
  }
};

var CarouselDots =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(CarouselDots, _React$Component);

  function CarouselDots(props) {
    var _this;

    (0, _classCallCheck2.default)(this, CarouselDots);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CarouselDots).call(this, props));

    if (props.speed) {
      styles.dot.transition = "all ".concat(props.speed, "s");
      styles.dot.WebkitTransition = "all ".concat(props.speed, "s");
    }

    _this.dotRef = _react.default.createRef();
    return _this;
  }

  (0, _createClass2.default)(CarouselDots, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.speed) {
        var dotEl = _reactDom.default.findDOMNode(this.dotRef.current);

        var nodes = dotEl.childNodes;
        var speed = this.props.speed;

        for (var i = 0, len = nodes.length; i < len; i++) {
          nodes[i].style.transition = "all ".concat(speed, "s");
          nodes[i].style.WebkitTransition = "all ".concat(speed, "s");
        }
      }

      if (this.props.speed) {
        styles.dot.transition = "all ".concat(this.props.speed, "s");
        styles.dot.WebkitTransition = "all ".concat(this.props.speed, "s");
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          onChange = _this$props.onChange,
          count = _this$props.count,
          activeIndex = _this$props.activeIndex,
          classes = _this$props.classes;
      var _activeIndex = activeIndex; // activeIndex 0123

      if (_activeIndex === -1) {
        _activeIndex = count - 1;
      } else if (_activeIndex === count) {
        _activeIndex = 0;
      }

      var _dots = [];

      for (var i = 0; i < count; i++) {
        _dots.push('dot');
      }

      var dots = _dots.map(function (_, index) {
        var _class = index === _activeIndex ? "".concat(classes.dot, " ").concat(classes.actived) : classes.dot;

        return _react.default.createElement("span", {
          key: index,
          className: _class,
          onClick: function onClick() {
            onChange(index, true);
          }
        }, index);
      });

      return _react.default.createElement("div", {
        ref: this.dotRef,
        className: classes.root
      }, dots);
    }
  }]);
  return CarouselDots;
}(_react.default.Component);

CarouselDots.propTypes = {};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMCarouselDots'
})(CarouselDots);

exports.default = _default;