Fix track styles for single and multiple thumbs

jeanregisser · Oct 3, 2018 · 092ac3b · 092ac3b
1 parent a6518dd
commit 092ac3b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 29 deletions.
diff --git a/Example/app.js b/Example/app.js
@@ -77,7 +77,17 @@ var SliderExample = React.createClass({
           caption='<Slider/> with default style and multiple thumbs'
           value={[0.2, 0.5]}
         >
-          <Slider/>
+          <Slider />
+        </SliderContainer>
+        <SliderContainer
+          caption='<Slider/> with custom style #5 and multiple thumbs'
+          value={[0.2, 0.5]}
+        >
+          <Slider
+            trackStyle={customStyles5.track}
+            thumbStyle={customStyles5.thumb}
+            minimumTrackTintColor='#0088bb'
+          />
         </SliderContainer>
         <SliderContainer caption='<Slider/> with min, max and custom tints '>
           <Slider

diff --git a/src/Slider.js b/src/Slider.js
@@ -197,7 +197,7 @@ export default class Slider extends PureComponent {
     trackSize: { width: 0, height: 0 },
     thumbSize: { width: 0, height: 0 },
     allMeasured: false,
-    values: this._normalizePropValue(this.props.value)
+    values: this._updateValues(this._normalizePropValue(this.props.value))
   };
 
   _panResponder = null;
@@ -220,14 +220,14 @@ export default class Slider extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    const oldValue = this._normalizePropValue(this.props.value);
-    const newValue = this._normalizePropValue(nextProps.value);
+    const oldValues = this._normalizePropValue(this.props.value);
+    const newValues = this._normalizePropValue(nextProps.value);
 
-    if (newValue.length !== this.state.values.length) {
-      this.setState({ value: newValue });
+    if (newValues.length !== this.state.values.length) {
+      this.setState({ values: this._updateValues(this.state.values, newValues) });
     } else {
-      newValue.forEach((value, i) => {
-        if (value !== oldValue[i]) {
+      newValues.forEach((value, i) => {
+        if (value !== oldValues[i]) {
           if (this.props.animateTransitions) {
             this._setCurrentValueAnimated(value, i);
           } else {
@@ -260,41 +260,44 @@ export default class Slider extends PureComponent {
     const {
       values,
       containerSize,
-      trackSize,
       thumbSize,
       allMeasured,
     } = this.state;
 
+
     const mainStyles = styles || defaultStyles;
 
-    const thumbValues = values.map((v) => new Animated.Value(v)
-      .interpolate({
-        inputRange: [minimumValue, maximumValue],
-        outputRange: I18nManager.isRTL
-          ? [0, -(containerSize.width - thumbSize.width)]
-          : [0, containerSize.width - thumbSize.width],
-        // extrapolate: 'clamp',
-      })
-    );
+    const interpolatedThumbValues = values.map((v) => v.interpolate({
+      inputRange: [minimumValue, maximumValue],
+      outputRange: I18nManager.isRTL
+        ? [0, -(containerSize.width - thumbSize.width)]
+        : [0, containerSize.width - thumbSize.width],
+      // extrapolate: 'clamp',
+    }));
+
 
     const valueVisibleStyle = {};
     if (!allMeasured) {
       valueVisibleStyle.opacity = 0;
     }
 
-    const minThumbValue = new Animated.Value(Math.min(...this.state.values));
-    const maxThumbValue = new Animated.Value(Math.max(...this.state.values));
+    const interpolatedRawValues = this._getRawValues(interpolatedThumbValues);
+    const minThumbValue = new Animated.Value(Math.min(...interpolatedRawValues));
+    const maxThumbValue = new Animated.Value(Math.max(...interpolatedRawValues));
 
     const minimumTrackStyle = {
       position: 'absolute',
-      left: thumbValues.length === 1 ? 0 : Animated.add(minThumbValue, thumbSize.width / 2),
-      width: thumbValues.length === 1
-        ? Animated.add(thumbValues[0], thumbSize.width / 2)
+      left: interpolatedThumbValues.length === 1
+        ? new Animated.Value(0) :
+        Animated.add(minThumbValue, thumbSize.width / 2),
+      width: interpolatedThumbValues.length === 1
+        ? Animated.add(interpolatedThumbValues[0], thumbSize.width / 2)
         : Animated.add(Animated.multiply(minThumbValue, -1), maxThumbValue),
       backgroundColor: minimumTrackTintColor,
-      ...valueVisibleStyle,
+      ...valueVisibleStyle
     };
 
+
     const touchOverflowStyle = this._getTouchOverflowStyle();
 
     return (
@@ -318,7 +321,7 @@ export default class Slider extends PureComponent {
           style={[mainStyles.track, trackStyle, minimumTrackStyle]}
         />
 
-        {thumbValues.map((value, i) => (
+        {interpolatedThumbValues.map((value, i) => (
           <Animated.View
             key={`thumb_${i}`}
             onLayout={this._measureThumb}
@@ -359,6 +362,36 @@ export default class Slider extends PureComponent {
     return value.map(getBetweenValue);
   }
 
+  _updateValues(values, newValues = values) {
+    if (newValues.length !== values.length) {
+      return this._updateValues(newValues);
+    }
+
+    return values.map((value, i) => {
+      if (value instanceof Animated.Value) {
+        value.setValue(
+          newValues[i] instanceof Animated.Value
+            ? newValues[i].__getValue()
+            : newValues[i]
+        );
+      }
+
+      if (newValues[i] instanceof Animated.Value) {
+        value = newValues[i];
+      } else {
+        value = new Animated.Value(newValues[i]);
+      }
+
+      return value;
+    });
+  }
+
+  _getRawValues(values) {
+    return values.map((value) => value.__getValue());
+  }
+
+
+
   _getPropsForComponentUpdate(props) {
     const {
       value,
@@ -500,10 +533,10 @@ export default class Slider extends PureComponent {
     );
   };
 
-  _getCurrentValue = (thumbIndex = 0) => this.state.values[thumbIndex];
+  _getCurrentValue = (thumbIndex = 0) => this.state.values[thumbIndex].__getValue();
 
   _setCurrentValue = (value: number, thumbIndex = 0) => {
-    this.state.values[thumbIndex] = value;
+    this.state.values[thumbIndex].setValue(value);
   };
 
   _setCurrentValueAnimated = (value: number, thumbIndex = 0) => {
@@ -518,14 +551,14 @@ export default class Slider extends PureComponent {
     );
 
     Animated[animationType](
-      new Animated.Value(this.state.values[thumbIndex]),
+      this.state.values[thumbIndex],
       animationConfig
     ).start();
   };
 
   _fireChangeEvent = event => {
     if (this.props[event]) {
-      this.props[event](this.state.values);
+      this.props[event](this._getRawValues(this.state.values));
     }
   };