react-slick
Version:
React port of slick carousel
947 lines (915 loc) • 180 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["Slider"] = factory(require("react"));
else
root["Slider"] = factory(root["React"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE__2__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _slider__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/* harmony default export */ __webpack_exports__["default"] = (_slider__WEBPACK_IMPORTED_MODULE_0__["default"]);
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Slider; });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _inner_slider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
/* harmony import */ var json2mq__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
/* harmony import */ var json2mq__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(json2mq__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _default_props__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
/* harmony import */ var _utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 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 _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, _toPropertyKey(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 ? Object.setPrototypeOf.bind() : 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
var enquire = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["canUseDOM"])() && __webpack_require__(16);
var Slider = /*#__PURE__*/function (_React$Component) {
_inherits(Slider, _React$Component);
var _super = _createSuper(Slider);
function Slider(props) {
var _this;
_classCallCheck(this, Slider);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "innerSliderRefHandler", function (ref) {
return _this.innerSlider = ref;
});
_defineProperty(_assertThisInitialized(_this), "slickPrev", function () {
return _this.innerSlider.slickPrev();
});
_defineProperty(_assertThisInitialized(_this), "slickNext", function () {
return _this.innerSlider.slickNext();
});
_defineProperty(_assertThisInitialized(_this), "slickGoTo", function (slide) {
var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return _this.innerSlider.slickGoTo(slide, dontAnimate);
});
_defineProperty(_assertThisInitialized(_this), "slickPause", function () {
return _this.innerSlider.pause("paused");
});
_defineProperty(_assertThisInitialized(_this), "slickPlay", function () {
return _this.innerSlider.autoPlay("play");
});
_this.state = {
breakpoint: null
};
_this._responsiveMediaHandlers = [];
return _this;
}
_createClass(Slider, [{
key: "media",
value: function media(query, handler) {
// javascript handler for css media query
enquire.register(query, handler);
this._responsiveMediaHandlers.push({
query: query,
handler: handler
});
} // handles responsive breakpoints
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
// performance monitoring
//if (process.env.NODE_ENV !== 'production') {
//const { whyDidYouUpdate } = require('why-did-you-update')
//whyDidYouUpdate(React)
//}
if (this.props.responsive) {
var breakpoints = this.props.responsive.map(function (breakpt) {
return breakpt.breakpoint;
});
// sort them in increasing order of their numerical value
breakpoints.sort(function (x, y) {
return x - y;
});
breakpoints.forEach(function (breakpoint, index) {
// media query for each breakpoint
var bQuery;
if (index === 0) {
bQuery = json2mq__WEBPACK_IMPORTED_MODULE_2___default()({
minWidth: 0,
maxWidth: breakpoint
});
} else {
bQuery = json2mq__WEBPACK_IMPORTED_MODULE_2___default()({
minWidth: breakpoints[index - 1] + 1,
maxWidth: breakpoint
});
}
// when not using server side rendering
Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["canUseDOM"])() && _this2.media(bQuery, function () {
_this2.setState({
breakpoint: breakpoint
});
});
});
// Register media query for full screen. Need to support resize from small to large
// convert javascript object to media query string
var query = json2mq__WEBPACK_IMPORTED_MODULE_2___default()({
minWidth: breakpoints.slice(-1)[0]
});
Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["canUseDOM"])() && this.media(query, function () {
_this2.setState({
breakpoint: null
});
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._responsiveMediaHandlers.forEach(function (obj) {
enquire.unregister(obj.query, obj.handler);
});
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var settings;
var newProps;
if (this.state.breakpoint) {
newProps = this.props.responsive.filter(function (resp) {
return resp.breakpoint === _this3.state.breakpoint;
});
settings = newProps[0].settings === "unslick" ? "unslick" : _objectSpread(_objectSpread(_objectSpread({}, _default_props__WEBPACK_IMPORTED_MODULE_3__["default"]), this.props), newProps[0].settings);
} else {
settings = _objectSpread(_objectSpread({}, _default_props__WEBPACK_IMPORTED_MODULE_3__["default"]), this.props);
}
// force scrolling by one if centerMode is on
if (settings.centerMode) {
if (settings.slidesToScroll > 1 && "none" !== "production") {
console.warn("slidesToScroll should be equal to 1 in centerMode, you are using ".concat(settings.slidesToScroll));
}
settings.slidesToScroll = 1;
}
// force showing one slide and scrolling by one if the fade mode is on
if (settings.fade) {
if (settings.slidesToShow > 1 && "none" !== "production") {
console.warn("slidesToShow should be equal to 1 when fade is true, you're using ".concat(settings.slidesToShow));
}
if (settings.slidesToScroll > 1 && "none" !== "production") {
console.warn("slidesToScroll should be equal to 1 when fade is true, you're using ".concat(settings.slidesToScroll));
}
settings.slidesToShow = 1;
settings.slidesToScroll = 1;
}
// makes sure that children is an array, even when there is only 1 child
var children = react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.toArray(this.props.children);
// Children may contain false or null, so we should filter them
// children may also contain string filled with spaces (in certain cases where we use jsx strings)
children = children.filter(function (child) {
if (typeof child === "string") {
return !!child.trim();
}
return !!child;
});
// rows and slidesPerRow logic is handled here
if (settings.variableWidth && (settings.rows > 1 || settings.slidesPerRow > 1)) {
console.warn("variableWidth is not supported in case of rows > 1 or slidesPerRow > 1");
settings.variableWidth = false;
}
var newChildren = [];
var currentWidth = null;
for (var i = 0; i < children.length; i += settings.rows * settings.slidesPerRow) {
var newSlide = [];
for (var j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow) {
var row = [];
for (var k = j; k < j + settings.slidesPerRow; k += 1) {
if (settings.variableWidth && children[k].props.style) {
currentWidth = children[k].props.style.width;
}
if (k >= children.length) break;
row.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.cloneElement(children[k], {
key: 100 * i + 10 * j + k,
tabIndex: -1,
style: {
width: "".concat(100 / settings.slidesPerRow, "%"),
display: "inline-block"
}
}));
}
newSlide.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
key: 10 * i + j
}, row));
}
if (settings.variableWidth) {
newChildren.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
key: i,
style: {
width: currentWidth
}
}, newSlide));
} else {
newChildren.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
key: i
}, newSlide));
}
}
if (settings === "unslick") {
var className = "regular slider " + (this.props.className || "");
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: className
}, children);
} else if (newChildren.length <= settings.slidesToShow && !settings.infinite) {
settings.unslick = true;
}
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_inner_slider__WEBPACK_IMPORTED_MODULE_1__["InnerSlider"], _extends({
style: this.props.style,
ref: this.innerSliderRefHandler
}, Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["filterSettings"])(settings)), newChildren);
}
}]);
return Slider;
}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__2__;
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InnerSlider", function() { return InnerSlider; });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _initial_state__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
/* harmony import */ var _track__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(10);
/* harmony import */ var _dots__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
/* harmony import */ var _arrows__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12);
/* harmony import */ var resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(13);
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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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 _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, _toPropertyKey(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 ? Object.setPrototypeOf.bind() : 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
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);
_defineProperty(_assertThisInitialized(_this), "listRefHandler", function (ref) {
return _this.list = ref;
});
_defineProperty(_assertThisInitialized(_this), "trackRefHandler", function (ref) {
return _this.track = ref;
});
_defineProperty(_assertThisInitialized(_this), "adaptHeight", function () {
if (_this.props.adaptiveHeight && _this.list) {
var elem = _this.list.querySelector("[data-index=\"".concat(_this.state.currentSlide, "\"]"));
_this.list.style.height = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getHeight"])(elem) + "px";
}
});
_defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
_this.props.onInit && _this.props.onInit();
if (_this.props.lazyLoad) {
var slidesToLoad = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getOnDemandLazySlides"])(_objectSpread(_objectSpread({}, _this.props), _this.state));
if (slidesToLoad.length > 0) {
_this.setState(function (prevState) {
return {
lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)
};
});
if (_this.props.onLazyLoad) {
_this.props.onLazyLoad(slidesToLoad);
}
}
}
var spec = _objectSpread({
listRef: _this.list,
trackRef: _this.track
}, _this.props);
_this.updateState(spec, true, function () {
_this.adaptHeight();
_this.props.autoplay && _this.autoPlay("update");
});
if (_this.props.lazyLoad === "progressive") {
_this.lazyLoadTimer = setInterval(_this.progressiveLazyLoad, 1000);
}
_this.ro = new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_8__["default"](function () {
if (_this.state.animating) {
_this.onWindowResized(false); // don't set trackStyle hence don't break animation
_this.callbackTimers.push(setTimeout(function () {
return _this.onWindowResized();
}, _this.props.speed));
} else {
_this.onWindowResized();
}
});
_this.ro.observe(_this.list);
document.querySelectorAll && Array.prototype.forEach.call(document.querySelectorAll(".slick-slide"), function (slide) {
slide.onfocus = _this.props.pauseOnFocus ? _this.onSlideFocus : null;
slide.onblur = _this.props.pauseOnFocus ? _this.onSlideBlur : null;
});
if (window.addEventListener) {
window.addEventListener("resize", _this.onWindowResized);
} else {
window.attachEvent("onresize", _this.onWindowResized);
}
});
_defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
if (_this.animationEndCallback) {
clearTimeout(_this.animationEndCallback);
}
if (_this.lazyLoadTimer) {
clearInterval(_this.lazyLoadTimer);
}
if (_this.callbackTimers.length) {
_this.callbackTimers.forEach(function (timer) {
return clearTimeout(timer);
});
_this.callbackTimers = [];
}
if (window.addEventListener) {
window.removeEventListener("resize", _this.onWindowResized);
} else {
window.detachEvent("onresize", _this.onWindowResized);
}
if (_this.autoplayTimer) {
clearInterval(_this.autoplayTimer);
}
_this.ro.disconnect();
});
_defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
_this.checkImagesLoad();
_this.props.onReInit && _this.props.onReInit();
if (_this.props.lazyLoad) {
var slidesToLoad = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getOnDemandLazySlides"])(_objectSpread(_objectSpread({}, _this.props), _this.state));
if (slidesToLoad.length > 0) {
_this.setState(function (prevState) {
return {
lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)
};
});
if (_this.props.onLazyLoad) {
_this.props.onLazyLoad(slidesToLoad);
}
}
}
// if (this.props.onLazyLoad) {
// this.props.onLazyLoad([leftMostSlide])
// }
_this.adaptHeight();
var spec = _objectSpread(_objectSpread({
listRef: _this.list,
trackRef: _this.track
}, _this.props), _this.state);
var setTrackStyle = _this.didPropsChange(prevProps);
setTrackStyle && _this.updateState(spec, setTrackStyle, function () {
if (_this.state.currentSlide >= react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.count(_this.props.children)) {
_this.changeSlide({
message: "index",
index: react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.count(_this.props.children) - _this.props.slidesToShow,
currentSlide: _this.state.currentSlide
});
}
if (_this.props.autoplay) {
_this.autoPlay("update");
} else {
_this.pause("paused");
}
});
});
_defineProperty(_assertThisInitialized(_this), "onWindowResized", function (setTrackStyle) {
if (_this.debouncedResize) _this.debouncedResize.cancel();
_this.debouncedResize = lodash_debounce__WEBPACK_IMPORTED_MODULE_2___default()(function () {
return _this.resizeWindow(setTrackStyle);
}, 50);
_this.debouncedResize();
});
_defineProperty(_assertThisInitialized(_this), "resizeWindow", function () {
var setTrackStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var isTrackMounted = Boolean(_this.track && _this.track.node);
// prevent warning: setting state on unmounted component (server side rendering)
if (!isTrackMounted) return;
var spec = _objectSpread(_objectSpread({
listRef: _this.list,
trackRef: _this.track
}, _this.props), _this.state);
_this.updateState(spec, setTrackStyle, function () {
if (_this.props.autoplay) _this.autoPlay("update");else _this.pause("paused");
});
// animating state should be cleared while resizing, otherwise autoplay stops working
_this.setState({
animating: false
});
clearTimeout(_this.animationEndCallback);
delete _this.animationEndCallback;
});
_defineProperty(_assertThisInitialized(_this), "updateState", function (spec, setTrackStyle, callback) {
var updatedState = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["initializedState"])(spec);
spec = _objectSpread(_objectSpread(_objectSpread({}, spec), updatedState), {}, {
slideIndex: updatedState.currentSlide
});
var targetLeft = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getTrackLeft"])(spec);
spec = _objectSpread(_objectSpread({}, spec), {}, {
left: targetLeft
});
var trackStyle = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getTrackCSS"])(spec);
if (setTrackStyle || react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.count(_this.props.children) !== react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.count(spec.children)) {
updatedState["trackStyle"] = trackStyle;
}
_this.setState(updatedState, callback);
});
_defineProperty(_assertThisInitialized(_this), "ssrInit", function () {
if (_this.props.variableWidth) {
var _trackWidth = 0,
_trackLeft = 0;
var childrenWidths = [];
var preClones = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getPreClones"])(_objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
slideCount: _this.props.children.length
}));
var postClones = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getPostClones"])(_objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
slideCount: _this.props.children.length
}));
_this.props.children.forEach(function (child) {
childrenWidths.push(child.props.style.width);
_trackWidth += child.props.style.width;
});
for (var i = 0; i < preClones; i++) {
_trackLeft += childrenWidths[childrenWidths.length - 1 - i];
_trackWidth += childrenWidths[childrenWidths.length - 1 - i];
}
for (var _i = 0; _i < postClones; _i++) {
_trackWidth += childrenWidths[_i];
}
for (var _i2 = 0; _i2 < _this.state.currentSlide; _i2++) {
_trackLeft += childrenWidths[_i2];
}
var _trackStyle = {
width: _trackWidth + "px",
left: -_trackLeft + "px"
};
if (_this.props.centerMode) {
var currentWidth = "".concat(childrenWidths[_this.state.currentSlide], "px");
_trackStyle.left = "calc(".concat(_trackStyle.left, " + (100% - ").concat(currentWidth, ") / 2 ) ");
}
return {
trackStyle: _trackStyle
};
}
var childrenCount = react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.count(_this.props.children);
var spec = _objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
slideCount: childrenCount
});
var slideCount = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getPreClones"])(spec) + Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getPostClones"])(spec) + childrenCount;
var trackWidth = 100 / _this.props.slidesToShow * slideCount;
var slideWidth = 100 / slideCount;
var trackLeft = -slideWidth * (Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getPreClones"])(spec) + _this.state.currentSlide) * trackWidth / 100;
if (_this.props.centerMode) {
trackLeft += (100 - slideWidth * trackWidth / 100) / 2;
}
var trackStyle = {
width: trackWidth + "%",
left: trackLeft + "%"
};
return {
slideWidth: slideWidth + "%",
trackStyle: trackStyle
};
});
_defineProperty(_assertThisInitialized(_this), "checkImagesLoad", function () {
var images = _this.list && _this.list.querySelectorAll && _this.list.querySelectorAll(".slick-slide img") || [];
var imagesCount = images.length,
loadedCount = 0;
Array.prototype.forEach.call(images, function (image) {
var handler = function handler() {
return ++loadedCount && loadedCount >= imagesCount && _this.onWindowResized();
};
if (!image.onclick) {
image.onclick = function () {
return image.parentNode.focus();
};
} else {
var prevClickHandler = image.onclick;
image.onclick = function (e) {
prevClickHandler(e);
image.parentNode.focus();
};
}
if (!image.onload) {
if (_this.props.lazyLoad) {
image.onload = function () {
_this.adaptHeight();
_this.callbackTimers.push(setTimeout(_this.onWindowResized, _this.props.speed));
};
} else {
image.onload = handler;
image.onerror = function () {
handler();
_this.props.onLazyLoadError && _this.props.onLazyLoadError();
};
}
}
});
});
_defineProperty(_assertThisInitialized(_this), "progressiveLazyLoad", function () {
var slidesToLoad = [];
var spec = _objectSpread(_objectSpread({}, _this.props), _this.state);
for (var index = _this.state.currentSlide; index < _this.state.slideCount + Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getPostClones"])(spec); index++) {
if (_this.state.lazyLoadedList.indexOf(index) < 0) {
slidesToLoad.push(index);
break;
}
}
for (var _index = _this.state.currentSlide - 1; _index >= -Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["getPreClones"])(spec); _index--) {
if (_this.state.lazyLoadedList.indexOf(_index) < 0) {
slidesToLoad.push(_index);
break;
}
}
if (slidesToLoad.length > 0) {
_this.setState(function (state) {
return {
lazyLoadedList: state.lazyLoadedList.concat(slidesToLoad)
};
});
if (_this.props.onLazyLoad) {
_this.props.onLazyLoad(slidesToLoad);
}
} else {
if (_this.lazyLoadTimer) {
clearInterval(_this.lazyLoadTimer);
delete _this.lazyLoadTimer;
}
}
});
_defineProperty(_assertThisInitialized(_this), "slideHandler", function (index) {
var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var _this$props = _this.props,
asNavFor = _this$props.asNavFor,
beforeChange = _this$props.beforeChange,
onLazyLoad = _this$props.onLazyLoad,
speed = _this$props.speed,
afterChange = _this$props.afterChange; // capture currentslide before state is updated
var currentSlide = _this.state.currentSlide;
var _slideHandler = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["slideHandler"])(_objectSpread(_objectSpread(_objectSpread({
index: index
}, _this.props), _this.state), {}, {
trackRef: _this.track,
useCSS: _this.props.useCSS && !dontAnimate
})),
state = _slideHandler.state,
nextState = _slideHandler.nextState;
if (!state) return;
beforeChange && beforeChange(currentSlide, state.currentSlide);
var slidesToLoad = state.lazyLoadedList.filter(function (value) {
return _this.state.lazyLoadedList.indexOf(value) < 0;
});
onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad);
if (!_this.props.waitForAnimate && _this.animationEndCallback) {
clearTimeout(_this.animationEndCallback);
afterChange && afterChange(currentSlide);
delete _this.animationEndCallback;
}
_this.setState(state, function () {
// asNavForIndex check is to avoid recursive calls of slideHandler in waitForAnimate=false mode
if (asNavFor && _this.asNavForIndex !== index) {
_this.asNavForIndex = index;
asNavFor.innerSlider.slideHandler(index);
}
if (!nextState) return;
_this.animationEndCallback = setTimeout(function () {
var animating = nextState.animating,
firstBatch = _objectWithoutProperties(nextState, ["animating"]);
_this.setState(firstBatch, function () {
_this.callbackTimers.push(setTimeout(function () {
return _this.setState({
animating: animating
});
}, 10));
afterChange && afterChange(state.currentSlide);
delete _this.animationEndCallback;
});
}, speed);
});
});
_defineProperty(_assertThisInitialized(_this), "changeSlide", function (options) {
var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var spec = _objectSpread(_objectSpread({}, _this.props), _this.state);
var targetSlide = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["changeSlide"])(spec, options);
if (targetSlide !== 0 && !targetSlide) return;
if (dontAnimate === true) {
_this.slideHandler(targetSlide, dontAnimate);
} else {
_this.slideHandler(targetSlide);
}
_this.props.autoplay && _this.autoPlay("update");
if (_this.props.focusOnSelect) {
var nodes = _this.list.querySelectorAll(".slick-current");
nodes[0] && nodes[0].focus();
}
});
_defineProperty(_assertThisInitialized(_this), "clickHandler", function (e) {
if (_this.clickable === false) {
e.stopPropagation();
e.preventDefault();
}
_this.clickable = true;
});
_defineProperty(_assertThisInitialized(_this), "keyHandler", function (e) {
var dir = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["keyHandler"])(e, _this.props.accessibility, _this.props.rtl);
dir !== "" && _this.changeSlide({
message: dir
});
});
_defineProperty(_assertThisInitialized(_this), "selectHandler", function (options) {
_this.changeSlide(options);
});
_defineProperty(_assertThisInitialized(_this), "disableBodyScroll", function () {
var preventDefault = function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
};
window.ontouchmove = preventDefault;
});
_defineProperty(_assertThisInitialized(_this), "enableBodyScroll", function () {
window.ontouchmove = null;
});
_defineProperty(_assertThisInitialized(_this), "swipeStart", function (e) {
if (_this.props.verticalSwiping) {
_this.disableBodyScroll();
}
var state = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["swipeStart"])(e, _this.props.swipe, _this.props.draggable);
state !== "" && _this.setState(state);
});
_defineProperty(_assertThisInitialized(_this), "swipeMove", function (e) {
var state = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["swipeMove"])(e, _objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
trackRef: _this.track,
listRef: _this.list,
slideIndex: _this.state.currentSlide
}));
if (!state) return;
if (state["swiping"]) {
_this.clickable = false;
}
_this.setState(state);
});
_defineProperty(_assertThisInitialized(_this), "swipeEnd", function (e) {
var state = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["swipeEnd"])(e, _objectSpread(_objectSpread(_objectSpread({}, _this.props), _this.state), {}, {
trackRef: _this.track,
listRef: _this.list,
slideIndex: _this.state.currentSlide
}));
if (!state) return;
var triggerSlideHandler = state["triggerSlideHandler"];
delete state["triggerSlideHandler"];
_this.setState(state);
if (triggerSlideHandler === undefined) return;
_this.slideHandler(triggerSlideHandler);
if (_this.props.verticalSwiping) {
_this.enableBodyScroll();
}
});
_defineProperty(_assertThisInitialized(_this), "touchEnd", function (e) {
_this.swipeEnd(e);
_this.clickable = true;
});
_defineProperty(_assertThisInitialized(_this), "slickPrev", function () {
// this and fellow methods are wrapped in setTimeout
// to make sure initialize setState has happened before
// any of such methods are called
_this.callbackTimers.push(setTimeout(function () {
return _this.changeSlide({
message: "previous"
});
}, 0));
});
_defineProperty(_assertThisInitialized(_this), "slickNext", function () {
_this.callbackTimers.push(setTimeout(function () {
return _this.changeSlide({
message: "next"
});
}, 0));
});
_defineProperty(_assertThisInitialized(_this), "slickGoTo", function (slide) {
var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
slide = Number(slide);
if (isNaN(slide)) return "";
_this.callbackTimers.push(setTimeout(function () {
return _this.changeSlide({
message: "index",
index: slide,
currentSlide: _this.state.currentSlide
}, dontAnimate);
}, 0));
});
_defineProperty(_assertThisInitialized(_this), "play", function () {
var nextIndex;
if (_this.props.rtl) {
nextIndex = _this.state.currentSlide - _this.props.slidesToScroll;
} else {
if (Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["canGoNext"])(_objectSpread(_objectSpread({}, _this.props), _this.state))) {
nextIndex = _this.state.currentSlide + _this.props.slidesToScroll;
} else {
return false;
}
}
_this.slideHandler(nextIndex);
});
_defineProperty(_assertThisInitialized(_this), "autoPlay", function (playType) {
if (_this.autoplayTimer) {
clearInterval(_this.autoplayTimer);
}
var autoplaying = _this.state.autoplaying;
if (playType === "update") {
if (autoplaying === "hovered" || autoplaying === "focused" || autoplaying === "paused") {
return;
}
} else if (playType === "leave") {
if (autoplaying === "paused" || autoplaying === "focused") {
return;
}
} else if (playType === "blur") {
if (autoplaying === "paused" || autoplaying === "hovered") {
return;
}
}
_this.autoplayTimer = setInterval(_this.play, _this.props.autoplaySpeed + 50);
_this.setState({
autoplaying: "playing"
});
});
_defineProperty(_assertThisInitialized(_this), "pause", function (pauseType) {
if (_this.autoplayTimer) {
clearInterval(_this.autoplayTimer);
_this.autoplayTimer = null;
}
var autoplaying = _this.state.autoplaying;
if (pauseType === "paused") {
_this.setState({
autoplaying: "paused"
});
} else if (pauseType === "focused") {
if (autoplaying === "hovered" || autoplaying === "playing") {
_this.setState({
autoplaying: "focused"
});
}
} else {
// pauseType is 'hovered'
if (autoplaying === "playing") {
_this.setState({
autoplaying: "hovered"
});
}
}
});
_defineProperty(_assertThisInitialized(_this), "onDotsOver", function () {
return _this.props.autoplay && _this.pause("hovered");
});
_defineProperty(_assertThisInitialized(_this), "onDotsLeave", function () {
return _this.props.autoplay && _this.state.autoplaying === "hovered" && _this.autoPlay("leave");
});
_defineProperty(_assertThisInitialized(_this), "onTrackOver", function () {
return _this.props.autoplay && _this.pause("hovered");
});
_defineProperty(_assertThisInitialized(_this), "onTrackLeave", function () {
return _this.props.autoplay && _this.state.autoplaying === "hovered" && _this.autoPlay("leave");
});
_defineProperty(_assertThisInitialized(_this), "onSlideFocus", function () {
return _this.props.autoplay && _this.pause("focused");
});
_defineProperty(_assertThisInitialized(_this), "onSlideBlur", function () {
return _this.props.autoplay && _this.state.autoplaying === "focused" && _this.autoPlay("blur");
});
_defineProperty(_assertThisInitialized(_this), "render", function () {
var className = classnames__WEBPACK_IMPORTED_MODULE_3___default()("slick-slider", _this.props.className, {
"slick-vertical": _this.props.vertical,
"slick-initialized": true
});
var spec = _objectSpread(_objectSpread({}, _this.props), _this.state);
var trackProps = Object(_utils_innerSliderUtils__WEBPACK_IMPORTED_MODULE_4__["extractObject"])(spec, ["fade", "cssEase", "speed", "infinite", "centerMode", "focusOnSelect", "currentSlide", "lazyLoad", "lazyLoadedList", "rtl", "slideWidth", "slideHeight", "listHeight", "vertical", "slidesToShow", "slidesToScroll", "slideCount", "trackStyle", "variableWidth", "unslick", "centerPadding", "targetSlide", "useCSS"]);
var pauseOnHover