@elastic/eui
Version:
Elastic UI Component Library
85 lines (80 loc) • 4.18 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { useEffect, useMemo, useRef } from 'react';
import { css, cx } from '@emotion/css';
import { useCombinedRefs } from '../../services';
import { EuiOverlayMask } from '../overlay_mask';
import { EuiPortal } from '../portal';
import { jsx as ___EmotionJSX } from "@emotion/react";
var getEuiFlyoutOverlayStyles = function getEuiFlyoutOverlayStyles(zIndex) {
/*
This needs to have !important to override the default EuiOverlayMask
z-index based on the headerZindexLocation prop. Using the style attribute
doesn't work since EuiOverlayMask requires the styles to be provided via className
*/
return /*#__PURE__*/css("z-index:", zIndex, "!important;;label:getEuiFlyoutOverlayStyles;");
};
/**
* Light wrapper for conditionally rendering portals or overlay masks:
* - If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
* - Otherwise still wrap within an EuiPortal so it appends to the bottom of the window.
* Push flyouts have no overlay OR portal behavior.
*
* @internal
*/
export var EuiFlyoutOverlay = function EuiFlyoutOverlay(_ref) {
var _maskProps$headerZind;
var children = _ref.children,
isPushed = _ref.isPushed,
maskProps = _ref.maskProps,
hasOverlayMask = _ref.hasOverlayMask,
maskZIndex = _ref.maskZIndex,
_ref$headerZindexLoca = _ref.headerZindexLocation,
headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'below' : _ref$headerZindexLoca,
containerRect = _ref.containerRect;
var styles = useMemo(function () {
return getEuiFlyoutOverlayStyles(maskZIndex);
}, [maskZIndex]);
// Internal ref so we can apply containerRect positioning directly on the DOM
// node, avoiding new Emotion CSS class generation on every scroll/resize.
var internalMaskRef = useRef(null);
var combinedMaskRef = useCombinedRefs([internalMaskRef, maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef]);
useEffect(function () {
var node = internalMaskRef.current;
if (!node) return;
// containerRect positioning must be applied via node.style.setProperty rather than
// through the style prop - EuiOverlayMask requires styles to be passed via className
if (containerRect) {
node.style.setProperty('inset-block-start', "".concat(containerRect.top, "px"));
node.style.setProperty('inset-inline-start', "".concat(containerRect.left, "px"));
node.style.setProperty('inline-size', "".concat(containerRect.width, "px"));
node.style.setProperty('block-size', "".concat(containerRect.height, "px"));
node.style.setProperty('inset-inline-end', 'auto');
node.style.setProperty('inset-block-end', 'auto');
} else {
node.style.removeProperty('inset-block-start');
node.style.removeProperty('inset-inline-start');
node.style.removeProperty('inline-size');
node.style.removeProperty('block-size');
node.style.removeProperty('inset-inline-end');
node.style.removeProperty('inset-block-end');
}
}, [containerRect, hasOverlayMask]); // toggling ownFocus while the flyout is already open should cause re-render
var content = children;
if (!isPushed || hasOverlayMask) {
content = ___EmotionJSX(EuiPortal, null, content);
}
var classes = cx(maskProps === null || maskProps === void 0 ? void 0 : maskProps.className, styles);
return ___EmotionJSX(React.Fragment, null, hasOverlayMask && ___EmotionJSX(EuiOverlayMask, _extends({
headerZindexLocation: (_maskProps$headerZind = maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) !== null && _maskProps$headerZind !== void 0 ? _maskProps$headerZind : headerZindexLocation
}, maskProps, {
maskRef: combinedMaskRef,
className: classes
})), content);
};