rc-image - npm Package Compare versions

Comparing version 7.0.0-0 to 7.0.0-2

es/Image.js

@@ -13,9 +13,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { COMMON_PROPS } from "./common";
 import { PreviewGroupContext } from "./context";
 import useRegisterImage from "./hooks/useRegisterImage";
+import useStatus from "./hooks/useStatus";
 import Preview from "./Preview";
 import PreviewGroup from "./PreviewGroup";
-import { isImageValid } from "./util";
 var ImageInternal = function ImageInternal(props) {
@@ -69,17 +69,17 @@ var imgSrc = props.src,
     setShowPreview = _useMergedState2[1];
-  var _useState = useState(isCustomPlaceholder ? 'loading' : 'normal'),
+  var _useStatus = useStatus({
+      src: imgSrc,
+      isCustomPlaceholder: isCustomPlaceholder,
+      fallback: fallback
+    }),
+    _useStatus2 = _slicedToArray(_useStatus, 3),
+    getImgRef = _useStatus2[0],
+    srcAndOnload = _useStatus2[1],
+    status = _useStatus2[2];
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    status = _useState2[0],
-    setStatus = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    mousePosition = _useState4[0],
-    setMousePosition = _useState4[1];
-  var isError = status === 'error';
+    mousePosition = _useState2[0],
+    setMousePosition = _useState2[1];
   var groupContext = useContext(PreviewGroupContext);
   var canPreview = !!preview;
-  var isLoaded = useRef(false);
-  var onLoad = function onLoad() {
-    setStatus('normal');
-  };
   var onPreviewClose = function onPreviewClose() {
@@ -89,30 +89,4 @@ setShowPreview(false);
   };
-  var getImgRef = function getImgRef(img) {
-    isLoaded.current = false;
-    if (status !== 'loading') return;
-    if (img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
-      isLoaded.current = true;
-      onLoad();
-    }
-  };
+  var wrapperClass = cn(prefixCls, wrapperClassName, rootClassName, _defineProperty({}, "".concat(prefixCls, "-error"), status === 'error'));
 
-  // https://github.com/react-component/image/pull/187
-  useEffect(function () {
-    isImageValid(imgSrc).then(function (isValid) {
-      if (!isValid) {
-        setStatus('error');
-      }
-    });
-  }, [imgSrc]);
-  useEffect(function () {
-    if (isError) {
-      setStatus('normal');
-    }
-    if (isCustomPlaceholder && !isLoaded.current) {
-      setStatus('loading');
-    }
-  }, [imgSrc]);
-  var wrapperClass = cn(prefixCls, wrapperClassName, rootClassName, _defineProperty({}, "".concat(prefixCls, "-error"), isError));
-  var mergedSrc = isError && fallback ? fallback : src;
-
   // ========================= ImageProps =========================
@@ -170,8 +144,3 @@ var imgCommonProps = useMemo(function () {
     ref: getImgRef
-  }, isError && fallback ? {
-    src: fallback
-  } : {
-    onLoad: onLoad,
-    src: imgSrc
-  }, {
+  }, srcAndOnload, {
     width: width,
@@ -194,4 +163,5 @@ height: height,
     mousePosition: mousePosition,
-    src: mergedSrc,
+    src: src,
     alt: alt,
+    fallback: fallback,
     getContainer: getPreviewContainer,
@@ -198,0 +168,0 @@ icons: icons,

es/Preview.d.ts

@@ -29,2 +29,3 @@ import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
     alt?: string;
+    fallback?: string;
     rootClassName?: string;
@@ -31,0 +32,0 @@ icons?: {

es/Preview.js

@@ -1,7 +0,8 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
+var _excluded = ["fallback", "src", "imgRef"],
+  _excluded2 = ["prefixCls", "src", "alt", "fallback", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
 import classnames from 'classnames';
@@ -16,4 +17,24 @@ import Dialog from 'rc-dialog';
 import useImageTransform from "./hooks/useImageTransform";
+import useStatus from "./hooks/useStatus";
 import Operations from "./Operations";
 import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "./previewConfig";
+var PreviewImage = function PreviewImage(_ref) {
+  var fallback = _ref.fallback,
+    src = _ref.src,
+    imgRef = _ref.imgRef,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStatus = useStatus({
+      src: src,
+      fallback: fallback
+    }),
+    _useStatus2 = _slicedToArray(_useStatus, 2),
+    getImgRef = _useStatus2[0],
+    srcAndOnload = _useStatus2[1];
+  return /*#__PURE__*/React.createElement("img", _extends({
+    ref: function ref(_ref2) {
+      imgRef.current = _ref2;
+      getImgRef(_ref2);
+    }
+  }, props, srcAndOnload));
+};
 var Preview = function Preview(props) {
@@ -23,2 +44,3 @@ var prefixCls = props.prefixCls,
     alt = props.alt,
+    fallback = props.fallback,
     onClose = props.onClose,
@@ -51,3 +73,3 @@ visible = props.visible,
     onChange = props.onChange,
-    restProps = _objectWithoutProperties(props, _excluded);
+    restProps = _objectWithoutProperties(props, _excluded2);
   var imgRef = useRef();
@@ -244,11 +266,7 @@ var downPositionRef = useRef({
   }, [visible, showLeftOrRightSwitches, current]);
-  var imgNode = /*#__PURE__*/React.createElement("img", _extends({}, imgCommonProps, {
+  var imgNode = /*#__PURE__*/React.createElement(PreviewImage, _extends({}, imgCommonProps, {
     width: props.width,
     height: props.height,
-    onWheel: onWheel,
-    onMouseDown: onMouseDown,
-    onDoubleClick: onDoubleClick,
-    ref: imgRef,
+    imgRef: imgRef,
     className: "".concat(prefixCls, "-img"),
-    src: src,
     alt: alt,
@@ -258,3 +276,8 @@ style: {
       transitionDuration: !enableTransition && '0s'
-    }
+    },
+    fallback: fallback,
+    src: src,
+    onWheel: onWheel,
+    onMouseDown: onMouseDown,
+    onDoubleClick: onDoubleClick
   }));
@@ -261,0 +284,0 @@ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, _extends({

es/PreviewGroup.d.ts

@@ -25,2 +25,3 @@ import * as React from 'react';
     items?: (string | ImageElementProps)[];
+    fallback?: string;
     preview?: boolean | PreviewGroupPreview;
@@ -27,0 +28,0 @@ children?: React.ReactNode;

es/PreviewGroup.js

@@ -21,3 +21,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     items = _ref.items,
-    preview = _ref.preview;
+    preview = _ref.preview,
+    fallback = _ref.fallback;
   var _ref2 = _typeof(preview) === 'object' ? preview : {},
@@ -131,2 +132,3 @@ previewVisible = _ref2.visible,
     src: src,
+    fallback: fallback,
     icons: icons,
@@ -133,0 +135,0 @@ minScale: minScale,

lib/Image.js

@@ -22,5 +22,5 @@ "use strict";
 var _useRegisterImage = _interopRequireDefault(require("./hooks/useRegisterImage"));
+var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
 var _Preview = _interopRequireDefault(require("./Preview"));
 var _PreviewGroup = _interopRequireDefault(require("./PreviewGroup"));
-var _util = require("./util");
 var _excluded = ["src", "alt", "onPreviewClose", "prefixCls", "previewPrefixCls", "placeholder", "fallback", "width", "height", "style", "preview", "className", "onClick", "onError", "wrapperClassName", "wrapperStyle", "rootClassName"],
@@ -78,17 +78,17 @@ _excluded2 = ["src", "visible", "onVisibleChange", "getContainer", "mask", "maskClassName", "icons", "scaleStep", "minScale", "maxScale", "imageRender", "toolbarRender"];
     setShowPreview = _useMergedState2[1];
-  var _useState = (0, React.useState)(isCustomPlaceholder ? 'loading' : 'normal'),
+  var _useStatus = (0, _useStatus3.default)({
+      src: imgSrc,
+      isCustomPlaceholder: isCustomPlaceholder,
+      fallback: fallback
+    }),
+    _useStatus2 = (0, _slicedToArray2.default)(_useStatus, 3),
+    getImgRef = _useStatus2[0],
+    srcAndOnload = _useStatus2[1],
+    status = _useStatus2[2];
+  var _useState = (0, React.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    status = _useState2[0],
-    setStatus = _useState2[1];
-  var _useState3 = (0, React.useState)(null),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    mousePosition = _useState4[0],
-    setMousePosition = _useState4[1];
-  var isError = status === 'error';
+    mousePosition = _useState2[0],
+    setMousePosition = _useState2[1];
   var groupContext = (0, React.useContext)(_context.PreviewGroupContext);
   var canPreview = !!preview;
-  var isLoaded = (0, React.useRef)(false);
-  var onLoad = function onLoad() {
-    setStatus('normal');
-  };
   var onPreviewClose = function onPreviewClose() {
@@ -98,30 +98,4 @@ setShowPreview(false);
   };
-  var getImgRef = function getImgRef(img) {
-    isLoaded.current = false;
-    if (status !== 'loading') return;
-    if (img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
-      isLoaded.current = true;
-      onLoad();
-    }
-  };
+  var wrapperClass = (0, _classnames.default)(prefixCls, wrapperClassName, rootClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-error"), status === 'error'));
 
-  // https://github.com/react-component/image/pull/187
-  (0, React.useEffect)(function () {
-    (0, _util.isImageValid)(imgSrc).then(function (isValid) {
-      if (!isValid) {
-        setStatus('error');
-      }
-    });
-  }, [imgSrc]);
-  (0, React.useEffect)(function () {
-    if (isError) {
-      setStatus('normal');
-    }
-    if (isCustomPlaceholder && !isLoaded.current) {
-      setStatus('loading');
-    }
-  }, [imgSrc]);
-  var wrapperClass = (0, _classnames.default)(prefixCls, wrapperClassName, rootClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-error"), isError));
-  var mergedSrc = isError && fallback ? fallback : src;
-
   // ========================= ImageProps =========================
@@ -179,8 +153,3 @@ var imgCommonProps = (0, React.useMemo)(function () {
     ref: getImgRef
-  }, isError && fallback ? {
-    src: fallback
-  } : {
-    onLoad: onLoad,
-    src: imgSrc
-  }, {
+  }, srcAndOnload, {
     width: width,
@@ -203,4 +172,5 @@ height: height,
     mousePosition: mousePosition,
-    src: mergedSrc,
+    src: src,
     alt: alt,
+    fallback: fallback,
     getContainer: getPreviewContainer,
@@ -207,0 +177,0 @@ icons: icons,

lib/Preview.d.ts

@@ -29,2 +29,3 @@ import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
     alt?: string;
+    fallback?: string;
     rootClassName?: string;
@@ -31,0 +32,0 @@ icons?: {

lib/Preview.js

@@ -9,5 +9,5 @@ "use strict";
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -24,7 +24,28 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _useImageTransform2 = _interopRequireDefault(require("./hooks/useImageTransform"));
+var _useStatus3 = _interopRequireDefault(require("./hooks/useStatus"));
 var _Operations = _interopRequireDefault(require("./Operations"));
 var _previewConfig = require("./previewConfig");
-var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
+var _excluded = ["fallback", "src", "imgRef"],
+  _excluded2 = ["prefixCls", "src", "alt", "fallback", "onClose", "visible", "icons", "rootClassName", "closeIcon", "getContainer", "current", "count", "countRender", "scaleStep", "minScale", "maxScale", "transitionName", "maskTransitionName", "imageRender", "imgCommonProps", "toolbarRender", "onTransform", "onChange"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var PreviewImage = function PreviewImage(_ref) {
+  var fallback = _ref.fallback,
+    src = _ref.src,
+    imgRef = _ref.imgRef,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useStatus = (0, _useStatus3.default)({
+      src: src,
+      fallback: fallback
+    }),
+    _useStatus2 = (0, _slicedToArray2.default)(_useStatus, 2),
+    getImgRef = _useStatus2[0],
+    srcAndOnload = _useStatus2[1];
+  return /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
+    ref: function ref(_ref2) {
+      imgRef.current = _ref2;
+      getImgRef(_ref2);
+    }
+  }, props, srcAndOnload));
+};
 var Preview = function Preview(props) {
@@ -34,2 +55,3 @@ var prefixCls = props.prefixCls,
     alt = props.alt,
+    fallback = props.fallback,
     onClose = props.onClose,
@@ -62,3 +84,3 @@ visible = props.visible,
     onChange = props.onChange,
-    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var imgRef = (0, _react.useRef)();
@@ -255,11 +277,7 @@ var downPositionRef = (0, _react.useRef)({
   }, [visible, showLeftOrRightSwitches, current]);
-  var imgNode = /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, imgCommonProps, {
+  var imgNode = /*#__PURE__*/_react.default.createElement(PreviewImage, (0, _extends2.default)({}, imgCommonProps, {
     width: props.width,
     height: props.height,
-    onWheel: onWheel,
-    onMouseDown: onMouseDown,
-    onDoubleClick: onDoubleClick,
-    ref: imgRef,
+    imgRef: imgRef,
     className: "".concat(prefixCls, "-img"),
-    src: src,
     alt: alt,
@@ -269,3 +287,8 @@ style: {
       transitionDuration: !enableTransition && '0s'
-    }
+    },
+    fallback: fallback,
+    src: src,
+    onWheel: onWheel,
+    onMouseDown: onMouseDown,
+    onDoubleClick: onDoubleClick
   }));
@@ -272,0 +295,0 @@ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcDialog.default, (0, _extends2.default)({

lib/PreviewGroup.d.ts

@@ -25,2 +25,3 @@ import * as React from 'react';
     items?: (string | ImageElementProps)[];
+    fallback?: string;
     preview?: boolean | PreviewGroupPreview;
@@ -27,0 +28,0 @@ children?: React.ReactNode;

lib/PreviewGroup.js

@@ -30,3 +30,4 @@ "use strict";
     items = _ref.items,
-    preview = _ref.preview;
+    preview = _ref.preview,
+    fallback = _ref.fallback;
   var _ref2 = (0, _typeof2.default)(preview) === 'object' ? preview : {},
@@ -140,2 +141,3 @@ previewVisible = _ref2.visible,
     src: src,
+    fallback: fallback,
     icons: icons,
@@ -142,0 +144,0 @@ minScale: minScale,

package.json

 {
   "name": "rc-image",
-  "version": "7.0.0-0",
+  "version": "7.0.0-2",
   "description": "React easy to use image component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -115,2 +115,4 @@ # rc-image
 | icons | { [iconKey]?: ReactNode } | - | Icons in the top operation bar, iconKey: 'rotateLeft' \| 'rotateRight' \| 'zoomIn' \| 'zoomOut' \| 'close' \| 'left' \| 'right' |
+| fallback | string | - | Load failed src |
+| items | (string \| { src: string, alt: string, crossOrigin: string, ... })[] | - | preview group |
 
@@ -129,4 +131,3 @@ ### PreviewGroupType
 | getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
-| items | (string \| { src: string, alt: string, crossOrigin: string, ... })[] | - | preview group |
-| countRender | (current: number, total: number) => React.ReactNode | - | Customize count |
+| countRender | (current: number, total: number) => ReactNode | - | Customize count |
 | imageRender | (originalNode: React.ReactNode, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | Customize image |
@@ -133,0 +134,0 @@ | toolbarRender | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | Customize toolbar |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137169

increased by3.05%

Number of package files

64

increased by6.67%

Lines of code

3142

increased by4.11%

Number of lines in readme file

221

increased by0.45%

No dependency changes