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