seedsui-react/es/Carrousel/Carrousel.js

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _class, _temp;

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Instance from './instance.js';

var Carrousel = (_temp = _class = function (_Component) {
  _inherits(Carrousel, _Component);

  function Carrousel(props) {
    _classCallCheck(this, Carrousel);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.componentDidUpdate = function (prevProps) {
      if (_this.instance && _this.instance.activeIndex !== _this.props.activeIndex) {
        _this.instance.slideTo(_this.props.activeIndex, _this.props.speed, _this.props.enableOnChange);
      }
      if (_this.props.stopPropagation !== prevProps.stopPropagation) {
        _this.instance.setParams({ stopPropagation: _this.props.stopPropagation });
      }
      if (!_this.props.list.equals(prevProps.list)) {
        _this.update();
      }
    };

    _this.componentDidMount = function () {
      _this.instance();
      // 轮播图片, 自适应的情况下, 高度需要计算
      if (!(_this.props.style && _this.props.style.height) && _this.props.list.length && _this.props.delay) {
        setTimeout(function () {
          _this.instance.updateContainerSize();
        }, _this.props.delay);
      }
    };

    _this.instance = function () {
      var instance = new Instance(_this.$el, {
        height: _this.props.style && _this.props.style.height ? _this.props.style.height : null,
        width: _this.props.style && _this.props.style.width ? _this.props.style.width : null,
        stopPropagation: _this.props.stopPropagation,
        autoplay: _this.props.autoplay,
        slidesPerView: _this.props.slidesPerView,
        loop: _this.props.loop,
        onClick: _this.onClick,
        onSlideChangeEnd: _this.props.onChange ? _this.props.onChange : null
      });
      _this.instance = instance;
    };

    _this.onClick = function (s, e) {
      var index = s.activeIndex;
      if (_this.props.onClick) _this.props.onClick(_this.props.list[index], index, s, e);
    };

    _this.getCarrouselClassName = function () {
      var _this$props = _this.props,
          className = _this$props.className,
          list = _this$props.list;

      if (className) {
        if (className.indexOf('carrousel-container') !== -1 || className.indexOf('carrousel-page') !== -1) {
          return className;
        }
      }
      return (list.length > 0 ? 'carrousel-container' : 'carrousel-page') + (className ? ' ' + className : '');
    };

    _this.getSlideStyle = function (item) {
      var slideParams = _this.props.slideParams;

      if (item.bg) {
        return Object.assign({ backgroundImage: 'url(' + _this.props.defaultSrc + ')' }, slideParams.style);
      }
      return slideParams.style;
    };

    _this.update = function () {
      // 更新为默认图片
      var imgs = _this.$el.querySelectorAll('.carrousel-lazy');
      for (var i = 0; i < imgs.length; i++) {
        var imgTarget = imgs[i];
        if (!imgTarget) continue;
        if (imgTarget.tagName === 'IMG') {
          imgTarget.src = _this.props.defaultSrc;
        } else {
          imgTarget.style.backgroundImage = 'url(' + _this.props.defaultSrc + ')';
        }
      }
      // 更新Carrousel
      if (_this.instance) _this.instance.update();
    };

    return _this;
  }

  Carrousel.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        className = _props.className,
        style = _props.style,
        slideParams = _props.slideParams,
        pagination = _props.pagination,
        paginationParams = _props.paginationParams,
        prevParams = _props.prevParams,
        nextParams = _props.nextParams,
        stopPropagation = _props.stopPropagation,
        activeIndex = _props.activeIndex,
        loop = _props.loop,
        autoplay = _props.autoplay,
        slidesPerView = _props.slidesPerView,
        defaultSrc = _props.defaultSrc,
        list = _props.list,
        enableOnChange = _props.enableOnChange,
        speed = _props.speed,
        onClick = _props.onClick,
        onChange = _props.onChange,
        delay = _props.delay,
        children = _props.children,
        others = _objectWithoutProperties(_props, ['className', 'style', 'slideParams', 'pagination', 'paginationParams', 'prevParams', 'nextParams', 'stopPropagation', 'activeIndex', 'loop', 'autoplay', 'slidesPerView', 'defaultSrc', 'list', 'enableOnChange', 'speed', 'onClick', 'onChange', 'delay', 'children']);

    var childrenArr = React.Children.toArray(children);
    return React.createElement(
      'div',
      _extends({ ref: function ref(el) {
          _this2.$el = el;
        }, className: this.getCarrouselClassName(), style: style }, others),
      React.createElement(
        'div',
        { className: 'carrousel-wrapper' },
        list.length > 0 && list.map(function (item, index) {
          return React.createElement(
            'div',
            { className: 'carrousel-slide' + (slideParams.className ? ' ' + slideParams.className : '') + (item.bg ? ' carrousel-lazy' : ''), style: _this2.getSlideStyle(item), key: index, 'data-load-src': item.bg },
            item.img && React.createElement('img', { className: 'carrousel-slide-img carrousel-lazy', alt: '', src: defaultSrc, 'data-load-src': item.img }),
            item.caption && React.createElement(
              'div',
              { className: 'carrousel-summary' },
              item.iconParams && item.iconParams.className && React.createElement('i', _extends({}, item.iconParams, { className: 'icon carrousel-summary-icon' + (item.iconParams.className ? ' ' + item.iconParams.className : '') })),
              React.createElement(
                'span',
                { className: 'nowrap carrousel-summary-caption', style: { marginRight: '20px' } },
                item.caption
              )
            )
          );
        }),
        list.length === 0 && childrenArr && childrenArr.map(function (item, index) {
          return React.createElement(
            'div',
            { className: 'carrousel-slide', key: index },
            item
          );
        })
      ),
      pagination === true && React.createElement('div', _extends({}, paginationParams, { className: 'carrousel-pagination' + (paginationParams.className ? ' ' + paginationParams.className : '') })),
      pagination && pagination !== true && pagination,
      list.length > 1 && React.createElement('div', _extends({}, prevParams, { className: 'carrousel-prev' + (prevParams.className ? ' ' + prevParams.className : '') })),
      list.length > 1 && React.createElement('div', _extends({}, nextParams, { className: 'carrousel-next' + (nextParams.className ? ' ' + nextParams.className : '') }))
    );
  };

  return Carrousel;
}(Component), _class.defaultProps = {
  slideParams: {},
  paginationParams: {},
  prevParams: {},
  nextParams: {},
  stopPropagation: false, // 设置为false解决与FastClick插件touch事件冲突的问题
  activeIndex: 0,
  page: 0,
  loop: false,
  pagination: false,
  autoplay: 0,
  slidesPerView: 1,
  list: [],
  defaultSrc: '//res.waiqin365.com/d/seedsui/carrousel/default.png',
  enableOnChange: true,
  speed: 300,
  delay: 500
}, _temp);
export { Carrousel as default };
Carrousel.propTypes = process.env.NODE_ENV !== "production" ? {
  style: PropTypes.object, // 设置容器Style
  className: PropTypes.string, // 设置容器className

  slideParams: PropTypes.object,

  pagination: PropTypes.oneOfType([// 是否显示小点点
  PropTypes.bool, PropTypes.node]),
  paginationParams: PropTypes.object,

  prevParams: PropTypes.object,
  nextParams: PropTypes.object,

  stopPropagation: PropTypes.bool, // 是否阻止点击事件的传播, 设置为false解决与FastClick插件touch事件冲突的问题
  activeIndex: PropTypes.number, // 默认选中第几块

  loop: PropTypes.bool, // 是否循环显示
  autoplay: PropTypes.number, // 是否自动播放
  slidesPerView: PropTypes.number, // 一屏显示几块,默认1块
  defaultSrc: PropTypes.string, // 默认图片
  list: PropTypes.array, // [{bg: 'xx', img: 'xx', iconParams: {}, caption: 'xx'}]
  enableOnChange: PropTypes.bool, // 手动调用slideTo方法是否触发onChange事件回调
  speed: PropTypes.number, // 动画过渡的速度
  onClick: PropTypes.func, // func(s, e)
  onChange: PropTypes.func,
  delay: PropTypes.number, // 延迟初始化秒数

  children: PropTypes.node // 轮播页,例<Carrousel><div>第1页</div></Carrousel>
} : {};