inner-slider.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.InnerSlider = void 0;
  7. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  11. var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
  12. var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
  13. var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
  14. var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
  15. var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
  16. var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
  17. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  18. var _react = _interopRequireDefault(require("react"));
  19. var _initialState = _interopRequireDefault(require("./initial-state"));
  20. var _throttleDebounce = require("throttle-debounce");
  21. var _classnames = _interopRequireDefault(require("classnames"));
  22. var _innerSliderUtils = require("./utils/innerSliderUtils");
  23. var _track = require("./track");
  24. var _dots = require("./dots");
  25. var _arrows = require("./arrows");
  26. var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
  27. var _excluded = ["animating"];
  28. function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
  29. var InnerSlider = exports.InnerSlider = /*#__PURE__*/function (_React$Component) {
  30. function InnerSlider(props) {
  31. var _this;
  32. (0, _classCallCheck2["default"])(this, InnerSlider);
  33. _this = _callSuper(this, InnerSlider, [props]);
  34. (0, _defineProperty2["default"])(_this, "listRefHandler", function (ref) {
  35. return _this.list = ref;
  36. });
  37. (0, _defineProperty2["default"])(_this, "trackRefHandler", function (ref) {
  38. return _this.track = ref;
  39. });
  40. (0, _defineProperty2["default"])(_this, "adaptHeight", function () {
  41. if (_this.props.adaptiveHeight && _this.list) {
  42. var elem = _this.list.querySelector("[data-index=\"".concat(_this.state.currentSlide, "\"]"));
  43. _this.list.style.height = (0, _innerSliderUtils.getHeight)(elem) + "px";
  44. }
  45. });
  46. (0, _defineProperty2["default"])(_this, "componentDidMount", function () {
  47. _this.props.onInit && _this.props.onInit();
  48. if (_this.props.lazyLoad) {
  49. var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state));
  50. if (slidesToLoad.length > 0) {
  51. _this.setState(function (prevState) {
  52. return {
  53. lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)
  54. };
  55. });
  56. if (_this.props.onLazyLoad) {
  57. _this.props.onLazyLoad(slidesToLoad);
  58. }
  59. }
  60. }
  61. var spec = (0, _objectSpread2["default"])({
  62. listRef: _this.list,
  63. trackRef: _this.track
  64. }, _this.props);
  65. _this.updateState(spec, true, function () {
  66. _this.adaptHeight();
  67. _this.props.autoplay && _this.autoPlay("playing");
  68. });
  69. if (_this.props.lazyLoad === "progressive") {
  70. _this.lazyLoadTimer = setInterval(_this.progressiveLazyLoad, 1000);
  71. }
  72. _this.ro = new _resizeObserverPolyfill["default"](function () {
  73. if (_this.state.animating) {
  74. _this.onWindowResized(false); // don't set trackStyle hence don't break animation
  75. _this.callbackTimers.push(setTimeout(function () {
  76. return _this.onWindowResized();
  77. }, _this.props.speed));
  78. } else {
  79. _this.onWindowResized();
  80. }
  81. });
  82. _this.ro.observe(_this.list);
  83. document.querySelectorAll && Array.prototype.forEach.call(document.querySelectorAll(".slick-slide"), function (slide) {
  84. slide.onfocus = _this.props.pauseOnFocus ? _this.onSlideFocus : null;
  85. slide.onblur = _this.props.pauseOnFocus ? _this.onSlideBlur : null;
  86. });
  87. if (window.addEventListener) {
  88. window.addEventListener("resize", _this.onWindowResized);
  89. } else {
  90. window.attachEvent("onresize", _this.onWindowResized);
  91. }
  92. });
  93. (0, _defineProperty2["default"])(_this, "componentWillUnmount", function () {
  94. if (_this.animationEndCallback) {
  95. clearTimeout(_this.animationEndCallback);
  96. }
  97. if (_this.lazyLoadTimer) {
  98. clearInterval(_this.lazyLoadTimer);
  99. }
  100. if (_this.callbackTimers.length) {
  101. _this.callbackTimers.forEach(function (timer) {
  102. return clearTimeout(timer);
  103. });
  104. _this.callbackTimers = [];
  105. }
  106. if (window.addEventListener) {
  107. window.removeEventListener("resize", _this.onWindowResized);
  108. } else {
  109. window.detachEvent("onresize", _this.onWindowResized);
  110. }
  111. if (_this.autoplayTimer) {
  112. clearInterval(_this.autoplayTimer);
  113. }
  114. _this.ro.disconnect();
  115. });
  116. (0, _defineProperty2["default"])(_this, "componentDidUpdate", function (prevProps) {
  117. _this.checkImagesLoad();
  118. _this.props.onReInit && _this.props.onReInit();
  119. if (_this.props.lazyLoad) {
  120. var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state));
  121. if (slidesToLoad.length > 0) {
  122. _this.setState(function (prevState) {
  123. return {
  124. lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)
  125. };
  126. });
  127. if (_this.props.onLazyLoad) {
  128. _this.props.onLazyLoad(slidesToLoad);
  129. }
  130. }
  131. }
  132. // if (this.props.onLazyLoad) {
  133. // this.props.onLazyLoad([leftMostSlide])
  134. // }
  135. _this.adaptHeight();
  136. var spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
  137. listRef: _this.list,
  138. trackRef: _this.track
  139. }, _this.props), _this.state);
  140. var setTrackStyle = _this.didPropsChange(prevProps);
  141. setTrackStyle && _this.updateState(spec, setTrackStyle, function () {
  142. if (_this.state.currentSlide >= _react["default"].Children.count(_this.props.children)) {
  143. _this.changeSlide({
  144. message: "index",
  145. index: _react["default"].Children.count(_this.props.children) - _this.props.slidesToShow,
  146. currentSlide: _this.state.currentSlide
  147. });
  148. }
  149. if (prevProps.autoplay !== _this.props.autoplay || prevProps.autoplaySpeed !== _this.props.autoplaySpeed) {
  150. if (!prevProps.autoplay && _this.props.autoplay) {
  151. _this.autoPlay("playing");
  152. } else if (_this.props.autoplay) {
  153. _this.autoPlay("update");
  154. } else {
  155. _this.pause("paused");
  156. }
  157. }
  158. });
  159. });
  160. (0, _defineProperty2["default"])(_this, "onWindowResized", function (setTrackStyle) {
  161. if (_this.debouncedResize) _this.debouncedResize.cancel();
  162. _this.debouncedResize = (0, _throttleDebounce.debounce)(50, function () {
  163. return _this.resizeWindow(setTrackStyle);
  164. });
  165. _this.debouncedResize();
  166. });
  167. (0, _defineProperty2["default"])(_this, "resizeWindow", function () {
  168. var setTrackStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  169. var isTrackMounted = Boolean(_this.track && _this.track.node);
  170. // prevent warning: setting state on unmounted component (server side rendering)
  171. if (!isTrackMounted) return;
  172. var spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
  173. listRef: _this.list,
  174. trackRef: _this.track
  175. }, _this.props), _this.state);
  176. _this.updateState(spec, setTrackStyle, function () {
  177. if (_this.props.autoplay) _this.autoPlay("update");else _this.pause("paused");
  178. });
  179. // animating state should be cleared while resizing, otherwise autoplay stops working
  180. _this.setState({
  181. animating: false
  182. });
  183. clearTimeout(_this.animationEndCallback);
  184. delete _this.animationEndCallback;
  185. });
  186. (0, _defineProperty2["default"])(_this, "updateState", function (spec, setTrackStyle, callback) {
  187. var updatedState = (0, _innerSliderUtils.initializedState)(spec);
  188. spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spec), updatedState), {}, {
  189. slideIndex: updatedState.currentSlide
  190. });
  191. var targetLeft = (0, _innerSliderUtils.getTrackLeft)(spec);
  192. spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spec), {}, {
  193. left: targetLeft
  194. });
  195. var trackStyle = (0, _innerSliderUtils.getTrackCSS)(spec);
  196. if (setTrackStyle || _react["default"].Children.count(_this.props.children) !== _react["default"].Children.count(spec.children)) {
  197. updatedState["trackStyle"] = trackStyle;
  198. }
  199. _this.setState(updatedState, callback);
  200. });
  201. (0, _defineProperty2["default"])(_this, "ssrInit", function () {
  202. if (_this.props.variableWidth) {
  203. var _trackWidth = 0,
  204. _trackLeft = 0;
  205. var childrenWidths = [];
  206. var preClones = (0, _innerSliderUtils.getPreClones)((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state), {}, {
  207. slideCount: _this.props.children.length
  208. }));
  209. var postClones = (0, _innerSliderUtils.getPostClones)((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state), {}, {
  210. slideCount: _this.props.children.length
  211. }));
  212. _this.props.children.forEach(function (child) {
  213. childrenWidths.push(child.props.style.width);
  214. _trackWidth += child.props.style.width;
  215. });
  216. for (var i = 0; i < preClones; i++) {
  217. _trackLeft += childrenWidths[childrenWidths.length - 1 - i];
  218. _trackWidth += childrenWidths[childrenWidths.length - 1 - i];
  219. }
  220. for (var _i = 0; _i < postClones; _i++) {
  221. _trackWidth += childrenWidths[_i];
  222. }
  223. for (var _i2 = 0; _i2 < _this.state.currentSlide; _i2++) {
  224. _trackLeft += childrenWidths[_i2];
  225. }
  226. var _trackStyle = {
  227. width: _trackWidth + "px",
  228. left: -_trackLeft + "px"
  229. };
  230. if (_this.props.centerMode) {
  231. var currentWidth = "".concat(childrenWidths[_this.state.currentSlide], "px");
  232. _trackStyle.left = "calc(".concat(_trackStyle.left, " + (100% - ").concat(currentWidth, ") / 2 ) ");
  233. }
  234. return {
  235. trackStyle: _trackStyle
  236. };
  237. }
  238. var childrenCount = _react["default"].Children.count(_this.props.children);
  239. var spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state), {}, {
  240. slideCount: childrenCount
  241. });
  242. var slideCount = (0, _innerSliderUtils.getPreClones)(spec) + (0, _innerSliderUtils.getPostClones)(spec) + childrenCount;
  243. var trackWidth = 100 / _this.props.slidesToShow * slideCount;
  244. var slideWidth = 100 / slideCount;
  245. var trackLeft = -slideWidth * ((0, _innerSliderUtils.getPreClones)(spec) + _this.state.currentSlide) * trackWidth / 100;
  246. if (_this.props.centerMode) {
  247. trackLeft += (100 - slideWidth * trackWidth / 100) / 2;
  248. }
  249. var trackStyle = {
  250. width: trackWidth + "%",
  251. left: trackLeft + "%"
  252. };
  253. return {
  254. slideWidth: slideWidth + "%",
  255. trackStyle: trackStyle
  256. };
  257. });
  258. (0, _defineProperty2["default"])(_this, "checkImagesLoad", function () {
  259. var images = _this.list && _this.list.querySelectorAll && _this.list.querySelectorAll(".slick-slide img") || [];
  260. var imagesCount = images.length,
  261. loadedCount = 0;
  262. Array.prototype.forEach.call(images, function (image) {
  263. var handler = function handler() {
  264. return ++loadedCount && loadedCount >= imagesCount && _this.onWindowResized();
  265. };
  266. if (!image.onclick) {
  267. image.onclick = function () {
  268. return image.parentNode.focus();
  269. };
  270. } else {
  271. var prevClickHandler = image.onclick;
  272. image.onclick = function (e) {
  273. prevClickHandler(e);
  274. image.parentNode.focus();
  275. };
  276. }
  277. if (!image.onload) {
  278. if (_this.props.lazyLoad) {
  279. image.onload = function () {
  280. _this.adaptHeight();
  281. _this.callbackTimers.push(setTimeout(_this.onWindowResized, _this.props.speed));
  282. };
  283. } else {
  284. image.onload = handler;
  285. image.onerror = function () {
  286. handler();
  287. _this.props.onLazyLoadError && _this.props.onLazyLoadError();
  288. };
  289. }
  290. }
  291. });
  292. });
  293. (0, _defineProperty2["default"])(_this, "progressiveLazyLoad", function () {
  294. var slidesToLoad = [];
  295. var spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state);
  296. for (var index = _this.state.currentSlide; index < _this.state.slideCount + (0, _innerSliderUtils.getPostClones)(spec); index++) {
  297. if (_this.state.lazyLoadedList.indexOf(index) < 0) {
  298. slidesToLoad.push(index);
  299. break;
  300. }
  301. }
  302. for (var _index = _this.state.currentSlide - 1; _index >= -(0, _innerSliderUtils.getPreClones)(spec); _index--) {
  303. if (_this.state.lazyLoadedList.indexOf(_index) < 0) {
  304. slidesToLoad.push(_index);
  305. break;
  306. }
  307. }
  308. if (slidesToLoad.length > 0) {
  309. _this.setState(function (state) {
  310. return {
  311. lazyLoadedList: state.lazyLoadedList.concat(slidesToLoad)
  312. };
  313. });
  314. if (_this.props.onLazyLoad) {
  315. _this.props.onLazyLoad(slidesToLoad);
  316. }
  317. } else {
  318. if (_this.lazyLoadTimer) {
  319. clearInterval(_this.lazyLoadTimer);
  320. delete _this.lazyLoadTimer;
  321. }
  322. }
  323. });
  324. (0, _defineProperty2["default"])(_this, "slideHandler", function (index) {
  325. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  326. var _this$props = _this.props,
  327. asNavFor = _this$props.asNavFor,
  328. beforeChange = _this$props.beforeChange,
  329. onLazyLoad = _this$props.onLazyLoad,
  330. speed = _this$props.speed,
  331. afterChange = _this$props.afterChange;
  332. // capture currentslide before state is updated
  333. var currentSlide = _this.state.currentSlide;
  334. var _slideHandler = (0, _innerSliderUtils.slideHandler)((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
  335. index: index
  336. }, _this.props), _this.state), {}, {
  337. trackRef: _this.track,
  338. useCSS: _this.props.useCSS && !dontAnimate
  339. })),
  340. state = _slideHandler.state,
  341. nextState = _slideHandler.nextState;
  342. if (!state) return;
  343. beforeChange && beforeChange(currentSlide, state.currentSlide);
  344. var slidesToLoad = state.lazyLoadedList.filter(function (value) {
  345. return _this.state.lazyLoadedList.indexOf(value) < 0;
  346. });
  347. onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad);
  348. if (!_this.props.waitForAnimate && _this.animationEndCallback) {
  349. clearTimeout(_this.animationEndCallback);
  350. afterChange && afterChange(currentSlide);
  351. delete _this.animationEndCallback;
  352. }
  353. _this.setState(state, function () {
  354. // asNavForIndex check is to avoid recursive calls of slideHandler in waitForAnimate=false mode
  355. if (asNavFor && _this.asNavForIndex !== index) {
  356. _this.asNavForIndex = index;
  357. asNavFor.innerSlider.slideHandler(index);
  358. }
  359. if (!nextState) return;
  360. _this.animationEndCallback = setTimeout(function () {
  361. var animating = nextState.animating,
  362. firstBatch = (0, _objectWithoutProperties2["default"])(nextState, _excluded);
  363. _this.setState(firstBatch, function () {
  364. _this.callbackTimers.push(setTimeout(function () {
  365. return _this.setState({
  366. animating: animating
  367. });
  368. }, 10));
  369. afterChange && afterChange(state.currentSlide);
  370. delete _this.animationEndCallback;
  371. });
  372. }, speed);
  373. });
  374. });
  375. (0, _defineProperty2["default"])(_this, "changeSlide", function (options) {
  376. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  377. var spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state);
  378. var targetSlide = (0, _innerSliderUtils.changeSlide)(spec, options);
  379. if (targetSlide !== 0 && !targetSlide) return;
  380. if (dontAnimate === true) {
  381. _this.slideHandler(targetSlide, dontAnimate);
  382. } else {
  383. _this.slideHandler(targetSlide);
  384. }
  385. _this.props.autoplay && _this.autoPlay("update");
  386. if (_this.props.focusOnSelect) {
  387. var nodes = _this.list.querySelectorAll(".slick-current");
  388. nodes[0] && nodes[0].focus();
  389. }
  390. });
  391. (0, _defineProperty2["default"])(_this, "clickHandler", function (e) {
  392. if (_this.clickable === false) {
  393. e.stopPropagation();
  394. e.preventDefault();
  395. }
  396. _this.clickable = true;
  397. });
  398. (0, _defineProperty2["default"])(_this, "keyHandler", function (e) {
  399. var dir = (0, _innerSliderUtils.keyHandler)(e, _this.props.accessibility, _this.props.rtl);
  400. dir !== "" && _this.changeSlide({
  401. message: dir
  402. });
  403. });
  404. (0, _defineProperty2["default"])(_this, "selectHandler", function (options) {
  405. _this.changeSlide(options);
  406. });
  407. (0, _defineProperty2["default"])(_this, "disableBodyScroll", function () {
  408. var preventDefault = function preventDefault(e) {
  409. e = e || window.event;
  410. if (e.preventDefault) e.preventDefault();
  411. e.returnValue = false;
  412. };
  413. window.ontouchmove = preventDefault;
  414. });
  415. (0, _defineProperty2["default"])(_this, "enableBodyScroll", function () {
  416. window.ontouchmove = null;
  417. });
  418. (0, _defineProperty2["default"])(_this, "swipeStart", function (e) {
  419. if (_this.props.verticalSwiping) {
  420. _this.disableBodyScroll();
  421. }
  422. var state = (0, _innerSliderUtils.swipeStart)(e, _this.props.swipe, _this.props.draggable);
  423. state !== "" && _this.setState(state);
  424. });
  425. (0, _defineProperty2["default"])(_this, "swipeMove", function (e) {
  426. var state = (0, _innerSliderUtils.swipeMove)(e, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state), {}, {
  427. trackRef: _this.track,
  428. listRef: _this.list,
  429. slideIndex: _this.state.currentSlide
  430. }));
  431. if (!state) return;
  432. if (state["swiping"]) {
  433. _this.clickable = false;
  434. }
  435. _this.setState(state);
  436. });
  437. (0, _defineProperty2["default"])(_this, "swipeEnd", function (e) {
  438. var state = (0, _innerSliderUtils.swipeEnd)(e, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state), {}, {
  439. trackRef: _this.track,
  440. listRef: _this.list,
  441. slideIndex: _this.state.currentSlide
  442. }));
  443. if (!state) return;
  444. var triggerSlideHandler = state["triggerSlideHandler"];
  445. delete state["triggerSlideHandler"];
  446. _this.setState(state);
  447. if (triggerSlideHandler === undefined) return;
  448. _this.slideHandler(triggerSlideHandler);
  449. if (_this.props.verticalSwiping) {
  450. _this.enableBodyScroll();
  451. }
  452. });
  453. (0, _defineProperty2["default"])(_this, "touchEnd", function (e) {
  454. _this.swipeEnd(e);
  455. _this.clickable = true;
  456. });
  457. (0, _defineProperty2["default"])(_this, "slickPrev", function () {
  458. // this and fellow methods are wrapped in setTimeout
  459. // to make sure initialize setState has happened before
  460. // any of such methods are called
  461. _this.callbackTimers.push(setTimeout(function () {
  462. return _this.changeSlide({
  463. message: "previous"
  464. });
  465. }, 0));
  466. });
  467. (0, _defineProperty2["default"])(_this, "slickNext", function () {
  468. _this.callbackTimers.push(setTimeout(function () {
  469. return _this.changeSlide({
  470. message: "next"
  471. });
  472. }, 0));
  473. });
  474. (0, _defineProperty2["default"])(_this, "slickGoTo", function (slide) {
  475. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  476. slide = Number(slide);
  477. if (isNaN(slide)) return "";
  478. _this.callbackTimers.push(setTimeout(function () {
  479. return _this.changeSlide({
  480. message: "index",
  481. index: slide,
  482. currentSlide: _this.state.currentSlide
  483. }, dontAnimate);
  484. }, 0));
  485. });
  486. (0, _defineProperty2["default"])(_this, "play", function () {
  487. var nextIndex;
  488. if (_this.props.rtl) {
  489. nextIndex = _this.state.currentSlide - _this.props.slidesToScroll;
  490. } else {
  491. if ((0, _innerSliderUtils.canGoNext)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state))) {
  492. nextIndex = _this.state.currentSlide + _this.props.slidesToScroll;
  493. } else {
  494. return false;
  495. }
  496. }
  497. _this.slideHandler(nextIndex);
  498. });
  499. (0, _defineProperty2["default"])(_this, "autoPlay", function (playType) {
  500. if (_this.autoplayTimer) {
  501. clearInterval(_this.autoplayTimer);
  502. }
  503. var autoplaying = _this.state.autoplaying;
  504. if (playType === "update") {
  505. if (autoplaying === "hovered" || autoplaying === "focused" || autoplaying === "paused") {
  506. return;
  507. }
  508. } else if (playType === "leave") {
  509. if (autoplaying === "paused" || autoplaying === "focused") {
  510. return;
  511. }
  512. } else if (playType === "blur") {
  513. if (autoplaying === "paused" || autoplaying === "hovered") {
  514. return;
  515. }
  516. }
  517. _this.autoplayTimer = setInterval(_this.play, _this.props.autoplaySpeed + 50);
  518. _this.setState({
  519. autoplaying: "playing"
  520. });
  521. });
  522. (0, _defineProperty2["default"])(_this, "pause", function (pauseType) {
  523. if (_this.autoplayTimer) {
  524. clearInterval(_this.autoplayTimer);
  525. _this.autoplayTimer = null;
  526. }
  527. var autoplaying = _this.state.autoplaying;
  528. if (pauseType === "paused") {
  529. _this.setState({
  530. autoplaying: "paused"
  531. });
  532. } else if (pauseType === "focused") {
  533. if (autoplaying === "hovered" || autoplaying === "playing") {
  534. _this.setState({
  535. autoplaying: "focused"
  536. });
  537. }
  538. } else {
  539. // pauseType is 'hovered'
  540. if (autoplaying === "playing") {
  541. _this.setState({
  542. autoplaying: "hovered"
  543. });
  544. }
  545. }
  546. });
  547. (0, _defineProperty2["default"])(_this, "onDotsOver", function () {
  548. return _this.props.autoplay && _this.pause("hovered");
  549. });
  550. (0, _defineProperty2["default"])(_this, "onDotsLeave", function () {
  551. return _this.props.autoplay && _this.state.autoplaying === "hovered" && _this.autoPlay("leave");
  552. });
  553. (0, _defineProperty2["default"])(_this, "onTrackOver", function () {
  554. return _this.props.autoplay && _this.pause("hovered");
  555. });
  556. (0, _defineProperty2["default"])(_this, "onTrackLeave", function () {
  557. return _this.props.autoplay && _this.state.autoplaying === "hovered" && _this.autoPlay("leave");
  558. });
  559. (0, _defineProperty2["default"])(_this, "onSlideFocus", function () {
  560. return _this.props.autoplay && _this.pause("focused");
  561. });
  562. (0, _defineProperty2["default"])(_this, "onSlideBlur", function () {
  563. return _this.props.autoplay && _this.state.autoplaying === "focused" && _this.autoPlay("blur");
  564. });
  565. (0, _defineProperty2["default"])(_this, "render", function () {
  566. var className = (0, _classnames["default"])("slick-slider", _this.props.className, {
  567. "slick-vertical": _this.props.vertical,
  568. "slick-initialized": true
  569. });
  570. var spec = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.props), _this.state);
  571. 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", "targetSlide", "useCSS"]);
  572. var pauseOnHover = _this.props.pauseOnHover;
  573. trackProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, trackProps), {}, {
  574. onMouseEnter: pauseOnHover ? _this.onTrackOver : null,
  575. onMouseLeave: pauseOnHover ? _this.onTrackLeave : null,
  576. onMouseOver: pauseOnHover ? _this.onTrackOver : null,
  577. focusOnSelect: _this.props.focusOnSelect && _this.clickable ? _this.selectHandler : null
  578. });
  579. var dots;
  580. if (_this.props.dots === true && _this.state.slideCount >= _this.props.slidesToShow) {
  581. var dotProps = (0, _innerSliderUtils.extractObject)(spec, ["dotsClass", "slideCount", "slidesToShow", "currentSlide", "slidesToScroll", "clickHandler", "children", "customPaging", "infinite", "appendDots"]);
  582. var pauseOnDotsHover = _this.props.pauseOnDotsHover;
  583. dotProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dotProps), {}, {
  584. clickHandler: _this.changeSlide,
  585. onMouseEnter: pauseOnDotsHover ? _this.onDotsLeave : null,
  586. onMouseOver: pauseOnDotsHover ? _this.onDotsOver : null,
  587. onMouseLeave: pauseOnDotsHover ? _this.onDotsLeave : null
  588. });
  589. dots = /*#__PURE__*/_react["default"].createElement(_dots.Dots, dotProps);
  590. }
  591. var prevArrow, nextArrow;
  592. var arrowProps = (0, _innerSliderUtils.extractObject)(spec, ["infinite", "centerMode", "currentSlide", "slideCount", "slidesToShow", "prevArrow", "nextArrow"]);
  593. arrowProps.clickHandler = _this.changeSlide;
  594. if (_this.props.arrows) {
  595. prevArrow = /*#__PURE__*/_react["default"].createElement(_arrows.PrevArrow, arrowProps);
  596. nextArrow = /*#__PURE__*/_react["default"].createElement(_arrows.NextArrow, arrowProps);
  597. }
  598. var verticalHeightStyle = null;
  599. if (_this.props.vertical) {
  600. verticalHeightStyle = {
  601. height: _this.state.listHeight
  602. };
  603. }
  604. var centerPaddingStyle = null;
  605. if (_this.props.vertical === false) {
  606. if (_this.props.centerMode === true) {
  607. centerPaddingStyle = {
  608. padding: "0px " + _this.props.centerPadding
  609. };
  610. }
  611. } else {
  612. if (_this.props.centerMode === true) {
  613. centerPaddingStyle = {
  614. padding: _this.props.centerPadding + " 0px"
  615. };
  616. }
  617. }
  618. var listStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, verticalHeightStyle), centerPaddingStyle);
  619. var touchMove = _this.props.touchMove;
  620. var listProps = {
  621. className: "slick-list",
  622. style: listStyle,
  623. onClick: _this.clickHandler,
  624. onMouseDown: touchMove ? _this.swipeStart : null,
  625. onMouseMove: _this.state.dragging && touchMove ? _this.swipeMove : null,
  626. onMouseUp: touchMove ? _this.swipeEnd : null,
  627. onMouseLeave: _this.state.dragging && touchMove ? _this.swipeEnd : null,
  628. onTouchStart: touchMove ? _this.swipeStart : null,
  629. onTouchMove: _this.state.dragging && touchMove ? _this.swipeMove : null,
  630. onTouchEnd: touchMove ? _this.touchEnd : null,
  631. onTouchCancel: _this.state.dragging && touchMove ? _this.swipeEnd : null,
  632. onKeyDown: _this.props.accessibility ? _this.keyHandler : null
  633. };
  634. var innerSliderProps = {
  635. className: className,
  636. dir: "ltr",
  637. style: _this.props.style
  638. };
  639. if (_this.props.unslick) {
  640. listProps = {
  641. className: "slick-list"
  642. };
  643. innerSliderProps = {
  644. className: className,
  645. style: _this.props.style
  646. };
  647. }
  648. return /*#__PURE__*/_react["default"].createElement("div", innerSliderProps, !_this.props.unslick ? prevArrow : "", /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
  649. ref: _this.listRefHandler
  650. }, listProps), /*#__PURE__*/_react["default"].createElement(_track.Track, (0, _extends2["default"])({
  651. ref: _this.trackRefHandler
  652. }, trackProps), _this.props.children)), !_this.props.unslick ? nextArrow : "", !_this.props.unslick ? dots : "");
  653. });
  654. _this.list = null;
  655. _this.track = null;
  656. _this.state = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _initialState["default"]), {}, {
  657. currentSlide: _this.props.initialSlide,
  658. targetSlide: _this.props.initialSlide ? _this.props.initialSlide : 0,
  659. slideCount: _react["default"].Children.count(_this.props.children)
  660. });
  661. _this.callbackTimers = [];
  662. _this.clickable = true;
  663. _this.debouncedResize = null;
  664. var ssrState = _this.ssrInit();
  665. _this.state = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.state), ssrState);
  666. return _this;
  667. }
  668. (0, _inherits2["default"])(InnerSlider, _React$Component);
  669. return (0, _createClass2["default"])(InnerSlider, [{
  670. key: "didPropsChange",
  671. value: function didPropsChange(prevProps) {
  672. var setTrackStyle = false;
  673. for (var _i3 = 0, _Object$keys = Object.keys(this.props); _i3 < _Object$keys.length; _i3++) {
  674. var key = _Object$keys[_i3];
  675. // eslint-disable-next-line no-prototype-builtins
  676. if (!prevProps.hasOwnProperty(key)) {
  677. setTrackStyle = true;
  678. break;
  679. }
  680. if ((0, _typeof2["default"])(prevProps[key]) === "object" || typeof prevProps[key] === "function" || isNaN(prevProps[key])) {
  681. continue;
  682. }
  683. if (prevProps[key] !== this.props[key]) {
  684. setTrackStyle = true;
  685. break;
  686. }
  687. }
  688. return setTrackStyle || _react["default"].Children.count(this.props.children) !== _react["default"].Children.count(prevProps.children);
  689. }
  690. }]);
  691. }(_react["default"].Component);