tdesign-react
Version:
TDesign Component for React
261 lines (257 loc) • 10.5 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import { _ as _objectWithoutProperties } from '../_chunks/dep-6b660ef0.js';
import React, { useRef, useState, useEffect, Fragment } from 'react';
import classNames from 'classnames';
import { isFunction } from 'lodash-es';
import { ImageErrorIcon, ImageIcon } from 'tdesign-icons-react';
import { o as observe } from '../_chunks/dep-4450afc0.js';
import useConfig from '../hooks/useConfig.js';
import { useLocaleReceiver } from '../locale/LocalReceiver.js';
import { imageDefaultProps } from './defaultProps.js';
import { Space } from '../space/index.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import { useImagePreviewUrl } from '../hooks/useImagePreviewUrl.js';
import '../_chunks/dep-eca3a3de.js';
import '../_chunks/dep-026a4c6b.js';
import '../config-provider/ConfigContext.js';
import '../_chunks/dep-f97636ce.js';
import '../_chunks/dep-9dbbf468.js';
import 'dayjs';
import '../config-provider/ConfigProvider.js';
import '../space/Space.js';
import 'react-is';
import '../_chunks/dep-6af6bc60.js';
import '../_chunks/dep-87d110df.js';
import '../space/defaultProps.js';
import '../_chunks/dep-b908e1fe.js';
import '../_chunks/dep-f83e4452.js';
var _excluded = ["className", "src", "style", "fit", "position", "shape", "placeholder", "loading", "error", "overlayTrigger", "lazy", "gallery", "overlayContent", "srcset", "fallback", "onLoad", "onError"],
_excluded2 = ["alt", "referrerpolicy"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function isImageValid(src) {
return new Promise(function (resolve) {
var img = document.createElement("img");
img.onerror = function () {
return resolve(false);
};
img.onload = function () {
return resolve(true);
};
img.src = src;
});
}
var InternalImage = function InternalImage(originalProps, ref) {
var props = useDefaultProps(originalProps, imageDefaultProps);
var className = props.className,
src = props.src,
style = props.style,
fit = props.fit,
position = props.position,
shape = props.shape,
placeholder = props.placeholder,
loading = props.loading,
error = props.error,
overlayTrigger = props.overlayTrigger,
lazy = props.lazy,
gallery = props.gallery,
overlayContent = props.overlayContent,
srcset = props.srcset,
fallback = props.fallback,
onLoad = props.onLoad,
onError = props.onError,
waitPassRest = _objectWithoutProperties(props, _excluded);
var alt = waitPassRest.alt,
referrerpolicy = waitPassRest.referrerpolicy,
rest = _objectWithoutProperties(waitPassRest, _excluded2);
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var imageRef = useRef(null);
var _useLocaleReceiver = useLocaleReceiver("image"),
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
local = _useLocaleReceiver2[0],
t = _useLocaleReceiver2[1];
var _useGlobalIcon = useGlobalIcon({
ImageErrorIcon: ImageErrorIcon,
ImageIcon: ImageIcon
}),
ImageErrorIcon$1 = _useGlobalIcon.ImageErrorIcon,
ImageIcon$1 = _useGlobalIcon.ImageIcon;
React.useImperativeHandle(ref, function () {
return imageRef.current;
});
var _useState = useState(src),
_useState2 = _slicedToArray(_useState, 2),
imageSrc = _useState2[0],
setImageSrc = _useState2[1];
useEffect(function () {
var tmpUrl = isFunction(local.replaceImageSrc) ? local.replaceImageSrc(props) : src;
if (tmpUrl === imageSrc && imageSrc) return;
setImageSrc(tmpUrl);
}, [src, local, props]);
var _useImagePreviewUrl = useImagePreviewUrl(imageSrc),
previewUrl = _useImagePreviewUrl.previewUrl;
var _useState3 = useState(!lazy),
_useState4 = _slicedToArray(_useState3, 2),
shouldLoad = _useState4[0],
setShouldLoad = _useState4[1];
var handleLoadImage = function handleLoadImage() {
setShouldLoad(true);
};
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isLoaded = _useState6[0],
setIsLoaded = _useState6[1];
var handleLoad = function handleLoad(e) {
setIsLoaded(true);
onLoad === null || onLoad === void 0 || onLoad({
e: e
});
};
useEffect(function () {
if (!lazy || !(imageRef !== null && imageRef !== void 0 && imageRef.current)) {
return;
}
var observerRefValue = null;
var io = observe(imageRef.current, null, handleLoadImage, 0);
observerRefValue = imageRef.current;
return function () {
observerRefValue && io && io.unobserve(observerRefValue);
};
}, [lazy, imageRef]);
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
hasError = _useState8[0],
setHasError = _useState8[1];
var isFirstError = useRef(false);
var handleError = function handleError(e) {
isFirstError.current = true;
setHasError(true);
if (fallback) {
setImageSrc(fallback);
setHasError(false);
}
onError === null || onError === void 0 || onError({
e: e
});
};
var imgRef = useRef(null);
useEffect(function () {
if (hasError && previewUrl) {
setHasError(false);
}
previewUrl && isImageValid(previewUrl).then(function (isValid) {
setTimeout(function () {
if (!isValid && !isFirstError.current) {
handleError(imgRef.current);
}
}, 0);
});
}, [previewUrl]);
useEffect(function () {
if (imgRef.current) {
var _imgRef$current = imgRef.current,
complete = _imgRef$current.complete,
naturalWidth = _imgRef$current.naturalWidth,
naturalHeight = _imgRef$current.naturalHeight;
if (complete && naturalWidth !== 0 && naturalHeight !== 0) {
handleLoad(imgRef.current);
}
}
}, []);
var hasMouseEvent = overlayTrigger === "hover";
var _useState9 = useState(!hasMouseEvent),
_useState0 = _slicedToArray(_useState9, 2),
shouldShowOverlay = _useState0[0],
setShouldShowOverlay = _useState0[1];
var handleToggleOverlay = function handleToggleOverlay(overlay) {
setShouldShowOverlay(overlay);
};
var renderOverlay = function renderOverlay() {
if (!overlayContent) {
return null;
}
return /* @__PURE__ */React.createElement("div", {
className: classNames("".concat(classPrefix, "-image__overlay-content"), !shouldShowOverlay && "".concat(classPrefix, "-image__overlay-content--hidden"))
}, overlayContent);
};
var renderPlaceholder = function renderPlaceholder() {
if (!placeholder) {
return null;
}
return /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-image__placeholder")
}, placeholder);
};
var renderGalleryShadow = function renderGalleryShadow() {
if (!gallery) {
return null;
}
return /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-image__gallery-shadow")
});
};
var renderImage = function renderImage() {
var url = typeof imageSrc === "string" ? imageSrc : previewUrl;
return /* @__PURE__ */React.createElement("img", {
ref: imgRef,
src: url,
onError: handleError,
onLoad: handleLoad,
className: classNames("".concat(classPrefix, "-image"), "".concat(classPrefix, "-image--fit-").concat(fit), "".concat(classPrefix, "-image--position-").concat(position)),
alt: alt,
referrerPolicy: referrerpolicy
});
};
var renderImageSrcset = function renderImageSrcset() {
return /* @__PURE__ */React.createElement("picture", null, Object.entries(props.srcset).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
type = _ref2[0],
url = _ref2[1];
return /* @__PURE__ */React.createElement("source", {
key: url,
type: type,
srcSet: url
});
}), props.src && renderImage());
};
return /* @__PURE__ */React.createElement("div", _objectSpread(_objectSpread({
ref: imageRef,
className: classNames("".concat(classPrefix, "-image__wrapper"), "".concat(classPrefix, "-image__wrapper--shape-").concat(shape), gallery && "".concat(classPrefix, "-image__wrapper--gallery"), hasMouseEvent && "".concat(classPrefix, "-image__wrapper--need-hover"), className),
style: style
}, hasMouseEvent ? {
onMouseEnter: function onMouseEnter() {
return handleToggleOverlay(true);
},
onMouseLeave: function onMouseLeave() {
return handleToggleOverlay(false);
}
} : null), rest), renderPlaceholder(), renderGalleryShadow(), !(hasError || !shouldLoad) && /* @__PURE__ */React.createElement(Fragment, null, srcset && Object.keys(srcset).length ? renderImageSrcset() : renderImage(), !(hasError || !shouldLoad) && !isLoaded && /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-image__loading")
}, loading || /* @__PURE__ */React.createElement(Space, {
direction: "vertical",
size: 8,
align: "center"
}, /* @__PURE__ */React.createElement(ImageIcon$1, {
size: 24
}), typeof loading === "string" ? loading : t(local.loadingText)))), hasError && /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-image__error")
}, error || /* @__PURE__ */React.createElement(Space, {
direction: "vertical",
size: 8,
align: "center"
}, /* @__PURE__ */React.createElement(ImageErrorIcon$1, {
size: 24
}), typeof error === "string" ? error : t(local.errorText))), renderOverlay());
};
var Image = /*#__PURE__*/React.forwardRef(InternalImage);
Image.displayName = "Image";
export { Image as default, isImageValid };
//# sourceMappingURL=Image.js.map