@txdfe/at/es/slider/slick/track.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 _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 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 _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, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { dom } from '../../util';
/**
 * Slider Track
 * 内容轨道
 */

var getSlideClasses = function getSlideClasses(specProps) {
  var _classNames;

  var prefix = specProps.prefix;
  var slickActive, slickCenter;
  var centerOffset, index;

  if (specProps.rtl) {
    index = specProps.slideCount - 1 - specProps.activeIndex;
  } else {
    index = specProps.activeIndex;
  }

  var slickCloned = index < 0 || index >= specProps.slideCount;

  if (specProps.centerMode) {
    centerOffset = Math.floor(specProps.slidesToShow / 2);
    slickCenter = (index - specProps.currentSlide) % specProps.slideCount === 0;

    if (index > specProps.currentSlide - centerOffset - 1 && index <= specProps.currentSlide + centerOffset) {
      slickActive = true;
    }
  } else {
    slickActive = specProps.currentSlide <= index && index < specProps.currentSlide + specProps.slidesToShow;
  }

  return classNames("".concat(prefix, "slick-slide"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "slick-active"), slickActive), _defineProperty(_classNames, "".concat(prefix, "slick-center"), slickCenter), _defineProperty(_classNames, "".concat(prefix, "slick-cloned"), slickCloned), _classNames));
};

var getSlideStyle = function getSlideStyle(specProps) {
  var style = {};

  if (specProps.variableWidth === undefined || specProps.variableWidth === false) {
    style.width = specProps.slideWidth;
  }

  if (specProps.animation === 'fade') {
    style.position = 'relative';
    style.opacity = specProps.currentSlide === specProps.activeIndex ? 1 : 0;
    style.visibility = specProps.currentSlide >= specProps.activeIndex ? 'visible' : 'hidden';
    style.transition = "opacity ".concat(specProps.speed, "ms ").concat(specProps.cssEase);
    style.WebkitTransition = "opacity ".concat(specProps.speed, "ms ").concat(specProps.cssEase);

    if (specProps.vertical) {
      style.top = -specProps.activeIndex * specProps.slideHeight;
    } else {
      style.left = -specProps.activeIndex * specProps.slideWidth;
    }
  }

  if (specProps.vertical) {
    style.width = '100%';
  }

  return style;
};

var getKey = function getKey(child, fallbackKey) {
  // key could be a zero
  return child.key === null || child.key === undefined ? fallbackKey : child.key;
};

var renderSlides = function renderSlides(specProps) {
  var key;
  var slides = [];
  var preCloneSlides = [];
  var postCloneSlides = [];
  var count = React.Children.count(specProps.children);
  var child;
  React.Children.forEach(specProps.children, function (elem, index) {
    var childOnClickOptions = {
      message: 'children',
      index: index,
      slidesToScroll: specProps.slidesToScroll,
      currentSlide: specProps.currentSlide
    };

    if (!specProps.lazyLoad | (specProps.lazyLoad && specProps.lazyLoadedList.indexOf(index) >= 0)) {
      child = elem;
    } else {
      child = elem.key ? /*#__PURE__*/React.createElement("div", {
        key: elem.key
      }) : /*#__PURE__*/React.createElement("div", null);
    }

    var childStyle = getSlideStyle(_objectSpread(_objectSpread({}, specProps), {}, {
      activeIndex: index
    }));
    var slickClasses = getSlideClasses(_objectSpread({
      activeIndex: index
    }, specProps));
    var cssClasses;

    if (child.props.className) {
      cssClasses = classNames(slickClasses, child.props.className);
    } else {
      cssClasses = slickClasses;
    }

    var onClick = function onClick(e) {
      // only child === elem, it will has .props.onClick;
      child.props && child.props.onClick && elem.props.onClick(e);

      if (specProps.focusOnSelect) {
        specProps.focusOnSelect(childOnClickOptions);
      }
    };

    slides.push( /*#__PURE__*/React.cloneElement(child, {
      key: "original".concat(getKey(child, index)),
      'data-index': index,
      className: cssClasses,
      tabIndex: '-1',
      'aria-posinset': index,
      'aria-setsize': count,
      role: 'listitem',
      dir: specProps.rtl ? 'rtl' : 'ltr',
      // server-side render depend on elements of their own style
      style: !dom.hasDOM ? _objectSpread(_objectSpread({
        outline: 'none'
      }, childStyle), child.props.style) : _objectSpread(_objectSpread({
        outline: 'none'
      }, child.props.style), childStyle),
      onClick: onClick
    })); // variableWidth doesn't wrap properly.

    if (specProps.infinite && specProps.animation !== 'fade') {
      var infiniteCount = specProps.variableWidth ? specProps.slidesToShow + 1 : specProps.slidesToShow;

      if (index >= count - infiniteCount) {
        key = -(count - index);
        preCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
          key: "precloned".concat(getKey(child, key)),
          'data-index': key,
          className: cssClasses,
          style: _objectSpread(_objectSpread({}, child.props.style), childStyle)
        }));
      }

      if (index < infiniteCount) {
        key = count + index;
        postCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
          key: "postcloned".concat(getKey(child, key)),
          'data-index': key,
          className: cssClasses,
          style: _objectSpread(_objectSpread({}, child.props.style), childStyle)
        }));
      }
    }
  }); // To support server-side rendering

  if (!dom.hasDOM) {
    return slides.slice(specProps.currentSlide, specProps.currentSlide + specProps.slidesToShow);
  }

  if (specProps.rtl) {
    return preCloneSlides.concat(slides, postCloneSlides).reverse();
  } else {
    return preCloneSlides.concat(slides, postCloneSlides);
  }
};

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

  var _super = _createSuper(Track);

  function Track() {
    _classCallCheck(this, Track);

    return _super.apply(this, arguments);
  }

  _createClass(Track, [{
    key: "render",
    value: function render() {
      var slides = renderSlides(this.props);
      return /*#__PURE__*/React.createElement("div", {
        role: "list",
        className: "".concat(this.props.prefix, "slick-track"),
        style: this.props.trackStyle
      }, slides);
    }
  }]);

  return Track;
}(Component);

_defineProperty(Track, "propTypes", {
  prefix: PropTypes.string,
  trackStyle: PropTypes.object
});

_defineProperty(Track, "defaultProps", {
  prefix: 'next-'
});

export { Track as default };