61 lines
1.3 KiB
JavaScript
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: shouldStick && isContentStuck ? 'sticky' : 'static',
|
|
} }
|
|
>
|
|
{ children }
|
|
</div>
|
|
);
|
|
};
|