inner-slider.js 28 KB

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