@nutui/nutui-react-taro/dist/esm/image.taro-CyF6ujA7.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React__default, { useState, useCallback } from "react";
import Taro from "@tarojs/taro";
import { Image as Image$2 } from "@tarojs/components";
import { ImageError, Image as Image$1 } from "@nutui/icons-react-taro";
import classNames from "classnames";
import { p as pxCheck } from "./px-check-D1Xbd9pj.js";
const defaultProps = {
  src: "",
  error: true,
  loading: true
};
const Image = (props) => {
  const classPrefix = "nut-image";
  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, style, src, width, height, radius, error, loading, onLoad, onError } = _a, rest = __rest(_a, ["className", "style", "src", "width", "height", "radius", "error", "loading", "onLoad", "onError"]);
  const [innerLoading, setInnerLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const handleLoad = (e) => {
    setIsError(false);
    setInnerLoading(false);
    onLoad && onLoad(e);
  };
  const handleError = (e) => {
    if (src) {
      setIsError(true);
      setInnerLoading(false);
      onError && onError(e);
    }
  };
  const containerStyle = {
    // eslint-disable-next-line no-nested-ternary
    height: height ? pxCheck(height) : Taro.getEnv() === "WEB" ? "" : "100%",
    // eslint-disable-next-line no-nested-ternary
    width: width ? pxCheck(width) : Taro.getEnv() === "WEB" ? "" : "100%",
    overflow: radius !== void 0 && radius !== null ? "hidden" : "",
    borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : ""
  };
  const imgStyle = Object.assign({}, style);
  const renderErrorImg = useCallback(() => {
    if (!isError)
      return null;
    if (typeof error === "boolean" && error === true && !innerLoading) {
      return React__default.createElement(
        "div",
        { className: "nut-img-error" },
        React__default.createElement(ImageError, null)
      );
    }
    if (React__default.isValidElement(error) && !innerLoading) {
      return React__default.createElement("div", { className: "nut-img-error" }, error);
    }
    return null;
  }, [error, isError, innerLoading]);
  const renderLoading = useCallback(() => {
    if (!loading)
      return null;
    if (typeof loading === "boolean" && loading === true && innerLoading) {
      return React__default.createElement(
        "div",
        { className: "nut-img-loading" },
        React__default.createElement(Image$1, null)
      );
    }
    if (React__default.isValidElement(loading) && innerLoading) {
      return React__default.createElement("div", { className: "nut-img-loading" }, loading);
    }
    return null;
  }, [loading, innerLoading]);
  return React__default.createElement(
    "div",
    { className: classNames(classPrefix, className), style: containerStyle },
    React__default.createElement(Image$2, Object.assign({}, rest, { className: "nut-img", style: imgStyle, src, onLoad: (e) => handleLoad(e), onError: (e) => handleError(e) })),
    renderLoading(),
    renderErrorImg()
  );
};
Image.displayName = "NutImage";
export {
  Image as I
};