@wordpress/block-library/build/cover/edit/resizable-cover.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ResizableCover;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _components = require("@wordpress/components");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
const RESIZABLE_BOX_ENABLE_OPTION = {
  top: false,
  right: false,
  bottom: true,
  left: false,
  topRight: false,
  bottomRight: false,
  bottomLeft: false,
  topLeft: false
};

function ResizableCover(_ref) {
  let {
    className,
    onResizeStart,
    onResize,
    onResizeStop,
    ...props
  } = _ref;
  const [isResizing, setIsResizing] = (0, _element.useState)(false);
  return (0, _element.createElement)(_components.ResizableBox, (0, _extends2.default)({
    className: (0, _classnames.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);
    },
    __experimentalShowTooltip: true,
    __experimentalTooltipProps: {
      axis: 'y',
      position: 'bottom',
      isVisible: isResizing
    }
  }, props));
}
//# sourceMappingURL=resizable-cover.js.map