feat(datepicker): default prevent manual panResonder when mdal shown

add `modalOnResponderTerminationRequest` function to custom define touch responder logic #47
xgfe · Oct 31, 2016 · 6d1c1d0 · 6d1c1d0
1 parent 17aa35d
commit 6d1c1d0
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 43 deletions.
diff --git a/index.android.js b/index.android.js
@@ -3,7 +3,8 @@ import {
   AppRegistry,
   StyleSheet,
   Text,
-  View
+  View,
+  PanResponder
 } from 'react-native';
 import DatePicker from './index.js';
 
@@ -20,9 +21,22 @@ class datepicker extends Component {
     };
   }
 
+  componentWillMount() {
+    this._panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: (e) => {console.log('onStartShouldSetPanResponder'); return true;},
+      onMoveShouldSetPanResponder: (e) => {console.log('onMoveShouldSetPanResponder'); return true;},
+      onPanResponderGrant: (e) => console.log('onPanResponderGrant'),
+      onPanResponderMove: (e) => console.log('onPanResponderMove'),
+      onPanResponderRelease: (e) => console.log('onPanResponderRelease'),
+      onPanResponderTerminate: (e) => console.log('onPanResponderTerminate')
+    });
+  }
+
   render() {
     return (
-      <View style={styles.container}>
+      <View style={styles.container}
+            {...this._panResponder.panHandlers}
+      >
         <Text style={styles.welcome}>
           Welcome to react-native-datepicker example!
         </Text>

diff --git a/index.js b/index.js
@@ -71,6 +71,14 @@ class DatePicker extends Component {
     }
   }
 
+  onStartShouldSetResponder(e) {
+    return true;
+  }
+
+  onMoveShouldSetResponder(e) {
+    return true;
+  }
+
   onPressCancel() {
     this.setModalVisible(false);
   }
@@ -244,53 +252,57 @@ class DatePicker extends Component {
             visible={this.state.modalVisible}
             onRequestClose={() => {this.setModalVisible(false);}}
           >
-            <TouchableHighlight
-              style={Style.datePickerMask}
-              activeOpacity={1}
-              underlayColor={'#00000077'}
-              onPress={this.onPressCancel}
+            <View
+              style={{flex: 1}}
+              onStartShouldSetResponder={this.onStartShouldSetResponder}
+              onMoveShouldSetResponder={this.onMoveShouldSetResponder}
+              onResponderTerminationRequest={this.props.modalOnResponderTerminationRequest}
             >
               <TouchableHighlight
-                underlayColor={'#fff'}
-                style={{flex: 1}}
+                style={Style.datePickerMask}
+                activeOpacity={1}
+                underlayColor={'#00000077'}
+                onPress={this.onPressCancel}
               >
-                <Animated.View
-                  style={[Style.datePickerCon, {height: this.state.animatedHeight}, customStyles.datePickerCon]}
-                  onStartShouldSetResponder={e => true}
-                  onMoveShouldSetResponder={e => true}
-                  onResponderTerminationRequest={this.props.modalOnResponderTerminationRequest}
+                <TouchableHighlight
+                  underlayColor={'#fff'}
+                  style={{flex: 1}}
                 >
-                  <DatePickerIOS
-                    date={this.state.date}
-                    mode={this.props.mode}
-                    minimumDate={this.props.minDate && this.getDate(this.props.minDate)}
-                    maximumDate={this.props.maxDate && this.getDate(this.props.maxDate)}
-                    onDateChange={(date) => this.setState({date: date})}
-                    minuteInterval={this.props.minuteInterval}
-                    timeZoneOffsetInMinutes={this.props.timeZoneOffsetInMinutes}
-                    style={[Style.datePicker, customStyles.datePicker]}
-                  />
-                  <TouchableHighlight
-                    underlayColor={'transparent'}
-                    onPress={this.onPressCancel}
-                    style={[Style.btnText, Style.btnCancel, customStyles.btnCancel]}
+                  <Animated.View
+                    style={[Style.datePickerCon, {height: this.state.animatedHeight}, customStyles.datePickerCon]}
                   >
-                    <Text
-                      style={[Style.btnTextText, Style.btnTextCancel, customStyles.btnTextCancel]}
+                    <DatePickerIOS
+                      date={this.state.date}
+                      mode={this.props.mode}
+                      minimumDate={this.props.minDate && this.getDate(this.props.minDate)}
+                      maximumDate={this.props.maxDate && this.getDate(this.props.maxDate)}
+                      onDateChange={(date) => this.setState({date: date})}
+                      minuteInterval={this.props.minuteInterval}
+                      timeZoneOffsetInMinutes={this.props.timeZoneOffsetInMinutes}
+                      style={[Style.datePicker, customStyles.datePicker]}
+                    />
+                    <TouchableHighlight
+                      underlayColor={'transparent'}
+                      onPress={this.onPressCancel}
+                      style={[Style.btnText, Style.btnCancel, customStyles.btnCancel]}
                     >
-                      {this.props.cancelBtnText}
-                    </Text>
-                  </TouchableHighlight>
-                  <TouchableHighlight
-                    underlayColor={'transparent'}
-                    onPress={this.onPressConfirm}
-                    style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
-                  >
-                    <Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{this.props.confirmBtnText}</Text>
-                  </TouchableHighlight>
-                </Animated.View>
+                      <Text
+                        style={[Style.btnTextText, Style.btnTextCancel, customStyles.btnTextCancel]}
+                      >
+                        {this.props.cancelBtnText}
+                      </Text>
+                    </TouchableHighlight>
+                    <TouchableHighlight
+                      underlayColor={'transparent'}
+                      onPress={this.onPressConfirm}
+                      style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
+                    >
+                      <Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{this.props.confirmBtnText}</Text>
+                    </TouchableHighlight>
+                  </Animated.View>
+                </TouchableHighlight>
               </TouchableHighlight>
-            </TouchableHighlight>
+            </View>
           </Modal>}
         </View>
       </TouchableHighlight>
@@ -315,7 +327,7 @@ DatePicker.defaultProps = {
   showIcon: true,
   disabled: false,
   placeholder: '',
-  modalOnResponderTerminationRequest: e => true
+  modalOnResponderTerminationRequest: e => false
 };
 
 DatePicker.propTypes = {

diff --git a/...codeproj/project.xcworkspace/xcuserdata/yuebin.xcuserdatad/UserInterfaceState.xcuserstate b/...codeproj/project.xcworkspace/xcuserdata/yuebin.xcuserdatad/UserInterfaceState.xcuserstate
diff --git a/test/index.test.js b/test/index.test.js
@@ -301,6 +301,19 @@ describe('DatePicker:', () => {
     expect(datePicker.onPressDate).to.throw(Error);
   });
 
+  it('panResponder', () => {
+    Platform.OS = 'ios';
+    const wrapper = shallow(<DatePicker date="2016-05-06" minDate="2016-04-01" maxDate="2016-06-01"/>);
+    const datePicker = wrapper.instance();
+
+    datePicker.onPressDate();
+
+    expect(datePicker.onStartShouldSetResponder()).to.equal(true);
+    expect(datePicker.onMoveShouldSetResponder()).to.equal(true);
+
+    expect(datePicker.props.modalOnResponderTerminationRequest()).to.equal(false);
+  });
+
   it('getTitleElement - with placeholder', () => {
     const placeholder = 'Please pick a date';
     const wrapper = mount(<DatePicker placeholder={placeholder} />);