@wordpress/components/build/resizable-box/index.js

UI components for WordPress.

"use strict";

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

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

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

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

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

var _reResizable = require("re-resizable");

var _resizeTooltip = _interopRequireDefault(require("./resize-tooltip"));

/**
 * WordPress dependencies
 */

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
function ResizableBox({
  className,
  children,
  showHandle = true,
  __experimentalShowTooltip: showTooltip = false,
  __experimentalTooltipProps: tooltipProps = {},
  ...props
}, ref) {
  // Removes the inline styles in the drag handles.
  const handleStylesOverrides = {
    width: null,
    height: null,
    top: null,
    right: null,
    bottom: null,
    left: null
  };
  const handleClassName = 'components-resizable-box__handle';
  const sideHandleClassName = 'components-resizable-box__side-handle';
  const cornerHandleClassName = 'components-resizable-box__corner-handle';
  return (0, _element.createElement)(_reResizable.Resizable, (0, _extends2.default)({
    className: (0, _classnames.default)('components-resizable-box__container', showHandle && 'has-show-handle', className),
    handleClasses: {
      top: (0, _classnames.default)(handleClassName, sideHandleClassName, 'components-resizable-box__handle-top'),
      right: (0, _classnames.default)(handleClassName, sideHandleClassName, 'components-resizable-box__handle-right'),
      bottom: (0, _classnames.default)(handleClassName, sideHandleClassName, 'components-resizable-box__handle-bottom'),
      left: (0, _classnames.default)(handleClassName, sideHandleClassName, 'components-resizable-box__handle-left'),
      topLeft: (0, _classnames.default)(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
      topRight: (0, _classnames.default)(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
      bottomRight: (0, _classnames.default)(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
      bottomLeft: (0, _classnames.default)(handleClassName, cornerHandleClassName, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
    },
    handleStyles: {
      top: handleStylesOverrides,
      right: handleStylesOverrides,
      bottom: handleStylesOverrides,
      left: handleStylesOverrides,
      topLeft: handleStylesOverrides,
      topRight: handleStylesOverrides,
      bottomRight: handleStylesOverrides,
      bottomLeft: handleStylesOverrides
    },
    ref: ref
  }, props), children, showTooltip && (0, _element.createElement)(_resizeTooltip.default, tooltipProps));
}

var _default = (0, _element.forwardRef)(ResizableBox);

exports.default = _default;
//# sourceMappingURL=index.js.map