UNPKG

@wordpress/block-editor

Version:
74 lines (71 loc) 2.11 kB
"use strict"; 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