fix(react): fix events to be reactive in Range, Stepper and Toggle

fixes #3872
framework7io · Apr 16, 2021 · 53c5be5 · 53c5be5
1 parent 6d65a27
commit 53c5be5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/src/react/components/range.jsx b/src/react/components/range.jsx
@@ -88,6 +88,20 @@ const Range = forwardRef((props, ref) => {
     }
   });
 
+  const onChange = (range, val) => {
+    emit(props, 'rangeChange', val);
+  };
+
+  const onChanged = (range, val) => {
+    emit(props, 'rangeChanged', val);
+  };
+
+  const rangeEvents = (method) => {
+    if (!f7Range.current) return;
+    f7Range.current[method]('change', onChange);
+    f7Range.current[method]('changed', onChanged);
+  };
+
   const onMount = () => {
     f7ready(() => {
       if (!init || !elRef.current) return;
@@ -109,16 +123,9 @@ const Range = forwardRef((props, ref) => {
           scaleSubSteps,
           formatScaleLabel,
           limitKnobPosition,
-          on: {
-            change(range, val) {
-              emit(props, 'rangeChange', val);
-            },
-            changed(range, val) {
-              emit(props, 'rangeChanged', val);
-            },
-          },
         }),
       );
+      rangeEvents('on');
     });
   };
 
@@ -127,6 +134,13 @@ const Range = forwardRef((props, ref) => {
     f7Range.current = null;
   };
 
+  useIsomorphicLayoutEffect(() => {
+    rangeEvents('on');
+    return () => {
+      rangeEvents('off');
+    };
+  });
+
   useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;

diff --git a/src/react/components/stepper.jsx b/src/react/components/stepper.jsx
@@ -154,6 +154,15 @@ const Stepper = forwardRef((props, ref) => {
     f7Stepper.current.setValue(newValue);
   });
 
+  const onStepperChange = (stepper, newValue) => {
+    emit(props, 'stepperChange', newValue);
+  };
+
+  const stepperEvents = (method) => {
+    if (!f7Stepper.current) return;
+    f7Stepper.current[method]('change', onStepperChange);
+  };
+
   const onMount = () => {
     f7ready(() => {
       if (!init || !elRef.current) return;
@@ -171,13 +180,9 @@ const Stepper = forwardRef((props, ref) => {
           manualInputMode,
           decimalPoint,
           buttonsEndInputMode,
-          on: {
-            change(stepper, newValue) {
-              emit(props, 'stepperChange', newValue);
-            },
-          },
         }),
       );
+      stepperEvents('on');
     });
   };
 
@@ -188,6 +193,13 @@ const Stepper = forwardRef((props, ref) => {
     f7Stepper.current = null;
   };
 
+  useIsomorphicLayoutEffect(() => {
+    stepperEvents('on');
+    return () => {
+      stepperEvents('off');
+    };
+  });
+
   useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;

diff --git a/src/react/components/toggle.jsx b/src/react/components/toggle.jsx
@@ -63,17 +63,22 @@ const Toggle = forwardRef((props, ref) => {
     f7Toggle.current.checked = newValue;
   });
 
+  const onToggleChange = (toggleInstance) => {
+    emit(props, 'toggleChange', toggleInstance.checked);
+  };
+
+  const toggleEvents = (method) => {
+    if (!f7Toggle.current) return;
+    f7Toggle.current[method]('toggleChange', onToggleChange);
+  };
+
   const onMount = () => {
     f7ready(() => {
       if (!init || !elRef.current) return;
       f7Toggle.current = f7.toggle.create({
         el: elRef.current,
-        on: {
-          change(toggleInstance) {
-            emit(props, 'toggleChange', toggleInstance.checked);
-          },
-        },
       });
+      toggleEvents('on');
     });
   };
 
@@ -84,6 +89,13 @@ const Toggle = forwardRef((props, ref) => {
     f7Toggle.current = null;
   };
 
+  useIsomorphicLayoutEffect(() => {
+    toggleEvents('on');
+    return () => {
+      toggleEvents('off');
+    };
+  });
+
   useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;