@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
191 lines (190 loc) • 7.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Image", {
enumerable: true,
get: function() {
return Image;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _iconsreact = require("@nutui/icons-react");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _typings = require("../../utils/typings");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
fit: 'fill',
position: 'center',
alt: '',
width: '',
height: '',
error: true,
loading: true,
lazy: false
});
var classPrefix = 'nut-image';
var Image = function Image(props) {
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, src = _$_object_spread.src, fit = _$_object_spread.fit, position = _$_object_spread.position, alt = _$_object_spread.alt, width = _$_object_spread.width, height = _$_object_spread.height, radius = _$_object_spread.radius, error = _$_object_spread.error, loading = _$_object_spread.loading, lazy = _$_object_spread.lazy, draggable = _$_object_spread.draggable, onClick = _$_object_spread.onClick, onLoad = _$_object_spread.onLoad, onError = _$_object_spread.onError;
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), innerLoading = _useState[0], setInnerLoading = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isError = _useState1[0], setIsError = _useState1[1];
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), complete = _useState2[0], setComplete = _useState2[1];
var imgRef = (0, _react.useRef)(null);
var pxCheck = function pxCheck(value) {
return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
};
(0, _react.useEffect)(function() {
if (imgRef.current && imgRef.current.complete && !lazy) {
if (imgRef.current.naturalHeight === 0) {
handleError();
} else {
handleLoad();
}
} else {
// 非 SSR 模式下开启 loading
setInnerLoading(true);
}
}, [
imgRef
]);
(0, _react.useEffect)(function() {
setComplete(false);
}, [
src
]);
var handleLoad = function handleLoad() {
if (!complete) {
setIsError(false);
setInnerLoading(false);
onLoad && onLoad();
setComplete(true);
}
};
var handleError = function handleError() {
if (!complete) {
setIsError(true);
setInnerLoading(false);
onError && onError();
setComplete(true);
}
};
var containerStyle = (0, _object_spread._)({
height: height ? pxCheck(height) : '',
width: width ? pxCheck(width) : '',
overflow: radius !== undefined && radius !== null ? 'hidden' : '',
borderRadius: radius !== undefined && radius !== null ? pxCheck(radius) : ''
}, style);
var imgStyle = (0, _object_spread._)({
objectFit: fit,
objectPosition: position
}, style);
// 图片懒加载
var observer = (0, _react.useRef)(null);
var initObserver = function initObserver() {
var options = {
threshold: [
0
],
rootMargin: '0px'
};
// 监听dom是否在视口内
observer.current = new IntersectionObserver(function(entires, self) {
// entires为监听的节点数组对象
entires.forEach(function(item) {
// isIntersecting是当前监听元素交叉区域是否在可视区域指定的阈值内返回的是一个布尔值
if (item.isIntersecting) {
setTimeout(function() {
var img = item.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
// 资源加载后停止监听
resetObserver();
}, 300);
}
});
}, options);
observer.current.observe(imgRef.current);
};
// 使用disconnect将取消的Observer实例中的所有监听
var resetObserver = function resetObserver() {
observer.current.disconnect && observer.current.disconnect();
};
(0, _react.useEffect)(function() {
lazy && initObserver();
return function() {
lazy && resetObserver();
};
}, [
lazy
]);
var imageClick = function imageClick(event) {
onClick && onClick(event);
};
var renderErrorImg = (0, _react.useCallback)(function() {
if (!isError) return null;
if (typeof error === 'boolean' && error === true && !innerLoading) {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-error")
}, /*#__PURE__*/ _react.default.createElement(_iconsreact.ImageError, null));
}
if (/*#__PURE__*/ _react.default.isValidElement(error) && !innerLoading) {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-error")
}, error);
}
return null;
}, [
error,
isError
]);
var renderLoading = (0, _react.useCallback)(function() {
if (!loading) return null;
if (typeof loading === 'boolean' && loading === true && innerLoading) {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-loading")
}, /*#__PURE__*/ _react.default.createElement(_iconsreact.Image, null));
}
if (/*#__PURE__*/ _react.default.isValidElement(loading) && innerLoading) {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-loading")
}, loading);
}
return null;
}, [
loading,
innerLoading
]);
return /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)(classPrefix, className),
style: containerStyle,
onClick: function onClick(e) {
imageClick(e);
}
}, lazy ? /*#__PURE__*/ _react.default.createElement("img", {
ref: imgRef,
className: "".concat(classPrefix, "-default lazyload"),
style: imgStyle,
"data-src": src,
alt: alt,
loading: "lazy",
onLoad: handleLoad,
onError: handleError,
draggable: draggable
}) : /*#__PURE__*/ _react.default.createElement("img", {
ref: imgRef,
className: "".concat(classPrefix, "-default"),
style: imgStyle,
src: src,
alt: alt,
onLoad: handleLoad,
onError: handleError,
draggable: draggable
}), renderLoading(), renderErrorImg());
};
Image.displayName = 'NutImage';