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

UI components for GeChiUI.

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

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

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

function ResponsiveWrapper(_ref) {
  let {
    naturalWidth,
    naturalHeight,
    children,
    isInline = false
  } = _ref;
  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