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

一个设计体系组件库

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

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

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; }

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) {
  _inherits(InnerSlider, _React$Component);

  var _super = _createSuper(InnerSlider);

  function InnerSlider(props) {
    var _this;

    _classCallCheck(this, InnerSlider);

    _this = _super.call(this, 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(_assertThisInitialized(_this), ['onWindowResized', 'selectHandler', 'changeSlide', 'onInnerSliderEnter', 'onInnerSliderLeave', 'swipeStart', 'swipeMove', 'swipeEnd']);
    return _this;
  }

  _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);
    }
  }]);

  return InnerSlider;
}(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;