Unverified Commit bb61e346 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub
Browse files

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



* Added callback prop for scroll

* Review

* Replace null prop value with undefined
Co-authored-by: default avatarTasso Evangelista <tassoevan7@gmail.com>
parent cd0122be
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,
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment