@wordpress/block-library
Version:
Block library for the WordPress editor.
85 lines (81 loc) • 2.03 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ResizableCoverPopover;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const RESIZABLE_BOX_ENABLE_OPTION = {
top: false,
right: false,
bottom: true,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false
};
const {
ResizableBoxPopover
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ResizableCoverPopover({
className,
height,
minHeight,
onResize,
onResizeStart,
onResizeStop,
showHandle,
size,
width,
...props
}) {
const [isResizing, setIsResizing] = (0, _element.useState)(false);
const resizableBoxProps = {
className: (0, _clsx.default)(className, {
'is-resizing': isResizing
}),
enable: RESIZABLE_BOX_ENABLE_OPTION,
onResizeStart: (_event, _direction, elt) => {
onResizeStart(elt.clientHeight);
onResize(elt.clientHeight);
},
onResize: (_event, _direction, elt) => {
onResize(elt.clientHeight);
if (!isResizing) {
setIsResizing(true);
}
},
onResizeStop: (_event, _direction, elt) => {
onResizeStop(elt.clientHeight);
setIsResizing(false);
},
showHandle,
size,
__experimentalShowTooltip: true,
__experimentalTooltipProps: {
axis: 'y',
position: 'bottom',
isVisible: isResizing
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableBoxPopover, {
className: "block-library-cover__resizable-box-popover",
resizableBoxProps: resizableBoxProps,
...props
});
}
//# sourceMappingURL=resizable-cover-popover.js.map