fix(react): make events reactive

fixes #3762
nolimits4web · Apr 23, 2021 · 301ffb0 · 301ffb0
1 parent 1591fcf
commit 301ffb0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/react/get-params.js b/src/react/get-params.js
@@ -7,6 +7,7 @@ function getParams(obj = {}) {
   const params = {
     on: {},
   };
+  const events = {};
   const passedParams = {};
   extend(params, Swiper.defaults);
   extend(params, Swiper.extendedDefaults);
@@ -27,7 +28,7 @@ function getParams(obj = {}) {
         passedParams[key] = obj[key];
       }
     } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
-      params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+      events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
     } else {
       rest[key] = obj[key];
     }
@@ -36,7 +37,7 @@ function getParams(obj = {}) {
     if (params[key] === true) params[key] = {};
   });
 
-  return { params, passedParams, rest };
+  return { params, passedParams, rest, events };
 }
 
 export { getParams };
diff --git a/src/react/swiper.js b/src/react/swiper.js
@@ -21,6 +21,7 @@ const Swiper = forwardRef(
     } = {},
     externalElRef,
   ) => {
+    let eventsAssigned = false;
     const [containerClasses, setContainerClasses] = useState('swiper-container');
     const [virtualData, setVirtualData] = useState(null);
     const [breakpointChanged, setBreakpointChanged] = useState(false);
@@ -35,7 +36,7 @@ const Swiper = forwardRef(
     const paginationElRef = useRef(null);
     const scrollbarElRef = useRef(null);
 
-    const { params: swiperParams, passedParams, rest: restProps } = getParams(rest);
+    const { params: swiperParams, passedParams, rest: restProps, events } = getParams(rest);
 
     const { slides, slots } = getChildren(children);
 
@@ -51,6 +52,8 @@ const Swiper = forwardRef(
 
     if (!swiperElRef.current) {
       // init swiper
+      Object.assign(swiperParams.on, events);
+      eventsAssigned = true;
       swiperRef.current = initSwiper(swiperParams);
       swiperRef.current.loopCreate = () => {};
       swiperRef.current.loopDestroy = () => {};
@@ -73,6 +76,21 @@ const Swiper = forwardRef(
     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);
@@ -117,6 +135,7 @@ const Swiper = forwardRef(
 
     // watch for params change
     useIsomorphicLayoutEffect(() => {
+      attachEvents();
       const changedParams = getChangedParams(
         passedParams,
         oldPassedParamsRef.current,
@@ -128,6 +147,9 @@ const Swiper = forwardRef(
       if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
         updateSwiper(swiperRef.current, slides, passedParams, changedParams);
       }
+      return () => {
+        detachEvents();
+      };
     });
 
     // update on virtual update