ukelli-ui/core/carousel/carousel.js

[](https://travis-ci.org/ukelli/ukelli-ui) [](https://packagephobia.now.sh/result?p=ukelli-ui)

"use strict";

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactTransitionGroup = require("react-transition-group");

var _basicHelper = require("basic-helper");

var _icon = require("../icon");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _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; }; return _extends.apply(this, arguments); }

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

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * 轮播控件
 *
 * @export
 * @class Carousel
 * @extends {Component}
 */
var Carousel =
/*#__PURE__*/
function (_Component) {
  _inherits(Carousel, _Component);

  function Carousel(props) {
    var _this;

    _classCallCheck(this, Carousel);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Carousel).call(this, props));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchStart", function (e) {
      var touches = e.changedTouches || e;
      _this.startPageX = touches[0] ? touches[0].pageX : touches.pageX;
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchEnd", function (e) {
      e.preventDefault();
      e.stopPropagation();
      var activeIdx = _this.state.activeIdx;
      var touches = e.changedTouches || e;
      _this.endPageX = touches[0] ? touches[0].pageX : touches.pageX;
      var touchOffset = _this.endPageX - _this.startPageX;

      if (Math.abs(touchOffset) < 50) {
        return _this.showDetail(activeIdx);
      }

      var toNext = touchOffset > 0;

      _this.setActiveIdx(activeIdx + (toNext ? -1 : 1));
    });

    var _props$carouselItems = props.carouselItems,
        carouselItems = _props$carouselItems === void 0 ? [] : _props$carouselItems,
        styleConfig = props.styleConfig,
        isMobile = props.isMobile;
    var defaultIdx = 0;
    _this.state = {
      activeIdx: defaultIdx,
      toNext: true,
      activeItem: carouselItems[defaultIdx]
    };
    _this.timer = null;
    _this.freq = 5000;
    _this.isStarted = false;
    _this.itemWidth = styleConfig.width;
    _this.mobileEvents = {
      onMouseDown: _this.handleTouchStart,
      onMouseUp: _this.handleTouchEnd,
      onTouchStart: _this.handleTouchStart,
      onTouchEnd: _this.handleTouchEnd
    };
    return _this;
  }

  _createClass(Carousel, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.carouselItems.length == 0 && nextProps.carouselItems.length > 0) {
        this.startLoop();
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.startLoop();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.stopLoop();
    }
  }, {
    key: "startLoop",
    value: function startLoop() {
      var self = this;
      if (this.timer) this.stopLoop();
      this.timer = setInterval(function () {
        var carouselItems = self.props.carouselItems;
        var activeIdx = self.state.activeIdx;
        activeIdx += 1;
        if (activeIdx >= carouselItems.length - 1) activeIdx = 0;
        if (!document.hidden) self.setActiveIdx(activeIdx);
      }, this.freq);
    }
  }, {
    key: "stopLoop",
    value: function stopLoop() {
      clearInterval(this.timer);
      this.timer = null;
    }
  }, {
    key: "setActiveIdx",
    value: function setActiveIdx(idx) {
      var carouselItems = this.props.carouselItems;
      var maxIdx = carouselItems.length - 1;
      if (idx > maxIdx) idx = 0;
      if (idx < 0) idx = maxIdx;
      this.setState(function (preState) {
        var prevActiveIdx = preState.activeIdx;
        var toNext = prevActiveIdx < idx;
        return {
          activeIdx: idx,
          toNext: toNext,
          activeItem: carouselItems[idx] || _react.default.createElement("span", null)
        };
      });
      this.startLoop();
    }
  }, {
    key: "genCarouselDOM",
    value: function genCarouselDOM(currItem, idx, imgStyle) {
      var _this$props = this.props,
          styleConfig = _this$props.styleConfig,
          actionClass = _this$props.actionClass;

      var _ref = imgStyle || styleConfig,
          width = _ref.width,
          height = _ref.height;

      var imgUrl = currItem.imgUrl,
          element = currItem.element;
      var objStyle = {
        width: width,
        height: height
      };
      objStyle['backgroundImage'] = "url(".concat(imgUrl, ")");
      return _react.default.createElement("div", {
        className: actionClass,
        key: idx
      }, element ? element : _react.default.createElement("div", {
        className: "img",
        style: objStyle
      }));
    }
  }, {
    key: "showDetail",
    value: function showDetail(activeIdx) {
      var activeItem = this.state.activeItem;
      (0, _basicHelper.Call)(activeItem.action, activeItem, activeIdx);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          carouselItems = _this$props2.carouselItems,
          styleConfig = _this$props2.styleConfig,
          isMobile = _this$props2.isMobile,
          transitionTimer = _this$props2.transitionTimer,
          transitionName = _this$props2.transitionName,
          thumbRate = _this$props2.thumbRate;

      if (!carouselItems || carouselItems.length == 0) {
        return _react.default.createElement("span", {
          className: "no-banner"
        });
      }

      var _this$state = this.state,
          activeIdx = _this$state.activeIdx,
          toNext = _this$state.toNext,
          activeItem = _this$state.activeItem;
      var width = styleConfig.width,
          height = styleConfig.height,
          margin = styleConfig.margin;
      var imgWHRate = width / height;
      var thumbImgStyle = {
        width: width / thumbRate,
        height: width / imgWHRate / thumbRate
      };
      return _react.default.createElement("div", {
        className: "carousel",
        style: {
          width: width,
          height: height,
          margin: margin
        }
      }, _react.default.createElement(_reactTransitionGroup.TransitionGroup, null, _react.default.createElement(_reactTransitionGroup.CSSTransition, {
        key: activeIdx,
        classNames: transitionName + '-to-' + (toNext ? 'next' : 'prev'),
        timeout: transitionTimer
      }, _react.default.createElement("div", _extends({
        className: "carousel-item"
      }, this.mobileEvents), this.genCarouselDOM(activeItem, activeIdx)))), isMobile ? _react.default.createElement("span", null) : _react.default.createElement("div", {
        className: "thumb-contaner"
      }, carouselItems.map(function (item, idx) {
        var isActive = idx == activeIdx;
        return _react.default.createElement("div", {
          className: "thumb-item" + (isActive ? ' active' : ''),
          key: idx
        }, _react.default.createElement("div", {
          className: "_mark",
          onClick: function onClick(e) {
            _this2.setActiveIdx(idx);
          }
        }), _this2.genCarouselDOM(item, idx, thumbImgStyle));
      })), isMobile ? null : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
        className: "prev-btn func-btn",
        onClick: function onClick(e) {
          return _this2.setActiveIdx(activeIdx - 1);
        }
      }, _react.default.createElement(_icon.Icon, {
        n: "arrow"
      })), _react.default.createElement("div", {
        className: "next-btn func-btn",
        onClick: function onClick(e) {
          return _this2.setActiveIdx(activeIdx + 1);
        }
      }, _react.default.createElement(_icon.Icon, {
        n: "arrow"
      }))));
    }
  }]);

  return Carousel;
}(_react.Component);

exports.default = Carousel;

_defineProperty(Carousel, "propTypes", {
  /** 轮播的具体内容，格式如下 */
  carouselItems: _propTypes.default.arrayOf(_propTypes.default.shape({
    /** 如果同时设置了 imgUrl 和 element */
    imgUrl: _propTypes.default.string,

    /** 优先渲染 element */
    element: _propTypes.default.element,
    action: _propTypes.default.func
  })).isRequired,

  /** 可设置的 style */
  styleConfig: _propTypes.default.shape({
    width: _propTypes.default.any,
    height: _propTypes.default.any,
    margin: _propTypes.default.any
  }).isRequired,

  /** 预留的操作 class */
  actionClass: _propTypes.default.string,

  /** 动画的 css name，可以自由设置 */
  transitionName: _propTypes.default.string,

  /** 是否移动版，如果是，则渲染左右切换按钮 */
  isMobile: _propTypes.default.bool,

  /** 过场动画的持续时间 */
  transitionTimer: _propTypes.default.number,

  /** 缩略图和大图的缩小比例 */
  thumbRate: _propTypes.default.number
});

_defineProperty(Carousel, "defaultProps", {
  actionClass: 'action-area',
  transitionName: 'banner',
  transitionTimer: 600,
  thumbRate: 15,
  isMobile: false
});