value property implemented as a controlled value (#349)

BartoszKlonowski · web-flow · commit a3cc9e264377 · 2022-01-21T20:16:36.000+01:00
* Do not update Value during Sliding

* Implement getter and setter for isSliding property

* Do not update the value when sliding

* Recognize sliding as a separate condition

* Send update event for Android when finished sliding

* Make the value a custom property for iOS
diff --git a/src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java b/src/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java
@@ -56,6 +56,8 @@ public class ReactSlider extends AppCompatSeekBar {
    */
   private double mValue = 0;
 
+  private boolean isSliding = false;
+
   /** If zero it's determined automatically. */
   private double mStep = 0;
 
@@ -99,6 +101,14 @@ private void disableStateListAnimatorIfNeeded() {
     updateAll();
   }
 
+  boolean isSliding() {
+    return isSliding;
+  }
+
+  void isSliding(boolean isSliding) {
+    this.isSliding = isSliding;
+  }
+
   void setAccessibilityUnits(String accessibilityUnits) {
     mAccessibilityUnits = accessibilityUnits;
   }
diff --git a/src/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java b/src/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java
@@ -35,8 +35,6 @@
 
 /**
  * Manages instances of {@code ReactSlider}.
- *
- * Note that the slider is _not_ a controlled component.
  */
 public class ReactSliderManager extends SimpleViewManager<ReactSlider> {
 
@@ -87,26 +85,31 @@ public void onProgressChanged(SeekBar seekbar, int progress, boolean fromUser) {
           reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher().dispatchEvent(
               new ReactSliderEvent(
                   seekbar.getId(),
-                  ((ReactSlider) seekbar).toRealProgress(progress),
-                  fromUser));
+                  ((ReactSlider)seekbar).toRealProgress(progress), fromUser));
         }
 
         @Override
         public void onStartTrackingTouch(SeekBar seekbar) {
           ReactContext reactContext = (ReactContext) seekbar.getContext();
+          ((ReactSlider)seekbar).isSliding(true);
           reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher().dispatchEvent(
               new ReactSlidingStartEvent(
                   seekbar.getId(),
-                  ((ReactSlider) seekbar).toRealProgress(seekbar.getProgress())));
+                  ((ReactSlider)seekbar).toRealProgress(seekbar.getProgress())));
         }
 
         @Override
         public void onStopTrackingTouch(SeekBar seekbar) {
           ReactContext reactContext = (ReactContext) seekbar.getContext();
+          ((ReactSlider)seekbar).isSliding(false);
           reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher().dispatchEvent(
               new ReactSlidingCompleteEvent(
                   seekbar.getId(),
-                  ((ReactSlider) seekbar).toRealProgress(seekbar.getProgress())));
+                  ((ReactSlider)seekbar).toRealProgress(seekbar.getProgress())));
+          reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher().dispatchEvent(
+              new ReactSliderEvent(
+                  seekbar.getId(),
+                  ((ReactSlider)seekbar).toRealProgress(seekbar.getProgress()), false));
         }
       };
 
@@ -147,11 +150,13 @@ public void setEnabled(ReactSlider view, boolean enabled) {
 
   @ReactProp(name = "value", defaultDouble = 0d)
   public void setValue(ReactSlider view, double value) {
-    view.setOnSeekBarChangeListener(null);
-    view.setValue(value);
-    view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);
-    if (view.isAccessibilityFocused() && Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) {
-      view.setupAccessibility((int)value);
+    if (view.isSliding() == false) {
+      view.setOnSeekBarChangeListener(null);
+      view.setValue(value);
+      view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);
+      if (view.isAccessibilityFocused() && Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) {
+        view.setupAccessibility((int)value);
+      }
     }
   }
 
diff --git a/src/ios/RNCSlider.h b/src/ios/RNCSlider.h
@@ -17,6 +17,7 @@
 
 @property (nonatomic, assign) float step;
 @property (nonatomic, assign) float lastValue;
+@property (nonatomic, assign) bool isSliding;
 
 @property (nonatomic, strong) UIImage *trackImage;
 @property (nonatomic, strong) UIImage *minimumTrackImage;
diff --git a/src/ios/RNCSliderManager.m b/src/ios/RNCSliderManager.m
@@ -40,16 +40,16 @@ - (UIView *)view
 }
 
 - (void)tapHandler:(UITapGestureRecognizer *)gesture {
-  // Ignore this tap if in the middle of a slide.
-  if (_isSliding) {
+  if ([gesture.view class] != [RNCSlider class]) {
     return;
   }
+  RNCSlider *slider = (RNCSlider *)gesture.view;
+  slider.isSliding = _isSliding;
 
-  // Bail out if the source view of the gesture isn't an RNCSlider.
-  if ([gesture.view class] != [RNCSlider class]) {
+  // Ignore this tap if in the middle of a slide.
+  if (_isSliding) {
     return;
   }
-  RNCSlider *slider = (RNCSlider *)gesture.view;
 
   if (!slider.tapToSeek) {
     return;
@@ -63,7 +63,6 @@ - (void)tapHandler:(UITapGestureRecognizer *)gesture {
 
   [slider setValue:discreteValue(slider, value) animated: YES];
 
-
   if (slider.onRNCSliderSlidingStart) {
     slider.onRNCSliderSlidingStart(@{
       @"value": @(slider.lastValue),
@@ -122,7 +121,9 @@ static void RNCSendSliderEvent(RNCSlider *sender, BOOL continuous, BOOL isSlidin
 {
   float value = discreteValue(sender, sender.value);
 
-  [sender setValue:value animated:NO];
+  if(!sender.isSliding) {
+    [sender setValue:value animated:NO];
+  }
 
   if (continuous) {
     if (sender.onRNCSliderValueChange && sender.lastValue != value) {
@@ -155,15 +156,22 @@ - (void)sliderTouchStart:(RNCSlider *)sender
 {
   RNCSendSliderEvent(sender, NO, YES);
   _isSliding = YES;
+  sender.isSliding = YES;
 }
 
 - (void)sliderTouchEnd:(RNCSlider *)sender
 {
   RNCSendSliderEvent(sender, NO, NO);
   _isSliding = NO;
+  sender.isSliding = NO;
 }
 
-RCT_EXPORT_VIEW_PROPERTY(value, float);
+RCT_CUSTOM_VIEW_PROPERTY(value, float, RNCSlider)
+{
+  if (!view.isSliding) {
+    view.value = [RCTConvert float:json];
+  }
+}
 RCT_EXPORT_VIEW_PROPERTY(step, float);
 RCT_EXPORT_VIEW_PROPERTY(trackImage, UIImage);
 RCT_EXPORT_VIEW_PROPERTY(minimumTrackImage, UIImage);
diff --git a/src/windows/SliderWindows/SliderView.cpp b/src/windows/SliderWindows/SliderView.cpp
@@ -22,7 +22,7 @@ namespace winrt {
 
 namespace winrt::SliderWindows::implementation {
 
-    SliderView::SliderView(winrt::IReactContext const& reactContext) : m_reactContext(reactContext) {
+    SliderView::SliderView(winrt::IReactContext const& reactContext) : m_reactContext(reactContext), isSliding(false) {
         RegisterEvents();
     }
 
@@ -55,10 +55,6 @@ namespace winrt::SliderWindows::implementation {
     void SliderView::UpdateProperties(winrt::IJSValueReader const& reader) {
         m_updating = true;
 
-        bool updatedValue = false;
-        bool updatedMaxValue = false;
-        bool updatedMinValue = false;
-
         auto const& propertyMap = JSValueObject::ReadFrom(reader);
 
         for (auto const& pair : propertyMap) {
@@ -69,27 +65,27 @@ namespace winrt::SliderWindows::implementation {
                 if (propertyValue.IsNull()) {
                     this->ClearValue(xaml::Controls::Primitives::RangeBase::ValueProperty());
                 }
-                else {
-                    updatedValue = true;
+                else if (!isSliding) {
                     m_value = propertyValue.AsDouble();
+                    this->Value( m_value );
                 }
             }
             else if (propertyName == "maximumValue") {
                 if (propertyValue.IsNull()) {
                     this->ClearValue(xaml::Controls::Primitives::RangeBase::MaximumProperty());
                 }
                 else {
-                    updatedMaxValue = true;
                     m_maxValue = propertyValue.AsDouble();
+                    this->Maximum( m_maxValue );
                 }
             }
             else if (propertyName == "minimumValue") {
                 if (propertyValue.IsNull()) {
                     this->ClearValue(xaml::Controls::Primitives::RangeBase::MinimumProperty());
                 }
                 else {
-                    updatedMinValue = true;
                     m_minValue = propertyValue.AsDouble();
+                    this->Minimum( m_minValue );
                 }
             }
             else if (propertyName == "step") {
@@ -169,17 +165,6 @@ namespace winrt::SliderWindows::implementation {
             }
         }
 
-        // This is to mitigate platform bugs related to the order of setting min/max values in certain XAML controls.
-        if (updatedMaxValue) {
-            this->Maximum(m_maxValue);
-        }
-        if (updatedMinValue) {
-            this->Minimum(m_minValue);
-        }
-        if (updatedValue) {
-            this->Value(m_value);
-        }
-
         m_updating = false;
     }
 
@@ -200,13 +185,16 @@ namespace winrt::SliderWindows::implementation {
                     eventDataWriter.WriteObjectEnd();
                 } );
             onValueChangeSent = true;
+            onSlidingCompleteSent = false;
+            onSlidingStartSent = false;
         }
     }
 
     void SliderView::OnManipulationStartingHandler( winrt::IInspectable const& sender,
         xaml::Input::ManipulationStartingRoutedEventArgs const& args )
     {
-        if( !m_updating )
+        isSliding = true;
+        if( !m_updating && !onSlidingStartSent )
         {
             auto self = sender.try_as<xaml::Controls::Slider>();
 
@@ -236,17 +224,16 @@ namespace winrt::SliderWindows::implementation {
                         eventDataWriter.WriteObjectEnd();
                     } );
                 onSlidingCompleteSent = true;
+                isSliding = false;
             }
             onValueChangeSent = false;
-            onSlidingStartSent = true;
-            onSlidingCompleteSent = false;
         }
     }
 
     void SliderView::OnManipulationCompletedHandler( winrt::IInspectable const& sender,
         xaml::Input::ManipulationCompletedRoutedEventArgs const& args )
     {
-        if( !m_updating && onSlidingCompleteSent == false )
+        if( !m_updating )
         {
             auto self = sender.try_as<xaml::Controls::Slider>();
 
@@ -263,7 +250,9 @@ namespace winrt::SliderWindows::implementation {
                 } );
             onSlidingCompleteSent = true;
             onValueChangeSent = false;
+            onSlidingStartSent = false;
         }
+        isSliding = false;
     }
 
     const double SliderView::CalculateStepFrequencyPercentageValue(const double& stepPropertyValue) const noexcept {
diff --git a/src/windows/SliderWindows/SliderView.h b/src/windows/SliderWindows/SliderView.h
@@ -40,6 +40,8 @@ namespace winrt::SliderWindows::implementation {
         double m_maxValue, m_minValue;
         double m_value;
 
+        bool isSliding;
+
         bool onValueChangeSent, onSlidingStartSent, onSlidingCompleteSent;
     };
 }

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ namespace winrt {`
`22`	`22`
`23`	`23`	`namespace winrt::SliderWindows::implementation {`
`24`	`24`
`25`		`- SliderView::SliderView(winrt::IReactContext const& reactContext) : m_reactContext(reactContext) {`
	`25`	`+ SliderView::SliderView(winrt::IReactContext const& reactContext) : m_reactContext(reactContext), isSliding(false) {`
`26`	`26`	`RegisterEvents();`
`27`	`27`	`}`
`28`	`28`
`@@ -55,10 +55,6 @@ namespace winrt::SliderWindows::implementation {`
`55`	`55`	`void SliderView::UpdateProperties(winrt::IJSValueReader const& reader) {`
`56`	`56`	`m_updating = true;`
`57`	`57`
`58`		`- bool updatedValue = false;`
`59`		`- bool updatedMaxValue = false;`
`60`		`- bool updatedMinValue = false;`
`61`		`-`
`62`	`58`	`auto const& propertyMap = JSValueObject::ReadFrom(reader);`
`63`	`59`
`64`	`60`	`for (auto const& pair : propertyMap) {`
`@@ -69,27 +65,27 @@ namespace winrt::SliderWindows::implementation {`
`69`	`65`	`if (propertyValue.IsNull()) {`
`70`	`66`	`this->ClearValue(xaml::Controls::Primitives::RangeBase::ValueProperty());`
`71`	`67`	`}`
`72`		`- else {`
`73`		`- updatedValue = true;`
	`68`	`+ else if (!isSliding) {`
`74`	`69`	`m_value = propertyValue.AsDouble();`
	`70`	`+ this->Value( m_value );`
`75`	`71`	`}`
`76`	`72`	`}`
`77`	`73`	`else if (propertyName == "maximumValue") {`
`78`	`74`	`if (propertyValue.IsNull()) {`
`79`	`75`	`this->ClearValue(xaml::Controls::Primitives::RangeBase::MaximumProperty());`
`80`	`76`	`}`
`81`	`77`	`else {`
`82`		`- updatedMaxValue = true;`
`83`	`78`	`m_maxValue = propertyValue.AsDouble();`
	`79`	`+ this->Maximum( m_maxValue );`
`84`	`80`	`}`
`85`	`81`	`}`
`86`	`82`	`else if (propertyName == "minimumValue") {`
`87`	`83`	`if (propertyValue.IsNull()) {`
`88`	`84`	`this->ClearValue(xaml::Controls::Primitives::RangeBase::MinimumProperty());`
`89`	`85`	`}`
`90`	`86`	`else {`
`91`		`- updatedMinValue = true;`
`92`	`87`	`m_minValue = propertyValue.AsDouble();`
	`88`	`+ this->Minimum( m_minValue );`
`93`	`89`	`}`
`94`	`90`	`}`
`95`	`91`	`else if (propertyName == "step") {`
`@@ -169,17 +165,6 @@ namespace winrt::SliderWindows::implementation {`
`169`	`165`	`}`
`170`	`166`	`}`
`171`	`167`
`172`		`- // This is to mitigate platform bugs related to the order of setting min/max values in certain XAML controls.`
`173`		`- if (updatedMaxValue) {`
`174`		`- this->Maximum(m_maxValue);`
`175`		`- }`
`176`		`- if (updatedMinValue) {`
`177`		`- this->Minimum(m_minValue);`
`178`		`- }`
`179`		`- if (updatedValue) {`
`180`		`- this->Value(m_value);`
`181`		`- }`
`182`		`-`
`183`	`168`	`m_updating = false;`
`184`	`169`	`}`
`185`	`170`
`@@ -200,13 +185,16 @@ namespace winrt::SliderWindows::implementation {`
`200`	`185`	`eventDataWriter.WriteObjectEnd();`
`201`	`186`	`} );`
`202`	`187`	`onValueChangeSent = true;`
	`188`	`+ onSlidingCompleteSent = false;`
	`189`	`+ onSlidingStartSent = false;`
`203`	`190`	`}`
`204`	`191`	`}`
`205`	`192`
`206`	`193`	`void SliderView::OnManipulationStartingHandler( winrt::IInspectable const& sender,`
`207`	`194`	`xaml::Input::ManipulationStartingRoutedEventArgs const& args )`
`208`	`195`	`{`
`209`		`- if( !m_updating )`
	`196`	`+ isSliding = true;`
	`197`	`+ if( !m_updating && !onSlidingStartSent )`
`210`	`198`	`{`
`211`	`199`	`auto self = sender.try_as<xaml::Controls::Slider>();`
`212`	`200`
`@@ -236,17 +224,16 @@ namespace winrt::SliderWindows::implementation {`
`236`	`224`	`eventDataWriter.WriteObjectEnd();`
`237`	`225`	`} );`
`238`	`226`	`onSlidingCompleteSent = true;`
	`227`	`+ isSliding = false;`
`239`	`228`	`}`
`240`	`229`	`onValueChangeSent = false;`
`241`		`- onSlidingStartSent = true;`
`242`		`- onSlidingCompleteSent = false;`
`243`	`230`	`}`
`244`	`231`	`}`
`245`	`232`
`246`	`233`	`void SliderView::OnManipulationCompletedHandler( winrt::IInspectable const& sender,`
`247`	`234`	`xaml::Input::ManipulationCompletedRoutedEventArgs const& args )`
`248`	`235`	`{`
`249`		`- if( !m_updating && onSlidingCompleteSent == false )`
	`236`	`+ if( !m_updating )`
`250`	`237`	`{`
`251`	`238`	`auto self = sender.try_as<xaml::Controls::Slider>();`
`252`	`239`
`@@ -263,7 +250,9 @@ namespace winrt::SliderWindows::implementation {`
`263`	`250`	`} );`
`264`	`251`	`onSlidingCompleteSent = true;`
`265`	`252`	`onValueChangeSent = false;`
	`253`	`+ onSlidingStartSent = false;`
`266`	`254`	`}`
	`255`	`+ isSliding = false;`
`267`	`256`	`}`
`268`	`257`
`269`	`258`	`const double SliderView::CalculateStepFrequencyPercentageValue(const double& stepPropertyValue) const noexcept {`
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,8 @@ namespace winrt::SliderWindows::implementation {`
`40`	`40`	`double m_maxValue, m_minValue;`
`41`	`41`	`double m_value;`
`42`	`42`
	`43`	`+ bool isSliding;`
	`44`	`+`
`43`	`45`	`bool onValueChangeSent, onSlidingStartSent, onSlidingCompleteSent;`
`44`	`46`	`};`
`45`	`47`	`}`