33 lines
886 B
JavaScript
33 lines
886 B
JavaScript
// @flow
|
|
import * as React from "react";
|
|
import { type ElementRef } from "reakit";
|
|
import useMobile from "hooks/useMobile";
|
|
import useWindowSize from "hooks/useWindowSize";
|
|
|
|
const useMenuHeight = (
|
|
visible: void | boolean,
|
|
unstable_disclosureRef: void | { current: null | ElementRef<"button"> }
|
|
) => {
|
|
const [maxHeight, setMaxHeight] = React.useState(undefined);
|
|
const isMobile = useMobile();
|
|
const { height: windowHeight } = useWindowSize();
|
|
|
|
React.useLayoutEffect(() => {
|
|
const padding = 8;
|
|
|
|
if (visible && !isMobile) {
|
|
setMaxHeight(
|
|
unstable_disclosureRef?.current
|
|
? windowHeight -
|
|
unstable_disclosureRef.current.getBoundingClientRect().bottom -
|
|
padding
|
|
: undefined
|
|
);
|
|
}
|
|
}, [visible, unstable_disclosureRef, windowHeight, isMobile]);
|
|
|
|
return maxHeight;
|
|
};
|
|
|
|
export default useMenuHeight;
|