added onBeforeScroll callback, updated types, fixes #40, #61

VikLiegostaiev · Oct 22, 2020 · 810b248 · 810b248
1 parent d29fe88
commit 810b248
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -43,6 +43,12 @@ export interface ReactPageScrollerProps {
    * Callback fired when someone tries to scroll over last or first child component.
    */
   handleScrollUnavailable?: () => void;
+  /**
+   * Callback fired before new page started scrolling into view.
+   *
+   * @param {number} page The number of next page.
+   */
+  onBeforePageScroll?: (nextPage: number) => void;
   /**
    * Callback fired when the selected page changes.
    *

diff --git a/src/index.js b/src/index.js
@@ -19,6 +19,7 @@ const DEFAULT_COMPONENTS_TO_RENDER_LENGTH = 0;
 const DEFAULT_ANIMATION_TIMER_BUFFER = 200;
 const KEY_UP = 38;
 const KEY_DOWN = 40;
+const MINIMAL_DELTA_Y_DIFFERENCE = 1;
 const DISABLED_CLASS_NAME = "rps-scroll--disabled";
 
 let previousTouchMove = null;
@@ -38,6 +39,7 @@ const ReactPageScroller = ({
   containerWidth,
   customPageNumber,
   handleScrollUnavailable,
+  onBeforePageScroll,
   pageOnChange,
   renderAllPagesOnFirstRender,
   transitionTimingFunction,
@@ -50,6 +52,18 @@ const ReactPageScroller = ({
   const pageContainer = useRef(null);
   const lastScrolledElement = useRef(null);
 
+  const scrollPage = useCallback(
+    nextComponentIndex => {
+      if (onBeforePageScroll) {
+        onBeforePageScroll(nextComponentIndex);
+      }
+
+      pageContainer.current.style.transform = `translate3d(0, ${nextComponentIndex *
+        -100}%, 0)`;
+    },
+    [onBeforePageScroll],
+  );
+
   const addNextComponent = useCallback(
     componentsToRenderOnMountLength => {
       let tempComponentsToRenderLength = 0;
@@ -126,9 +140,7 @@ const ReactPageScroller = ({
       if (!isNil(containers[componentIndex + 1])) {
         disableScroll();
         isScrolling = true;
-        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex +
-          1) *
-          -100}%, 0)`;
+        scrollPage(componentIndex + 1);
 
         setTimeout(() => {
           if (isMounted) {
@@ -150,16 +162,15 @@ const ReactPageScroller = ({
     disableScroll,
     enableDocumentScroll,
     handleScrollUnavailable,
+    scrollPage,
   ]);
 
   const scrollWindowUp = useCallback(() => {
     if (!isScrolling && !blockScrollUp) {
       if (!isNil(containers[componentIndex - 1])) {
         disableScroll();
         isScrolling = true;
-        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex -
-          1) *
-          -100}%, 0)`;
+        scrollPage(componentIndex - 1);
 
         setTimeout(() => {
           if (isMounted) {
@@ -181,6 +192,7 @@ const ReactPageScroller = ({
     disableScroll,
     enableDocumentScroll,
     handleScrollUnavailable,
+    scrollPage,
   ]);
 
   const touchMove = useCallback(
@@ -200,7 +212,7 @@ const ReactPageScroller = ({
 
   const wheelScroll = useCallback(
     event => {
-      if (Math.abs(event.deltaY) > 1) {
+      if (Math.abs(event.deltaY) > MINIMAL_DELTA_Y_DIFFERENCE) {
         if (isPositiveNumber(event.deltaY)) {
           lastScrolledElement.current = event.target;
           scrollWindowDown();
@@ -265,8 +277,7 @@ const ReactPageScroller = ({
         if (!isNil(containers[customPageNumber]) && !isScrolling) {
           isScrolling = true;
           // eslint-disable-next-line max-len
-          pageContainer.current.style.transform = `translate3d(0, ${customPageNumber *
-            -100}%, 0)`;
+          scrollPage(customPageNumber);
 
           if (
             isNil(containers[customPageNumber]) &&
@@ -294,14 +305,13 @@ const ReactPageScroller = ({
         }
       }
     }
-  }, [customPageNumber]);
+  }, [customPageNumber, scrollPage]);
 
   useEffect(() => {
     if (isTransitionAfterComponentsToRenderChanged) {
       isTransitionAfterComponentsToRenderChanged = false;
 
-      pageContainer.current.style.transform = `translate3d(0, ${customPageNumber *
-        -100}%, 0)`;
+      scrollPage(customPageNumber);
 
       setTimeout(() => {
         setComponentIndex(customPageNumber);
@@ -312,6 +322,7 @@ const ReactPageScroller = ({
     animationTimerBuffer,
     componentsToRenderLength,
     customPageNumber,
+    scrollPage,
   ]);
 
   return (
@@ -349,6 +360,7 @@ ReactPageScroller.propTypes = {
   containerWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   customPageNumber: PropTypes.number,
   handleScrollUnavailable: PropTypes.func,
+  onBeforePageScroll: PropTypes.func,
   pageOnChange: PropTypes.func,
   renderAllPagesOnFirstRender: PropTypes.bool,
   transitionTimingFunction: PropTypes.string,