Add ability to support multiple thumbs.

jeanregisser · Oct 24, 2018 · 1fbd546 · 1fbd546
1 parent f331a68
commit 1fbd546
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 101 deletions.
diff --git a/Example/android/app/src/main/java/com/example/MainApplication.java b/Example/android/app/src/main/java/com/example/MainApplication.java
@@ -22,7 +22,7 @@ protected String getJSMainModuleName() {
         }
 
         @Override
-        protected boolean getUseDeveloperSupport() {
+        public boolean getUseDeveloperSupport() {
             return BuildConfig.DEBUG;
         }
 
@@ -38,4 +38,4 @@ protected List<ReactPackage> getPackages() {
     public ReactNativeHost getReactNativeHost() {
         return mReactNativeHost;
     }
-}
+}
diff --git a/Example/app.js b/Example/app.js
@@ -2,7 +2,7 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
-var Slider = require('../src/Slider');
+var { default: Slider } = require('../src/Slider');
 var {
   AppRegistry,
   StyleSheet,
@@ -17,18 +17,24 @@ var DEFAULT_VALUE = 0.2;
 var SliderContainer = React.createClass({
   getInitialState() {
     return {
-      value: DEFAULT_VALUE,
+      value: this.props.value != null || Array.isArray(this.props.value)
+        ? this.props.value
+        : DEFAULT_VALUE
     };
   },
 
   render() {
-    var value = this.state.value;
+    let value = this.state.value;
+
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
 
     return (
       <View>
         <View style={styles.titleContainer}>
           <Text style={styles.caption} numberOfLines={1}>{this.props.caption}</Text>
-          <Text style={styles.value} numberOfLines={1}>{value}</Text>
+          <Text style={styles.value} numberOfLines={1}>{value.map(v => v.toPrecision(2)).join(',')}</Text>
         </View>
         {this._renderChildren()}
       </View>
@@ -38,11 +44,11 @@ var SliderContainer = React.createClass({
   _renderChildren() {
     return React.Children.map(this.props.children, (child) => {
       if (child.type === Slider
-          || child.type === ReactNative.Slider) {
-        var value = this.state.value;
+          || child.type === ReactNative.Slider
+      ) {
         return React.cloneElement(child, {
-          value: value,
-          onValueChange: (val) => this.setState({value: val}),
+          value: this.state.value,
+          onValueChange: (value) => this.setState({ value }),
         });
       } else {
         return child;
@@ -67,6 +73,32 @@ var SliderExample = React.createClass({
         <SliderContainer caption='<Slider/> with default style'>
           <Slider />
         </SliderContainer>
+        <SliderContainer
+          caption='<Slider/> with default style and two thumbs'
+          value={[0.2, 0.5]}
+        >
+          <Slider />
+        </SliderContainer>
+        <SliderContainer
+          caption='<Slider/> with custom style #5 and two thumbs'
+          value={[0.2, 0.5]}
+        >
+          <Slider
+            trackStyle={customStyles5.track}
+            thumbStyle={customStyles5.thumb}
+            minimumTrackTintColor='#0088bb'
+          />
+        </SliderContainer>
+        <SliderContainer
+          caption='<Slider/> with custom style #5 and multiple thumbs'
+          value={[0.25, 0.5, 0.75]}
+        >
+          <Slider
+            trackStyle={customStyles5.track}
+            thumbStyle={customStyles5.thumb}
+            minimumTrackTintColor='#0088bb'
+          />
+        </SliderContainer>
         <SliderContainer caption='<Slider/> with min, max and custom tints '>
           <Slider
             minimumValue={-10}

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "eslint": "^3.19.0",
     "eslint-plugin-react": "^6.10.3",
     "react": "16.0.0-alpha.6",
-    "react-native": "0.43.3",
+    "react-native": "0.44.0",
     "rimraf": "^2.5.2"
   }
 }