Optional slideCanBeTerminated prop

README.md

@@ -50,6 +50,7 @@ import Moment from 'moment';
 | *startStage* | "day"/"month"/"year" | **[Default: "day"]** Whether you would like to select the day, month or year first.
 | *finalStage* | "day"/"month"/"year" | **[Default: "day"]** The last level of selection you want.
 | *slideThreshold* | number | **[Default: min([width / 3, 250])]** The number of pixels after which the slide event will be triggered.
+| *slideCanBeTerminated* | boolean | **[Default: true]** Whether scrolling a parent `ScrollView` can terminate the current sliding interaction.
 | *showArrows* | boolean | **[Default: false]** Whether you would like to show arrow buttons for moving between months.
 
 ### Locale specific calendar

src/container/Calendar.react.js

@@ -39,6 +39,7 @@ type Props = {
   selected?: Moment,
   onChange?: (date: Moment) => void,
   slideThreshold?: number,
+  slideCanBeTerminated?: boolean,
   // Minimum and maximum date.
   minDate: Moment,
   maxDate: Moment,
@@ -201,6 +202,7 @@ export default class Calendar extends Component {
               selected={this.props.selected}
               onFocus={this._changeFocus}
               onChange={(date) => this.props.onChange && this.props.onChange(date)}
+              slideCanBeTerminated={this.props.slideCanBeTerminated}
               monthOffset={this.state.monthOffset}
               minDate={this.props.minDate}
               maxDate={this.props.maxDate}
@@ -249,6 +251,7 @@ export default class Calendar extends Component {
   }
 }
 Calendar.defaultProps = {
+  slideCanBeTerminated: true,
   minDate: Moment(),
   maxDate: Moment().add(10, 'years'),
   startStage: DAY_SELECTOR,

src/pure/DaySelector.react.js

@@ -27,6 +27,7 @@ type Props = {
   onChange?: (date: Moment) => void,
   onFocus?: (date: Moment) => void,
   slideThreshold?: number,
+  slideCanBeTerminated: boolean,
   monthOffset?: number,
   // Minimum and maximum dates.
   minDate: Moment,
@@ -82,7 +83,7 @@ export default class DaySelector extends Component {
       onPanResponderMove: (evt, gestureState) => {
         this._slide(gestureState.dx);
       },
-      onPanResponderTerminationRequest: (evt, gestureState) => true,
+      onPanResponderTerminationRequest: (evt, gestureState) => this.props.slideCanBeTerminated,
       onPanResponderRelease: (evt, gestureState) => {
         // The user has released all touches while this view is the
         // responder. This typically means a gesture has succeeded