@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 = exports.ResizableBox = 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
 */
const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
const HANDLE_CLASSES = {
  top: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),
  right: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),
  bottom: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),
  left: (0, _classnames.default)(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),
  topLeft: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),
  topRight: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),
  bottomRight: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),
  bottomLeft: (0, _classnames.default)(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')
}; // Removes the inline styles in the drag handles.

const HANDLE_STYLES_OVERRIDES = {
  width: undefined,
  height: undefined,
  top: undefined,
  right: undefined,
  bottom: undefined,
  left: undefined
};
const HANDLE_STYLES = {
  top: HANDLE_STYLES_OVERRIDES,
  right: HANDLE_STYLES_OVERRIDES,
  bottom: HANDLE_STYLES_OVERRIDES,
  left: HANDLE_STYLES_OVERRIDES,
  topLeft: HANDLE_STYLES_OVERRIDES,
  topRight: HANDLE_STYLES_OVERRIDES,
  bottomRight: HANDLE_STYLES_OVERRIDES,
  bottomLeft: HANDLE_STYLES_OVERRIDES
};

function UnforwardedResizableBox(_ref, ref) {
  let {
    className,
    children,
    showHandle = true,
    __experimentalShowTooltip: showTooltip = false,
    __experimentalTooltipProps: tooltipProps = {},
    ...props
  } = _ref;
  return (0, _element.createElement)(_reResizable.Resizable, (0, _extends2.default)({
    className: (0, _classnames.default)('components-resizable-box__container', showHandle && 'has-show-handle', className),
    handleClasses: HANDLE_CLASSES,
    handleStyles: HANDLE_STYLES,
    ref: ref
  }, props), children, showTooltip && (0, _element.createElement)(_resizeTooltip.default, tooltipProps));
}

const ResizableBox = (0, _element.forwardRef)(UnforwardedResizableBox);
exports.ResizableBox = ResizableBox;
var _default = ResizableBox;
exports.default = _default;
//# sourceMappingURL=index.js.map