@wordpress/block-editor
Version:
74 lines (71 loc) • 2.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
var _ = require(".");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockPopoverCover({
clientId,
bottomClientId,
children,
shift = false,
additionalStyles,
...props
}, ref) {
var _bottomClientId;
(_bottomClientId = bottomClientId) !== null && _bottomClientId !== void 0 ? _bottomClientId : bottomClientId = clientId;
const selectedElement = (0, _useBlockRefs.useBlockElement)(clientId);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PrivateBlockPopover, {
ref: ref,
clientId: clientId,
bottomClientId: bottomClientId,
shift: shift,
...props,
children: selectedElement && clientId === bottomClientId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CoverContainer, {
selectedElement: selectedElement,
additionalStyles: additionalStyles,
children: children
}) : children
});
}
function CoverContainer({
selectedElement,
additionalStyles = {},
children
}) {
const [width, setWidth] = (0, _element.useState)(selectedElement.offsetWidth);
const [height, setHeight] = (0, _element.useState)(selectedElement.offsetHeight);
(0, _element.useEffect)(() => {
const observer = new window.ResizeObserver(() => {
setWidth(selectedElement.offsetWidth);
setHeight(selectedElement.offsetHeight);
});
observer.observe(selectedElement, {
box: 'border-box'
});
return () => observer.disconnect();
}, [selectedElement]);
const style = (0, _element.useMemo)(() => {
return {
position: 'absolute',
width,
height,
...additionalStyles
};
}, [width, height, additionalStyles]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: style,
children: children
});
}
var _default = exports.default = (0, _element.forwardRef)(BlockPopoverCover);
//# sourceMappingURL=cover.js.map