@dnb/eufemia/cjs/elements/img/Img.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Element = _interopRequireDefault(require("../Element.js"));
var _SpacingUtils = require("../../components/space/SpacingUtils.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Img = ({
  caption,
  alt,
  element = 'figure',
  skeleton,
  imgClass,
  className,
  loading = 'eager',
  ...p
}) => {
  const [hasError, setError] = _react.default.useState(false);
  return (0, _jsxRuntime.jsxs)(_Element.default, {
    as: element,
    internalClass: "dnb-img",
    ...(0, _SpacingUtils.applySpacing)(p, {
      className
    }, p.is),
    skeleton: skeleton,
    skeletonMethod: "shape",
    children: [(0, _jsxRuntime.jsx)(_Element.default, {
      as: "img",
      loading: loading,
      alt: alt,
      internalClass: 'dnb-img' + (hasError ? " dnb-img--error" : ""),
      className: imgClass,
      skeleton: skeleton,
      onError: () => setError(true),
      ...(0, _SpacingUtils.removeSpaceProps)(p)
    }), caption && (0, _jsxRuntime.jsx)("figcaption", {
      children: caption
    })]
  });
};
(0, _withComponentMarkers.default)(Img, {
  _supportsSpacingProps: true
});
var _default = exports.default = Img;
//# sourceMappingURL=Img.js.map