track.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. "use strict";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
  4. import _createClass from "@babel/runtime/helpers/esm/createClass";
  5. import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
  6. import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
  7. import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
  8. import _inherits from "@babel/runtime/helpers/esm/inherits";
  9. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  10. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  11. function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
  12. import React from "react";
  13. import classnames from "classnames";
  14. import { lazyStartIndex, lazyEndIndex, getPreClones } from "./utils/innerSliderUtils";
  15. // given specifications/props for a slide, fetch all the classes that need to be applied to the slide
  16. var getSlideClasses = function getSlideClasses(spec) {
  17. var slickActive, slickCenter, slickCloned;
  18. var centerOffset, index;
  19. if (spec.rtl) {
  20. index = spec.slideCount - 1 - spec.index;
  21. } else {
  22. index = spec.index;
  23. }
  24. slickCloned = index < 0 || index >= spec.slideCount;
  25. if (spec.centerMode) {
  26. centerOffset = Math.floor(spec.slidesToShow / 2);
  27. slickCenter = (index - spec.currentSlide) % spec.slideCount === 0;
  28. if (index > spec.currentSlide - centerOffset - 1 && index <= spec.currentSlide + centerOffset) {
  29. slickActive = true;
  30. }
  31. } else {
  32. slickActive = spec.currentSlide <= index && index < spec.currentSlide + spec.slidesToShow;
  33. }
  34. var focusedSlide;
  35. if (spec.targetSlide < 0) {
  36. focusedSlide = spec.targetSlide + spec.slideCount;
  37. } else if (spec.targetSlide >= spec.slideCount) {
  38. focusedSlide = spec.targetSlide - spec.slideCount;
  39. } else {
  40. focusedSlide = spec.targetSlide;
  41. }
  42. var slickCurrent = index === focusedSlide;
  43. return {
  44. "slick-slide": true,
  45. "slick-active": slickActive,
  46. "slick-center": slickCenter,
  47. "slick-cloned": slickCloned,
  48. "slick-current": slickCurrent // dubious in case of RTL
  49. };
  50. };
  51. var getSlideStyle = function getSlideStyle(spec) {
  52. var style = {};
  53. if (spec.variableWidth === undefined || spec.variableWidth === false) {
  54. style.width = spec.slideWidth;
  55. }
  56. if (spec.fade) {
  57. style.position = "relative";
  58. if (spec.vertical && spec.slideHeight) {
  59. style.top = -spec.index * parseInt(spec.slideHeight);
  60. } else {
  61. style.left = -spec.index * parseInt(spec.slideWidth);
  62. }
  63. style.opacity = spec.currentSlide === spec.index ? 1 : 0;
  64. style.zIndex = spec.currentSlide === spec.index ? 999 : 998;
  65. if (spec.useCSS) {
  66. style.transition = "opacity " + spec.speed + "ms " + spec.cssEase + ", " + "visibility " + spec.speed + "ms " + spec.cssEase;
  67. }
  68. }
  69. return style;
  70. };
  71. var getKey = function getKey(child, fallbackKey) {
  72. return child.key + "-" + fallbackKey;
  73. };
  74. var renderSlides = function renderSlides(spec) {
  75. var key;
  76. var slides = [];
  77. var preCloneSlides = [];
  78. var postCloneSlides = [];
  79. var childrenCount = React.Children.count(spec.children);
  80. var startIndex = lazyStartIndex(spec);
  81. var endIndex = lazyEndIndex(spec);
  82. React.Children.forEach(spec.children, function (elem, index) {
  83. var child;
  84. var childOnClickOptions = {
  85. message: "children",
  86. index: index,
  87. slidesToScroll: spec.slidesToScroll,
  88. currentSlide: spec.currentSlide
  89. };
  90. // in case of lazyLoad, whether or not we want to fetch the slide
  91. if (!spec.lazyLoad || spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0) {
  92. child = elem;
  93. } else {
  94. child = /*#__PURE__*/React.createElement("div", null);
  95. }
  96. var childStyle = getSlideStyle(_objectSpread(_objectSpread({}, spec), {}, {
  97. index: index
  98. }));
  99. var slideClass = child.props.className || "";
  100. var slideClasses = getSlideClasses(_objectSpread(_objectSpread({}, spec), {}, {
  101. index: index
  102. }));
  103. // push a cloned element of the desired slide
  104. slides.push( /*#__PURE__*/React.cloneElement(child, {
  105. key: "original" + getKey(child, index),
  106. "data-index": index,
  107. className: classnames(slideClasses, slideClass),
  108. tabIndex: "-1",
  109. "aria-hidden": !slideClasses["slick-active"],
  110. style: _objectSpread(_objectSpread({
  111. outline: "none"
  112. }, child.props.style || {}), childStyle),
  113. onClick: function onClick(e) {
  114. child.props && child.props.onClick && child.props.onClick(e);
  115. if (spec.focusOnSelect) {
  116. spec.focusOnSelect(childOnClickOptions);
  117. }
  118. }
  119. }));
  120. // if slide needs to be precloned or postcloned
  121. if (spec.infinite && childrenCount > 1 && spec.fade === false && !spec.unslick) {
  122. var preCloneNo = childrenCount - index;
  123. if (preCloneNo <= getPreClones(spec)) {
  124. key = -preCloneNo;
  125. if (key >= startIndex) {
  126. child = elem;
  127. }
  128. slideClasses = getSlideClasses(_objectSpread(_objectSpread({}, spec), {}, {
  129. index: key
  130. }));
  131. preCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
  132. key: "precloned" + getKey(child, key),
  133. "data-index": key,
  134. tabIndex: "-1",
  135. className: classnames(slideClasses, slideClass),
  136. "aria-hidden": !slideClasses["slick-active"],
  137. style: _objectSpread(_objectSpread({}, child.props.style || {}), childStyle),
  138. onClick: function onClick(e) {
  139. child.props && child.props.onClick && child.props.onClick(e);
  140. if (spec.focusOnSelect) {
  141. spec.focusOnSelect(childOnClickOptions);
  142. }
  143. }
  144. }));
  145. }
  146. key = childrenCount + index;
  147. if (key < endIndex) {
  148. child = elem;
  149. }
  150. slideClasses = getSlideClasses(_objectSpread(_objectSpread({}, spec), {}, {
  151. index: key
  152. }));
  153. postCloneSlides.push( /*#__PURE__*/React.cloneElement(child, {
  154. key: "postcloned" + getKey(child, key),
  155. "data-index": key,
  156. tabIndex: "-1",
  157. className: classnames(slideClasses, slideClass),
  158. "aria-hidden": !slideClasses["slick-active"],
  159. style: _objectSpread(_objectSpread({}, child.props.style || {}), childStyle),
  160. onClick: function onClick(e) {
  161. child.props && child.props.onClick && child.props.onClick(e);
  162. if (spec.focusOnSelect) {
  163. spec.focusOnSelect(childOnClickOptions);
  164. }
  165. }
  166. }));
  167. }
  168. });
  169. if (spec.rtl) {
  170. return preCloneSlides.concat(slides, postCloneSlides).reverse();
  171. } else {
  172. return preCloneSlides.concat(slides, postCloneSlides);
  173. }
  174. };
  175. export var Track = /*#__PURE__*/function (_React$PureComponent) {
  176. function Track() {
  177. var _this;
  178. _classCallCheck(this, Track);
  179. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  180. args[_key] = arguments[_key];
  181. }
  182. _this = _callSuper(this, Track, [].concat(args));
  183. _defineProperty(_this, "node", null);
  184. _defineProperty(_this, "handleRef", function (ref) {
  185. _this.node = ref;
  186. });
  187. return _this;
  188. }
  189. _inherits(Track, _React$PureComponent);
  190. return _createClass(Track, [{
  191. key: "render",
  192. value: function render() {
  193. var slides = renderSlides(this.props);
  194. var _this$props = this.props,
  195. onMouseEnter = _this$props.onMouseEnter,
  196. onMouseOver = _this$props.onMouseOver,
  197. onMouseLeave = _this$props.onMouseLeave;
  198. var mouseEvents = {
  199. onMouseEnter: onMouseEnter,
  200. onMouseOver: onMouseOver,
  201. onMouseLeave: onMouseLeave
  202. };
  203. return /*#__PURE__*/React.createElement("div", _extends({
  204. ref: this.handleRef,
  205. className: "slick-track",
  206. style: this.props.trackStyle
  207. }, mouseEvents), slides);
  208. }
  209. }]);
  210. }(React.PureComponent);