@elastic/eui
Version:
Elastic UI Component Library
51 lines (49 loc) • 1.85 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["button"];
/*
* 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, { useCallback, useLayoutEffect, useRef } from 'react';
import { EuiPopover } from './popover';
import { EuiPortal } from '../portal';
import { jsx as ___EmotionJSX } from "@emotion/react";
/**
* Injects the EuiPopover next to the button via EuiPortal
* then the button element is moved into the popover dom.
* On unmount, the button is moved back to its original location.
*/
export function EuiWrappingPopover(props) {
var button = props.button,
rest = _objectWithoutProperties(props, _excluded);
var portalRef = useRef(null);
var setPortalRef = useCallback(function (node) {
portalRef.current = node;
}, []);
var setAnchorRef = useCallback(function (node) {
node === null || node === void 0 || node.insertAdjacentElement('beforebegin', button);
}, [button]);
useLayoutEffect(function () {
return function () {
if (button.parentNode && portalRef.current) {
portalRef.current.insertAdjacentElement('beforebegin', button);
}
};
}, [button]);
return ___EmotionJSX(EuiPortal, {
portalRef: setPortalRef,
insert: {
sibling: button,
position: 'after'
}
}, ___EmotionJSX(EuiPopover, _extends({}, rest, {
button: ___EmotionJSX("div", {
ref: setAnchorRef,
className: "euiWrappingPopover__anchor"
})
})));
}