shineout/es/Carousel/index.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Children } from 'react';
import classnames from 'classnames';
import { PureComponent } from '../component';
import { range } from '../utils/numbers';
import { carouselClass } from './styles';
import Item from './Item';
import getDataset from '../utils/dom/getDataset';
import { isRTL } from '../config';
var CarouselDefaultProps = {
  animation: 'slide',
  indicatorPosition: 'center',
  indicatorType: 'circle',
  interval: 0,
  className: '',
  style: {}
};

var Carousel =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Carousel, _PureComponent);

  function Carousel(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "count", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "$timeout", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mouseInView", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mouseEnterHandler", function () {
      _this.mouseInView = true;

      _this.stop();
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "mouseLeaveHandler", function () {
      _this.mouseInView = false;

      _this.start();
    });

    _this.state = {
      current: 0,
      direction: 'stop',
      pre: 0
    };
    _this.start = _this.start.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.stop = _this.stop.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.moveTo = _this.moveTo.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.forward = _this.forward.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.backward = _this.backward.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  var _proto = Carousel.prototype;

  _proto.componentDidMount = function componentDidMount() {
    _PureComponent.prototype.componentDidMount.call(this);

    this.start();
  };

  _proto.componentDidUpdate = function componentDidUpdate() {
    if (this.count > 1 && !this.$timeout) {
      this.start();
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    _PureComponent.prototype.componentWillUnmount.call(this);

    this.stop();
  };

  _proto.setNext = function setNext(next) {
    var _this2 = this;

    if (this.mouseInView) return;
    var interval = this.props.interval;

    if (interval > 0 && this.count > 1) {
      this.stop();
      this.$timeout = setTimeout(function () {
        _this2.moveTo(next);
      }, interval);
    }
  };

  _proto.moveTo = function moveTo(next) {
    var onMove = this.props.onMove;
    var current = this.state.current;
    if (next === current) return;
    var direction = next > current ? 'forward' : 'backward';

    if (next >= this.count) {
      direction = 'forward';
      next = 0;
    } else if (next < 0) {
      direction = 'backward';
      next = this.count - 1;
    }

    this.setState({
      pre: current,
      current: next,
      direction: direction
    });
    this.setNext(next + 1);
    if (onMove) onMove(next, {
      prev: current,
      direction: direction,
      moveTo: this.moveTo
    });
  };

  _proto.forward = function forward() {
    this.moveTo(this.state.current + 1);
  };

  _proto.backward = function backward() {
    this.moveTo(this.state.current - 1);
  };

  _proto.stop = function stop() {
    if (this.$timeout) {
      clearTimeout(this.$timeout);
      this.$timeout = null;
    }
  };

  _proto.start = function start() {
    this.setNext(this.state.current + 1);
  };

  _proto.renderItems = function renderItems() {
    var _this$state = this.state,
        current = _this$state.current,
        pre = _this$state.pre;
    return Children.toArray(this.props.children).map(function (child, i) {
      return React.createElement(Item, {
        key: i,
        current: i === current,
        pre: i === pre && pre !== current
      }, child);
    });
  };

  _proto.renderCustomIndicator = function renderCustomIndicator() {
    var _this$props = this.props,
        indicatorType = _this$props.indicatorType,
        indicatorPosition = _this$props.indicatorPosition;
    var current = this.state.current;
    var className = carouselClass('indicator', "indicator-" + indicatorPosition);

    if (typeof indicatorType === 'function') {
      return React.createElement("div", {
        className: className
      }, indicatorType(current, this.moveTo));
    }

    return null;
  };

  _proto.renderIndicator = function renderIndicator() {
    var _this3 = this;

    var _this$props2 = this.props,
        indicatorPosition = _this$props2.indicatorPosition,
        indicatorType = _this$props2.indicatorType;

    if (typeof indicatorType === 'function') {
      return this.renderCustomIndicator();
    }

    var current = this.state.current;
    var className = carouselClass('indicator', "indicator-" + indicatorPosition, "indicator-" + indicatorType);
    var inds = range(this.count).map(function (i) {
      return React.createElement("a", {
        key: i,
        onClick: _this3.moveTo.bind(_this3, i),
        className: carouselClass(current === i && 'indicator-active')
      }, indicatorType === 'number' ? i + 1 : '');
    });

    if (isRTL()) {
      inds.reverse();
    }

    return React.createElement("div", {
      className: className
    }, inds);
  };

  _proto.renderArrow = function renderArrow() {
    var _this$props3 = this.props,
        arrowClassName = _this$props3.arrowClassName,
        showArrow = _this$props3.showArrow;
    if (!showArrow) return null;
    return React.createElement("div", {
      className: classnames(carouselClass('arrow', showArrow === 'hover' && 'arrow-hover'), arrowClassName)
    }, React.createElement("div", {
      className: carouselClass('arrow-left'),
      onClick: this.backward
    }), React.createElement("div", {
      className: carouselClass('arrow-right'),
      onClick: this.forward
    }));
  };

  _proto.render = function render() {
    this.count = Children.toArray(this.props.children).length;
    var _this$props4 = this.props,
        animation = _this$props4.animation,
        style = _this$props4.style;
    var direction = this.state.direction;
    var className = classnames(carouselClass('_', animation, direction), this.props.className);
    return React.createElement("div", _extends({
      className: className,
      style: style,
      onMouseEnter: this.mouseEnterHandler,
      onMouseLeave: this.mouseLeaveHandler
    }, getDataset(this.props)), this.renderItems(), this.renderArrow(), this.count > 1 && this.renderIndicator());
  };

  return Carousel;
}(PureComponent);

_defineProperty(Carousel, "defaultProps", CarouselDefaultProps);

_defineProperty(Carousel, "displayName", 'ShineoutCarousel');

export default Carousel;