react-mapfilter/esm/internal/Image.js

These components are designed for viewing data in Mapeo. They share a common interface:

import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
// @flow
import React from 'react';
import Img from 'react-image';
import CircularProgress from '@material-ui/core/CircularProgress';
import BrokenImageIcon from '@material-ui/icons/BrokenImage';
import { makeStyles } from '@material-ui/core/styles'; // import * as CSS from 'csstype'

const useStyles = makeStyles({
  wrapper: {
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    top: 0,
    position: 'relative',
    backgroundSize: 'contain',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat'
  }
});

const ImageLoader = ({
  classes,
  style
}) => /*#__PURE__*/React.createElement("div", {
  className: classes.wrapper,
  style: _Object$assign({}, style, {
    color: 'white'
  })
}, /*#__PURE__*/React.createElement(CircularProgress, {
  color: "inherit"
}));

const BrokenImage = ({
  classes,
  style
}) => /*#__PURE__*/React.createElement("div", {
  className: classes.wrapper,
  style: _Object$assign({}, style, {
    color: 'white'
  })
}, /*#__PURE__*/React.createElement(BrokenImageIcon, {
  color: "inherit"
}));
/*:: type Props = {
  style?: { [prop: string]: string | number },
  src: string,
  className?: string
}*/


const Image = ({
  style,
  src,
  className
}
/*: Props*/
) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(Img, {
    src: src,
    style: _Object$assign({
      objectFit: 'contain',
      display: 'block'
    }, style),
    className: className,
    loader: /*#__PURE__*/React.createElement(ImageLoader, {
      style: style,
      classes: classes
    }),
    unloader: /*#__PURE__*/React.createElement(BrokenImage, {
      style: style,
      classes: classes
    })
  });
};

export default Image;
//# sourceMappingURL=Image.js.map