@atlaskit/popup
Version:
A popup displays brief content in an overlay.
26 lines (25 loc) • 1.03 kB
JavaScript
import { useState } from 'react';
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
/**
* **usePopupAppearance()**
*
* Abstracts away calculating the appearance for a popup including if it should
* be portalled or not, this is done to ensure that if the popup needs to render
* as a modal that it is also forcibly portalled. If it's not portalled when rendering
* as a modal it will appear below the top bar.
*/
export function usePopupAppearance({
appearance: _appearance,
shouldRenderToParent: _shouldRenderToParent
}) {
const mq = useMediaQuery('below.sm', e => {
setIsSmallViewport(!!e.matches);
});
const [isSmallViewport, setIsSmallViewport] = useState(!!(mq !== null && mq !== void 0 && mq.matches));
const appearance = _appearance === 'UNSAFE_modal-below-sm' && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
const shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
return {
appearance,
shouldRenderToParent
};
}