Add props onWeekScrollStart and onWeekScrollEnd for scrollable mo…

…de (#279, #281)
BugiDev · Mar 3, 2021 · 73b9847 · 73b9847
1 parent 4caf1b3
commit 73b9847
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -196,6 +196,8 @@ AppRegistry.registerComponent('Example', () => Example);
 | **`selectedDate`**   | Date to be used as pre selected Date. It is internally wrapped by `moment` so it accepts both `Date` and `moment Date`.                                            | Any      |
 | **`onDateSelected`** | Function to be used as a callback when a date is selected. Receives param `date` Moment date.                                                                      | Function |
 | **`onWeekChanged`**  | Function to be used as a callback when a week is changed. Receives params `(start, end)` Moment dates.                                                             | Function |
+| **`onWeekScrollStart`**| Function to be used as a callback in `scrollable` mode when dates page starts gliding. Receives params `(start, end)` Moment dates.                              | Function |
+| **`onWeekScrollEnd`**| Function to be used as a callback in `scrollable` mode when dates page stops gliding. Receives params `(start, end)` Moment dates.                                 | Function |
 | **`onHeaderSelected`**| Function to be used as a callback when the header is selected. Receives param object `{weekStartDate, weekEndDate}` Moment dates.                                 | Function |
 | **`headerText`**     | Text to use in the header. Use with `onWeekChanged` to receive the visible start & end dates.                                                                      | String  |
 | **`updateWeek`**     | Update the week view if other props change. If `false`, the week view won't change when other props change, but will still respond to left/right selectors.        | Bool     | **`True`** |

diff --git a/index.d.ts b/index.d.ts
@@ -80,6 +80,8 @@ interface CalendarStripProps {
   selectedDate?: Moment;
   onDateSelected?: ((date: Moment) => void);
   onWeekChanged?: ((start: Moment, end: Moment) => void);
+  onWeekScrollStart?: ((start: Moment, end: Moment) => void);
+  onWeekScrollEnd?: ((start: Moment, end: Moment) => void);
   onHeaderSelected?: ((dates: {weekStartDate: Moment, weekEndDate: Moment}) => void);
   updateWeek?: boolean;
   useIsoWeekday?: boolean;

diff --git a/src/CalendarStrip.js b/src/CalendarStrip.js
@@ -32,6 +32,8 @@ class CalendarStrip extends Component {
     selectedDate: PropTypes.any,
     onDateSelected: PropTypes.func,
     onWeekChanged: PropTypes.func,
+    onWeekScrollStart: PropTypes.func,
+    onWeekScrollEnd: PropTypes.func,
     onHeaderSelected: PropTypes.func,
     updateWeek: PropTypes.bool,
     useIsoWeekday: PropTypes.bool,
@@ -560,6 +562,8 @@ class CalendarStrip extends Component {
           maxDate={this.props.maxDate}
           updateMonthYear={this.updateMonthYear}
           onWeekChanged={this.props.onWeekChanged}
+          onWeekScrollStart={this.props.onWeekScrollStart}
+          onWeekScrollEnd={this.props.onWeekScrollEnd}
           externalScrollView={this.props.externalScrollView}
         />
       );

diff --git a/src/Scroller.js b/src/Scroller.js
@@ -22,6 +22,8 @@ export default class CalendarScroller extends Component {
     maxSimultaneousDays: PropTypes.number,
     updateMonthYear: PropTypes.func,
     onWeekChanged: PropTypes.func,
+    onWeekScrollStart: PropTypes.func,
+    onWeekScrollEnd: PropTypes.func,
     externalScrollView: PropTypes.func,
     pagingEnabled: PropTypes.bool
   }
@@ -253,6 +255,51 @@ export default class CalendarScroller extends Component {
     });
   }
 
+  onScrollStart = (event) => {
+    const {onWeekScrollStart} = this.props;
+    const {prevStartDate, prevEndDate} = this.state;
+
+    if (onWeekScrollStart && prevStartDate && prevEndDate) {
+      onWeekScrollStart(prevStartDate.clone(), prevEndDate.clone());
+    }
+  }
+
+  onScrollEnd = () => {
+    const {onWeekScrollEnd} = this.props;
+    const {visibleStartDate, visibleEndDate, prevEndDate} = this.state;
+
+    if (onWeekScrollEnd && visibleStartDate && visibleEndDate) {
+      if (!visibleEndDate.isSame(prevEndDate, "day")) {
+        onWeekScrollEnd(visibleStartDate.clone(), visibleEndDate.clone());
+      }
+    }
+  }
+
+  onScrollBeginDrag = () => {
+    const {
+      onWeekScrollStart,
+      onWeekScrollEnd,
+    } = this.props;
+    // Prev dates required only if scroll callbacks are defined
+    if (!onWeekScrollStart && !onWeekScrollEnd) {
+      return;
+    }
+    const {
+      data,
+      visibleStartDate,
+      visibleEndDate,
+    } = this.state;
+    const prevStartDate = visibleStartDate ? visibleStartDate
+      : (data[visibleStartIndex] ? data[visibleStartIndex].date : moment());
+    const prevEndDate = visibleEndDate ? visibleEndDate
+      : (data[visibleEndIndex] ? data[visibleEndIndex].date : moment());
+
+    this.setState({
+      prevStartDate,
+      prevEndDate,
+    });
+  }
+
   onLayout = event => {
     let width = event.nativeEvent.layout.width;
     this.setState({
@@ -292,6 +339,9 @@ export default class CalendarScroller extends Component {
           scrollViewProps={{
             showsHorizontalScrollIndicator: false,
             contentContainerStyle: { paddingRight: this.state.itemWidth / 2 },
+            onMomentumScrollBegin: this.onScrollStart,
+            onMomentumScrollEnd: this.onScrollEnd,
+            onScrollBeginDrag: this.onScrollBeginDrag,
             ...pagingProps
           }}
         />