@wordpress/components/build/responsive-wrapper/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 _classnames = _interopRequireDefault(require("classnames"));

var _compose = require("@wordpress/compose");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
function ResponsiveWrapper({
  naturalWidth,
  naturalHeight,
  children,
  isInline = false
}) {
  const [containerResizeListener, {
    width: containerWidth
  }] = (0, _compose.useResizeObserver)();

  if (_element.Children.count(children) !== 1) {
    return null;
  }

  const imageStyle = {
    paddingBottom: naturalWidth < containerWidth ? naturalHeight : naturalHeight / naturalWidth * 100 + '%'
  };
  const TagName = isInline ? 'span' : 'div';
  return (0, _element.createElement)(TagName, {
    className: "components-responsive-wrapper"
  }, containerResizeListener, (0, _element.createElement)(TagName, {
    style: imageStyle
  }), (0, _element.cloneElement)(children, {
    className: (0, _classnames.default)('components-responsive-wrapper__content', children.props.className)
  }));
}

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