rc-image - npm Package Compare versions

Comparing version 5.16.0 to 5.17.1

es/Preview.d.ts

@@ -0,3 +1,3 @@
+import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 import React from 'react';
-import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
@@ -4,0 +4,0 @@ onClose?: (e: React.SyntheticEvent<Element>) => void;

es/Preview.js

@@ -7,13 +7,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
-import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
+import classnames from 'classnames';
 import Dialog from 'rc-dialog';
-import classnames from 'classnames';
 import addEventListener from "rc-util/es/Dom/addEventListener";
 import KeyCode from "rc-util/es/KeyCode";
 import { warning } from "rc-util/es/warning";
-import { context } from "./PreviewGroup";
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition";
+import useImageTransform from "./hooks/useImageTransform";
 import Operations from "./Operations";
-import useImageTransform from "./hooks/useImageTransform";
-import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition";
 import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "./previewConfig";
+import { context } from "./PreviewGroup";
 var Preview = function Preview(props) {
@@ -64,5 +64,14 @@ var prefixCls = props.prefixCls,
     dispatchZoomChange = _useImageTransform.dispatchZoomChange;
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    enableTransition = _useState4[0],
+    setEnableTransition = _useState4[1];
   var rotate = transform.rotate,
     scale = transform.scale;
   var wrapClassName = classnames(_defineProperty({}, "".concat(prefixCls, "-moving"), isMoving));
+  useEffect(function () {
+    if (!enableTransition) {
+      setEnableTransition(true);
+    }
+  }, [enableTransition]);
   var onAfterClose = function onAfterClose() {
@@ -101,2 +110,4 @@ resetTransform();
     if (currentPreviewIndex > 0) {
+      setEnableTransition(false);
+      resetTransform();
       setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
@@ -109,2 +120,4 @@ }
     if (currentPreviewIndex < previewGroupCount - 1) {
+      setEnableTransition(false);
+      resetTransform();
       setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
@@ -251,3 +264,4 @@ }
     style: {
-      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)")
+      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)"),
+      transitionDuration: !enableTransition && '0s'
     }
@@ -254,0 +268,0 @@ }))), /*#__PURE__*/React.createElement(Operations, {

lib/Preview.d.ts

@@ -0,3 +1,3 @@
+import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 import React from 'react';
-import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
 export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
@@ -4,0 +4,0 @@ onClose?: (e: React.SyntheticEvent<Element>) => void;

lib/Preview.js

@@ -14,13 +14,13 @@ "use strict";
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
 var _rcDialog = _interopRequireDefault(require("rc-dialog"));
-var _classnames2 = _interopRequireDefault(require("classnames"));
 var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
 var _warning = require("rc-util/lib/warning");
-var _PreviewGroup = require("./PreviewGroup");
+var _react = _interopRequireWildcard(require("react"));
+var _getFixScaleEleTransPosition = _interopRequireDefault(require("./getFixScaleEleTransPosition"));
+var _useImageTransform2 = _interopRequireDefault(require("./hooks/useImageTransform"));
 var _Operations = _interopRequireDefault(require("./Operations"));
-var _useImageTransform2 = _interopRequireDefault(require("./hooks/useImageTransform"));
-var _getFixScaleEleTransPosition = _interopRequireDefault(require("./getFixScaleEleTransPosition"));
 var _previewConfig = require("./previewConfig");
+var _PreviewGroup = require("./PreviewGroup");
 var _excluded = ["prefixCls", "src", "alt", "onClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
@@ -74,5 +74,14 @@ 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); }
     dispatchZoomChange = _useImageTransform.dispatchZoomChange;
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    enableTransition = _useState4[0],
+    setEnableTransition = _useState4[1];
   var rotate = transform.rotate,
     scale = transform.scale;
   var wrapClassName = (0, _classnames2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-moving"), isMoving));
+  (0, _react.useEffect)(function () {
+    if (!enableTransition) {
+      setEnableTransition(true);
+    }
+  }, [enableTransition]);
   var onAfterClose = function onAfterClose() {
@@ -111,2 +120,4 @@ resetTransform();
     if (currentPreviewIndex > 0) {
+      setEnableTransition(false);
+      resetTransform();
       setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
@@ -119,2 +130,4 @@ }
     if (currentPreviewIndex < previewGroupCount - 1) {
+      setEnableTransition(false);
+      resetTransform();
       setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
@@ -261,3 +274,4 @@ }
     style: {
-      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)")
+      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)"),
+      transitionDuration: !enableTransition && '0s'
     }
@@ -264,0 +278,0 @@ }))), /*#__PURE__*/_react.default.createElement(_Operations.default, {

package.json

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

README.md

@@ -6,7 +6,7 @@ # 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)
+[![npm download][download-image]][download-url]
 [![build status][github-actions-image]][github-actions-url]
-[![Test coverage][codecov-image]][codecov-url]
-[![npm download][download-image]][download-url]
+[![Codecov][codecov-image]][codecov-url]
 [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
 
@@ -33,2 +33,4 @@ [npm-image]: http://img.shields.io/npm/v/rc-image.svg?style=flat-square
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-image
+[dumi-url]: https://github.com/umijs/dumi
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 
@@ -35,0 +37,0 @@ ## Feature

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

109831

increased by0.9%

Lines of code

2620

increased by1.08%

Number of lines in readme file

117

increased by1.74%

No dependency changes