swiper-slide.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  2. import React, { useRef, useState, forwardRef } from 'react';
  3. import { uniqueClasses } from '../components-shared/utils.js';
  4. import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
  5. import { SwiperSlideContext } from './context.js';
  6. const SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
  7. let {
  8. tag: Tag = 'div',
  9. children,
  10. className = '',
  11. swiper,
  12. zoom,
  13. lazy,
  14. virtualIndex,
  15. swiperSlideIndex,
  16. ...rest
  17. } = _temp === void 0 ? {} : _temp;
  18. const slideElRef = useRef(null);
  19. const [slideClasses, setSlideClasses] = useState('swiper-slide');
  20. const [lazyLoaded, setLazyLoaded] = useState(false);
  21. function updateClasses(_s, el, classNames) {
  22. if (el === slideElRef.current) {
  23. setSlideClasses(classNames);
  24. }
  25. }
  26. useIsomorphicLayoutEffect(() => {
  27. if (typeof swiperSlideIndex !== 'undefined') {
  28. slideElRef.current.swiperSlideIndex = swiperSlideIndex;
  29. }
  30. if (externalRef) {
  31. externalRef.current = slideElRef.current;
  32. }
  33. if (!slideElRef.current || !swiper) {
  34. return;
  35. }
  36. if (swiper.destroyed) {
  37. if (slideClasses !== 'swiper-slide') {
  38. setSlideClasses('swiper-slide');
  39. }
  40. return;
  41. }
  42. swiper.on('_slideClass', updateClasses);
  43. // eslint-disable-next-line
  44. return () => {
  45. if (!swiper) return;
  46. swiper.off('_slideClass', updateClasses);
  47. };
  48. });
  49. useIsomorphicLayoutEffect(() => {
  50. if (swiper && slideElRef.current && !swiper.destroyed) {
  51. setSlideClasses(swiper.getSlideClasses(slideElRef.current));
  52. }
  53. }, [swiper]);
  54. const slideData = {
  55. isActive: slideClasses.indexOf('swiper-slide-active') >= 0,
  56. isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
  57. isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0,
  58. isNext: slideClasses.indexOf('swiper-slide-next') >= 0
  59. };
  60. const renderChildren = () => {
  61. return typeof children === 'function' ? children(slideData) : children;
  62. };
  63. const onLoad = () => {
  64. setLazyLoaded(true);
  65. };
  66. return /*#__PURE__*/React.createElement(Tag, _extends({
  67. ref: slideElRef,
  68. className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
  69. "data-swiper-slide-index": virtualIndex,
  70. onLoad: onLoad
  71. }, rest), zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
  72. value: slideData
  73. }, /*#__PURE__*/React.createElement("div", {
  74. className: "swiper-zoom-container",
  75. "data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
  76. }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
  77. className: "swiper-lazy-preloader"
  78. }))), !zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
  79. value: slideData
  80. }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
  81. className: "swiper-lazy-preloader"
  82. })));
  83. });
  84. SwiperSlide.displayName = 'SwiperSlide';
  85. export { SwiperSlide };