Refactor to RNRangeSlider

android/settings.gradle

@@ -0,0 +1 @@
+

android/src/main/java/com/jesster2k10reactnativerangeslider/RangeSliderManager.kt → android/src/main/java/com/jesster2k10reactnativerangeslider/RNRangeSliderManager.kt

@@ -8,7 +8,7 @@ import com.facebook.react.uimanager.annotations.ReactProp
 
 class RangeSliderManager: SimpleViewManager<RangeSliderView>() {
   override fun getName(): String {
-    return "RangeSlider"
+    return "RNRangeSlider"
   }
 
   override fun createViewInstance(reactContext: ThemedReactContext): RangeSliderView {
@@ -106,6 +106,18 @@ class RangeSliderManager: SimpleViewManager<RangeSliderView>() {
 
   }
 
+  @ReactProp(name = "suffix")
+  fun setSuffix(view: RangeSliderView, suffix: String?) {
+    if (suffix == null) return
+    view.suffix = suffix
+  }
+
+  @ReactProp(name = "prefix")
+  fun setPrefix(view: RangeSliderView, prefix: String?) {
+    if (prefix == null) return
+    view.prefix = prefix
+  }
+
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
     return MapBuilder.of(
       RangeSliderChangeEvent.EVENT_NAME, MapBuilder.of(

android/src/main/java/com/jesster2k10reactnativerangeslider/RangeSliderView.kt → android/src/main/java/com/jesster2k10reactnativerangeslider/RNRangeSliderView.kt

@@ -8,19 +8,36 @@ import com.crystal.crystalrangeseekbar.interfaces.OnRangeSeekbarChangeListener
 import com.crystal.crystalrangeseekbar.widgets.CrystalRangeSeekbar
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerModule
+import java.lang.StringBuilder
 
 class RangeSliderView(context: Context): LinearLayout(context), OnRangeSeekbarChangeListener {
   private var rangeSeekBar: CrystalRangeSeekbar
   private var minTextView: TextView?
   private var maxTextView: TextView?
 
+  private var minValue: Float = 0f
+  private var maxValue: Float = 100f
+
+  var suffix: String? = null
+    set(value) {
+      field = value
+      updateText()
+    }
+
+  var prefix: String? = null
+    set(value) {
+      field = value
+      updateText()
+    }
+
   init {
     inflate(context, R.layout.range_slider, this)
     rangeSeekBar = findViewById(R.id.range_seek_bar)
     rangeSeekBar.setOnRangeSeekbarChangeListener(this)
 
     minTextView = findViewById(R.id.range_seek_bar_min)
     maxTextView = findViewById(R.id.range_seek_bar_max)
+    updateText(minValue, maxValue)
   }
 
   fun setTintColorBetweenHandles(color: String) {
@@ -62,13 +79,15 @@ class RangeSliderView(context: Context): LinearLayout(context), OnRangeSeekbarCh
   }
 
   fun setMinValue(min: Float) {
-    minTextView?.text = min.toInt().toString()
+    minValue = min
     rangeSeekBar.setMinValue(min)
+    updateText(minValue, maxValue)
   }
 
   fun setMaxValue(max: Float) {
-    maxTextView?.text = max.toInt().toString()
+    maxValue = max
     rangeSeekBar.setMaxValue(max)
+    updateText(minValue, maxValue)
   }
 
   fun setMinStartValue(minStartValue: Float) {
@@ -87,11 +106,31 @@ class RangeSliderView(context: Context): LinearLayout(context), OnRangeSeekbarCh
     rangeSeekBar.setSteps(steps)
   }
 
-  override fun valueChanged(min: Number?, max: Number?) {
-    minTextView?.text = min?.toInt()?.toString()
-    maxTextView?.text = max?.toInt()?.toString()
+  private fun updateText(min: Number? = null, max: Number? = null) {
+    var minText = minTextView?.text
+    var maxText = minTextView?.text
+    if (min !== null) {
+      minText = min.toString()
+    }
+
+    if (max !== null) {
+      maxText = max.toString()
+    }
 
+    minTextView?.text = StringBuilder()
+      .append(prefix)
+      .append(minText)
+      .append(suffix)
+
+    maxTextView?.text = StringBuilder()
+      .append(prefix)
+      .append(maxText)
+      .append(suffix)
+  }
+
+  override fun valueChanged(min: Number?, max: Number?) {
     if (max == null || min == null) return
+    updateText(min, max)
 
     val event = RangeSliderChangeEvent(rangeSeekBar.id)
     event.max = max.toDouble()

example/android/app/src/main/res/values/dimens.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources></resources>

ios/RangeSlider.h → ios/RNRangeSlider.h

@@ -9,7 +9,8 @@
 
 @class RCTEventDispatcher;
 
-@interface RangeSlider : UIView
+@interface RNRangeSlider : UIView
+
 // Define view properties here with @property
 @property (nonatomic, assign) float minValue;
 @property (nonatomic, assign) float maxValue;
@@ -31,7 +32,7 @@
 @property (nonatomic, assign) float lineBorderWidth;
 @property (nonatomic, assign) NSString* lineBorderColor;
 @property (nonatomic, assign) NSString* suffix;
-@property (nonatomic, assign) NSString* preffix;
+@property (nonatomic, assign) NSString* prefix;
 @property (nonatomic, assign) BOOL disableRange;
 @property (nonatomic, assign) BOOL hideLabels;
 

ios/RangeSlider.m → ios/RNRangeSlider.m

@@ -6,7 +6,7 @@
 //
 
 #import <Foundation/Foundation.h>
-#import "RangeSlider.h"
+#import "RNRangeSlider.h"
 
 // import RCTEventDispatcher
 
@@ -25,7 +25,7 @@
 #import "UIColor+Hex.h"
 #import "TTRangeSlider.h"
 
-@implementation RangeSlider  {
+@implementation RNRangeSlider  {
 
     RCTEventDispatcher *_eventDispatcher;
 
@@ -135,7 +135,7 @@ - (void) setLineBorderColor:(NSString *)lineBorderColor{
     UIColor *color = [UIColor colorwithHexString:lineBorderColor alpha:1];
     [_rangeSlider setLineBorderColor:color];
 }
-- (void) setPreffix:(NSString *)preffix
+- (void) setPrefix:(NSString *)preffix
 {
     myPrefix = preffix;
     NSNumberFormatter *customFormatter = [[NSNumberFormatter alloc] init];
@@ -223,8 +223,8 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
 
 
         _rangeSlider = [[TTRangeSlider alloc] initWithFrame:CGRectZero];
-        _rangeSlider.minValue = _minValue ? _minValue:0;
-        _rangeSlider.maxValue = _maxValue ? _maxValue:100;
+        _rangeSlider.minValue = _minValue ? _minValue : 0;
+        _rangeSlider.maxValue = _maxValue ? _maxValue : 100;
         _rangeSlider.selectedMinimum = _selectedMinimum;
         _rangeSlider.selectedMaximum = _selectedMaximum;
 

ios/RangeSliderManager.h → ios/RNRangeSliderManager.h

@@ -15,7 +15,7 @@
 
 // Subclass your view manager off the RCTViewManager
 // http://facebook.github.io/react-native/docs/native-components-ios.html#ios-mapview-example
-@interface RangeSliderManager : RCTViewManager
+@interface RNRangeSliderManager : RCTViewManager
 
 @end
 

ios/RangeSliderManager.m → ios/RNRangeSliderManager.m

@@ -6,8 +6,8 @@
 //
 
 #import <Foundation/Foundation.h>
-#import "RangeSlider.h"
-#import "RangeSliderManager.h"
+#import "RNRangeSlider.h"
+#import "RNRangeSliderManager.h"
 
 // import RCTBridge
 #if __has_include(<React/RCTBridge.h>)
@@ -18,7 +18,7 @@
 #import "React/RCTBridge.h" // Required when used as a Pod in a Swift project
 #endif
 
-@implementation RangeSliderManager
+@implementation RNRangeSliderManager
 
 @synthesize bridge = _bridge;
 
@@ -28,7 +28,7 @@ @implementation RangeSliderManager
 // Return the native view that represents your React component
 - (UIView *)view
 {
-    return [[RangeSlider alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+    return [[RNRangeSlider alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
 }
 
 RCT_EXPORT_VIEW_PROPERTY(minValue, float)
@@ -46,7 +46,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(lineHeight, float);
 RCT_EXPORT_VIEW_PROPERTY(lineBorderWidth, float);
 RCT_EXPORT_VIEW_PROPERTY(lineBorderColor, NSString);
-RCT_EXPORT_VIEW_PROPERTY(preffix, NSString);
+RCT_EXPORT_VIEW_PROPERTY(prefix, NSString);
 RCT_EXPORT_VIEW_PROPERTY(suffix, NSString);
 RCT_EXPORT_VIEW_PROPERTY(disableRange, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(hideLabels, BOOL);
@@ -58,4 +58,5 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(step, float);
 RCT_EXPORT_VIEW_PROPERTY(minDistance, float);
 RCT_EXPORT_VIEW_PROPERTY(maxDistance, float);
+
 @end