Add optional onSlideStateChange prop to allow user to respond to sliding

README.md

@@ -45,6 +45,7 @@ import Moment from 'moment';
 | --- | --- | ---
 | *selected* | Moment | The currently selected date
 | *onChange* | (date: Moment) => void | Callback for selecting a date
+| *onSlideStateChange* | (currentlySliding: boolean) => void | Called with `true` if user is currently sliding to switch months, or with `false` if user has stopped sliding. This can be useful for temporarily disabling scroll in a parent `ScrollView`. Be aware that this will be called repeatedly during a slide so avoid expensive functions or use a debouncing utility.
 | *minDate* | Moment | **[Mandatory]** Minimum selectable date
 | *maxDate* | Moment | **[Mandatory]** Maximum selectable date
 | *startStage* | "day"/"month"/"year" | **[Default: "day"]** Whether you would like to select the day, month or year first.
@@ -109,9 +110,9 @@ Below is the list of properties that can be used for styling. For a concrete exa
 
 Main Developer: [Vlad-Doru Ion](http://github.com/vlad-doru)
 
-Pull requests by: 
+Pull requests by:
 * [Jason Gaare](http://github.com/jasongaare)
-* [Igor Kurr](http://github.com/igorrKurr) 
+* [Igor Kurr](http://github.com/igorrKurr)
 
 ## License
 

src/container/Calendar.react.js

@@ -39,6 +39,7 @@ type Props = {
   selected?: Moment,
   onChange?: (date: Moment) => void,
   slideThreshold?: number,
+  onSlideStateChange?: (boolean) => void,
   // Minimum and maximum date.
   minDate: Moment,
   maxDate: Moment,
@@ -206,6 +207,7 @@ export default class Calendar extends Component {
               maxDate={this.props.maxDate}
               // Control properties
               slideThreshold={this.props.slideThreshold}
+              onSlideStateChange={this.props.onSlideStateChange}
               // Transfer the corresponding styling properties.
               dayHeaderView={this.props.dayHeaderView}
               dayHeaderText={this.props.dayHeaderText}

src/pure/DaySelector.react.js

@@ -26,6 +26,7 @@ type Props = {
   selected?: Moment,
   onChange?: (date: Moment) => void,
   onFocus?: (date: Moment) => void,
+  onSlideStateChange?: boolean => void,
   slideThreshold?: number,
   monthOffset?: number,
   // Minimum and maximum dates.
@@ -81,11 +82,13 @@ export default class DaySelector extends Component {
       },
       onPanResponderMove: (evt, gestureState) => {
         this._slide(gestureState.dx);
+        this.props.onSlideStateChange && this.props.onSlideStateChange(true);
       },
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: (evt, gestureState) => {
         // The user has released all touches while this view is the
         // responder. This typically means a gesture has succeeded
+        this.props.onSlideStateChange && this.props.onSlideStateChange(false);
 
         // Get the height, width and compute the threshold and offset for swipe.
         const {height, width} = Dimensions.get('window');
@@ -130,6 +133,7 @@ export default class DaySelector extends Component {
         // should be cancelled
         LayoutAnimation.spring();
         this._slide(0)
+        this.props.onSlideStateChange && this.props.onSlideStateChange(false);
       },
       onShouldBlockNativeResponder: (evt, gestureState) => {
         // Returns whether this component should block native components from becoming the JS