@gechiui/block-editor
Version:
35 lines (32 loc) • 995 B
JavaScript
/**
* GeChiUI dependencies
*/
import { useRefEffect } from '@gechiui/compose';
/**
* Allow scrolling "through" popovers over the canvas. This is only called for
* as long as the pointer is over a popover. Do not use React events because it
* will bubble through portals.
*
* @param {Object} scrollableRef
*/
export function usePopoverScroll( scrollableRef ) {
return useRefEffect(
( node ) => {
if ( ! scrollableRef ) {
return;
}
function onWheel( event ) {
const { deltaX, deltaY } = event;
scrollableRef.current.scrollBy( deltaX, deltaY );
}
// Tell the browser that we do not call event.preventDefault
// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
const options = { passive: true };
node.addEventListener( 'wheel', onWheel, options );
return () => {
node.removeEventListener( 'wheel', onWheel, options );
};
},
[ scrollableRef ]
);
}