react-mapfilter/commonjs/internal/Image.js

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

"use strict";

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

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

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

var _reactImage = _interopRequireDefault(require("react-image"));

var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));

var _BrokenImage = _interopRequireDefault(require("@material-ui/icons/BrokenImage"));

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

// @flow
// import * as CSS from 'csstype'
var useStyles = (0, _styles.makeStyles)({
  wrapper: {
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    top: 0,
    position: 'relative',
    backgroundSize: 'contain',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat'
  }
});

var ImageLoader = function ImageLoader(_ref) {
  var classes = _ref.classes,
      style = _ref.style;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.wrapper,
    style: (0, _assign.default)({}, style, {
      color: 'white'
    })
  }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
    color: "inherit"
  }));
};

var BrokenImage = function BrokenImage(_ref2) {
  var classes = _ref2.classes,
      style = _ref2.style;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.wrapper,
    style: (0, _assign.default)({}, style, {
      color: 'white'
    })
  }, /*#__PURE__*/_react.default.createElement(_BrokenImage.default, {
    color: "inherit"
  }));
};
/*:: type Props = {
  style?: { [prop: string]: string | number },
  src: string,
  className?: string
}*/


var Image = function Image(_ref3) {
  var style = _ref3.style,
      src = _ref3.src,
      className = _ref3.className;
  var classes = useStyles();
  return /*#__PURE__*/_react.default.createElement(_reactImage.default, {
    src: src,
    style: (0, _assign.default)({
      objectFit: 'contain',
      display: 'block'
    }, style),
    className: className,
    loader: /*#__PURE__*/_react.default.createElement(ImageLoader, {
      style: style,
      classes: classes
    }),
    unloader: /*#__PURE__*/_react.default.createElement(BrokenImage, {
      style: style,
      classes: classes
    })
  });
};

var _default = Image;
exports.default = _default;
//# sourceMappingURL=Image.js.map