From 6c97c718c7207e41041907ffc85cff729ac33fe1 Mon Sep 17 00:00:00 2001
From: Vlad Tansky <vl.tansky@gmail.com>
Date: Fri, 14 Jan 2022 15:57:02 +0200
Subject: [PATCH 1/2] feat(react): context

---
 playground/react/App.jsx       | 11 ++++++-
 playground/react/InnerComp.jsx | 30 ++++++++++++++++++++
 src/react/context.js           | 13 +++++++++
 src/react/swiper-react.js      |  2 ++
 src/react/swiper-slide.js      | 52 +++++++++++++++++-----------------
 src/react/swiper.js            | 48 ++++++++++++++++++++-----------
 6 files changed, 112 insertions(+), 44 deletions(-)
 create mode 100644 playground/react/InnerComp.jsx
 create mode 100644 src/react/context.js

diff --git a/playground/react/App.jsx b/playground/react/App.jsx
index a93e5baf2..bf0900458 100644
--- 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
new file mode 100644
index 000000000..353bb3bd0
--- /dev/null
+++ b/playground/react/InnerComp.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  Swiper,
+  SwiperSlide,
+  useSwiperSlideContext,
+  useSwiperContext,
+} from 'swiper/react/swiper-react';
+
+export default function InnerComp({ children }) {
+  const { swiper, slides } = useSwiperContext();
+  const { isActive, isDuplicate, isNext, isPrev, isVisible } = useSwiperSlideContext();
+  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
new file mode 100644
index 000000000..fe6ac0ddf
--- /dev/null
+++ b/src/react/context.js
@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export const SwiperSlideContext = createContext(null);
+
+export const useSwiperSlideContext = () => {
+  return useContext(SwiperSlideContext);
+};
+
+export const SwiperContext = createContext(null);
+
+export const useSwiperContext = () => {
+  return useContext(SwiperContext);
+};
diff --git a/src/react/swiper-react.js b/src/react/swiper-react.js
index 439c386c1..4a9557157 100644
--- 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 { useSwiperSlideContext, useSwiperContext } from './context.js';
+
 export { Swiper, SwiperSlide };
diff --git a/src/react/swiper-slide.js b/src/react/swiper-slide.js
index 2f3e99c02..5235b9cac 100644
--- 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
index c23bf482a..e35c6cc45 100644
--- 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,36 @@ 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,
+            slides,
+            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>
     );
   },

From fa09ea578e87b57efd3bdacc2d95eea64e4b9f0d Mon Sep 17 00:00:00 2001
From: Vlad Tansky <vl.tansky@gmail.com>
Date: Fri, 14 Jan 2022 21:39:27 +0200
Subject: [PATCH 2/2] refactor(react): remove slides & rename context

---
 playground/react/InnerComp.jsx | 11 +++--------
 src/react/context.js           |  4 ++--
 src/react/swiper-react.js      |  2 +-
 src/react/swiper.js            |  1 -
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/playground/react/InnerComp.jsx b/playground/react/InnerComp.jsx
index 353bb3bd0..087e95437 100644
--- a/playground/react/InnerComp.jsx
+++ b/playground/react/InnerComp.jsx
@@ -1,14 +1,9 @@
 import React from 'react';
-import {
-  Swiper,
-  SwiperSlide,
-  useSwiperSlideContext,
-  useSwiperContext,
-} from 'swiper/react/swiper-react';
+import { Swiper, SwiperSlide, useSwiperSlide, useSwiper } from 'swiper/react/swiper-react';
 
 export default function InnerComp({ children }) {
-  const { swiper, slides } = useSwiperContext();
-  const { isActive, isDuplicate, isNext, isPrev, isVisible } = useSwiperSlideContext();
+  const { swiper } = useSwiper();
+  const { isActive, isDuplicate, isNext, isPrev, isVisible } = useSwiperSlide();
   return (
     <div style={{ lineHeight: 1, marginTop: '100px' }}>
       <>
diff --git a/src/react/context.js b/src/react/context.js
index fe6ac0ddf..f28e978b8 100644
--- a/src/react/context.js
+++ b/src/react/context.js
@@ -2,12 +2,12 @@ import { createContext, useContext } from 'react';
 
 export const SwiperSlideContext = createContext(null);
 
-export const useSwiperSlideContext = () => {
+export const useSwiperSlide = () => {
   return useContext(SwiperSlideContext);
 };
 
 export const SwiperContext = createContext(null);
 
-export const useSwiperContext = () => {
+export const useSwiper = () => {
   return useContext(SwiperContext);
 };
diff --git a/src/react/swiper-react.js b/src/react/swiper-react.js
index 4a9557157..cbd13e381 100644
--- a/src/react/swiper-react.js
+++ b/src/react/swiper-react.js
@@ -1,6 +1,6 @@
 import { Swiper } from './swiper.js';
 import { SwiperSlide } from './swiper-slide.js';
 
-export { useSwiperSlideContext, useSwiperContext } from './context.js';
+export { useSwiperSlide, useSwiper } from './context.js';
 
 export { Swiper, SwiperSlide };
diff --git a/src/react/swiper.js b/src/react/swiper.js
index e35c6cc45..8d53f84c7 100644
--- a/src/react/swiper.js
+++ b/src/react/swiper.js
@@ -196,7 +196,6 @@ const Swiper = forwardRef(
         <SwiperContext.Provider
           value={{
             swiper: swiperRef.current,
-            slides,
             nextEl: nextElRef.current,
             prevEl: prevElRef.current,
             scrollbarEl: scrollbarElRef.current,