rc-image - npm Package Compare versions

Comparing version 5.9.0 to 5.10.0

es/Image.js

@@ -14,4 +14,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-import Preview from './Preview';
-import PreviewGroup, { context } from './PreviewGroup';
+import Preview from "./Preview";
+import PreviewGroup, { context } from "./PreviewGroup";
 var uuid = 0;
@@ -105,3 +105,3 @@
 
-  var canPreview = preview && !isError;
+  var canPreview = !!preview;
   var isLoaded = React.useRef(false);
@@ -163,3 +163,3 @@
 
-    if ((img === null || img === void 0 ? void 0 : img.complete) && (img.naturalWidth || img.naturalHeight)) {
+    if (img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
       isLoaded.current = true;
@@ -166,0 +166,0 @@ onLoad();

es/index.js

@@ -1,3 +0,3 @@
-import Image from './Image';
-export * from './Image';
+import Image from "./Image";
+export * from "./Image";
 export default Image;

es/Preview.js

@@ -6,5 +6,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "countRender", "scaleStep"];
+var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
 import * as React from 'react';
 import Dialog from 'rc-dialog';
+import CSSMotion from 'rc-motion';
 import classnames from 'classnames';
@@ -14,5 +15,5 @@ import addEventListener from "rc-util/es/Dom/addEventListener";
 import { warning } from "rc-util/es/warning";
-import useFrameSetState from './hooks/useFrameSetState';
-import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
-import { context } from './PreviewGroup';
+import useFrameSetState from "./hooks/useFrameSetState";
+import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition";
+import { context } from "./PreviewGroup";
 var useState = React.useState,
@@ -43,2 +44,6 @@ useEffect = React.useEffect,
       scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
+      _props$transitionName = props.transitionName,
+      transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
+      _props$maskTransition = props.maskTransitionName,
+      maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
       restProps = _objectWithoutProperties(props, _excluded);
@@ -235,3 +240,2 @@
     if (!visible || !showLeftOrRightSwitches) return;
-    event.preventDefault();
 
@@ -294,2 +298,4 @@ if (event.keyCode === KeyCode.LEFT) {
     return function () {
+      var _onTopMouseUpListener, _onTopMouseMoveListen;
+
       onMouseUpListener.remove();
@@ -301,20 +307,15 @@ onMouseMoveListener.remove();
 
-      if (onTopMouseUpListener) onTopMouseUpListener.remove();
+      (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
       /* istanbul ignore next */
 
-      if (onTopMouseMoveListener) onTopMouseMoveListener.remove();
+      (_onTopMouseMoveListen = onTopMouseMoveListener) === null || _onTopMouseMoveListen === void 0 ? void 0 : _onTopMouseMoveListen.remove();
     };
   }, [visible, isMoving, onKeyDown]);
-  return /*#__PURE__*/React.createElement(Dialog, _extends({
-    transitionName: "zoom",
-    maskTransitionName: "fade",
-    closable: false,
-    keyboard: true,
-    prefixCls: prefixCls,
-    onClose: onClose,
-    afterClose: onAfterClose,
-    visible: visible,
-    wrapClassName: wrapClassName,
-    rootClassName: rootClassName
-  }, restProps), /*#__PURE__*/React.createElement("ul", {
+  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), currentPreviewIndex === 0)),
+    onClick: onSwitchLeft
+  }, left), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), currentPreviewIndex === previewGroupCount - 1)),
+    onClick: onSwitchRight
+  }, right), /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-operations")
@@ -324,2 +325,4 @@ }, showOperationsProgress && /*#__PURE__*/React.createElement("li", {
   }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(currentPreviewIndex + 1, previewGroupCount)) !== null && _countRender !== void 0 ? _countRender : "".concat(currentPreviewIndex + 1, " / ").concat(previewGroupCount)), tools.map(function (_ref) {
+    var _classnames4;
+
     var icon = _ref.icon,
@@ -330,3 +333,3 @@ onClick = _ref.onClick,
     return /*#__PURE__*/React.createElement("li", {
-      className: classnames(toolClassName, _defineProperty({}, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled)),
+      className: classnames(toolClassName, (_classnames4 = {}, _defineProperty(_classnames4, "".concat(prefixCls, "-operations-operation-").concat(type), true), _defineProperty(_classnames4, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames4)),
       onClick: onClick,
@@ -337,3 +340,15 @@ key: type
     }) : icon);
-  })), /*#__PURE__*/React.createElement("div", {
+  })));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, _extends({
+    transitionName: transitionName,
+    maskTransitionName: maskTransitionName,
+    closable: false,
+    keyboard: true,
+    prefixCls: prefixCls,
+    onClose: onClose,
+    afterClose: onAfterClose,
+    visible: visible,
+    wrapClassName: wrapClassName,
+    rootClassName: rootClassName
+  }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-img-wrapper"),
@@ -355,11 +370,15 @@ style: {
     }
-  })), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), currentPreviewIndex === 0)),
-    onClick: onSwitchLeft
-  }, left), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), currentPreviewIndex === previewGroupCount - 1)),
-    onClick: onSwitchRight
-  }, right));
+  }))), /*#__PURE__*/React.createElement(CSSMotion, {
+    visible: visible,
+    motionName: maskTransitionName
+  }, function (_ref2) {
+    var className = _ref2.className,
+        style = _ref2.style;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      style: style
+    }, operations);
+  }));
 };
 
 export default Preview;

es/PreviewGroup.js

@@ -9,5 +9,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-import Preview from './Preview';
+import Preview from "./Preview";
+
 /* istanbul ignore next */
-
 export var context = /*#__PURE__*/React.createContext({
@@ -14,0 +14,0 @@ previewUrls: new Map(),

lib/Image.js

@@ -130,3 +130,3 @@ "use strict";
 
-  var canPreview = preview && !isError;
+  var canPreview = !!preview;
   var isLoaded = React.useRef(false);
@@ -188,3 +188,3 @@
 
-    if ((img === null || img === void 0 ? void 0 : img.complete) && (img.naturalWidth || img.naturalHeight)) {
+    if (img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
       isLoaded.current = true;
@@ -191,0 +191,0 @@ onLoad();

lib/Preview.js

@@ -26,2 +26,4 @@ "use strict";
 
+var _rcMotion = _interopRequireDefault(require("rc-motion"));
+
 var _classnames5 = _interopRequireDefault(require("classnames"));
@@ -41,3 +43,3 @@
 
-var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "countRender", "scaleStep"];
+var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
 
@@ -73,2 +75,6 @@ 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); }
       scaleStep = _props$scaleStep === void 0 ? 0.5 : _props$scaleStep,
+      _props$transitionName = props.transitionName,
+      transitionName = _props$transitionName === void 0 ? 'zoom' : _props$transitionName,
+      _props$maskTransition = props.maskTransitionName,
+      maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -264,3 +270,2 @@ var rotateLeft = icons.rotateLeft,
     if (!visible || !showLeftOrRightSwitches) return;
-    event.preventDefault();
 
@@ -323,2 +328,4 @@ if (event.keyCode === _KeyCode.default.LEFT) {
     return function () {
+      var _onTopMouseUpListener, _onTopMouseMoveListen;
+
       onMouseUpListener.remove();
@@ -330,20 +337,15 @@ onMouseMoveListener.remove();
 
-      if (onTopMouseUpListener) onTopMouseUpListener.remove();
+      (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 ? void 0 : _onTopMouseUpListener.remove();
       /* istanbul ignore next */
 
-      if (onTopMouseMoveListener) onTopMouseMoveListener.remove();
+      (_onTopMouseMoveListen = onTopMouseMoveListener) === null || _onTopMouseMoveListen === void 0 ? void 0 : _onTopMouseMoveListen.remove();
     };
   }, [visible, isMoving, onKeyDown]);
-  return /*#__PURE__*/React.createElement(_rcDialog.default, (0, _extends2.default)({
-    transitionName: "zoom",
-    maskTransitionName: "fade",
-    closable: false,
-    keyboard: true,
-    prefixCls: prefixCls,
-    onClose: onClose,
-    afterClose: onAfterClose,
-    visible: visible,
-    wrapClassName: wrapClassName,
-    rootClassName: rootClassName
-  }, restProps), /*#__PURE__*/React.createElement("ul", {
+  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), currentPreviewIndex === 0)),
+    onClick: onSwitchLeft
+  }, left), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), currentPreviewIndex === previewGroupCount - 1)),
+    onClick: onSwitchRight
+  }, right), /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-operations")
@@ -353,2 +355,4 @@ }, showOperationsProgress && /*#__PURE__*/React.createElement("li", {
   }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(currentPreviewIndex + 1, previewGroupCount)) !== null && _countRender !== void 0 ? _countRender : "".concat(currentPreviewIndex + 1, " / ").concat(previewGroupCount)), tools.map(function (_ref) {
+    var _classnames4;
+
     var icon = _ref.icon,
@@ -359,3 +363,3 @@ onClick = _ref.onClick,
     return /*#__PURE__*/React.createElement("li", {
-      className: (0, _classnames5.default)(toolClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled)),
+      className: (0, _classnames5.default)(toolClassName, (_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-operations-operation-").concat(type), true), (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames4)),
       onClick: onClick,
@@ -366,3 +370,15 @@ key: type
     }) : icon);
-  })), /*#__PURE__*/React.createElement("div", {
+  })));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_rcDialog.default, (0, _extends2.default)({
+    transitionName: transitionName,
+    maskTransitionName: maskTransitionName,
+    closable: false,
+    keyboard: true,
+    prefixCls: prefixCls,
+    onClose: onClose,
+    afterClose: onAfterClose,
+    visible: visible,
+    wrapClassName: wrapClassName,
+    rootClassName: rootClassName
+  }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-img-wrapper"),
@@ -384,9 +400,13 @@ style: {
     }
-  })), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), currentPreviewIndex === 0)),
-    onClick: onSwitchLeft
-  }, left), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), currentPreviewIndex === previewGroupCount - 1)),
-    onClick: onSwitchRight
-  }, right));
+  }))), /*#__PURE__*/React.createElement(_rcMotion.default, {
+    visible: visible,
+    motionName: maskTransitionName
+  }, function (_ref2) {
+    var className = _ref2.className,
+        style = _ref2.style;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      style: style
+    }, operations);
+  }));
 };
@@ -393,0 +413,0 @@

package.json

 {
   "name": "rc-image",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "description": "React easy to use image component",
@@ -36,3 +36,3 @@ "keywords": [
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "father test",
+    "test": "rc-test",
     "coverage": "father test --coverage",
@@ -52,5 +52,5 @@ "now-build": "npm run docs:build"
   "devDependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
-    "@ant-design/icons": "^4.2.2",
     "@types/classnames": "^2.2.10",
@@ -63,8 +63,8 @@ "@types/jest": "^26.0.9",
     "dumi": "^1.1.4",
-    "enzyme": "^3.11.0",
     "eslint": "^7.6.0",
-    "father": "^2.29.6",
+    "father": "^4.0.0",
     "glob": "^7.1.6",
     "less": "^3.12.2",
     "np": "^7.0.0",
+    "rc-test": "^7.0.3",
     "react": "^18.0.0",
@@ -71,0 +71,0 @@ "react-dom": "^18.0.0",

README.md

@@ -5,3 +5,3 @@ # rc-image
 
-[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![CircleCI status][circleci-image]][circleci-url] [![Test coverage][codecov-image]][codecov-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![CircleCI status][circleci-image]][circleci-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
@@ -8,0 +8,0 @@ [npm-image]: http://img.shields.io/npm/v/rc-image.svg?style=flat-square

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

93035

increased by1.72%

Lines of code

2147

increased by0.8%

No dependency changes