tdesign-react
Version:
TDesign Component for React
301 lines (293 loc) • 12.9 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0006fcfa.js');
var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var objectWithoutProperties = require('../_chunks/dep-8fa3a4c2.js');
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var observe = require('../_chunks/dep-adacb8cb.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var locale_LocalReceiver = require('../locale/LocalReceiver.js');
var image_defaultProps = require('./defaultProps.js');
var space_index = require('../space/index.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useImagePreviewUrl = require('../hooks/useImagePreviewUrl.js');
var isFunction = require('../_chunks/dep-ec8d2dca.js');
require('../_chunks/dep-667ac7af.js');
require('../_chunks/dep-00b49251.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-1df1dad8.js');
require('../_chunks/dep-5b5ab11b.js');
require('dayjs');
require('../_chunks/dep-f32c03f1.js');
require('../_chunks/dep-31c4bc3d.js');
require('../_chunks/dep-eea2872a.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-62e73936.js');
require('../_chunks/dep-64577888.js');
require('../_chunks/dep-71455db7.js');
require('../_chunks/dep-9e5a468d.js');
require('../_chunks/dep-f26edb7b.js');
require('../_chunks/dep-f33c1939.js');
require('../_chunks/dep-21ece627.js');
require('../_chunks/dep-25e4aa84.js');
require('../_chunks/dep-fc596d16.js');
require('../_chunks/dep-e1fbe1c3.js');
require('../_chunks/dep-df2b541f.js');
require('../_chunks/dep-edd366db.js');
require('../_chunks/dep-a56c4939.js');
require('../_chunks/dep-6c297e20.js');
require('../_chunks/dep-b7ad4d54.js');
require('../_chunks/dep-a2cb9299.js');
require('../_chunks/dep-f981815b.js');
require('../_chunks/dep-4ed9eda4.js');
require('../config-provider/ConfigProvider.js');
require('../_chunks/dep-ab2f63ec.js');
require('../_chunks/dep-a48c7e8b.js');
require('../_chunks/dep-3d4656ee.js');
require('../_chunks/dep-0ffc9d96.js');
require('../_chunks/dep-efe6d243.js');
require('../_chunks/dep-4b18243f.js');
require('../_chunks/dep-bff2c990.js');
require('../space/Space.js');
require('react-is');
require('../_chunks/dep-002fcc1e.js');
require('../_chunks/dep-e4e1901e.js');
require('../_chunks/dep-2ffa3ff1.js');
require('../space/defaultProps.js');
require('../_chunks/dep-59671c87.js');
require('../_chunks/dep-f4d844cc.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
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._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 = hooks_useDefaultProps["default"](originalProps, image_defaultProps.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._objectWithoutProperties(props, _excluded);
var alt = waitPassRest.alt,
referrerpolicy = waitPassRest.referrerpolicy,
rest = objectWithoutProperties._objectWithoutProperties(waitPassRest, _excluded2);
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var imageRef = React.useRef(null);
var _useLocaleReceiver = locale_LocalReceiver.useLocaleReceiver("image"),
_useLocaleReceiver2 = slicedToArray._slicedToArray(_useLocaleReceiver, 2),
local = _useLocaleReceiver2[0],
t = _useLocaleReceiver2[1];
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
ImageErrorIcon: tdesignIconsReact.ImageErrorIcon,
ImageIcon: tdesignIconsReact.ImageIcon
}),
ImageErrorIcon = _useGlobalIcon.ImageErrorIcon,
ImageIcon = _useGlobalIcon.ImageIcon;
React__default["default"].useImperativeHandle(ref, function () {
return imageRef.current;
});
var _useState = React.useState(src),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
imageSrc = _useState2[0],
setImageSrc = _useState2[1];
React.useEffect(function () {
var tmpUrl = isFunction.isFunction(local.replaceImageSrc) ? local.replaceImageSrc(props) : src;
if (tmpUrl === imageSrc && imageSrc) return;
setImageSrc(tmpUrl);
}, [src, local, props]);
var _useImagePreviewUrl = hooks_useImagePreviewUrl.useImagePreviewUrl(imageSrc),
previewUrl = _useImagePreviewUrl.previewUrl;
var _useState3 = React.useState(!lazy),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
shouldLoad = _useState4[0],
setShouldLoad = _useState4[1];
var handleLoadImage = function handleLoadImage() {
setShouldLoad(true);
};
var _useState5 = React.useState(false),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
isLoaded = _useState6[0],
setIsLoaded = _useState6[1];
var handleLoad = function handleLoad(e) {
setIsLoaded(true);
onLoad === null || onLoad === void 0 || onLoad({
e: e
});
};
React.useEffect(function () {
if (!lazy || !(imageRef !== null && imageRef !== void 0 && imageRef.current)) {
return;
}
var observerRefValue = null;
var io = observe.observe(imageRef.current, null, handleLoadImage, 0);
observerRefValue = imageRef.current;
return function () {
observerRefValue && io && io.unobserve(observerRefValue);
};
}, [lazy, imageRef]);
var _useState7 = React.useState(false),
_useState8 = slicedToArray._slicedToArray(_useState7, 2),
hasError = _useState8[0],
setHasError = _useState8[1];
var isFirstError = React.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 = React.useRef(null);
React.useEffect(function () {
if (hasError && previewUrl) {
setHasError(false);
}
previewUrl && isImageValid(previewUrl).then(function (isValid) {
setTimeout(function () {
if (!isValid && !isFirstError.current) {
handleError(imgRef.current);
}
}, 0);
});
}, [previewUrl]);
React.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 = React.useState(!hasMouseEvent),
_useState0 = slicedToArray._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__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-image__overlay-content"), !shouldShowOverlay && "".concat(classPrefix, "-image__overlay-content--hidden"))
}, overlayContent);
};
var renderPlaceholder = function renderPlaceholder() {
if (!placeholder) {
return null;
}
return /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-image__placeholder")
}, placeholder);
};
var renderGalleryShadow = function renderGalleryShadow() {
if (!gallery) {
return null;
}
return /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-image__gallery-shadow")
});
};
var renderImage = function renderImage() {
var url = typeof imageSrc === "string" ? imageSrc : previewUrl;
return /* @__PURE__ */React__default["default"].createElement("img", {
ref: imgRef,
src: url,
onError: handleError,
onLoad: handleLoad,
className: classNames__default["default"]("".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__default["default"].createElement("picture", null, Object.entries(props.srcset).map(function (_ref) {
var _ref2 = slicedToArray._slicedToArray(_ref, 2),
type = _ref2[0],
url = _ref2[1];
return /* @__PURE__ */React__default["default"].createElement("source", {
key: url,
type: type,
srcSet: url
});
}), props.src && renderImage());
};
return /* @__PURE__ */React__default["default"].createElement("div", _objectSpread(_objectSpread({
ref: imageRef,
className: classNames__default["default"]("".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__default["default"].createElement(React.Fragment, null, srcset && Object.keys(srcset).length ? renderImageSrcset() : renderImage(), !(hasError || !shouldLoad) && !isLoaded && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-image__loading")
}, loading || /* @__PURE__ */React__default["default"].createElement(space_index.Space, {
direction: "vertical",
size: 8,
align: "center"
}, /* @__PURE__ */React__default["default"].createElement(ImageIcon, {
size: 24
}), typeof loading === "string" ? loading : t(local.loadingText)))), hasError && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-image__error")
}, error || /* @__PURE__ */React__default["default"].createElement(space_index.Space, {
direction: "vertical",
size: 8,
align: "center"
}, /* @__PURE__ */React__default["default"].createElement(ImageErrorIcon, {
size: 24
}), typeof error === "string" ? error : t(local.errorText))), renderOverlay());
};
var Image = /*#__PURE__*/React__default["default"].forwardRef(InternalImage);
Image.displayName = "Image";
exports["default"] = Image;
exports.isImageValid = isImageValid;
//# sourceMappingURL=Image.js.map