zarm-web/lib/swipe/index.js

基于 React 的桌面端UI库

"use strict";

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

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

var _classnames2 = _interopRequireDefault(require("classnames"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } 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 _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; }

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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return 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); }

var Swipe =
/*#__PURE__*/
function (_Component) {
  _inherits(Swipe, _Component);

  function Swipe(props) {
    var _this;

    _classCallCheck(this, Swipe);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Swipe).call(this, props));
    _this.moveInterval = void 0;
    _this.swipeItems = void 0;
    _this.moveInterval = null;
    _this.state = {
      items: [],
      activeIndex: props.activeIndex,
      translateX: 0,
      pointStart: 0,
      pointEnd: 0,
      timeStart: new Date()
    };
    return _this;
  }

  _createClass(Swipe, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      this.parseItem(this.props.children);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      // 监听窗口变化
      window.addEventListener('resize', function () {
        return _this2._updateResize();
      }); // 设置起始位置编号

      this.onJumpTo(this.props.activeIndex);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('children' in nextProps) {
        this.parseItem(nextProps.children);
      }
    }
  }, {
    key: "componentWillUpdate",
    value: function componentWillUpdate() {
      setTimeout(this._transitionEnd.bind(this), this.props.speed);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this3 = this;

      // 自动轮播结束
      this.pauseAutoPlay(); // 移除监听窗口变化

      window.removeEventListener('resize', function () {
        return _this3._updateResize();
      }); // if (this.transitionEvents) {
      //   this.transitionEvents.remove();
      // }
    } // 滑动到指定编号

  }, {
    key: "onSlideTo",
    value: function onSlideTo(index) {
      this._onMoveTo(index, this.props.speed);
    } // 静默跳到指定编号

  }, {
    key: "onJumpTo",
    value: function onJumpTo(index) {
      this._onMoveTo(index, 0);
    }
  }, {
    key: "parseItem",
    value: function parseItem(children) {
      if (children.length === 0) {
        return;
      } // 增加头尾拼接节点


      var items = [].concat(children);
      var firstItem = items[0];
      var lastItem = items[items.length - 1];
      items.push(firstItem);
      items.unshift(lastItem); // 节点追加后重排key

      var newItems = _react.default.Children.map(items, function (element, index) {
        return (0, _react.cloneElement)(element, {
          key: index
        });
      });

      this.setState({
        items: newItems
      }); // 自动轮播开始

      if (!this.moveInterval) {
        this.startAutoPlay();
      }
    } // 自动轮播开始

  }, {
    key: "startAutoPlay",
    value: function startAutoPlay() {
      var _this4 = this;

      this.moveInterval = this.props.autoPlay && setInterval(function () {
        var activeIndex = _this4.state.activeIndex;

        var maxLength = _react.default.Children.count(_this4.props.children);

        activeIndex = ['left', 'top'].indexOf(_this4.props.direction) > -1 ? activeIndex + 1 : activeIndex - 1;

        if (activeIndex > maxLength - 1) {
          activeIndex = 0;

          _this4.onJumpTo(-1);

          _this4.onSlideTo(activeIndex);
        } else if (activeIndex < 0) {
          activeIndex = maxLength - 1;

          _this4.onJumpTo(maxLength);

          _this4.onSlideTo(activeIndex);
        } else {
          _this4.onSlideTo(activeIndex);
        }

        _this4.onSlideTo(activeIndex);
      }, this.props.autoPlayIntervalTime);
    } // 暂停自动轮播

  }, {
    key: "pauseAutoPlay",
    value: function pauseAutoPlay() {
      if (this.moveInterval) {
        clearInterval(this.moveInterval);
      }
    } // 更新窗口变化的位置偏移

  }, {
    key: "_updateResize",
    value: function _updateResize() {
      this.onJumpTo(this.props.activeIndex);
    } // 移动到指定编号

  }, {
    key: "_onMoveTo",
    value: function _onMoveTo(index, speed) {
      var dom = this.swipeItems;
      var px = this._isDirectionX() ? -dom.offsetWidth * (index + 1) : -dom.offsetHeight * (index + 1);

      this._doTransition(dom, px, speed);

      this.setState({
        activeIndex: index,
        translateX: px
      });
    } // 执行过渡动画

  }, {
    key: "_doTransition",
    value: function _doTransition(dom, offset, duration) {
      var x = 0;
      var y = 0;

      if (this._isDirectionX()) {
        x = offset;
      } else {
        y = offset;
      }

      dom.style.webkitTransitionDuration = "".concat(duration, "ms");
      dom.style.mozTransitionDuration = "".concat(duration, "ms");
      dom.style.oTransitionDuration = "".concat(duration, "ms");
      dom.style.transitionDuration = "".concat(duration, "ms");
      dom.style.webkitTransform = "translate3d(".concat(x, "px, ").concat(y, "px, 0)");
      dom.style.mozTransform = "translate3d(".concat(x, "px, ").concat(y, "px, 0)");
      dom.style.oTransform = "translate3d(".concat(x, "px, ").concat(y, "px, 0)");
      dom.style.transform = "translate3d(".concat(x, "px, ").concat(y, "px, 0)");
    }
  }, {
    key: "_transitionEnd",
    value: function _transitionEnd() {
      var activeIndex = this.state.activeIndex;

      var maxLength = _react.default.Children.count(this.props.children);

      if (activeIndex > maxLength - 1) {
        this.onJumpTo(0);
      } else if (activeIndex < 0) {
        this.onJumpTo(maxLength - 1);
      }
    } // 触屏事件

  }, {
    key: "_onTouchStart",
    value: function _onTouchStart(event) {
      this.pauseAutoPlay();

      var pointX = this._getCurrentPoint(event);

      var activeIndex = this.state.activeIndex;

      var maxLength = _react.default.Children.count(this.props.children); // 跳转到头尾


      if (activeIndex <= 0) {
        this.onJumpTo(0);
      } else if (activeIndex >= maxLength - 1) {
        this.onJumpTo(maxLength - 1);
      }

      this.setState({
        pointStart: pointX,
        timeStart: new Date()
      });
    }
  }, {
    key: "_onTouchMove",
    value: function _onTouchMove(event) {
      event.preventDefault();

      var pointX = this._getCurrentPoint(event);

      var px = this.state.translateX + (pointX - this.state.pointStart);
      var dom = this.swipeItems;

      this._doTransition(dom, px, 0);

      this.setState({
        pointEnd: pointX
      });
    }
  }, {
    key: "_onTouchEnd",
    value: function _onTouchEnd() {
      var px = this.state.pointEnd !== 0 ? this.state.pointEnd - this.state.pointStart : 0;
      var timeSpan = new Date().getTime() - this.state.timeStart.getTime();
      var dom = this.swipeItems;
      var activeIndex = this.state.activeIndex; // 判断滑动临界点
      // 1.滑动距离比超过moveDistanceRatio
      // 2.滑动释放时间差低于moveTimeSpan

      if (Math.abs(px / dom.offsetWidth) >= this.props.moveDistanceRatio || timeSpan <= this.props.moveTimeSpan) {
        activeIndex = px > 0 ? this.state.activeIndex - 1 : this.state.activeIndex + 1;
        this.onSlideTo(activeIndex);
      } else {
        this.onSlideTo(activeIndex);
      } // dom.removeEventListener("transitionend", () => this._aaa());
      // 恢复自动轮播


      this.startAutoPlay();
      this.setState({
        pointStart: 0,
        pointEnd: 0,
        activeIndex: activeIndex
      });
    } // 获取鼠标/触摸点坐标

  }, {
    key: "_getCurrentPoint",
    value: function _getCurrentPoint(event, type) {
      var touch = type === 'mouse' ? event : event.touches[0];
      var offset = this._isDirectionX() ? touch.pageX : touch.pageY;
      return offset;
    } // 是否横向移动

  }, {
    key: "_isDirectionX",
    value: function _isDirectionX() {
      var dir = ['left', 'right'].indexOf(this.props.direction) > -1;
      return dir;
    }
  }, {
    key: "render",
    value: function render() {
      var _classnames,
          _this5 = this;

      var _this$props = this.props,
          className = _this$props.className,
          height = _this$props.height,
          children = _this$props.children,
          wrapperStyle = _this$props.style,
          prefixCls = _this$props.prefixCls;
      var classes = (0, _classnames2.default)((_classnames = {}, _defineProperty(_classnames, prefixCls, true), _defineProperty(_classnames, className, !!className), _classnames));
      var style = {
        items: {},
        pagination: {}
      };

      if (!this._isDirectionX()) {
        style.items.height = height;
        style.pagination.marginTop = 3;
      } else {
        style.items.whiteSpace = 'nowrap';
        style.pagination.display = 'inline-block';
        style.pagination.marginRight = 3;
      }

      return _react.default.createElement("div", {
        className: classes,
        style: wrapperStyle
      }, _react.default.createElement("div", {
        ref: function ref(swipeItems) {
          _this5.swipeItems = swipeItems;
        },
        className: "".concat(prefixCls, "-items"),
        style: style.items,
        onTouchStart: function onTouchStart(event) {
          return _this5._onTouchStart(event);
        },
        onTouchMove: function onTouchMove(event) {
          return _this5._onTouchMove(event);
        },
        onTouchEnd: function onTouchEnd(_) {
          return _this5._onTouchEnd();
        }
      }, this.state.items), _react.default.createElement("div", {
        className: "".concat(prefixCls, "-pagination")
      }, _react.default.createElement("ul", null, // tslint:disable-next-line:jsx-no-multiline-js
      _react.Children.map(children, function (_, index) {
        return _react.default.createElement("li", {
          key: "pagination-".concat(index) // tslint:disable-next-line:jsx-no-multiline-js
          ,
          className: (0, _classnames2.default)({
            // eslint-disable-next-line
            // tslint:disable-next-line:triple-equals
            active: index == _this5.state.activeIndex
          }),
          style: style.pagination,
          onClick: function onClick() {
            return _this5.onSlideTo(index);
          }
        });
      }))));
    }
  }]);

  return Swipe;
}(_react.Component);

Swipe.defaultProps = {
  prefixCls: 'ui-swipe',
  direction: 'left',
  height: 160,
  activeIndex: 0,
  speed: 300,
  autoPlay: true,
  autoPlayIntervalTime: 3000,
  moveDistanceRatio: 0.5,
  moveTimeSpan: 300
};
var _default = Swipe;
exports.default = _default;