track.js 8.9 KB

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