feat(react): context (#5364)

* feat(react): context * refactor(react): remove slides & rename context
nolimits4web · Jan 24, 2022 · 18bb89b · 18bb89b
1 parent a6b1a47
commit 18bb89b
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 44 deletions.
diff --git a/playground/react/App.jsx b/playground/react/App.jsx
@@ -5,6 +5,8 @@ import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 // eslint-disable-next-line
 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';
 
+import InnerComp from './InnerComp.jsx';
+
 const App = () => {
   return (
     <main>
@@ -18,7 +20,14 @@ const App = () => {
         scrollbar={{ draggable: true }}
         pagination={{ clickable: true }}
       >
-        <SwiperSlide>Slide 1</SwiperSlide>
+        <SwiperSlide>
+          <InnerComp>Slide 1</InnerComp>
+        </SwiperSlide>
+        {[1, 2, 3, 4, 5].map((v) => (
+          <SwiperSlide key={v}>
+            <InnerComp>Slide {v}</InnerComp>
+          </SwiperSlide>
+        ))}
         <SwiperSlide>Slide 2</SwiperSlide>
         <SwiperSlide>Slide 3</SwiperSlide>
         <SwiperSlide>Slide 4</SwiperSlide>

diff --git a/playground/react/InnerComp.jsx b/playground/react/InnerComp.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Swiper, SwiperSlide, useSwiperSlide, useSwiper } from 'swiper/react/swiper-react';
+
+export default function InnerComp({ children }) {
+  const { swiper } = useSwiper();
+  const { isActive, isDuplicate, isNext, isPrev, isVisible } = useSwiperSlide();
+  return (
+    <div style={{ lineHeight: 1, marginTop: '100px' }}>
+      <>
+        isActive: {isActive.toString()} isDuplicate: {isDuplicate.toString()} isNext:{' '}
+        {isNext.toString()} isPrev: {isPrev.toString()} isVisible: {isVisible.toString()}
+      </>
+      <br />
+      {children}
+      <br />
+      <button
+        onClick={() => {
+          swiper.slideNext(500);
+        }}
+      >
+        Slide next
+      </button>
+    </div>
+  );
+}
diff --git a/src/react/context.js b/src/react/context.js
@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export const SwiperSlideContext = createContext(null);
+
+export const useSwiperSlide = () => {
+  return useContext(SwiperSlideContext);
+};
+
+export const SwiperContext = createContext(null);
+
+export const useSwiper = () => {
+  return useContext(SwiperContext);
+};
diff --git a/src/react/swiper-react.js b/src/react/swiper-react.js
@@ -1,4 +1,6 @@
 import { Swiper } from './swiper.js';
 import { SwiperSlide } from './swiper-slide.js';
 
+export { useSwiperSlide, useSwiper } from './context.js';
+
 export { Swiper, SwiperSlide };
diff --git a/src/react/swiper-slide.js b/src/react/swiper-slide.js
@@ -1,6 +1,7 @@
 import React, { useRef, useState, forwardRef } from 'react';
 import { uniqueClasses } from './utils.js';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+import { SwiperSlideContext } from './context.js';
 
 const SwiperSlide = forwardRef(
   (
@@ -40,22 +41,19 @@ const SwiperSlide = forwardRef(
       }
     }, [swiper]);
 
-    let slideData;
-    if (typeof children === 'function') {
-      slideData = {
-        isActive:
-          slideClasses.indexOf('swiper-slide-active') >= 0 ||
-          slideClasses.indexOf('swiper-slide-duplicate-active') >= 0,
-        isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
-        isDuplicate: slideClasses.indexOf('swiper-slide-duplicate') >= 0,
-        isPrev:
-          slideClasses.indexOf('swiper-slide-prev') >= 0 ||
-          slideClasses.indexOf('swiper-slide-duplicate-prev') >= 0,
-        isNext:
-          slideClasses.indexOf('swiper-slide-next') >= 0 ||
-          slideClasses.indexOf('swiper-slide-duplicate-next') >= 0,
-      };
-    }
+    const slideData = {
+      isActive:
+        slideClasses.indexOf('swiper-slide-active') >= 0 ||
+        slideClasses.indexOf('swiper-slide-duplicate-active') >= 0,
+      isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
+      isDuplicate: slideClasses.indexOf('swiper-slide-duplicate') >= 0,
+      isPrev:
+        slideClasses.indexOf('swiper-slide-prev') >= 0 ||
+        slideClasses.indexOf('swiper-slide-duplicate-prev') >= 0,
+      isNext:
+        slideClasses.indexOf('swiper-slide-next') >= 0 ||
+        slideClasses.indexOf('swiper-slide-duplicate-next') >= 0,
+    };
 
     const renderChildren = () => {
       return typeof children === 'function' ? children(slideData) : children;
@@ -68,16 +66,18 @@ const SwiperSlide = forwardRef(
         data-swiper-slide-index={virtualIndex}
         {...rest}
       >
-        {zoom ? (
-          <div
-            className="swiper-zoom-container"
-            data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
-          >
-            {renderChildren()}
-          </div>
-        ) : (
-          renderChildren()
-        )}
+        <SwiperSlideContext.Provider value={slideData}>
+          {zoom ? (
+            <div
+              className="swiper-zoom-container"
+              data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
+            >
+              {renderChildren()}
+            </div>
+          ) : (
+            renderChildren()
+          )}
+        </SwiperSlideContext.Provider>
       </Tag>
     );
   },

diff --git a/src/react/swiper.js b/src/react/swiper.js
@@ -14,6 +14,7 @@ import { getChildren } from './get-children.js';
 import { updateSwiper } from './update-swiper.js';
 import { renderVirtual, updateOnVirtualData } from './virtual.js';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+import { SwiperContext } from './context.js';
 
 const Swiper = forwardRef(
   (
@@ -192,23 +193,35 @@ const Swiper = forwardRef(
         className={uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)}
         {...restProps}
       >
-        {slots['container-start']}
-        {needsNavigation(swiperParams) && (
-          <>
-            <div ref={prevElRef} className="swiper-button-prev" />
-            <div ref={nextElRef} className="swiper-button-next" />
-          </>
-        )}
-        {needsScrollbar(swiperParams) && <div ref={scrollbarElRef} className="swiper-scrollbar" />}
-        {needsPagination(swiperParams) && (
-          <div ref={paginationElRef} className="swiper-pagination" />
-        )}
-        <WrapperTag className="swiper-wrapper">
-          {slots['wrapper-start']}
-          {renderSlides()}
-          {slots['wrapper-end']}
-        </WrapperTag>
-        {slots['container-end']}
+        <SwiperContext.Provider
+          value={{
+            swiper: swiperRef.current,
+            nextEl: nextElRef.current,
+            prevEl: prevElRef.current,
+            scrollbarEl: scrollbarElRef.current,
+            paginationEl: paginationElRef.current,
+          }}
+        >
+          {slots['container-start']}
+          {needsNavigation(swiperParams) && (
+            <>
+              <div ref={prevElRef} className="swiper-button-prev" />
+              <div ref={nextElRef} className="swiper-button-next" />
+            </>
+          )}
+          {needsScrollbar(swiperParams) && (
+            <div ref={scrollbarElRef} className="swiper-scrollbar" />
+          )}
+          {needsPagination(swiperParams) && (
+            <div ref={paginationElRef} className="swiper-pagination" />
+          )}
+          <WrapperTag className="swiper-wrapper">
+            {slots['wrapper-start']}
+            {renderSlides()}
+            {slots['wrapper-end']}
+          </WrapperTag>
+          {slots['container-end']}
+        </SwiperContext.Provider>
       </Tag>
     );
   },