@helpscout/hsds-react/components/Image/Image.utils.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.calculateAspectRatioFit = calculateAspectRatioFit;
exports.getImageSize = getImageSize;

var _lodash = _interopRequireDefault(require("lodash.isnil"));

function calculateAspectRatioFit(props) {
  var width = props.width,
      height = props.height,
      maxWidth = props.maxWidth,
      maxHeight = props.maxHeight;

  if (width < maxWidth && height < maxHeight) {
    return {
      width: width,
      height: height
    };
  }

  var ratioWidth = maxWidth / width;
  var ratioHeight = maxHeight / height;
  var ratio = Math.min(ratioWidth, ratioHeight);
  return {
    width: width * ratio,
    height: height * ratio
  };
}
/**
 * Enhances the inline style of the <img> component with aspect ratio
 * sizing, if applicable.
 *
 * @param   {Object} props The component props.
 * @returns {Object} The updated styles.
 */


function getImageSize(props) {
  var maxWidth = props.maxWidth,
      maxHeight = props.maxHeight,
      width = props.width,
      height = props.height;
  var imageProps = {
    maxWidth: maxWidth,
    maxHeight: maxHeight,
    width: width,
    height: height
  };
  var values = Object.values(imageProps);

  for (var index = 0; index < values.length; index++) {
    if ((0, _lodash.default)(values[index])) return {};
  }

  var aspect = calculateAspectRatioFit(imageProps);
  return {
    height: aspect.height,
    width: aspect.width
  };
}