woocommerce/plugins/woocommerce-admin/client/homescreen/column.js

61 lines
1.3 KiB
JavaScript

/**
* External dependencies
*/
import {
useCallback,
useState,
useRef,
useLayoutEffect,
} from '@wordpress/element';
export const Column = ( { children, shouldStick = false } ) => {
const [ isContentStuck, setIsContentStuck ] = useState( false );
const content = useRef( null );
const initialTop = useRef( null );
const maybeStickContent = useCallback( () => {
if ( ! content.current ) {
return;
}
const { bottom, top } = content.current.getBoundingClientRect();
if ( initialTop.current === null ) {
initialTop.current = top;
}
const shouldBeSticky = bottom < window.innerHeight;
if ( top === initialTop.current ) {
setIsContentStuck( shouldBeSticky );
}
}, [] );
useLayoutEffect( () => {
if ( ! shouldStick ) {
return;
}
maybeStickContent();
window.addEventListener( 'resize', maybeStickContent );
window.addEventListener( 'scroll', maybeStickContent );
return () => {
window.removeEventListener( 'resize', maybeStickContent );
window.removeEventListener( 'scroll', maybeStickContent );
};
}, [ maybeStickContent, shouldStick ] );
return (
<div
className="woocommerce-homescreen-column"
ref={ content }
style={ {
position: isContentStuck ? 'sticky' : 'static',
} }
>
{ children }
</div>
);
};