rsuite/es/Carousel/Carousel.js

A suite of react components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { prefix, defaultProps, getUnhandledProps } from '../utils';
import Animation from '../Animation';

var Carousel =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Carousel, _React$Component);

  function Carousel(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this._key = (Math.random() * 1e18).toString(36).slice(0, 6);
    _this._timeListener = null;

    _this.handleChange = function (event) {
      var active = +event.target.value;

      _this.setState({
        active: active
      });
    };

    _this.state = {
      active: 0,
      last: false
    };
    return _this;
  }

  var _proto = Carousel.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var _this$props = this.props,
        autoplay = _this$props.autoplay,
        autoplayInterval = _this$props.autoplayInterval,
        children = _this$props.children;
    var count = React.Children.count(children);

    if (autoplay && count) {
      this._timeListener = setInterval(function () {
        var active = _this2.state.active;
        var nextActive = active === count - 1 ? 0 : active + 1;

        _this2.setState({
          last: nextActive === count - 1,
          active: nextActive
        });
      }, autoplayInterval);
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this._timeListener) {
      clearInterval(this._timeListener);
    }
  };

  _proto.render = function render() {
    var _this3 = this,
        _sliderStyles;

    var _this$props2 = this.props,
        Component = _this$props2.componentClass,
        children = _this$props2.children,
        classPrefix = _this$props2.classPrefix,
        className = _this$props2.className,
        placement = _this$props2.placement,
        shape = _this$props2.shape,
        rest = _objectWithoutPropertiesLoose(_this$props2, ["componentClass", "children", "classPrefix", "className", "placement", "shape"]);

    var _this$state = this.state,
        active = _this$state.active,
        last = _this$state.last;
    var addPrefix = prefix(classPrefix);
    var count = React.Children.count(children);
    var labels = [];
    var items = [];
    var vertical = placement === 'left' || placement === 'right';
    var lengthKey = vertical ? 'height' : 'width';
    React.Children.forEach(children, function (child, index) {
      var _extends2;

      var id = _this3._key + "-" + index;
      labels.push(React.createElement("li", {
        key: "label" + index,
        className: addPrefix('label-wrapper')
      }, React.createElement("input", {
        name: _this3._key,
        id: id,
        type: "radio",
        onChange: _this3.handleChange,
        value: index,
        checked: active === index
      }), React.createElement("label", {
        htmlFor: id,
        className: addPrefix('label')
      })));
      items.push(React.cloneElement(child, {
        key: "slider-item" + index,
        style: _extends({}, child.props.style, (_extends2 = {}, _extends2[lengthKey] = 100 / count + "%", _extends2)),
        className: classNames(addPrefix('slider-item'), child.props.className)
      }));
    });
    var activeRatio = "-" + 100 / count * active + "%";
    var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + "%", _sliderStyles.transform = vertical ? "translate3d(0, " + activeRatio + " ,0)" : "translate3d(" + activeRatio + ", 0 ,0)", _sliderStyles);
    var classes = classNames(className, classPrefix, addPrefix("placement-" + placement), addPrefix("shape-" + shape));
    var unhandled = getUnhandledProps(Carousel, rest);
    return React.createElement(Animation.Transition, {
      enteredClassName: addPrefix('last'),
      exitingClassName: addPrefix('reset'),
      in: last
    }, React.createElement(Component, _extends({
      className: classes
    }, unhandled), React.createElement("div", {
      className: addPrefix('content')
    }, React.createElement("div", {
      className: addPrefix('slider'),
      style: sliderStyles
    }, items), count ? React.createElement("div", {
      className: addPrefix('slider-after')
    }, [items[items.length - 1], items[0]]) : null), React.createElement("div", {
      className: addPrefix('toolbar')
    }, React.createElement("ul", null, labels))));
  };

  return Carousel;
}(React.Component);

Carousel.propTypes = {
  className: PropTypes.string,
  classPrefix: PropTypes.string,
  componentClass: PropTypes.elementType,
  autoplay: PropTypes.bool,
  autoplayInterval: PropTypes.number,
  placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  shape: PropTypes.oneOf(['dot', 'bar'])
};
Carousel.defaultProps = {
  autoplayInterval: 4000,
  placement: 'bottom',
  shape: 'dot'
};
export default defaultProps({
  classPrefix: 'carousel',
  componentClass: 'div'
})(Carousel);