44 lines
1001 B
TypeScript
44 lines
1001 B
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { useEffect, useLayoutEffect, useState } from '@wordpress/element';
|
||
|
|
|
||
|
|
export const useHeaderHeight = () => {
|
||
|
|
const [ headerHeight, setHeaderHeight ] = useState( 60 );
|
||
|
|
const [ adminBarHeight, setAdminBarHeight ] = useState( 32 );
|
||
|
|
|
||
|
|
useEffect( () => {
|
||
|
|
const wpbody = document.querySelector( '#wpbody' ) as Node;
|
||
|
|
const observer = new MutationObserver( () => {
|
||
|
|
setHeaderHeight(
|
||
|
|
parseInt( ( wpbody as HTMLElement ).style.marginTop, 10 )
|
||
|
|
);
|
||
|
|
} );
|
||
|
|
observer.observe( wpbody, {
|
||
|
|
attributes: true,
|
||
|
|
} );
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
observer.disconnect();
|
||
|
|
};
|
||
|
|
}, [] );
|
||
|
|
|
||
|
|
useLayoutEffect( () => {
|
||
|
|
const handleResize = () => {
|
||
|
|
const adminBar = document.querySelector(
|
||
|
|
'#wpadminbar'
|
||
|
|
) as HTMLElement;
|
||
|
|
setAdminBarHeight( adminBar.clientHeight );
|
||
|
|
};
|
||
|
|
window.addEventListener( 'resize', handleResize );
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener( 'resize', handleResize );
|
||
|
|
};
|
||
|
|
}, [] );
|
||
|
|
|
||
|
|
return {
|
||
|
|
adminBarHeight,
|
||
|
|
headerHeight,
|
||
|
|
};
|
||
|
|
};
|