1 | function _extends() { _extends = Object.assign || 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 |
|
3 | import React, { useRef, useState, forwardRef } from 'react';
|
4 | import { uniqueClasses } from './utils.js';
|
5 | import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
|
6 | const SwiperSlide = forwardRef(({
|
7 | tag: Tag = 'div',
|
8 | children,
|
9 | className = '',
|
10 | swiper,
|
11 | zoom,
|
12 | virtualIndex,
|
13 | ...rest
|
14 | } = {}, externalRef) => {
|
15 | const slideElRef = useRef(null);
|
16 | const [slideClasses, setSlideClasses] = useState('swiper-slide');
|
17 |
|
18 | function updateClasses(_s, el, classNames) {
|
19 | if (el === slideElRef.current) {
|
20 | setSlideClasses(classNames);
|
21 | }
|
22 | }
|
23 |
|
24 | useIsomorphicLayoutEffect(() => {
|
25 | if (externalRef) {
|
26 | externalRef.current = slideElRef.current;
|
27 | }
|
28 |
|
29 | if (!slideElRef.current || !swiper) {
|
30 | return;
|
31 | }
|
32 |
|
33 | if (swiper.destroyed) {
|
34 | if (slideClasses !== 'swiper-slide') {
|
35 | setSlideClasses('swiper-slide');
|
36 | }
|
37 |
|
38 | return;
|
39 | }
|
40 |
|
41 | swiper.on('_slideClass', updateClasses);
|
42 |
|
43 | return () => {
|
44 | if (!swiper) return;
|
45 | swiper.off('_slideClass', updateClasses);
|
46 | };
|
47 | });
|
48 | useIsomorphicLayoutEffect(() => {
|
49 | if (swiper && slideElRef.current) {
|
50 | setSlideClasses(swiper.getSlideClasses(slideElRef.current));
|
51 | }
|
52 | }, [swiper]);
|
53 | let slideData;
|
54 |
|
55 | if (typeof children === 'function') {
|
56 | slideData = {
|
57 | isActive: slideClasses.indexOf('swiper-slide-active') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-active') >= 0,
|
58 | isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
|
59 | isDuplicate: slideClasses.indexOf('swiper-slide-duplicate') >= 0,
|
60 | isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-prev') >= 0,
|
61 | isNext: slideClasses.indexOf('swiper-slide-next') >= 0 || slideClasses.indexOf('swiper-slide-duplicate-next') >= 0
|
62 | };
|
63 | }
|
64 |
|
65 | const renderChildren = () => {
|
66 | return typeof children === 'function' ? children(slideData) : children;
|
67 | };
|
68 |
|
69 | return React.createElement(Tag, _extends({
|
70 | ref: slideElRef,
|
71 | className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
|
72 | "data-swiper-slide-index": virtualIndex
|
73 | }, rest), zoom ? React.createElement("div", {
|
74 | className: "swiper-zoom-container",
|
75 | "data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
|
76 | }, renderChildren()) : renderChildren());
|
77 | });
|
78 | SwiperSlide.displayName = 'SwiperSlide';
|
79 | export { SwiperSlide }; |
\ | No newline at end of file |