cloudhubui/dist/Image.js

Various components to use in react projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _styles = require("@material-ui/styles");

var _hexToRgb = _interopRequireDefault(require("./theme/hexToRgb"));

var _Colors = _interopRequireDefault(require("./theme/Colors"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var useStyles = (0, _styles.makeStyles)({
  imgFluid: {
    maxWidth: '100%',
    height: '100%',
    objectFit: 'cover'
  },
  imgRounded: {
    borderRadius: '6px !important'
  },
  imgRoundedCircle: {
    borderRadius: '50% !important'
  },
  imgRaised: {
    boxShadow: "0 5px 15px -8px rgba(".concat((0, _hexToRgb.default)(_Colors.default.blackColor), ", 0.24), 0 8px 10px -5px rgba(").concat((0, _hexToRgb.default)(_Colors.default.blackColor), ", 0.2)")
  },
  imgGallery: {
    width: '100%',
    marginBottom: '2.142rem'
  },
  imgCardTop: {
    width: '100%',
    borderTopLeftRadius: 'calc(.25rem - 1px)',
    borderTopRightRadius: 'calc(.25rem - 1px)'
  },
  imgCardBottom: {
    width: '100%',
    borderBottomLeftRadius: 'calc(.25rem - 1px)',
    borderBottomRightRadius: 'calc(.25rem - 1px)'
  },
  imgCard: {
    width: '100%',
    borderRadius: 'calc(.25rem - 1px)'
  },
  imgCardOverlay: {
    position: 'absolute',
    top: '0',
    right: '0',
    bottom: '0',
    left: '0',
    padding: '1.25rem'
  }
});

var Image = function Image(_ref) {
  var image = _ref.image,
      defaultImage = _ref.defaultImage,
      width = _ref.width,
      square = _ref.square,
      xs = _ref.xs,
      sm = _ref.sm,
      md = _ref.md,
      lg = _ref.lg,
      circle = _ref.circle,
      raised = _ref.raised,
      rounded = _ref.rounded,
      fluid = _ref.fluid,
      props = _objectWithoutProperties(_ref, ["image", "defaultImage", "width", "square", "xs", "sm", "md", "lg", "circle", "raised", "rounded", "fluid"]);

  var classes = useStyles();
  var wdth = width;

  if (xs) {
    wdth = 65;
  }

  if (sm) {
    wdth = 150;
  }

  if (md) {
    wdth = 380;
  }

  if (lg) {
    wdth = 720;
  }

  var height = Math.ceil(wdth * 2 / 3);

  if (square) {
    height = wdth;
  }

  var classname = '';

  if (circle) {
    classname = "".concat(classname, " ").concat(classes.imgRoundedCircle);
  }

  if (rounded) {
    classname = "".concat(classname, " ").concat(classes.imgRounded);
  }

  if (raised) {
    classname = "".concat(classname, " ").concat(classes.imgRaised);
  }

  if (fluid) {
    classname = "".concat(classname, " ").concat(classes.imgFluid);
  }

  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: 'relative',
      width: wdth,
      height: height
    }
  }, /*#__PURE__*/_react.default.createElement("img", _extends({
    src: image || defaultImage,
    alt: "...",
    className: classname
  }, props)));
};

Image.defaultProps = {
  width: 45,
  square: false,
  image: null,
  defaultImage: null,
  fluid: true
};
var _default = Image;
exports.default = _default;