@wordpress/components/build-module/responsive-wrapper/index.js

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { cloneElement, Children } from '@wordpress/element';
import { useResizeObserver } from '@wordpress/compose';

function ResponsiveWrapper({
  naturalWidth,
  naturalHeight,
  children,
  isInline = false
}) {
  const [containerResizeListener, {
    width: containerWidth
  }] = useResizeObserver();

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

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

export default ResponsiveWrapper;
//# sourceMappingURL=index.js.map