feat: Added callback prop for scroll position (#155)

* Added callback prop for scroll

* Review

* Replace null prop value with undefined

Co-authored-by: Tasso Evangelista <tassoevan7@gmail.com>

Author: tassoevan

packages/fuselage/src/components/Box/Scrollable/index.js

@@ -1,9 +1,24 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useProps } from '../../../hooks';
 
-export function Scrollable({ children, horizontal, vertical, smooth }) {
+export function Scrollable({ children, horizontal, vertical, smooth, onScrollContent }) {
+  const scrollTimeoutRef = useRef();
+
+  const handleScroll = useCallback(function(event) {
+    const { target } = event;
+    const returnTouchingEdges = () => ({ top: !target.scrollTop, bottom: !(target.scrollTop + target.clientHeight - target.scrollHeight), left: !target.scrollLeft, right: !(target.scrollLeft + target.clientWidth - target.scrollWidth) });
+    if (!scrollTimeoutRef.current) {
+      onScrollContent(returnTouchingEdges());
+    }
+    clearTimeout(scrollTimeoutRef.current);
+    scrollTimeoutRef.current = setTimeout(() => {
+      scrollTimeoutRef.current = false;
+      onScrollContent(returnTouchingEdges());
+    }, 200);
+  }, [onScrollContent]);
+
   const [, PropsProvider] = useProps(({ className, ...props }) => ({
     className: [
       className,
@@ -12,6 +27,7 @@ export function Scrollable({ children, horizontal, vertical, smooth }) {
       vertical && 'rcx-box--scrollable-vertical',
       smooth && 'rcx-box--scrollable-smooth',
     ].filter(Boolean).join(' '),
+    onScroll: typeof onScrollContent !== 'undefined' ? handleScroll : undefined,
     ...props,
   }), [horizontal, vertical, smooth]);
 
@@ -22,4 +38,5 @@ Scrollable.propTypes = {
   horizontal: PropTypes.bool,
   vertical: PropTypes.bool,
   smooth: PropTypes.bool,
+  onScrollContent: PropTypes.func,
 };