rc-image - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

es/Preview.js

@@ -11,2 +11,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import addEventListener from "rc-util/es/Dom/addEventListener";
+import KeyCode from "rc-util/es/KeyCode";
 import { warning } from "rc-util/es/warning";
@@ -17,3 +18,6 @@ import useFrameSetState from './hooks/useFrameSetState';
 var useState = React.useState,
-    useEffect = React.useEffect;
+    useEffect = React.useEffect,
+    useCallback = React.useCallback,
+    useRef = React.useRef,
+    useContext = React.useContext;
 var initialPosition = {
@@ -59,4 +63,4 @@ x: 0,
 
-  var imgRef = React.useRef();
-  var originPositionRef = React.useRef({
+  var imgRef = useRef();
+  var originPositionRef = useRef({
     originX: 0,
@@ -68,12 +72,12 @@ originY: 0,
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isMoving = _React$useState2[0],
-      setMoving = _React$useState2[1];
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMoving = _useState6[0],
+      setMoving = _useState6[1];
 
-  var _React$useContext = React.useContext(context),
-      previewUrls = _React$useContext.previewUrls,
-      current = _React$useContext.current,
-      isPreviewGroup = _React$useContext.isPreviewGroup,
-      setCurrent = _React$useContext.setCurrent;
+  var _useContext = useContext(context),
+      previewUrls = _useContext.previewUrls,
+      current = _useContext.current,
+      isPreviewGroup = _useContext.isPreviewGroup,
+      setCurrent = _useContext.setCurrent;
 
@@ -86,8 +90,8 @@ var previewGroupCount = previewUrls.size;
 
-  var _React$useState3 = React.useState({
+  var _useState7 = useState({
     wheelDirection: 0
   }),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      lastWheelZoomDirection = _React$useState4[0],
-      setLastWheelZoomDirection = _React$useState4[1];
+      _useState8 = _slicedToArray(_useState7, 2),
+      lastWheelZoomDirection = _useState8[0],
+      setLastWheelZoomDirection = _useState8[1];
 
@@ -225,2 +229,16 @@ var onAfterClose = function onAfterClose() {
 
+  var onKeyDown = useCallback(function (event) {
+    if (!visible || !showLeftOrRightSwitches) return;
+    event.preventDefault();
+
+    if (event.keyCode === KeyCode.LEFT) {
+      if (currentPreviewIndex > 0) {
+        setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
+      }
+    } else if (event.keyCode === KeyCode.RIGHT) {
+      if (currentPreviewIndex < previewGroupCount - 1) {
+        setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
+      }
+    }
+  }, [currentPreviewIndex, previewGroupCount, previewUrlsKeys, setCurrent, showLeftOrRightSwitches, visible]);
   useEffect(function () {
@@ -243,2 +261,3 @@ var wheelDirection = lastWheelZoomDirection.wheelDirection;
     });
+    var onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
 
@@ -262,2 +281,3 @@ try {
       onScrollWheelListener.remove();
+      onKeyDownListener.remove();
       /* istanbul ignore next */
@@ -270,3 +290,3 @@
     };
-  }, [visible, isMoving]);
+  }, [visible, isMoving, onKeyDown]);
   return /*#__PURE__*/React.createElement(Dialog, _extends({
@@ -273,0 +293,0 @@ transitionName: "zoom",

lib/Preview.js

@@ -30,2 +30,4 @@ "use strict";
 
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+
 var _warning = require("rc-util/lib/warning");
@@ -41,3 +43,6 @@
 var useState = React.useState,
-    useEffect = React.useEffect;
+    useEffect = React.useEffect,
+    useCallback = React.useCallback,
+    useRef = React.useRef,
+    useContext = React.useContext;
 var initialPosition = {
@@ -82,4 +87,4 @@ x: 0,
 
-  var imgRef = React.useRef();
-  var originPositionRef = React.useRef({
+  var imgRef = useRef();
+  var originPositionRef = useRef({
     originX: 0,
@@ -91,12 +96,12 @@ originY: 0,
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isMoving = _React$useState2[0],
-      setMoving = _React$useState2[1];
+  var _useState5 = useState(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isMoving = _useState6[0],
+      setMoving = _useState6[1];
 
-  var _React$useContext = React.useContext(_PreviewGroup.context),
-      previewUrls = _React$useContext.previewUrls,
-      current = _React$useContext.current,
-      isPreviewGroup = _React$useContext.isPreviewGroup,
-      setCurrent = _React$useContext.setCurrent;
+  var _useContext = useContext(_PreviewGroup.context),
+      previewUrls = _useContext.previewUrls,
+      current = _useContext.current,
+      isPreviewGroup = _useContext.isPreviewGroup,
+      setCurrent = _useContext.setCurrent;
 
@@ -109,8 +114,8 @@ var previewGroupCount = previewUrls.size;
 
-  var _React$useState3 = React.useState({
+  var _useState7 = useState({
     wheelDirection: 0
   }),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      lastWheelZoomDirection = _React$useState4[0],
-      setLastWheelZoomDirection = _React$useState4[1];
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      lastWheelZoomDirection = _useState8[0],
+      setLastWheelZoomDirection = _useState8[1];
 
@@ -248,2 +253,16 @@ var onAfterClose = function onAfterClose() {
 
+  var onKeyDown = useCallback(function (event) {
+    if (!visible || !showLeftOrRightSwitches) return;
+    event.preventDefault();
+
+    if (event.keyCode === _KeyCode.default.LEFT) {
+      if (currentPreviewIndex > 0) {
+        setCurrent(previewUrlsKeys[currentPreviewIndex - 1]);
+      }
+    } else if (event.keyCode === _KeyCode.default.RIGHT) {
+      if (currentPreviewIndex < previewGroupCount - 1) {
+        setCurrent(previewUrlsKeys[currentPreviewIndex + 1]);
+      }
+    }
+  }, [currentPreviewIndex, previewGroupCount, previewUrlsKeys, setCurrent, showLeftOrRightSwitches, visible]);
   useEffect(function () {
@@ -266,2 +285,3 @@ var wheelDirection = lastWheelZoomDirection.wheelDirection;
     });
+    var onKeyDownListener = (0, _addEventListener.default)(window, 'keydown', onKeyDown, false);
 
@@ -285,2 +305,3 @@ try {
       onScrollWheelListener.remove();
+      onKeyDownListener.remove();
       /* istanbul ignore next */
@@ -293,3 +314,3 @@
     };
-  }, [visible, isMoving]);
+  }, [visible, isMoving, onKeyDown]);
   return /*#__PURE__*/React.createElement(_rcDialog.default, (0, _extends2.default)({
@@ -296,0 +317,0 @@ transitionName: "zoom",

package.json

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

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

81790

increased by1.89%

Lines of code

2022

increased by1.92%

No dependency changes