zent/lib/swiper/Swiper.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _WindowResizeHandler = require('../utils/component/WindowResizeHandler');

var _WindowResizeHandler2 = _interopRequireDefault(_WindowResizeHandler);

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

var _icon2 = _interopRequireDefault(_icon);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _forEach = require('lodash/forEach');

var _forEach2 = _interopRequireDefault(_forEach);

var _throttle = require('lodash/throttle');

var _throttle2 = _interopRequireDefault(_throttle);

var _SwiperDots = require('./SwiperDots');

var _SwiperDots2 = _interopRequireDefault(_SwiperDots);

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

function setStyle(target, styles) {
  var style = target.style;


  Object.keys(styles).forEach(function (attribute) {
    style[attribute] = styles[attribute];
  });
}

var Swiper = function (_ref) {
  (0, _inherits3['default'])(Swiper, _ref);

  function Swiper() {
    var _ref2;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, Swiper);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref2 = Swiper.__proto__ || Object.getPrototypeOf(Swiper)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
      currentIndex: 0
    }, _this.init = function () {
      var currentIndex = _this.state.currentIndex;

      var innerElements = _this.swiperContainer.children;

      _this.setSwiperWidth();
      setStyle(_this.swiperContainer, {
        width: _this.swiperWidth * innerElements.length + 'px'
      });

      (0, _forEach2['default'])(innerElements, function (item) {
        setStyle(item, {
          width: 100 / innerElements.length + '%'
        });
      });

      innerElements.length > 1 && _this.translate(currentIndex, true);
    }, _this.getSwiper = function (swiper) {
      _this.swiper = swiper;
    }, _this.getSwiperContainer = function (swiperContainer) {
      _this.swiperContainer = swiperContainer;
    }, _this.setSwiperWidth = function () {
      _this.swiperWidth = _this.swiper.getBoundingClientRect().width;
    }, _this.startAutoplay = function () {
      var autoplayInterval = _this.props.autoplayInterval;

      _this.autoplayTimer = setInterval(_this.next, Number(autoplayInterval));
    }, _this.clearAutoplay = function () {
      clearInterval(_this.autoplayTimer);
    }, _this.next = function () {
      var currentIndex = _this.state.currentIndex;

      _this.swipeTo(currentIndex + 1);
    }, _this.prev = function () {
      var currentIndex = _this.state.currentIndex;

      _this.swipeTo(currentIndex - 1);
    }, _this.swipeTo = function (index) {
      var currentIndex = index;
      _this.setState({ currentIndex: currentIndex });
    }, _this.translate = function (currentIndex, isSilent) {
      var transitionDuration = _this.props.transitionDuration;

      var initIndex = -1;
      var itemWidth = _this.swiperWidth;
      var translateDistance = itemWidth * (initIndex - currentIndex);

      setStyle(_this.swiperContainer, {
        transform: 'translateX(' + translateDistance + 'px)',
        'transition-duration': isSilent ? '0ms' : transitionDuration + 'ms'
      });
    }, _this.resetPosition = function (currentIndex) {
      var _this$props = _this.props,
          transitionDuration = _this$props.transitionDuration,
          length = _this$props.children.length;

      if (currentIndex < 0) {
        setTimeout(function () {
          return _this.setState({
            currentIndex: length - 1
          });
        }, transitionDuration);
      } else {
        setTimeout(function () {
          return _this.setState({
            currentIndex: 0
          });
        }, transitionDuration);
      }
    }, _this.getRealPrevIndex = function (index) {
      var length = _this.props.children.length;


      if (index > length - 1) {
        return length - 1;
      } else if (index < 0) {
        return 0;
      }

      return index;
    }, _this.cloneChildren = function (children) {
      var length = _react.Children.count(children);

      if (length <= 1) {
        return children;
      }

      var clonedChildren = new Array(length + 2);
      _react.Children.forEach(children, function (child, index) {
        clonedChildren[index + 1] = child;
        if (index === 0) {
          clonedChildren[length + 1] = child;
        } else if (index === length - 1) {
          clonedChildren[0] = child;
        }
      });

      return clonedChildren;
    }, _this.handleMouseEnter = function () {
      var autoplay = _this.props.autoplay;

      autoplay && _this.clearAutoplay();
    }, _this.handleMouseLeave = function () {
      var autoplay = _this.props.autoplay;

      autoplay && _this.startAutoplay();
    }, _this.handleDotsClick = function (index) {
      _this.setState({ currentIndex: index });
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(Swiper, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var autoplay = this.props.autoplay;

      autoplay && this.startAutoplay();
      this.init();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      var _props = this.props,
          onChange = _props.onChange,
          length = _props.children.length;
      var currentIndex = this.state.currentIndex;

      var prevIndex = prevState.currentIndex;

      if (prevIndex === currentIndex) {
        return;
      }

      var isSilent = prevIndex > length - 1 || prevIndex < 0;
      this.translate(currentIndex, isSilent);

      if (currentIndex > length - 1 || currentIndex < 0) {
        return this.resetPosition(currentIndex);
      }

      onChange && onChange(currentIndex, this.getRealPrevIndex(prevIndex));
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.clearAutoplay();
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          className = _props2.className,
          prefix = _props2.prefix,
          dots = _props2.dots,
          dotsColor = _props2.dotsColor,
          dotsSize = _props2.dotsSize,
          arrows = _props2.arrows,
          arrowsType = _props2.arrowsType,
          children = _props2.children;
      var currentIndex = this.state.currentIndex;


      var classString = (0, _classnames2['default'])(prefix + '-swiper', className, (0, _defineProperty3['default'])({}, prefix + '-swiper-light', arrows && arrowsType === 'light'));
      var childrenCount = _react.Children.count(children);
      var clonedChildren = this.cloneChildren(children);

      return _react2['default'].createElement(
        'div',
        {
          ref: this.getSwiper,
          className: classString,
          onMouseEnter: this.handleMouseEnter,
          onMouseLeave: this.handleMouseLeave
        },
        arrows && childrenCount && _react2['default'].createElement(
          'div',
          {
            className: prefix + '-swiper__arrow ' + prefix + '-swiper__arrow-left',
            onClick: this.prev
          },
          _react2['default'].createElement(_icon2['default'], {
            type: 'right-circle',
            className: prefix + '-swiper__arrow-icon'
          })
        ),
        arrows && childrenCount > 1 && _react2['default'].createElement(
          'div',
          {
            className: prefix + '-swiper__arrow ' + prefix + '-swiper__arrow-right',
            onClick: this.next
          },
          _react2['default'].createElement(_icon2['default'], {
            type: 'right-circle',
            className: prefix + '-swiper__arrow-icon'
          })
        ),
        _react2['default'].createElement(
          'div',
          {
            ref: this.getSwiperContainer,
            className: prefix + '-swiper__container'
          },
          _react.Children.map(clonedChildren, function (child, index) {
            return (0, _react.cloneElement)(child, {
              key: index - 1,
              style: { float: 'left', height: '100%' }
            });
          })
        ),
        dots && childrenCount > 1 && _react2['default'].createElement(_SwiperDots2['default'], {
          prefix: prefix,
          dotsColor: dotsColor,
          dotsSize: dotsSize,
          items: children,
          currentIndex: currentIndex,
          onDotsClick: this.handleDotsClick
        }),
        _react2['default'].createElement(_WindowResizeHandler2['default'], { onResize: (0, _throttle2['default'])(this.init, 1000 / 60) })
      );
    }
  }]);
  return Swiper;
}(_react.PureComponent || _react.Component);

Swiper.PropTypes = {
  className: _propTypes2['default'].string,
  prefix: _propTypes2['default'].string,
  transitionDuration: _propTypes2['default'].number,
  autoplay: _propTypes2['default'].bool,
  autoplayInterval: _propTypes2['default'].number,
  dots: _propTypes2['default'].bool,
  dotsColor: _propTypes2['default'].string,
  dotsSize: _propTypes2['default'].oneOf(['normal', 'small', 'large']),
  arrows: _propTypes2['default'].bool,
  arrowsType: _propTypes2['default'].oneOf(['dark', 'light']),
  onChange: _propTypes2['default'].func
};
Swiper.defaultProps = {
  className: '',
  prefix: 'zent',
  transitionDuration: 300,
  autoplay: false,
  autoplayInterval: 3000,
  dots: true,
  dotsColor: 'black',
  dotsSize: 'normal',
  arrows: false,
  arrowsType: 'dark'
};
exports['default'] = Swiper;