123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394 |
- /**
- * Swiper React 11.1.15
- * Most modern mobile touch slider and framework with hardware accelerated transitions
- * https://swiperjs.com
- *
- * Copyright 2014-2024 Vladimir Kharlampidi
- *
- * Released under the MIT License
- *
- * Released on: November 18, 2024
- */
- import React, { useEffect, useLayoutEffect, useContext, createContext, forwardRef, useState, useRef } from 'react';
- import { S as Swiper$1 } from './shared/swiper-core.mjs';
- import { g as getParams, m as mountSwiper, a as getChangedParams, u as updateOnVirtualData } from './shared/update-on-virtual-data.mjs';
- import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination, e as extend, u as updateSwiper } from './shared/update-swiper.mjs';
- 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);
- }
- function isChildSwiperSlide(child) {
- return child.type && child.type.displayName && child.type.displayName.includes('SwiperSlide');
- }
- function processChildren(c) {
- const slides = [];
- React.Children.toArray(c).forEach(child => {
- if (isChildSwiperSlide(child)) {
- slides.push(child);
- } else if (child.props && child.props.children) {
- processChildren(child.props.children).forEach(slide => slides.push(slide));
- }
- });
- return slides;
- }
- function getChildren(c) {
- const slides = [];
- const slots = {
- 'container-start': [],
- 'container-end': [],
- 'wrapper-start': [],
- 'wrapper-end': []
- };
- React.Children.toArray(c).forEach(child => {
- if (isChildSwiperSlide(child)) {
- slides.push(child);
- } else if (child.props && child.props.slot && slots[child.props.slot]) {
- slots[child.props.slot].push(child);
- } else if (child.props && child.props.children) {
- const foundSlides = processChildren(child.props.children);
- if (foundSlides.length > 0) {
- foundSlides.forEach(slide => slides.push(slide));
- } else {
- slots['container-end'].push(child);
- }
- } else {
- slots['container-end'].push(child);
- }
- });
- return {
- slides,
- slots
- };
- }
- function renderVirtual(swiper, slides, virtualData) {
- if (!virtualData) return null;
- const getSlideIndex = index => {
- let slideIndex = index;
- if (index < 0) {
- slideIndex = slides.length + index;
- } else if (slideIndex >= slides.length) {
- // eslint-disable-next-line
- slideIndex = slideIndex - slides.length;
- }
- return slideIndex;
- };
- const style = swiper.isHorizontal() ? {
- [swiper.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
- } : {
- top: `${virtualData.offset}px`
- };
- const {
- from,
- to
- } = virtualData;
- const loopFrom = swiper.params.loop ? -slides.length : 0;
- const loopTo = swiper.params.loop ? slides.length * 2 : slides.length;
- const slidesToRender = [];
- for (let i = loopFrom; i < loopTo; i += 1) {
- if (i >= from && i <= to) {
- slidesToRender.push(slides[getSlideIndex(i)]);
- }
- }
- return slidesToRender.map((child, index) => {
- return /*#__PURE__*/React.cloneElement(child, {
- swiper,
- style,
- key: child.props.virtualIndex || child.key || `slide-${index}`
- });
- });
- }
- function useIsomorphicLayoutEffect(callback, deps) {
- // eslint-disable-next-line
- if (typeof window === 'undefined') return useEffect(callback, deps);
- return useLayoutEffect(callback, deps);
- }
- const SwiperSlideContext = /*#__PURE__*/createContext(null);
- const useSwiperSlide = () => {
- return useContext(SwiperSlideContext);
- };
- const SwiperContext = /*#__PURE__*/createContext(null);
- const useSwiper = () => {
- return useContext(SwiperContext);
- };
- const Swiper = /*#__PURE__*/forwardRef(function (_temp, externalElRef) {
- let {
- className,
- tag: Tag = 'div',
- wrapperTag: WrapperTag = 'div',
- children,
- onSwiper,
- ...rest
- } = _temp === void 0 ? {} : _temp;
- let eventsAssigned = false;
- const [containerClasses, setContainerClasses] = useState('swiper');
- const [virtualData, setVirtualData] = useState(null);
- const [breakpointChanged, setBreakpointChanged] = useState(false);
- const initializedRef = useRef(false);
- const swiperElRef = useRef(null);
- const swiperRef = useRef(null);
- const oldPassedParamsRef = useRef(null);
- const oldSlides = useRef(null);
- const nextElRef = useRef(null);
- const prevElRef = useRef(null);
- const paginationElRef = useRef(null);
- const scrollbarElRef = useRef(null);
- const {
- params: swiperParams,
- passedParams,
- rest: restProps,
- events
- } = getParams(rest);
- const {
- slides,
- slots
- } = getChildren(children);
- const onBeforeBreakpoint = () => {
- setBreakpointChanged(!breakpointChanged);
- };
- Object.assign(swiperParams.on, {
- _containerClasses(swiper, classes) {
- setContainerClasses(classes);
- }
- });
- const initSwiper = () => {
- // init swiper
- Object.assign(swiperParams.on, events);
- eventsAssigned = true;
- const passParams = {
- ...swiperParams
- };
- delete passParams.wrapperClass;
- swiperRef.current = new Swiper$1(passParams);
- if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
- swiperRef.current.virtual.slides = slides;
- const extendWith = {
- cache: false,
- slides,
- renderExternal: setVirtualData,
- renderExternalUpdate: false
- };
- extend(swiperRef.current.params.virtual, extendWith);
- extend(swiperRef.current.originalParams.virtual, extendWith);
- }
- };
- if (!swiperElRef.current) {
- initSwiper();
- }
- // Listen for breakpoints change
- if (swiperRef.current) {
- swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
- }
- const attachEvents = () => {
- if (eventsAssigned || !events || !swiperRef.current) return;
- Object.keys(events).forEach(eventName => {
- swiperRef.current.on(eventName, events[eventName]);
- });
- };
- const detachEvents = () => {
- if (!events || !swiperRef.current) return;
- Object.keys(events).forEach(eventName => {
- swiperRef.current.off(eventName, events[eventName]);
- });
- };
- useEffect(() => {
- return () => {
- if (swiperRef.current) swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
- };
- });
- // set initialized flag
- useEffect(() => {
- if (!initializedRef.current && swiperRef.current) {
- swiperRef.current.emitSlidesClasses();
- initializedRef.current = true;
- }
- });
- // mount swiper
- useIsomorphicLayoutEffect(() => {
- if (externalElRef) {
- externalElRef.current = swiperElRef.current;
- }
- if (!swiperElRef.current) return;
- if (swiperRef.current.destroyed) {
- initSwiper();
- }
- mountSwiper({
- el: swiperElRef.current,
- nextEl: nextElRef.current,
- prevEl: prevElRef.current,
- paginationEl: paginationElRef.current,
- scrollbarEl: scrollbarElRef.current,
- swiper: swiperRef.current
- }, swiperParams);
- if (onSwiper && !swiperRef.current.destroyed) onSwiper(swiperRef.current);
- // eslint-disable-next-line
- return () => {
- if (swiperRef.current && !swiperRef.current.destroyed) {
- swiperRef.current.destroy(true, false);
- }
- };
- }, []);
- // watch for params change
- useIsomorphicLayoutEffect(() => {
- attachEvents();
- const changedParams = getChangedParams(passedParams, oldPassedParamsRef.current, slides, oldSlides.current, c => c.key);
- oldPassedParamsRef.current = passedParams;
- oldSlides.current = slides;
- if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
- updateSwiper({
- swiper: swiperRef.current,
- slides,
- passedParams,
- changedParams,
- nextEl: nextElRef.current,
- prevEl: prevElRef.current,
- scrollbarEl: scrollbarElRef.current,
- paginationEl: paginationElRef.current
- });
- }
- return () => {
- detachEvents();
- };
- });
- // update on virtual update
- useIsomorphicLayoutEffect(() => {
- updateOnVirtualData(swiperRef.current);
- }, [virtualData]);
- // bypass swiper instance to slides
- function renderSlides() {
- if (swiperParams.virtual) {
- return renderVirtual(swiperRef.current, slides, virtualData);
- }
- return slides.map((child, index) => {
- return /*#__PURE__*/React.cloneElement(child, {
- swiper: swiperRef.current,
- swiperSlideIndex: index
- });
- });
- }
- return /*#__PURE__*/React.createElement(Tag, _extends({
- ref: swiperElRef,
- className: uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)
- }, restProps), /*#__PURE__*/React.createElement(SwiperContext.Provider, {
- value: swiperRef.current
- }, slots['container-start'], /*#__PURE__*/React.createElement(WrapperTag, {
- className: wrapperClass(swiperParams.wrapperClass)
- }, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), needsNavigation(swiperParams) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
- ref: prevElRef,
- className: "swiper-button-prev"
- }), /*#__PURE__*/React.createElement("div", {
- ref: nextElRef,
- className: "swiper-button-next"
- })), needsScrollbar(swiperParams) && /*#__PURE__*/React.createElement("div", {
- ref: scrollbarElRef,
- className: "swiper-scrollbar"
- }), needsPagination(swiperParams) && /*#__PURE__*/React.createElement("div", {
- ref: paginationElRef,
- className: "swiper-pagination"
- }), slots['container-end']));
- });
- Swiper.displayName = 'Swiper';
- const SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
- let {
- tag: Tag = 'div',
- children,
- className = '',
- swiper,
- zoom,
- lazy,
- virtualIndex,
- swiperSlideIndex,
- ...rest
- } = _temp === void 0 ? {} : _temp;
- const slideElRef = useRef(null);
- const [slideClasses, setSlideClasses] = useState('swiper-slide');
- const [lazyLoaded, setLazyLoaded] = useState(false);
- function updateClasses(_s, el, classNames) {
- if (el === slideElRef.current) {
- setSlideClasses(classNames);
- }
- }
- useIsomorphicLayoutEffect(() => {
- if (typeof swiperSlideIndex !== 'undefined') {
- slideElRef.current.swiperSlideIndex = swiperSlideIndex;
- }
- if (externalRef) {
- externalRef.current = slideElRef.current;
- }
- if (!slideElRef.current || !swiper) {
- return;
- }
- if (swiper.destroyed) {
- if (slideClasses !== 'swiper-slide') {
- setSlideClasses('swiper-slide');
- }
- return;
- }
- swiper.on('_slideClass', updateClasses);
- // eslint-disable-next-line
- return () => {
- if (!swiper) return;
- swiper.off('_slideClass', updateClasses);
- };
- });
- useIsomorphicLayoutEffect(() => {
- if (swiper && slideElRef.current && !swiper.destroyed) {
- setSlideClasses(swiper.getSlideClasses(slideElRef.current));
- }
- }, [swiper]);
- const slideData = {
- isActive: slideClasses.indexOf('swiper-slide-active') >= 0,
- isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
- isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0,
- isNext: slideClasses.indexOf('swiper-slide-next') >= 0
- };
- const renderChildren = () => {
- return typeof children === 'function' ? children(slideData) : children;
- };
- const onLoad = () => {
- setLazyLoaded(true);
- };
- return /*#__PURE__*/React.createElement(Tag, _extends({
- ref: slideElRef,
- className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
- "data-swiper-slide-index": virtualIndex,
- onLoad: onLoad
- }, rest), zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
- value: slideData
- }, /*#__PURE__*/React.createElement("div", {
- className: "swiper-zoom-container",
- "data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
- }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
- className: "swiper-lazy-preloader"
- }))), !zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
- value: slideData
- }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
- className: "swiper-lazy-preloader"
- })));
- });
- SwiperSlide.displayName = 'SwiperSlide';
- export { Swiper, SwiperSlide, useSwiper, useSwiperSlide };
|