react-slick
Version:
React port of slick carousel
1,471 lines (1,261 loc) • 160 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object')
exports["Slider"] = factory(require("react"), require("react-dom"));
else
root["Slider"] = factory(root["React"], root["ReactDOM"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_15__) {
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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _slider = __webpack_require__(1);
var _slider2 = _interopRequireDefault(_slider);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _slider2.default;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _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; };
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _innerSlider = __webpack_require__(3);
var _json2mq = __webpack_require__(20);
var _json2mq2 = _interopRequireDefault(_json2mq);
var _defaultProps = __webpack_require__(5);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
var _canUseDom = __webpack_require__(22);
var _canUseDom2 = _interopRequireDefault(_canUseDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var enquire = _canUseDom2.default && __webpack_require__(23);
var Slider = function (_React$Component) {
_inherits(Slider, _React$Component);
function Slider(props) {
_classCallCheck(this, Slider);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.innerSliderRefHandler = function (ref) {
return _this.innerSlider = ref;
};
_this.slickPrev = function () {
return _this.innerSlider.slickPrev();
};
_this.slickNext = function () {
return _this.innerSlider.slickNext();
};
_this.slickGoTo = function (slide) {
return _this.innerSlider.slickGoTo(slide);
};
_this.slickPause = function () {
return _this.innerSlider.pause('paused');
};
_this.slickPlay = function () {
return _this.innerSlider.autoPlay('play');
};
_this.state = {
breakpoint: null
};
_this._responsiveMediaHandlers = [];
return _this;
}
Slider.prototype.media = function media(query, handler) {
// javascript handler for css media query
enquire.register(query, handler);
this._responsiveMediaHandlers.push({ query: query, handler: handler });
};
// handles responsive breakpoints
Slider.prototype.componentWillMount = function componentWillMount() {
var _this2 = this;
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 = void 0;
if (index === 0) {
bQuery = (0, _json2mq2.default)({ minWidth: 0, maxWidth: breakpoint });
} else {
bQuery = (0, _json2mq2.default)({ minWidth: breakpoints[index - 1] + 1, maxWidth: breakpoint });
}
// when not using server side rendering
_canUseDom2.default && _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 = (0, _json2mq2.default)({ minWidth: breakpoints.slice(-1)[0] });
_canUseDom2.default && this.media(query, function () {
_this2.setState({ breakpoint: null });
});
}
};
Slider.prototype.componentWillUnmount = function componentWillUnmount() {
this._responsiveMediaHandlers.forEach(function (obj) {
enquire.unregister(obj.query, obj.handler);
});
};
Slider.prototype.render = 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' : _extends({}, _defaultProps2.default, this.props, newProps[0].settings);
} else {
settings = _extends({}, _defaultProps2.default, this.props);
}
// force scrolling by one if centerMode is on
if (settings.centerMode) {
if (settings.slidesToScroll > 1 && ("development") !== 'production') {
console.warn('slidesToScroll should be equal to 1 in centerMode, you are using ' + 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 && ("development") !== 'production') {
console.warn('slidesToShow should be equal to 1 when fade is true, you\'re using ' + settings.slidesToShow);
}
if (settings.slidesToScroll > 1 && ("development") !== 'production') {
console.warn('slidesToScroll should be equal to 1 when fade is true, you\'re using ' + settings.slidesToScroll);
}
settings.slidesToShow = 1;
settings.slidesToScroll = 1;
}
// makes sure that children is an array, even when there is only 1 child
var children = _react2.default.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;
});
if (settings === 'unslick') {
var className = 'regular slider ' + (this.props.className || '');
return _react2.default.createElement(
'div',
{ className: className },
children
);
} else if (children.length <= settings.slidesToShow) {
settings.unslick = true;
}
return _react2.default.createElement(
_innerSlider.InnerSlider,
_extends({ ref: this.innerSliderRefHandler }, settings),
children
);
};
return Slider;
}(_react2.default.Component);
exports.default = Slider;
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.InnerSlider = undefined;
var _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; };
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _initialState = __webpack_require__(4);
var _initialState2 = _interopRequireDefault(_initialState);
var _defaultProps = __webpack_require__(5);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
var _createReactClass = __webpack_require__(6);
var _createReactClass2 = _interopRequireDefault(_createReactClass);
var _classnames = __webpack_require__(13);
var _classnames2 = _interopRequireDefault(_classnames);
var _innerSliderUtils = __webpack_require__(14);
var _track = __webpack_require__(16);
var _dots = __webpack_require__(17);
var _arrows = __webpack_require__(18);
var _resizeObserverPolyfill = __webpack_require__(19);
var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var InnerSlider = exports.InnerSlider = function (_React$Component) {
_inherits(InnerSlider, _React$Component);
function InnerSlider(props) {
_classCallCheck(this, InnerSlider);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.listRefHandler = function (ref) {
return _this.list = ref;
};
_this.trackRefHandler = function (ref) {
return _this.track = ref;
};
_this.adaptHeight = function () {
if (_this.props.adaptiveHeight && _this.list) {
var elem = _this.list.querySelector('[data-index="' + _this.state.currentSlide + '"]');
_this.list.style.height = (0, _innerSliderUtils.getHeight)(elem) + 'px';
}
};
_this.componentWillMount = function () {
_this.props.onInit && _this.props.onInit();
if (_this.props.lazyLoad) {
var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)(_extends({}, _this.props, _this.state));
if (slidesToLoad.length > 0) {
_this.setState(function (prevState, props) {
return { lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) };
});
if (_this.props.onLazyLoad) {
_this.props.onLazyLoad(slidesToLoad);
}
}
}
};
_this.componentDidMount = function () {
var spec = _extends({ 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 _resizeObserverPolyfill2.default(function (entries) {
return _this.onWindowResized();
});
_this.ro.observe(_this.list);
Array.from(document.querySelectorAll('.slick-slide')).forEach(function (slide) {
slide.onfocus = _this.props.pauseOnFocus ? _this.onSlideFocus : null;
slide.onblur = _this.props.pauseOnFocus ? _this.onSlideBlur : null;
});
// To support server-side rendering
if (!window) {
return;
}
if (window.addEventListener) {
window.addEventListener('resize', _this.onWindowResized);
} else {
window.attachEvent('onresize', _this.onWindowResized);
}
};
_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.componentWillReceiveProps = function (nextProps) {
var spec = _extends({ listRef: _this.list, trackRef: _this.track }, nextProps, _this.state);
_this.updateState(spec, false, function () {
if (_this.state.currentSlide >= _react2.default.Children.count(nextProps.children)) {
_this.changeSlide({
message: 'index',
index: _react2.default.Children.count(nextProps.children) - nextProps.slidesToShow,
currentSlide: _this.state.currentSlide
});
}
if (nextProps.autoplay) {
_this.autoPlay('update');
} else {
_this.pause('paused');
}
});
};
_this.componentDidUpdate = function () {
_this.checkImagesLoad();
_this.props.onReInit && _this.props.onReInit();
if (_this.props.lazyLoad) {
var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)(_extends({}, _this.props, _this.state));
if (slidesToLoad.length > 0) {
_this.setState(function (prevState, props) {
return { lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) };
});
if (_this.props.onLazyLoad) {
_this.props.onLazyLoad(slidesToLoad);
}
}
}
// if (this.props.onLazyLoad) {
// this.props.onLazyLoad([leftMostSlide])
// }
_this.adaptHeight();
};
_this.onWindowResized = function () {
var spec = _extends({ listRef: _this.list, trackRef: _this.track }, _this.props, _this.state);
_this.updateState(spec, true, 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;
};
_this.updateState = function (spec, setTrackStyle, callback) {
var updatedState = (0, _innerSliderUtils.initializedState)(spec);
spec = _extends({}, spec, updatedState, { slideIndex: updatedState.currentSlide });
var targetLeft = (0, _innerSliderUtils.getTrackLeft)(spec);
spec = _extends({}, spec, { left: targetLeft });
var trackStyle = (0, _innerSliderUtils.getTrackCSS)(spec);
if (setTrackStyle || _react2.default.Children.count(_this.props.children) !== _react2.default.Children.count(spec.children)) {
updatedState['trackStyle'] = trackStyle;
}
_this.setState(updatedState, callback);
};
_this.checkImagesLoad = function () {
var images = document.querySelectorAll('.slick-slide img');
var imagesCount = images.length,
loadedCount = 0;
Array.from(images).forEach(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 () {
prevClickHandler();
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();
};
}
}
});
};
_this.progressiveLazyLoad = function () {
var slidesToLoad = [];
var spec = _extends({}, _this.props, _this.state);
for (var index = _this.state.currentSlide; index < _this.state.slideCount + (0, _innerSliderUtils.getPostClones)(spec); index++) {
if (_this.state.lazyLoadedList.indexOf(index) < 0) {
slidesToLoad.push(index);
break;
}
}
for (var _index = _this.state.currentSlide - 1; _index >= -(0, _innerSliderUtils.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;
}
}
};
_this.slideHandler = function (index) {
var _this$props = _this.props,
asNavFor = _this$props.asNavFor,
currentSlide = _this$props.currentSlide,
beforeChange = _this$props.beforeChange,
onLazyLoad = _this$props.onLazyLoad,
speed = _this$props.speed,
afterChange = _this$props.afterChange;
var _slideHandler = (0, _innerSliderUtils.slideHandler)(_extends({ index: index }, _this.props, _this.state, { trackRef: _this.track })),
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);
_this.setState(state, function () {
asNavFor && asNavFor.innerSlider.state.currentSlide !== currentSlide && asNavFor.innerSlider.slideHandler(index);
_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);
});
};
_this.changeSlide = function (options) {
var spec = _extends({}, _this.props, _this.state);
var targetSlide = (0, _innerSliderUtils.changeSlide)(spec, options);
if (targetSlide !== 0 && !targetSlide) return;
_this.slideHandler(targetSlide);
};
_this.keyHandler = function (e) {
var dir = (0, _innerSliderUtils.keyHandler)(e, _this.props.accessibility, _this.props.rtl);
dir !== '' && _this.changeSlide({ message: dir });
};
_this.selectHandler = function (options) {
_this.changeSlide(options);
};
_this.swipeStart = function (e) {
var state = (0, _innerSliderUtils.swipeStart)(e, _this.props.swipe, _this.props.draggable);
state !== '' && _this.setState(state);
};
_this.swipeMove = function (e) {
var state = (0, _innerSliderUtils.swipeMove)(e, _extends({}, _this.props, _this.state, {
trackRef: _this.track,
listRef: _this.list,
slideIndex: _this.state.currentSlide
}));
if (!state) return;
_this.setState(state);
};
_this.swipeEnd = function (e) {
var state = (0, _innerSliderUtils.swipeEnd)(e, _extends({}, _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);
};
_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));
};
_this.slickNext = function () {
_this.callbackTimers.push(setTimeout(function () {
return _this.changeSlide({ message: 'next' });
}, 0));
};
_this.slickGoTo = function (slide) {
slide = Number(slide);
if (isNan(slide)) return '';
_this.callbackTimers.push(setTimeout(function () {
return _this.changeSlide({
message: 'index',
index: slide,
currentSlide: _this.state.currentSlide
});
}, 0));
};
_this.play = function () {
var nextIndex;
if (_this.props.rtl) {
nextIndex = _this.state.currentSlide - _this.props.slidesToScroll;
} else {
if ((0, _innerSliderUtils.canGoNext)(_extends({}, _this.props, _this.state))) {
nextIndex = _this.state.currentSlide + _this.props.slidesToScroll;
} else {
return false;
}
}
_this.slideHandler(nextIndex);
};
_this.autoPlay = function (playType) {
if (_this.autoplayTimer) {
console.warn("autoPlay is triggered more than once");
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' });
};
_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' });
}
}
};
_this.onDotsOver = function (e) {
return _this.props.autoplay && _this.pause('hovered');
};
_this.onDotsLeave = function (e) {
return _this.props.autoplay && _this.state.autoplaying === 'hovered' && _this.autoPlay('leave');
};
_this.onTrackOver = function (e) {
return _this.props.autoplay && _this.pause('hovered');
};
_this.onTrackLeave = function (e) {
return _this.props.autoplay && _this.state.autoplaying === 'hovered' && _this.autoPlay('leave');
};
_this.onSlideFocus = function (e) {
return _this.props.autoplay && _this.pause('focused');
};
_this.onSlideBlur = function (e) {
return _this.props.autoplay && _this.state.autoplaying === 'focused' && _this.autoPlay('blur');
};
_this.render = function () {
var className = (0, _classnames2.default)('regular', 'slider', 'slick-initialized', 'slick-slider', _this.props.className, {
'slick-vertical': _this.props.vertical
});
var spec = _extends({}, _this.props, _this.state);
var trackProps = (0, _innerSliderUtils.extractObject)(spec, ['fade', 'cssEase', 'speed', 'infinite', 'centerMode', 'focusOnSelect', 'currentSlide', 'lazyLoad', 'lazyLoadedList', 'rtl', 'slideWidth', 'slideHeight', 'listHeight', 'vertical', 'slidesToShow', 'slidesToScroll', 'slideCount', 'trackStyle', 'variableWidth', 'unslick', 'centerPadding']);
var pauseOnHover = _this.props.pauseOnHover;
trackProps = _extends({}, trackProps, {
onMouseEnter: pauseOnHover ? _this.onTrackOver : null,
onMouseLeave: pauseOnHover ? _this.onTrackLeave : null,
onMouseOver: pauseOnHover ? _this.onTrackOver : null,
focusOnSelect: _this.props.focusOnSelect ? _this.selectHandler : null
});
var dots;
if (_this.props.dots === true && _this.state.slideCount >= _this.props.slidesToShow) {
var dotProps = (0, _innerSliderUtils.extractObject)(spec, ['dotsClass', 'slideCount', 'slidesToShow', 'currentSlide', 'slidesToScroll', 'clickHandler', 'children', 'customPaging', 'infinite', 'appendDots']);
var pauseOnDotsHover = _this.props.pauseOnDotsHover;
dotProps = _extends({}, dotProps, {
clickHandler: _this.changeSlide,
onMouseEnter: pauseOnDotsHover ? _this.onDotsLeave : null,
onMouseOver: pauseOnDotsHover ? _this.onDotsOver : null,
onMouseLeave: pauseOnDotsHover ? _this.onDotsLeave : null
});
dots = _react2.default.createElement(_dots.Dots, dotProps);
}
var prevArrow, nextArrow;
var arrowProps = (0, _innerSliderUtils.extractObject)(spec, ['infinite', 'centerMode', 'currentSlide', 'slideCount', 'slidesToShow', 'prevArrow', 'nextArrow']);
arrowProps.clickHandler = _this.changeSlide;
if (_this.props.arrows) {
prevArrow = _react2.default.createElement(_arrows.PrevArrow, arrowProps);
nextArrow = _react2.default.createElement(_arrows.NextArrow, arrowProps);
}
var verticalHeightStyle = null;
if (_this.props.vertical) {
verticalHeightStyle = {
height: _this.state.listHeight
};
}
var centerPaddingStyle = null;
if (_this.props.vertical === false) {
if (_this.props.centerMode === true) {
centerPaddingStyle = {
padding: '0px ' + _this.props.centerPadding
};
}
} else {
if (_this.props.centerMode === true) {
centerPaddingStyle = {
padding: _this.props.centerPadding + ' 0px'
};
}
}
var listStyle = _extends({}, verticalHeightStyle, centerPaddingStyle);
var touchMove = _this.props.touchMove;
var listProps = {
className: 'slick-list',
style: listStyle,
onMouseDown: touchMove ? _this.swipeStart : null,
onMouseMove: _this.state.dragging && touchMove ? _this.swipeMove : null,
onMouseUp: touchMove ? _this.swipeEnd : null,
onMouseLeave: _this.state.dragging && touchMove ? _this.swipeEnd : null,
onTouchStart: touchMove ? _this.swipeStart : null,
onTouchMove: _this.state.dragging && touchMove ? _this.swipeMove : null,
onTouchEnd: touchMove ? _this.swipeEnd : null,
onTouchCancel: _this.state.dragging && touchMove ? _this.swipeEnd : null,
onKeyDown: _this.props.accessibility ? _this.keyHandler : null
};
var innerSliderProps = {
className: className,
dir: 'ltr'
};
if (_this.props.unslick) {
listProps = { className: 'slick-list' };
innerSliderProps = { className: className };
}
return _react2.default.createElement(
'div',
innerSliderProps,
!_this.props.unslick ? prevArrow : '',
_react2.default.createElement(
'div',
_extends({ ref: _this.listRefHandler }, listProps),
_react2.default.createElement(
_track.Track,
_extends({ ref: _this.trackRefHandler }, trackProps),
_this.props.children
)
),
!_this.props.unslick ? nextArrow : '',
!_this.props.unslick ? dots : ''
);
};
_this.list = null;
_this.track = null;
_this.state = _extends({}, _initialState2.default, {
currentSlide: _this.props.initialSlide
});
_this.callbackTimers = [];
return _this;
}
return InnerSlider;
}(_react2.default.Component);
/***/ }),
/* 4 */
/***/ (function(module, exports) {
"use strict";
exports.__esModule = true;
var initialState = {
animating: false,
autoplaying: null,
currentDirection: 0,
currentLeft: null,
currentSlide: 0,
direction: 1,
dragging: false,
edgeDragged: false,
initialized: false,
lazyLoadedList: [],
listHeight: null,
listWidth: null,
scrolling: false,
slideCount: null,
slideHeight: null,
slideWidth: null,
swipeLeft: null,
swiped: false, // used by swipeEvent. differentites between touch and swipe.
swiping: false,
touchObject: { startX: 0, startY: 0, curX: 0, curY: 0 },
trackStyle: {},
trackWidth: 0
};
exports.default = initialState;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var defaultProps = {
accessibility: true,
adaptiveHeight: false,
afterChange: null,
appendDots: function appendDots(dots) {
return _react2.default.createElement(
'ul',
{ style: { display: 'block' } },
dots
);
},
arrows: true,
autoplay: false,
autoplaySpeed: 3000,
beforeChange: null,
centerMode: false,
centerPadding: '50px',
className: '',
cssEase: 'ease',
customPaging: function customPaging(i) {
return _react2.default.createElement(
'button',
null,
i + 1
);
},
dots: false,
dotsClass: 'slick-dots',
draggable: true,
easing: 'linear',
edgeFriction: 0.35,
fade: false,
focusOnSelect: false,
infinite: true,
initialSlide: 0,
lazyLoad: null,
nextArrow: null,
onEdge: null,
onInit: null,
onLazyLoadError: null,
onReInit: null,
pauseOnDotsHover: false,
pauseOnFocus: false,
pauseOnHover: true,
prevArrow: null,
responsive: null,
rtl: false,
slide: 'div',
slidesToScroll: 1,
slidesToShow: 1,
speed: 500,
swipe: true,
swipeEvent: null,
swipeToSlide: false,
touchMove: true,
touchThreshold: 5,
useCSS: true,
useTransform: true,
variableWidth: false,
vertical: false,
waitForAnimate: true
};
exports.default = defaultProps;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
'use strict';
var React = __webpack_require__(2);
var factory = __webpack_require__(7);
if (typeof React === 'undefined') {
throw Error(
'create-react-class could not find the React object. If you are using script tags, ' +
'make sure that React is being loaded before create-react-class.'
);
}
// Hack to grab NoopUpdateQueue from isomorphic React
var ReactNoopUpdateQueue = new React.Component().updater;
module.exports = factory(
React.Component,
React.isValidElement,
ReactNoopUpdateQueue
);
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
'use strict';
var _assign = __webpack_require__(8);
var emptyObject = __webpack_require__(9);
var _invariant = __webpack_require__(10);
if (true) {
var warning = __webpack_require__(11);
}
var MIXINS_KEY = 'mixins';
// Helper function to allow the creation of anonymous functions which do not
// have .name set to the name of the variable being assigned to.
function identity(fn) {
return fn;
}
var ReactPropTypeLocationNames;
if (true) {
ReactPropTypeLocationNames = {
prop: 'prop',
context: 'context',
childContext: 'child context'
};
} else {
ReactPropTypeLocationNames = {};
}
function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
/**
* Policies that describe methods in `ReactClassInterface`.
*/
var injectedMixins = [];
/**
* Composite components are higher-level components that compose other composite
* or host components.
*
* To create a new type of `ReactClass`, pass a specification of
* your new class to `React.createClass`. The only requirement of your class
* specification is that you implement a `render` method.
*
* var MyComponent = React.createClass({
* render: function() {
* return <div>Hello World</div>;
* }
* });
*
* The class specification supports a specific protocol of methods that have
* special meaning (e.g. `render`). See `ReactClassInterface` for
* more the comprehensive protocol. Any other properties and methods in the
* class specification will be available on the prototype.
*
* @interface ReactClassInterface
* @internal
*/
var ReactClassInterface = {
/**
* An array of Mixin objects to include when defining your component.
*
* @type {array}
* @optional
*/
mixins: 'DEFINE_MANY',
/**
* An object containing properties and methods that should be defined on
* the component's constructor instead of its prototype (static methods).
*
* @type {object}
* @optional
*/
statics: 'DEFINE_MANY',
/**
* Definition of prop types for this component.
*
* @type {object}
* @optional
*/
propTypes: 'DEFINE_MANY',
/**
* Definition of context types for this component.
*
* @type {object}
* @optional
*/
contextTypes: 'DEFINE_MANY',
/**
* Definition of context types this component sets for its children.
*
* @type {object}
* @optional
*/
childContextTypes: 'DEFINE_MANY',
// ==== Definition methods ====
/**
* Invoked when the component is mounted. Values in the mapping will be set on
* `this.props` if that prop is not specified (i.e. using an `in` check).
*
* This method is invoked before `getInitialState` and therefore cannot rely
* on `this.state` or use `this.setState`.
*
* @return {object}
* @optional
*/
getDefaultProps: 'DEFINE_MANY_MERGED',
/**
* Invoked once before the component is mounted. The return value will be used
* as the initial value of `this.state`.
*
* getInitialState: function() {
* return {
* isOn: false,
* fooBaz: new BazFoo()
* }
* }
*
* @return {object}
* @optional
*/
getInitialState: 'DEFINE_MANY_MERGED',
/**
* @return {object}
* @optional
*/
getChildContext: 'DEFINE_MANY_MERGED',
/**
* Uses props from `this.props` and state from `this.state` to render the
* structure of the component.
*
* No guarantees are made about when or how often this method is invoked, so
* it must not have side effects.
*
* render: function() {
* var name = this.props.name;
* return <div>Hello, {name}!</div>;
* }
*
* @return {ReactComponent}
* @required
*/
render: 'DEFINE_ONCE',
// ==== Delegate methods ====
/**
* Invoked when the component is initially created and about to be mounted.
* This may have side effects, but any external subscriptions or data created
* by this method must be cleaned up in `componentWillUnmount`.
*
* @optional
*/
componentWillMount: 'DEFINE_MANY',
/**
* Invoked when the component has been mounted and has a DOM representation.
* However, there is no guarantee that the DOM node is in the document.
*
* Use this as an opportunity to operate on the DOM when the component has
* been mounted (initialized and rendered) for the first time.
*
* @param {DOMElement} rootNode DOM element representing the component.
* @optional
*/
componentDidMount: 'DEFINE_MANY',
/**
* Invoked before the component receives new props.
*
* Use this as an opportunity to react to a prop transition by updating the
* state using `this.setState`. Current props are accessed via `this.props`.
*
* componentWillReceiveProps: function(nextProps, nextContext) {
* this.setState({
* likesIncreasing: nextProps.likeCount > this.props.likeCount
* });
* }
*
* NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
* transition may cause a state change, but the opposite is not true. If you
* need it, you are probably looking for `componentWillUpdate`.
*
* @param {object} nextProps
* @optional
*/
componentWillReceiveProps: 'DEFINE_MANY',
/**
* Invoked while deciding if the component should be updated as a result of
* receiving new props, state and/or context.
*
* Use this as an opportunity to `return false` when you're certain that the
* transition to the new props/state/context will not require a component
* update.
*
* shouldComponentUpdate: function(nextProps, nextState, nextContext) {
* return !equal(nextProps, this.props) ||
* !equal(nextState, this.state) ||
* !equal(nextContext, this.context);
* }
*
* @param {object} nextProps
* @param {?object} nextState
* @param {?object} nextContext
* @return {boolean} True if the component should update.
* @optional
*/
shouldComponentUpdate: 'DEFINE_ONCE',
/**
* Invoked when the component is about to update due to a transition from
* `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
* and `nextContext`.
*
* Use this as an opportunity to perform preparation before an update occurs.
*
* NOTE: You **cannot** use `this.setState()` in this method.
*
* @param {object} nextProps
* @param {?object} nextState
* @param {?object} nextContext
* @param {ReactReconcileTransaction} transaction
* @optional
*/
componentWillUpdate: 'DEFINE_MANY',
/**
* Invoked when the component's DOM representation has been updated.
*
* Use this as an opportunity to operate on the DOM when the component has
* been updated.
*
* @param {object} prevProps
* @param {?object} prevState
* @param {?object} prevContext
* @param {DOMElement} rootNode DOM element representing the component.
* @optional
*/
componentDidUpdate: 'DEFINE_MANY',
/**
* Invoked when the component is about to be removed from its parent and have
* its DOM representation destroyed.
*
* Use this as an opportunity to deallocate any external resources.
*
* NOTE: There is no `componentDidUnmount` since your component will have been
* destroyed by that point.
*
* @optional
*/
componentWillUnmount: 'DEFINE_MANY',
// ==== Advanced methods ====
/**
* Updates the component's currently mounted DOM representation.
*
* By default, this implements React's rendering and reconciliation algorithm.
* Sophisticated clients may wish to override this.
*
* @param {ReactReconcileTransaction} transaction
* @internal
* @overridable
*/
updateComponent: 'OVERRIDE_BASE'
};
/**
* Mapping from class specification keys to special processing functions.
*
* Although these are declared like instance properties in the specification
* when defining classes using `React.createClass`, they are actually static
* and are accessible on the constructor instead of the prototype. Despite
* being static, they must be defined outside of the "statics" key under
* which all other static methods are defined.
*/
var RESERVED_SPEC_KEYS = {
displayName: function(Constructor, displayName) {
Constructor.displayName = displayName;
},
mixins: function(Constructor, mixins) {
if (mixins) {
for (var i = 0; i < mixins.length; i++) {
mixSpecIntoComponent(Constructor, mixins[i]);
}
}
},
childContextTypes: function(Constructor, childContextTypes) {
if (true) {
validateTypeDef(Constructor, childContextTypes, 'childContext');
}
Constructor.childContextTypes = _assign(
{},
Constructor.childContextTypes,
childContextTypes
);
},
contextTypes: function(Constructor, contextTypes) {
if (true) {
validateTypeDef(Constructor, contextTypes, 'context');
}
Constructor.contextTypes = _assign(
{},
Constructor.contextTypes,
contextTypes
);
},
/**
* Special case getDefaultProps which should move into statics but requires
* automatic merging.
*/
getDefaultProps: function(Constructor, getDefaultProps) {
if (Constructor.getDefaultProps) {
Constructor.getDefaultProps = createMergedResultFunction(
Constructor.getDefaultProps,
getDefaultProps
);
} else {
Constructor.getDefaultProps = getDefaultProps;
}
},
propTypes: function(Constructor, propTypes) {
if (true) {
validateTypeDef(Constructor, propTypes, 'prop');
}
Constructor.propTypes = _assign({}, Constructor.propTypes, propTypes);
},
statics: function(Constructor, statics) {
mixStaticSpecIntoComponent(Constructor, statics);
},
autobind: function() {}
};
function validateTypeDef(Constructor, typeDef, location) {
for (var propName in typeDef) {
if (typeDef.hasOwnProperty(propName)) {
// use a warning instead of an _invariant so components
// don't show up in prod but only in __DEV__
if (true) {
warning(
typeof typeDef[propName] === 'function',
'%s: %s type `%s` is invalid; it must be a function, usually from ' +
'React.PropTypes.',
Constructor.displayName || 'ReactClass',
ReactPropTypeLocationNames[location],
propName
);
}
}
}
}
function validateMethodOverride(isAlreadyDefined, name) {
var specPolicy = ReactClassInterface.hasOwnProperty(name)
? ReactClassInterface[name]
: null;
// Disallow overriding of base class methods unless explicitly allowed.
if (ReactClassMixin.hasOwnProperty(name)) {
_invariant(
specPolicy === 'OVERRIDE_BASE',
'ReactClassInterface: You are attempting to override ' +
'`%s` from your class specification. Ensure that your method names ' +
'do not overlap with React methods.',
name
);
}
// Disallow defining methods more than once unless explicitly allowed.
if (isAlreadyDefined) {
_invariant(
specPolicy === 'DEFINE_MANY' || specPolicy === 'DEFINE_MANY_MERGED',
'ReactClassInterface: You are attempting to define ' +
'`%s` on your component more than once. This conflict may be due ' +
'to a mixin.',
name
);
}
}
/**
* Mixin helper which handles policy validation and reserved
* specification keys when building React classes.
*/
function mixSpecIntoComponent(Constructor, spec) {
if (!spec) {
if (true) {
var typeofSpec = typeof spec;
var isMixinValid = typeofSpec === 'object' && spec !== null;
if (true) {
warning(
isMixinValid,
"%s: You're attempting to include a mixin that is either null " +
'or not an object. Check the mixins included by the component, ' +
'as well as any mixins they include themselves. ' +
'Expected object but got %s.',
Constructor.displayName || 'ReactClass',
spec === null ? null : typeofSpec
);
}
}
return;
}
_invariant(
typeof spec !== 'function',
"ReactClass: You're attempting to " +
'use a component class or function as a mixin. Instead, just use a ' +
'regular object.'
);
_invariant(
!isValidElement(spec),
"ReactClass: You're attempting to " +
'use a component as a mixin. Instead, just use a regular object.'
);
var proto = Constructor.prototype;
var autoBindPairs = proto.__reactAutoBindPairs;
// By handling mixins before any other properties, we ensure the same
// chaining order is applied to methods with DEFINE_MANY policy, whether
// mixins are listed before or after these methods in the spec.
if (spec.hasOwnProperty(MIXINS_KEY)) {
RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
}
for (var name in spec) {
if (!spec.hasOwnProperty(name)) {
continue;
}
if (name === MIXINS_KEY) {
// We have already handled mixins in a special case above.
continue;
}
var property = spec[name];
var isAlreadyDefined = proto.hasOwnProperty(name);
validateMethodOverride(isAlreadyDefined, name);
if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
RESERVED_SPEC_KEYS[name](Constructor, property);
} else {
// Setup methods on prototype:
// The following member methods sho