feat: Add fixed increment scroll behavior to useOverflowScroll

openedx · Mar 21, 2023 · b6177ce · b6177ce
1 parent 3955a3e
commit b6177ce
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/src/OverflowScroll/OverflowScroll.jsx b/src/OverflowScroll/OverflowScroll.jsx
@@ -13,6 +13,7 @@ function OverflowScroll({
   disableOpacityMasks,
   onScrollPrevious,
   onScrollNext,
+  offset,
 }) {
   const [overflowRef, setOverflowRef] = useState();
 
@@ -29,6 +30,7 @@ function OverflowScroll({
     onScrollPrevious,
     onScrollNext,
     overflowRef,
+    offset,
   });
 
   const contextValue = useMemo(() => ({
@@ -71,6 +73,7 @@ OverflowScroll.propTypes = {
   disableOpacityMasks: PropTypes.bool,
   onScrollPrevious: PropTypes.func,
   onScrollNext: PropTypes.func,
+  offset: PropTypes.string,
 };
 
 OverflowScroll.defaultProps = {
@@ -80,6 +83,7 @@ OverflowScroll.defaultProps = {
   disableOpacityMasks: false,
   onScrollPrevious: undefined,
   onScrollNext: undefined,
+  offset: undefined,
 };
 
 export default OverflowScroll;
diff --git a/src/OverflowScroll/data/useOverflowScroll.js b/src/OverflowScroll/data/useOverflowScroll.js
@@ -27,6 +27,7 @@ import getOverflowElementScrollLeft from './getOverflowElementScrollLeft';
  * @param {boolean} args.disableOpacityMasks Whether the start/end opacity masks should be shown, when applicable.
  * @param {string} args.scrollAnimationBehavior Optional override for the scroll behavior. See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo for
  *  more details.
+ * @param {string} args.offset Fixed increment in pixels or percentage for scroll.
  *
  * @returns {object} An object with the following properties:
  * - overflowRef
@@ -45,7 +46,9 @@ const useOverflowScroll = ({
   disableScroll = false,
   disableOpacityMasks = false,
   scrollAnimationBehavior = 'smooth',
+  offset,
 }) => {
+  const [currentOffset, setCurrentOffset] = useState(0);
   const [isScrolledToStart, setIsScrolledToStart] = useState(true);
   const [isScrolledToEnd, setIsScrolledToEnd] = useState(true);
 
@@ -153,6 +156,9 @@ const useOverflowScroll = ({
     scrollAnimationBehavior,
     onScrollPrevious: handleScrollPrevious,
     onScrollNext: handleScrollNext,
+    onChangeOffset: setCurrentOffset,
+    currentOffset,
+    offset,
   });
 
   return {

diff --git a/src/OverflowScroll/data/useOverflowScrollActions.js b/src/OverflowScroll/data/useOverflowScrollActions.js
@@ -15,7 +15,24 @@ const useOverflowScrollActions = ({
   scrollAnimationBehavior = 'smooth',
   onScrollPrevious,
   onScrollNext,
+  onChangeOffset,
+  currentOffset,
+  offset,
 }) => {
+
+  const getOffset = (offsetString, maxOffset) => {
+    let offset = 0;
+
+    if (offsetString.endsWith("px")) {
+      offset = parseInt(offsetString);
+    } else if (offsetString.endsWith("%")) {
+      const percent = parseInt(offsetString) / 100;
+      offset = Math.round(maxOffset * percent);
+    }
+
+    return offset;
+  }
+
   /**
    * A helper function to scroll to the previous element in the overflow container.
    */
@@ -34,7 +51,19 @@ const useOverflowScrollActions = ({
 
     const previousChildElementIndex = activeChildElementIndex - 1;
     const previousChildElement = getPreviousChildElement(previousChildElementIndex);
-    const calculatedOffsetLeft = calculateOffsetLeft(previousChildElement);
+    let calculatedOffsetLeft = calculateOffsetLeft(previousChildElement);
+
+    if (offset) {
+      const maxOffset = overflowRef.scrollWidth - overflowRef.clientWidth;
+      const offsetValue = getOffset(offset, maxOffset);
+      calculatedOffsetLeft = currentOffset - offsetValue;
+      if (calculatedOffsetLeft < 0) {
+        onChangeOffset(0);
+      } else {
+        onChangeOffset(calculatedOffsetLeft);
+      }
+    }
+
     overflowRef.scrollTo({
       left: calculatedOffsetLeft,
       behavior: scrollAnimationBehavior,
@@ -72,8 +101,20 @@ const useOverflowScrollActions = ({
       return childrenElements[nextChildElementIndex];
     };
 
-    const nextChildElement = getNextChildElement();
-    const calculatedOffsetLeft = calculateOffsetLeft(nextChildElement);
+    let nextChildElement = getNextChildElement();
+    let calculatedOffsetLeft = calculateOffsetLeft(nextChildElement);
+
+    if (offset) {
+      const maxOffset = overflowRef.scrollWidth - overflowRef.clientWidth;
+      const offsetValue = getOffset(offset, maxOffset);
+      calculatedOffsetLeft = currentOffset + offsetValue;
+      if (calculatedOffsetLeft > maxOffset) {
+        onChangeOffset(maxOffset);
+      } else {
+        onChangeOffset(calculatedOffsetLeft);
+      }
+    }
+
     overflowRef.scrollTo({
       left: calculatedOffsetLeft,
       behavior: scrollAnimationBehavior,