@vnmfify/core/image/image.js

```shell npm i @vnmfify/core -S ```

import _isBoolean from "lodash/isBoolean";
var _excluded = ["className", "src", "alt", "mode", "round", "shape", "lazyLoad", "placeholder", "fallback", "onLoad", "onError"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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; }

import { Image as VnmfImage, View } from "@vnxjs/components";
import classNames from "classnames";
import * as React from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { prefixClassname } from "../styles";
import { getLogger } from "../utils/logger";
import ImagePlaceholder from "./image-placeholder";
var {
  warn
} = getLogger("Image");

function useImageMode(mode) {
  return useMemo(() => {
    if (mode === "topLeft") {
      return "top left";
    }

    if (mode === "topRight") {
      return "top right";
    }

    if (mode === "bottomLeft") {
      return "bottom left";
    }

    if (mode === "bottomRight") {
      return "bottom right";
    }

    return mode;
  }, [mode]);
}

function useImageShape(shape, round) {
  if (_isBoolean(round) && round) {
    shape = "circle";
    warn("Use the shape=\"".concat(shape, "\" prop instead of the round prop"));

    if (round) {
      return shape;
    }
  }

  return shape;
}

export default function Image(props) {
  var {
    className,
    src,
    alt,
    mode = "scaleToFill",
    round,
    shape: shapeProp,
    lazyLoad = false,
    placeholder = true,
    fallback = true,
    onLoad,
    onError
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  var vnmfMode = useImageMode(mode);
  var shape = useImageShape(shapeProp, round);
  var [loading, setLoading] = useState(false);
  var [failed, setFailed] = useState(false);
  useEffect(() => setLoading(true), [src]);
  var handleLoad = useCallback(() => {
    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
    setLoading(false);
  }, [onLoad]);
  var handleError = useCallback(() => {
    onError === null || onError === void 0 ? void 0 : onError();
    setLoading(false);
    setFailed(true);
  }, [onError]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, !failed && src && /*#__PURE__*/React.createElement(VnmfImage, _objectSpread({
    src: src,
    mode: vnmfMode,
    lazyLoad: lazyLoad,
    className: classNames(prefixClassname("image"), {
      [prefixClassname("image--square")]: shape === "square",
      [prefixClassname("image--rounded")]: shape === "rounded",
      [prefixClassname("image--circle")]: shape === "circle",
      [prefixClassname("image--loading")]: loading
    }, className),
    imgProps: {
      alt
    },
    onLoad: handleLoad,
    onError: handleError
  }, restProps)), loading && placeholder && /*#__PURE__*/React.createElement(View, _objectSpread({
    className: classNames(prefixClassname("image"), {
      [prefixClassname("image--square")]: shape === "square",
      [prefixClassname("image--rounded")]: shape === "rounded",
      [prefixClassname("image--circle")]: shape === "circle"
    }, className)
  }, restProps), /*#__PURE__*/React.createElement(ImagePlaceholder, {
    prefix: "placeholder",
    children: placeholder
  })), failed && fallback && /*#__PURE__*/React.createElement(View, _objectSpread({
    className: classNames(prefixClassname("image"), {
      [prefixClassname("image--square")]: shape === "square",
      [prefixClassname("image--rounded")]: shape === "rounded",
      [prefixClassname("image--circle")]: shape === "circle"
    }, className)
  }, restProps), /*#__PURE__*/React.createElement(ImagePlaceholder, {
    prefix: "fallback",
    children: fallback
  })));
}
//# sourceMappingURL=image.js.map