Add "setDisable()" method. #2

Author: santong

Diff for: MultiSlider.js

@@ -43,6 +43,7 @@ class MultiSlider extends Component {
         height: 0
       },
 
+      disabled: false,
       leftValue: new Animated.Value(this.props.leftValue),
       rightValue: new Animated.Value(this.props.rightValue),
     };
@@ -91,7 +92,6 @@ class MultiSlider extends Component {
   }
 
   componentWillMount() {
-
     // gesture func of left thumb
     this._leftPanResponder = PanResponder.create({
       onStartShouldSetPanResponder: (evt, gestureState) => this._handleStartShouldSetPanResponder (evt, gestureState),
@@ -115,7 +115,16 @@ class MultiSlider extends Component {
     });
   }
 
+  // Sets whether the slider can slide, and true is disabled
+  setDisable(flag) {
+    this.setState({
+      disabled: flag,
+    });
+  }
+
   render() {
+    console.log('=========================');
+    console.log(this.state.disabled);
     const {
       minValue,
       maxValue,
@@ -217,6 +226,13 @@ class MultiSlider extends Component {
       rightValue,
     } = this.state;
 
+    if (this.state.disabled) {
+      console.log('------------------00001');
+      return;
+    }
+    console.log('------------------111111111');
+
+
     let nextX = this._getValue(gestureState.dx);
 
     if (currentThumb === 'left' && (rightValue._value - nextX) > this.props.minSpace) {

Diff for: index.android.js

@@ -1,15 +1,10 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
 import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  TouchableOpacity
 } from 'react-native';
 
 import MultiSliders from './MultiSlider'
@@ -28,6 +23,7 @@ class MultiSlider extends Component {
       <View style = {{flex: 1, backgroundColor: 'white'}}>
           <View style = {styles.container}>
             <MultiSliders
+              ref = {(ms) => {this._ms = ms }}
               trackWidth = {300}
               defaultTrackColor = {'#e3e3e3'}
               leftThumbColor = {'red'}
@@ -39,16 +35,37 @@ class MultiSlider extends Component {
               onRightValueChange = {(rightValue) => this.setState({rightValue})}
             />
         </View>
+        <TouchableOpacity onPress = {() => this.onPress(true)}>
+          <View style = {styles.button}>
+            <Text>Click to disable</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress = {() => this.onPress(false)}>
+          <View style = {styles.button}>
+            <Text>Click to able</Text>
+          </View>
+        </TouchableOpacity>
       </View>
     );
   }
+
+  onPress(flag) {
+    this._ms.setDisable(flag)
+  }
 }
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     marginTop: 50,
   },
+
+  button: {
+    alignItems: 'center',
+    padding: 20,
+    marginHorizontal: 10,
+    marginVertical: 5,
+  }
 });
 
 AppRegistry.registerComponent('MultiSlider', () => MultiSlider);

Diff for: index.ios.js

@@ -1,15 +1,10 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
 import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  TouchableOpacity
 } from 'react-native';
 
 import MultiSliders from './MultiSlider'
@@ -28,6 +23,7 @@ class MultiSlider extends Component {
       <View style = {{flex: 1, backgroundColor: 'white'}}>
           <View style = {styles.container}>
             <MultiSliders
+              ref = {(ms) => {this._ms = ms }}
               trackWidth = {300}
               defaultTrackColor = {'#e3e3e3'}
               leftThumbColor = {'red'}
@@ -39,16 +35,37 @@ class MultiSlider extends Component {
               onRightValueChange = {(rightValue) => this.setState({rightValue})}
             />
         </View>
+        <TouchableOpacity onPress = {() => this.onPress(true)}>
+          <View style = {styles.button}>
+            <Text>Click to disable</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity onPress = {() => this.onPress(false)}>
+          <View style = {styles.button}>
+            <Text>Click to able</Text>
+          </View>
+        </TouchableOpacity>
       </View>
     );
   }
+
+  onPress(flag) {
+    this._ms.setDisable(flag)
+  }
 }
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     marginTop: 50,
   },
+
+  button: {
+    alignItems: 'center',
+    padding: 20,
+    marginHorizontal: 10,
+    marginVertical: 5,
+  }
 });
 
 AppRegistry.registerComponent('MultiSlider', () => MultiSlider);