dots.js 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. "use strict";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  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. function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
  10. import React from "react";
  11. import classnames from "classnames";
  12. import { clamp } from "./utils/innerSliderUtils";
  13. var getDotCount = function getDotCount(spec) {
  14. var dots;
  15. if (spec.infinite) {
  16. dots = Math.ceil(spec.slideCount / spec.slidesToScroll);
  17. } else {
  18. dots = Math.ceil((spec.slideCount - spec.slidesToShow) / spec.slidesToScroll) + 1;
  19. }
  20. return dots;
  21. };
  22. export var Dots = /*#__PURE__*/function (_React$PureComponent) {
  23. function Dots() {
  24. _classCallCheck(this, Dots);
  25. return _callSuper(this, Dots, arguments);
  26. }
  27. _inherits(Dots, _React$PureComponent);
  28. return _createClass(Dots, [{
  29. key: "clickHandler",
  30. value: function clickHandler(options, e) {
  31. // In Autoplay the focus stays on clicked button even after transition
  32. // to next slide. That only goes away by click somewhere outside
  33. e.preventDefault();
  34. this.props.clickHandler(options);
  35. }
  36. }, {
  37. key: "render",
  38. value: function render() {
  39. var _this$props = this.props,
  40. onMouseEnter = _this$props.onMouseEnter,
  41. onMouseOver = _this$props.onMouseOver,
  42. onMouseLeave = _this$props.onMouseLeave,
  43. infinite = _this$props.infinite,
  44. slidesToScroll = _this$props.slidesToScroll,
  45. slidesToShow = _this$props.slidesToShow,
  46. slideCount = _this$props.slideCount,
  47. currentSlide = _this$props.currentSlide;
  48. var dotCount = getDotCount({
  49. slideCount: slideCount,
  50. slidesToScroll: slidesToScroll,
  51. slidesToShow: slidesToShow,
  52. infinite: infinite
  53. });
  54. var mouseEvents = {
  55. onMouseEnter: onMouseEnter,
  56. onMouseOver: onMouseOver,
  57. onMouseLeave: onMouseLeave
  58. };
  59. var dots = [];
  60. for (var i = 0; i < dotCount; i++) {
  61. var _rightBound = (i + 1) * slidesToScroll - 1;
  62. var rightBound = infinite ? _rightBound : clamp(_rightBound, 0, slideCount - 1);
  63. var _leftBound = rightBound - (slidesToScroll - 1);
  64. var leftBound = infinite ? _leftBound : clamp(_leftBound, 0, slideCount - 1);
  65. var className = classnames({
  66. "slick-active": infinite ? currentSlide >= leftBound && currentSlide <= rightBound : currentSlide === leftBound
  67. });
  68. var dotOptions = {
  69. message: "dots",
  70. index: i,
  71. slidesToScroll: slidesToScroll,
  72. currentSlide: currentSlide
  73. };
  74. var onClick = this.clickHandler.bind(this, dotOptions);
  75. dots = dots.concat( /*#__PURE__*/React.createElement("li", {
  76. key: i,
  77. className: className
  78. }, /*#__PURE__*/React.cloneElement(this.props.customPaging(i), {
  79. onClick: onClick
  80. })));
  81. }
  82. return /*#__PURE__*/React.cloneElement(this.props.appendDots(dots), _objectSpread({
  83. className: this.props.dotsClass
  84. }, mouseEvents));
  85. }
  86. }]);
  87. }(React.PureComponent);