@nutui/nutui-react-taro/dist/es/packages/image/image.js

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

import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useCallback, useState } from "react";
import Taro from "@tarojs/taro";
import { Image as TImage, View } from "@tarojs/components";
import { Image as ImageIcon, ImageError } from "@nutui/icons-react-taro";
import classNames from "classnames";
import { pxTransform } from "../../utils/taro/px-transform";
var defaultProps = {
    src: '',
    error: true,
    loading: true
};
export var Image = function(props) {
    var classPrefix = 'nut-image';
    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, src = _ref.src, width = _ref.width, height = _ref.height, radius = _ref.radius, error = _ref.error, loading = _ref.loading, onLoad = _ref.onLoad, onError = _ref.onError, rest = _object_without_properties(_ref, [
        "className",
        "style",
        "src",
        "width",
        "height",
        "radius",
        "error",
        "loading",
        "onLoad",
        "onError"
    ]);
    var _useState = _sliced_to_array(useState(true), 2), innerLoading = _useState[0], setInnerLoading = _useState[1];
    var _useState1 = _sliced_to_array(useState(false), 2), isError = _useState1[0], setIsError = _useState1[1];
    var pxCheck = function(value) {
        return Number.isNaN(Number(value)) ? String(value) : pxTransform(+value);
    };
    // 图片加载
    var handleLoad = function(e) {
        setIsError(false);
        setInnerLoading(false);
        onLoad && onLoad(e);
    };
    var handleError = function(e) {
        if (src) {
            setIsError(true);
            setInnerLoading(false);
            onError && onError(e);
        }
    };
    var containerStyle = _object_spread({}, height ? {
        height: pxCheck(height)
    } : {}, width ? {
        width: pxCheck(width)
    } : {}, radius !== undefined && radius !== null ? {
        overflow: 'hidden',
        borderRadius: pxCheck(radius)
    } : {}, style);
    var imgStyle = _object_spread_props(_object_spread({}, style), {
        width: width,
        height: height
    });
    var renderErrorImg = useCallback(function() {
        if (!isError) return null;
        if (typeof error === 'boolean' && error === true && !innerLoading) {
            return /*#__PURE__*/ React.createElement(View, {
                className: "".concat(classPrefix, "-error")
            }, /*#__PURE__*/ React.createElement(ImageError, null));
        }
        if (/*#__PURE__*/ React.isValidElement(error) && !innerLoading) {
            return /*#__PURE__*/ React.createElement(View, {
                className: "".concat(classPrefix, "-error")
            }, error);
        }
        return null;
    }, [
        error,
        isError,
        innerLoading
    ]);
    var renderLoading = useCallback(function() {
        if (!loading) return null;
        if (typeof loading === 'boolean' && loading === true && innerLoading) {
            return /*#__PURE__*/ React.createElement(View, {
                className: "".concat(classPrefix, "-loading")
            }, /*#__PURE__*/ React.createElement(ImageIcon, null));
        }
        if (/*#__PURE__*/ React.isValidElement(loading) && innerLoading) {
            return /*#__PURE__*/ React.createElement(View, {
                className: "".concat(classPrefix, "-loading")
            }, loading);
        }
        return null;
    }, [
        loading,
        innerLoading
    ]);
    return /*#__PURE__*/ React.createElement(View, {
        className: classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-basic"), Taro.getEnv() !== 'WEB'), className),
        style: containerStyle
    }, /*#__PURE__*/ React.createElement(TImage, _object_spread_props(_object_spread({}, rest), {
        className: classNames("".concat(classPrefix, "-default"), className && "".concat(className, "-image"), _define_property({}, "".concat(classPrefix, "-error"), isError)),
        style: imgStyle,
        src: src,
        onLoad: function(e) {
            return handleLoad(e);
        },
        onError: function(e) {
            return handleError(e);
        }
    })), /*#__PURE__*/ React.createElement(React.Fragment, null, renderLoading(), renderErrorImg()));
};
Image.displayName = 'NutImage';