@txdfe/at/es/slider/slick/inner-slider.js

一个设计体系组件库

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import PropTypes from 'prop-types';
import { events, func, obj } from '../../util';
import EventHandlersMixin from './mixins/event-handlers';
import HelpersMixin from './mixins/helpers';
import Arrow from './arrow';
import Track from './track';
import Dots from './dots';

/**
 * Slider inner
 */

var noop = func.noop;
var InnerSlider = /*#__PURE__*/function (_React$Component) {
  function InnerSlider(props) {
    var _this;
    _classCallCheck(this, InnerSlider);
    _this = _callSuper(this, InnerSlider, [props]);
    _this.state = {
      animating: false,
      dragging: false,
      autoPlayTimer: null,
      currentDirection: 0,
      currentLeft: null,
      currentSlide: 'activeIndex' in props ? props.activeIndex : props.defaultActiveIndex,
      direction: 1,
      listWidth: null,
      listHeight: null,
      slideCount: null,
      slideWidth: null,
      slideHeight: null,
      swipeLeft: null,
      touchObject: {
        startX: 0,
        startY: 0,
        curX: 0,
        curY: 0
      },
      lazyLoadedList: [],
      // added for react
      initialized: false,
      edgeDragged: false,
      swiped: false,
      // used by swipeEvent. differentites between touch and swipe.
      trackStyle: {},
      trackWidth: 0
    };

    // this.filterProps = Object.assign({}, sliderPropTypes, InnerSlider.propTypes);

    func.bindCtx(_this, ['onWindowResized', 'selectHandler', 'changeSlide', 'onInnerSliderEnter', 'onInnerSliderLeave', 'swipeStart', 'swipeMove', 'swipeEnd']);
    return _this;
  }
  _inherits(InnerSlider, _React$Component);
  return _createClass(InnerSlider, [{
    key: "UNSAFE_componentWillMount",
    value: function UNSAFE_componentWillMount() {
      this.hasMounted = true;
      var _this$props = this.props,
        lazyLoad = _this$props.lazyLoad,
        children = _this$props.children,
        slidesToShow = _this$props.slidesToShow;
      var currentSlide = this.state.currentSlide;
      var lazyLoadedList = [];
      if (lazyLoad) {
        for (var i = 0, j = React.Children.count(children); i < j; i++) {
          if (i >= currentSlide && i < currentSlide + slidesToShow) {
            lazyLoadedList.push(i);
            var pre = i - 1 < 0 ? j - 1 : i - 1;
            var next = i + 1 >= j ? 0 : i + 1;
            lazyLoadedList.push(pre);
            lazyLoadedList.push(next);
          }
        }
        if (this.state.lazyLoadedList.length === 0) {
          this.setState({
            lazyLoadedList: lazyLoadedList
          });
        }
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      // TODO Hack for autoplay -- Inspect Later
      this.initialize(this.props);
      this.adaptHeight();
      if (this.props.activeIndex) {
        this.slickGoTo(this.props.activeIndex);
      }

      /* istanbul ignore if  */
      if (window) {
        // To support server-side rendering
        events.on(window, 'resize', this.onWindowResized);
      }
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (this.props.defaultActiveIndex !== nextProps.defaultActiveIndex) {
        this.setState({
          currentSlide: nextProps.defaultActiveIndex
        });
      }
      if (this.props.activeIndex !== nextProps.activeIndex) {
        this.slickGoTo(nextProps.activeIndex);
      } else if (this.state.currentSlide >= nextProps.children.length) {
        this.update(nextProps);
        this.changeSlide({
          message: 'index',
          index: nextProps.children.length - nextProps.slidesToShow,
          currentSlide: this.state.currentSlide
        });
      } else {
        var others = ['children'];
        var update = !obj.shallowEqual(obj.pickOthers(others, this.props), obj.pickOthers(others, nextProps));
        if (update) {
          this.update(nextProps);
        }
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.adaptHeight();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.animationEndCallback) {
        clearTimeout(this.animationEndCallback);
      }
      events.off(window, 'resize', this.onWindowResized);
      if (this.state.autoPlayTimer) {
        clearInterval(this.state.autoPlayTimer);
      }
    }
  }, {
    key: "onWindowResized",
    value: function onWindowResized() {
      this.update(this.props);
      // animating state should be cleared while resizing, otherwise autoplay stops working
      this.setState({
        animating: false
      });
      clearTimeout(this.animationEndCallback);
      delete this.animationEndCallback;
    }
  }, {
    key: "slickGoTo",
    value: function slickGoTo(slide) {
      typeof slide === 'number' && this.changeSlide({
        message: 'index',
        index: slide,
        currentSlide: this.state.currentSlide
      });
    }
  }, {
    key: "onEnterArrow",
    value: function onEnterArrow(msg) {
      this.arrowHoverHandler(msg);
    }
  }, {
    key: "onLeaveArrow",
    value: function onLeaveArrow() {
      this.arrowHoverHandler();
    }
  }, {
    key: "_instanceRefHandler",
    value: function _instanceRefHandler(attr, ref) {
      this[attr] = ref;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        prefix = _this$props2.prefix,
        animation = _this$props2.animation,
        arrows = _this$props2.arrows,
        arrowSize = _this$props2.arrowSize,
        arrowPosition = _this$props2.arrowPosition,
        arrowDirection = _this$props2.arrowDirection,
        dots = _this$props2.dots,
        dotsClass = _this$props2.dotsClass,
        cssEase = _this$props2.cssEase,
        speed = _this$props2.speed,
        infinite = _this$props2.infinite,
        centerMode = _this$props2.centerMode,
        centerPadding = _this$props2.centerPadding,
        lazyLoad = _this$props2.lazyLoad,
        dotsDirection = _this$props2.dotsDirection,
        rtl = _this$props2.rtl,
        slidesToShow = _this$props2.slidesToShow,
        slidesToScroll = _this$props2.slidesToScroll,
        variableWidth = _this$props2.variableWidth,
        vertical = _this$props2.vertical,
        verticalSwiping = _this$props2.verticalSwiping,
        focusOnSelect = _this$props2.focusOnSelect,
        children = _this$props2.children,
        dotsRender = _this$props2.dotsRender,
        triggerType = _this$props2.triggerType;
      var _this$state = this.state,
        currentSlide = _this$state.currentSlide,
        lazyLoadedList = _this$state.lazyLoadedList,
        slideCount = _this$state.slideCount,
        slideWidth = _this$state.slideWidth,
        slideHeight = _this$state.slideHeight,
        trackStyle = _this$state.trackStyle,
        listHeight = _this$state.listHeight,
        dragging = _this$state.dragging;

      // TODO 需要精简一下
      var trackProps = {
        prefix: prefix,
        animation: animation,
        cssEase: cssEase,
        speed: speed,
        infinite: infinite,
        centerMode: centerMode,
        focusOnSelect: focusOnSelect ? this.selectHandler : null,
        currentSlide: currentSlide,
        lazyLoad: lazyLoad,
        lazyLoadedList: lazyLoadedList,
        rtl: rtl,
        slideWidth: slideWidth,
        slideHeight: slideHeight,
        slidesToShow: slidesToShow,
        slidesToScroll: slidesToScroll,
        slideCount: slideCount,
        trackStyle: trackStyle,
        variableWidth: variableWidth,
        vertical: vertical,
        verticalSwiping: verticalSwiping,
        triggerType: triggerType
        // clickHandler: this.changeSlide, unused
      };
      var dotsEle;
      if (dots === true && slideCount > slidesToShow) {
        var dotProps = {
          prefix: prefix,
          rtl: rtl,
          dotsClass: dotsClass,
          slideCount: slideCount,
          slidesToShow: slidesToShow,
          currentSlide: currentSlide,
          slidesToScroll: slidesToScroll,
          dotsDirection: dotsDirection,
          changeSlide: this.changeSlide,
          dotsRender: dotsRender,
          triggerType: triggerType
        };
        dotsEle = /*#__PURE__*/React.createElement(Dots, dotProps);
      }
      var prevArrow;
      var nextArrow;
      var arrowProps = {
        prefix: prefix,
        rtl: rtl,
        arrowSize: arrowSize,
        arrowPosition: arrowPosition,
        arrowDirection: arrowDirection,
        infinite: infinite,
        centerMode: centerMode,
        currentSlide: currentSlide,
        slideCount: slideCount,
        slidesToShow: slidesToShow,
        clickHandler: this.changeSlide
      };
      if (arrows) {
        prevArrow = /*#__PURE__*/React.createElement(Arrow, _extends({}, arrowProps, {
          type: "prev",
          "aria-label": "Previous",
          ref: this._instanceRefHandler.bind(this, 'pArrow'),
          onMouseEnter: animation ? this.onEnterArrow.bind(this, 'prev') : noop,
          onMouseLeave: animation ? this.onLeaveArrow.bind(this, 'prev') : noop
        }), this.props.prevArrow);
        nextArrow = /*#__PURE__*/React.createElement(Arrow, _extends({}, arrowProps, {
          type: "next",
          "aria-label": "Next",
          ref: this._instanceRefHandler.bind(this, 'nArrow'),
          onMouseEnter: animation ? this.onEnterArrow.bind(this, 'next') : noop,
          onMouseLeave: animation ? this.onLeaveArrow.bind(this, 'next') : noop
        }), this.props.nextArrow);
      }
      var verticalHeightStyle = vertical ? {
        height: listHeight
      } : null;
      var centerPaddingStyle;
      if (centerMode) {
        centerPaddingStyle = vertical ? {
          padding: "".concat(centerPadding, " 0px")
        } : {
          padding: "0px ".concat(centerPadding)
        };
      }
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "slick-container ").concat(prefix, "slick-initialized"),
        onMouseEnter: this.onInnerSliderEnter,
        onMouseLeave: this.onInnerSliderLeave
      }, /*#__PURE__*/React.createElement("div", {
        ref: this._instanceRefHandler.bind(this, 'list'),
        className: "".concat(prefix, "slick-list"),
        style: _objectSpread(_objectSpread({}, verticalHeightStyle), centerPaddingStyle),
        onMouseDown: this.swipeStart,
        onMouseUp: this.swipeEnd,
        onTouchStart: this.swipeStart,
        onTouchEnd: this.swipeEnd,
        onMouseMove: dragging ? this.swipeMove : null,
        onMouseLeave: dragging ? this.swipeEnd : null,
        onTouchMove: dragging ? this.swipeMove : null,
        onTouchCancel: dragging ? this.swipeEnd : null
      }, /*#__PURE__*/React.createElement(Track, _extends({
        ref: this._instanceRefHandler.bind(this, 'track')
      }, trackProps), children)), prevArrow, nextArrow, dotsEle);
    }
  }]);
}(React.Component); // extend prototype
_defineProperty(InnerSlider, "propTypes", {
  prefix: PropTypes.string,
  animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  arrows: PropTypes.bool,
  arrowSize: PropTypes.oneOf(['medium', 'large']),
  arrowPosition: PropTypes.oneOf(['inner', 'outer']),
  arrowDirection: PropTypes.oneOf(['hoz', 'ver']),
  centerPadding: PropTypes.any,
  children: PropTypes.any,
  centerMode: PropTypes.bool,
  dots: PropTypes.bool,
  dotsDirection: PropTypes.oneOf(['hoz', 'ver']),
  dotsClass: PropTypes.string,
  focusOnSelect: PropTypes.bool,
  cssEase: PropTypes.string,
  speed: PropTypes.number,
  infinite: PropTypes.bool,
  defaultActiveIndex: PropTypes.number,
  rtl: PropTypes.bool,
  slidesToShow: PropTypes.number,
  lazyLoad: PropTypes.bool,
  activeIndex: PropTypes.number,
  slidesToScroll: PropTypes.number,
  variableWidth: PropTypes.bool,
  vertical: PropTypes.bool,
  verticalSwiping: PropTypes.bool,
  prevArrow: PropTypes.element,
  nextArrow: PropTypes.element,
  dotsRender: PropTypes.func,
  triggerType: PropTypes.string
});
_defineProperty(InnerSlider, "defaultProps", {
  prefix: 'next-',
  arrowDirection: 'hoz',
  triggerType: 'click'
});
_extends(InnerSlider.prototype, HelpersMixin);
_extends(InnerSlider.prototype, EventHandlersMixin);
export default InnerSlider;