@blend-ui/core/dist/esm/Image.js

Blend core cmponents

import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef } from 'react';
import styled from 'styled-components';
import { width } from 'styled-system';
import PropTypes from 'prop-types';
var _excluded = ["alt", "shape"];

var shape = function shape(props) {
  var shapeCss = null;

  if (props.$shape) {
    if (props.$shape === "circle") shapeCss = {
      "border-radius": "50%"
    };
    if (props.$shape === "rounded") shapeCss = {
      "border-radius": props.theme.radii["avatar"]
    };
    if (props.$shape === "square") shapeCss = {
      height: props.width || "auto"
    };
  }

  return shapeCss;
}; //${props => (props.fontFamily ? props.fontFamily : "body")};


var ImageElement = styled.img.attrs(function (props) {
  return {
    height: props.height || "auto"
  };
}).withConfig({
  displayName: "Image__ImageElement",
  componentId: "sc-llmt0i-0"
})(["display:block;max-width:100%;", " ", ""], width, shape);
var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var alt = _ref.alt,
      shape = _ref.shape,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(ImageElement, _extends({}, props, {
    alt: alt,
    ref: ref,
    $shape: shape
  }));
});
Image.displayName = "Image";
Image.defaultProps = {
  alt: "image"
};
Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired
};
Image.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Image",
  "props": {
    "alt": {
      "defaultValue": {
        "value": "\"image\"",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "src": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    }
  }
};
export { Image as default };