From 8b5b5f2e6e4dc6a518a25e3080a6982f855d2ea1 Mon Sep 17 00:00:00 2001 From: Ben Styles Date: Tue, 30 Jan 2018 11:41:21 +0000 Subject: [PATCH 1/2] initial commit with onSlideStateChange --- src/container/Calendar.react.js | 2 ++ src/pure/DaySelector.react.js | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/src/container/Calendar.react.js b/src/container/Calendar.react.js index e40270a..8d27763 100644 --- a/src/container/Calendar.react.js +++ b/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} diff --git a/src/pure/DaySelector.react.js b/src/pure/DaySelector.react.js index e9fcf1d..544827a 100644 --- a/src/pure/DaySelector.react.js +++ b/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 From 077c9dc5bffe44901fa29df0410ed7171dcb83a7 Mon Sep 17 00:00:00 2001 From: Ben Styles Date: Tue, 30 Jan 2018 12:45:58 +0000 Subject: [PATCH 2/2] Add instructions to README --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bf5bf0f..3f827e5 100644 --- a/README.md +++ b/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