mui-image/lib/Image.js

Display images as per the Material guidelines. For React apps using Material-UI.

"use strict";

exports.__esModule = true;
exports["default"] = Image;

var React = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _utils = require("@mui/material/utils");

var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));

var _excluded = ["src", "style", "wrapperStyle", "iconWrapperStyle", "onLoad", "onError", "alt", "height", "width", "position", "fit", "showLoading", "errorIcon", "shift", "distance", "shiftDuration", "bgColor", "duration", "easing", "className", "wrapperClassName", "iconWrapperClassName"];

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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 BrokenImageIcon = (0, _utils.createSvgIcon)( /*#__PURE__*/React.createElement("path", {
  d: "M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z"
}), 'BrokenImageIcon');
var Img = (0, _styles.styled)('img')({
  '@keyframes materialize': {
    '0%': {
      filter: 'saturate(20%) contrast(50%) brightness(120%)'
    },
    '75%': {
      filter: 'saturate(60%) contrast(100%) brightness(100%)'
    },
    '100%': {
      filter: 'saturate(100%) contrast(100%) brightness(100%)'
    }
  }
});

function Image(_ref) {
  var _shiftStyles;

  var src = _ref.src,
      style = _ref.style,
      wrapperStyle = _ref.wrapperStyle,
      iconWrapperStyle = _ref.iconWrapperStyle,
      onLoadProp = _ref.onLoad,
      onErrorProp = _ref.onError,
      _ref$alt = _ref.alt,
      alt = _ref$alt === void 0 ? '' : _ref$alt,
      _ref$height = _ref.height,
      height = _ref$height === void 0 ? '100%' : _ref$height,
      _ref$width = _ref.width,
      width = _ref$width === void 0 ? '100%' : _ref$width,
      _ref$position = _ref.position,
      position = _ref$position === void 0 ? 'relative' : _ref$position,
      _ref$fit = _ref.fit,
      fit = _ref$fit === void 0 ? 'cover' : _ref$fit,
      _ref$showLoading = _ref.showLoading,
      showLoading = _ref$showLoading === void 0 ? false : _ref$showLoading,
      _ref$errorIcon = _ref.errorIcon,
      errorIcon = _ref$errorIcon === void 0 ? true : _ref$errorIcon,
      _ref$shift = _ref.shift,
      shift = _ref$shift === void 0 ? false : _ref$shift,
      _ref$distance = _ref.distance,
      distance = _ref$distance === void 0 ? 100 : _ref$distance,
      _ref$shiftDuration = _ref.shiftDuration,
      shiftDuration = _ref$shiftDuration === void 0 ? null : _ref$shiftDuration,
      _ref$bgColor = _ref.bgColor,
      bgColor = _ref$bgColor === void 0 ? 'inherit' : _ref$bgColor,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 3000 : _ref$duration,
      _ref$easing = _ref.easing,
      easing = _ref$easing === void 0 ? 'cubic-bezier(0.7, 0, 0.6, 1)' : _ref$easing,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      _ref$wrapperClassName = _ref.wrapperClassName,
      wrapperClassName = _ref$wrapperClassName === void 0 ? '' : _ref$wrapperClassName,
      _ref$iconWrapperClass = _ref.iconWrapperClassName,
      iconWrapperClassName = _ref$iconWrapperClass === void 0 ? '' : _ref$iconWrapperClass,
      rest = _objectWithoutPropertiesLoose(_ref, _excluded);

  var _React$useState = React.useState(false),
      loaded = _React$useState[0],
      setLoaded = _React$useState[1];

  var _React$useState2 = React.useState(false),
      error = _React$useState2[0],
      setError = _React$useState2[1];

  function handleLoad() {
    setLoaded(true);
    setError(false);
    if (Boolean(onLoadProp)) onLoadProp();
  }

  function handleError() {
    setError(true);
    setLoaded(false);
    if (Boolean(onErrorProp)) onErrorProp();
  }

  var shiftStyles = (_shiftStyles = {}, _shiftStyles[shift] = loaded ? 0 : distance, _shiftStyles);
  var styles = {
    root: _extends({
      width: width,
      height: height,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: bgColor
    }, wrapperStyle),
    image: _extends({
      position: position,
      width: '100%',
      height: '100%',
      objectFit: fit,
      transitionProperty: (Boolean(shift) ? shift + ", " : '') + "opacity",
      transitionDuration: "" + (Boolean(shift) ? (shiftDuration || duration * 0.3) + "ms, " : '') + duration / 2 + "ms",
      transitionTimingFunction: easing,
      opacity: loaded ? 1 : 0,
      animation: loaded ? "materialize " + duration + "ms 1 " + easing : ''
    }, Boolean(shift) && shiftStyles, style),
    icons: _extends({
      width: '100%',
      marginLeft: '-100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      opacity: loaded ? 0 : 1
    }, iconWrapperStyle)
  };
  var showErrorIcon = typeof errorIcon !== 'boolean' && errorIcon || /*#__PURE__*/React.createElement(BrokenImageIcon, {
    style: {
      fontSize: 56,
      color: '#bdbdbd'
    }
  }) // MUI grey[400]
  ;
  var loadingIndicator = typeof showLoading !== 'boolean' && showLoading || /*#__PURE__*/React.createElement(_CircularProgress["default"], {
    size: 56,
    thickness: 6
  });
  return /*#__PURE__*/React.createElement("div", {
    style: styles.root,
    className: "mui-image-wrapper " + wrapperClassName
  }, /*#__PURE__*/React.createElement(Img, _extends({
    src: src,
    alt: alt,
    style: styles.image,
    className: "mui-image-img " + className,
    onLoad: handleLoad,
    onError: handleError
  }, rest)), (Boolean(showLoading) || Boolean(errorIcon)) && /*#__PURE__*/React.createElement("div", {
    style: styles.icons,
    className: "mui-image-iconWrapper " + iconWrapperClassName
  }, Boolean(errorIcon) && error && showErrorIcon, Boolean(showLoading) && !error && !loaded && loadingIndicator));
}

Image.propTypes = process.env.NODE_ENV !== "production" ? {
  src: _propTypes["default"].string.isRequired,
  alt: _propTypes["default"].string,
  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  style: _propTypes["default"].object,
  className: _propTypes["default"].string,
  showLoading: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].node]),
  errorIcon: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].node]),
  shift: _propTypes["default"].oneOf([false, null, 'top', 'bottom', 'left', 'right']),
  distance: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
  shiftDuration: _propTypes["default"].number,
  bgColor: _propTypes["default"].string,
  wrapperStyle: _propTypes["default"].object,
  iconWrapperStyle: _propTypes["default"].object,
  wrapperClassName: _propTypes["default"].string,
  iconWrapperClassName: _propTypes["default"].string,
  duration: _propTypes["default"].number,
  easing: _propTypes["default"].string,
  onLoad: _propTypes["default"].func,
  onError: _propTypes["default"].func,
  position: _propTypes["default"].oneOf(['static', 'relative', 'absolute', 'fixed', 'sticky', 'inherit', 'initial', 'revert', 'unset']),
  fit: _propTypes["default"].oneOf(['contain', 'cover', 'fill', 'none', 'scale-down', 'inherit', 'initial', 'revert', 'unset'])
} : {};
module.exports = exports.default;