rc-image - npm Package Compare versions

Comparing version 5.14.0 to 5.15.1

es/hooks/useImageTransform.d.ts

@@ -7,2 +7,4 @@ /// <reference types="react" />
     scale: number;
+    flipX: boolean;
+    flipY: boolean;
 };
@@ -15,2 +17,4 @@ export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>): {
         scale: number;
+        flipX: boolean;
+        flipY: boolean;
     };
@@ -17,0 +21,0 @@ resetTransform: () => void;

es/hooks/useImageTransform.js

@@ -11,3 +11,5 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
   rotate: 0,
-  scale: 1
+  scale: 1,
+  flipX: false,
+  flipY: false
 };
@@ -14,0 +16,0 @@ export default function useImageTransform(imgRef) {

es/Image.js

@@ -17,2 +17,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var uuid = 0;
+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 ImageInternal = function ImageInternal(_ref) {
@@ -36,3 +48,3 @@ var _imgCommonProps$style;
     onClick = _ref.onClick,
-    onImageError = _ref.onError,
+    onError = _ref.onError,
     wrapperClassName = _ref.wrapperClassName,
@@ -99,8 +111,2 @@ wrapperStyle = _ref.wrapperStyle,
   };
-  var onError = function onError(e) {
-    if (onImageError) {
-      onImageError(e);
-    }
-    setStatus('error');
-  };
   var onPreview = function onPreview(e) {
@@ -129,3 +135,3 @@ if (!isControlled) {
     }
-    if (onClick) onClick(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
@@ -147,2 +153,9 @@ var onPreviewClose = function onPreviewClose(e) {
   };
+  React.useEffect(function () {
+    isImageValid(src).then(function (isValid) {
+      if (!isValid) {
+        setStatus('error');
+      }
+    });
+  }, [src]);
 
@@ -180,2 +193,3 @@ // Keep order start
     useMap: useMap,
+    onError: onError,
     alt: alt,
@@ -200,3 +214,2 @@ className: cn("".concat(prefixCls, "-img"), _defineProperty({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
     onLoad: onLoad,
-    onError: onError,
     src: imgSrc
@@ -203,0 +216,0 @@ }, {

es/Operations.d.ts

@@ -15,4 +15,6 @@ import * as React from 'react';
     onRotateLeft: () => void;
+    onFlipX: () => void;
+    onFlipY: () => void;
 }
 declare const Operations: React.FC<OperationsProps>;
 export default Operations;

es/Operations.js

@@ -27,3 +27,5 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     onRotateRight = props.onRotateRight,
-    onRotateLeft = props.onRotateLeft;
+    onRotateLeft = props.onRotateLeft,
+    onFlipX = props.onFlipX,
+    onFlipY = props.onFlipY;
   var rotateLeft = icons.rotateLeft,
@@ -35,3 +37,5 @@ rotateRight = icons.rotateRight,
     left = icons.left,
-    right = icons.right;
+    right = icons.right,
+    flipX = icons.flipX,
+    flipY = icons.flipY;
   var toolClassName = "".concat(prefixCls, "-operations-operation");
@@ -61,2 +65,10 @@ var iconClassName = "".concat(prefixCls, "-operations-icon");
     type: 'rotateLeft'
+  }, {
+    icon: flipX,
+    onClick: onFlipX,
+    type: 'flipX'
+  }, {
+    icon: flipY,
+    onClick: onFlipY,
+    type: 'flipY'
   }];
@@ -63,0 +75,0 @@ var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

es/Preview.d.ts

@@ -16,2 +16,4 @@ import React from 'react';
         right?: React.ReactNode;
+        flipX?: React.ReactNode;
+        flipY?: React.ReactNode;
     };
@@ -18,0 +20,0 @@ countRender?: (current: number, total: number) => string;

es/Preview.js

@@ -6,3 +6,3 @@ 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", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName", "onChange"];
+var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
 import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
@@ -24,3 +24,2 @@ import Dialog from 'rc-dialog';
     onClose = props.onClose,
-    afterClose = props.afterClose,
     visible = props.visible,
@@ -38,3 +37,2 @@ _props$icons = props.icons,
     maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
-    onChange = props.onChange,
     restProps = _objectWithoutProperties(props, _excluded);
@@ -90,2 +88,12 @@ var imgRef = useRef();
   };
+  var onFlipX = function onFlipX() {
+    updateTransform({
+      flipX: !transform.flipX
+    });
+  };
+  var onFlipY = function onFlipY() {
+    updateTransform({
+      flipY: !transform.flipY
+    });
+  };
   var onSwitchLeft = function onSwitchLeft(event) {
@@ -224,3 +232,2 @@ event.preventDefault();
     onClose: onClose,
-    afterClose: onAfterClose,
     visible: visible,
@@ -230,3 +237,5 @@ wrapClassName: wrapClassName,
     getContainer: getContainer
-  }, restProps), /*#__PURE__*/React.createElement("div", {
+  }, restProps, {
+    afterClose: onAfterClose
+  }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-img-wrapper")
@@ -244,3 +253,3 @@ }, /*#__PURE__*/React.createElement("img", {
     style: {
-      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(scale, ", ").concat(scale, ", 1) rotate(").concat(rotate, "deg)")
+      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(transform.flipX ? '-' : '').concat(scale, ", ").concat(transform.flipY ? '-' : '').concat(scale, ", 1) rotate(").concat(rotate, "deg)")
     }
@@ -266,2 +275,4 @@ }))), /*#__PURE__*/React.createElement(Operations, {
     onRotateLeft: onRotateLeft,
+    onFlipX: onFlipX,
+    onFlipY: onFlipY,
     onClose: onClose
@@ -268,0 +279,0 @@ }));

lib/hooks/useImageTransform.d.ts

@@ -7,2 +7,4 @@ /// <reference types="react" />
     scale: number;
+    flipX: boolean;
+    flipY: boolean;
 };
@@ -15,2 +17,4 @@ export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>): {
         scale: number;
+        flipX: boolean;
+        flipY: boolean;
     };
@@ -17,0 +21,0 @@ resetTransform: () => void;

lib/hooks/useImageTransform.js

@@ -18,3 +18,5 @@ "use strict";
   rotate: 0,
-  scale: 1
+  scale: 1,
+  flipX: false,
+  flipY: false
 };
@@ -21,0 +23,0 @@ function useImageTransform(imgRef) {

lib/Image.js

@@ -26,2 +26,14 @@ "use strict";
 var uuid = 0;
+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 ImageInternal = function ImageInternal(_ref) {
@@ -45,3 +57,3 @@ var _imgCommonProps$style;
     onClick = _ref.onClick,
-    onImageError = _ref.onError,
+    onError = _ref.onError,
     wrapperClassName = _ref.wrapperClassName,
@@ -108,8 +120,2 @@ wrapperStyle = _ref.wrapperStyle,
   };
-  var onError = function onError(e) {
-    if (onImageError) {
-      onImageError(e);
-    }
-    setStatus('error');
-  };
   var onPreview = function onPreview(e) {
@@ -138,3 +144,3 @@ if (!isControlled) {
     }
-    if (onClick) onClick(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
@@ -156,2 +162,9 @@ var onPreviewClose = function onPreviewClose(e) {
   };
+  React.useEffect(function () {
+    isImageValid(src).then(function (isValid) {
+      if (!isValid) {
+        setStatus('error');
+      }
+    });
+  }, [src]);
 
@@ -189,2 +202,3 @@ // Keep order start
     useMap: useMap,
+    onError: onError,
     alt: alt,
@@ -209,3 +223,2 @@ className: (0, _classnames.default)("".concat(prefixCls, "-img"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-img-placeholder"), placeholder === true), className),
     onLoad: onLoad,
-    onError: onError,
     src: imgSrc
@@ -212,0 +225,0 @@ }, {

lib/Operations.d.ts

@@ -15,4 +15,6 @@ import * as React from 'react';
     onRotateLeft: () => void;
+    onFlipX: () => void;
+    onFlipY: () => void;
 }
 declare const Operations: React.FC<OperationsProps>;
 export default Operations;

lib/Operations.js

@@ -37,3 +37,5 @@ "use strict";
     onRotateRight = props.onRotateRight,
-    onRotateLeft = props.onRotateLeft;
+    onRotateLeft = props.onRotateLeft,
+    onFlipX = props.onFlipX,
+    onFlipY = props.onFlipY;
   var rotateLeft = icons.rotateLeft,
@@ -45,3 +47,5 @@ rotateRight = icons.rotateRight,
     left = icons.left,
-    right = icons.right;
+    right = icons.right,
+    flipX = icons.flipX,
+    flipY = icons.flipY;
   var toolClassName = "".concat(prefixCls, "-operations-operation");
@@ -71,2 +75,10 @@ var iconClassName = "".concat(prefixCls, "-operations-icon");
     type: 'rotateLeft'
+  }, {
+    icon: flipX,
+    onClick: onFlipX,
+    type: 'flipX'
+  }, {
+    icon: flipY,
+    onClick: onFlipY,
+    type: 'flipY'
   }];
@@ -73,0 +85,0 @@ var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

lib/Preview.d.ts

@@ -16,2 +16,4 @@ import React from 'react';
         right?: React.ReactNode;
+        flipX?: React.ReactNode;
+        flipY?: React.ReactNode;
     };
@@ -18,0 +20,0 @@ countRender?: (current: number, total: number) => string;

lib/Preview.js

@@ -25,3 +25,3 @@ "use strict";
 var _previewConfig = require("./previewConfig");
-var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName", "onChange"];
+var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
 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); }
@@ -34,3 +34,2 @@ 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; }
     onClose = props.onClose,
-    afterClose = props.afterClose,
     visible = props.visible,
@@ -48,3 +47,2 @@ _props$icons = props.icons,
     maskTransitionName = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
-    onChange = props.onChange,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -100,2 +98,12 @@ var imgRef = (0, _react.useRef)();
   };
+  var onFlipX = function onFlipX() {
+    updateTransform({
+      flipX: !transform.flipX
+    });
+  };
+  var onFlipY = function onFlipY() {
+    updateTransform({
+      flipY: !transform.flipY
+    });
+  };
   var onSwitchLeft = function onSwitchLeft(event) {
@@ -234,3 +242,2 @@ event.preventDefault();
     onClose: onClose,
-    afterClose: onAfterClose,
     visible: visible,
@@ -240,3 +247,5 @@ wrapClassName: wrapClassName,
     getContainer: getContainer
-  }, restProps), /*#__PURE__*/_react.default.createElement("div", {
+  }, restProps, {
+    afterClose: onAfterClose
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-img-wrapper")
@@ -254,3 +263,3 @@ }, /*#__PURE__*/_react.default.createElement("img", {
     style: {
-      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(scale, ", ").concat(scale, ", 1) rotate(").concat(rotate, "deg)")
+      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(transform.flipX ? '-' : '').concat(scale, ", ").concat(transform.flipY ? '-' : '').concat(scale, ", 1) rotate(").concat(rotate, "deg)")
     }
@@ -276,2 +285,4 @@ }))), /*#__PURE__*/_react.default.createElement(_Operations.default, {
     onRotateLeft: onRotateLeft,
+    onFlipX: onFlipX,
+    onFlipY: onFlipY,
     onClose: onClose
@@ -278,0 +289,0 @@ }));

package.json

 {
   "name": "rc-image",
-  "version": "5.14.0",
+  "version": "5.15.1",
   "description": "React easy to use image component",
@@ -60,3 +60,3 @@ "keywords": [
     "@types/react-dom": "^18.0.0",
-    "@umijs/fabric": "^2.2.2",
+    "@umijs/fabric": "^3.0.0",
     "cross-env": "^7.0.2",
@@ -63,0 +63,0 @@ "dumi": "^2.1.4",

README.md

@@ -39,2 +39,3 @@ # rc-image
 - [x] Zoom
+- [x] Flip
 - [x] Fallback
@@ -59,3 +60,3 @@ - [x] Multiple Preview
   <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
-), document.getElementById('root'));
+, document.getElementById('root'));
 ```
@@ -86,3 +87,3 @@
   </Image.PreviewGroup>
-), document.getElementById('root'));
+, document.getElementById('root'));
 ```
@@ -89,0 +90,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108309

increased by1.99%

Lines of code

2576

increased by3.7%

Number of lines in readme file

115

increased by0.88%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes