rc-image - npm Package Compare versions

Comparing version 7.9.0 to 7.10.0

es/Operations.d.ts

@@ -14,4 +14,3 @@ import * as React from 'react';
     maxScale: number;
-    onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
-    onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
+    onActive: (offset: number) => void;
     onZoomIn: () => void;
@@ -18,0 +17,0 @@ onZoomOut: () => void;

es/Operations.js

@@ -27,4 +27,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
     closeIcon = props.closeIcon,
-    onSwitchLeft = props.onSwitchLeft,
-    onSwitchRight = props.onSwitchRight,
+    onActive = props.onActive,
     onClose = props.onClose,
@@ -65,19 +64,55 @@ onZoomIn = props.onZoomIn,
   }, [visible]);
-  var tools = [{
+  var handleActive = function handleActive(e, offset) {
+    e.preventDefault();
+    e.stopPropagation();
+    onActive(offset);
+  };
+  var renderOperation = React.useCallback(function (_ref) {
+    var type = _ref.type,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      icon = _ref.icon;
+    return /*#__PURE__*/React.createElement("div", {
+      key: type,
+      className: classnames(toolClassName, "".concat(prefixCls, "-operations-operation-").concat(type), _defineProperty({}, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled)),
+      onClick: onClick
+    }, icon);
+  }, [toolClassName, prefixCls]);
+  var switchPrevNode = showSwitch ? renderOperation({
+    icon: left,
+    onClick: function onClick(e) {
+      return handleActive(e, -1);
+    },
+    type: 'prev',
+    disabled: current === 0
+  }) : undefined;
+  var switchNextNode = showSwitch ? renderOperation({
+    icon: right,
+    onClick: function onClick(e) {
+      return handleActive(e, 1);
+    },
+    type: 'next',
+    disabled: current === count - 1
+  }) : undefined;
+  var flipYNode = renderOperation({
     icon: flipY,
     onClick: onFlipY,
     type: 'flipY'
-  }, {
+  });
+  var flipXNode = renderOperation({
     icon: flipX,
     onClick: onFlipX,
     type: 'flipX'
-  }, {
+  });
+  var rotateLeftNode = renderOperation({
     icon: rotateLeft,
     onClick: onRotateLeft,
     type: 'rotateLeft'
-  }, {
+  });
+  var rotateRightNode = renderOperation({
     icon: rotateRight,
     onClick: onRotateRight,
     type: 'rotateRight'
-  }, {
+  });
+  var zoomOutNode = renderOperation({
     icon: zoomOut,
@@ -87,3 +122,4 @@ onClick: onZoomOut,
     disabled: scale <= minScale
-  }, {
+  });
+  var zoomInNode = renderOperation({
     icon: zoomIn,
@@ -93,18 +129,6 @@ onClick: onZoomIn,
     disabled: scale === maxScale
-  }];
-  var toolsNode = tools.map(function (_ref) {
-    var _classnames;
-    var icon = _ref.icon,
-      onClick = _ref.onClick,
-      type = _ref.type,
-      disabled = _ref.disabled;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(toolClassName, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-operations-operation-").concat(type), true), _defineProperty(_classnames, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames)),
-      onClick: onClick,
-      key: type
-    }, icon);
   });
   var toolbarNode = /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-operations")
-  }, toolsNode);
+  }, flipYNode, flipXNode, rotateLeftNode, rotateRightNode, zoomOutNode, zoomInNode);
   return /*#__PURE__*/React.createElement(CSSMotion, {
@@ -129,6 +153,10 @@ visible: visible,
       className: classnames("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
-      onClick: onSwitchLeft
+      onClick: function onClick(e) {
+        return handleActive(e, -1);
+      }
     }, left), /*#__PURE__*/React.createElement("div", {
       className: classnames("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
-      onClick: onSwitchRight
+      onClick: function onClick(e) {
+        return handleActive(e, 1);
+      }
     }, right)), /*#__PURE__*/React.createElement("div", {
@@ -140,10 +168,13 @@ className: "".concat(prefixCls, "-footer")
       icons: {
-        flipYIcon: toolsNode[0],
-        flipXIcon: toolsNode[1],
-        rotateLeftIcon: toolsNode[2],
-        rotateRightIcon: toolsNode[3],
-        zoomOutIcon: toolsNode[4],
-        zoomInIcon: toolsNode[5]
+        prevIcon: switchPrevNode,
+        nextIcon: switchNextNode,
+        flipYIcon: flipYNode,
+        flipXIcon: flipXNode,
+        rotateLeftIcon: rotateLeftNode,
+        rotateRightIcon: rotateRightNode,
+        zoomOutIcon: zoomOutNode,
+        zoomInIcon: zoomInNode
       },
       actions: {
+        onActive: onActive,
         onFlipY: onFlipY,
@@ -150,0 +181,0 @@ onFlipX: onFlipX,

es/Preview.d.ts

@@ -7,2 +7,4 @@ import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
     icons: {
+        prevIcon?: React.ReactNode;
+        nextIcon?: React.ReactNode;
         flipYIcon: React.ReactNode;
@@ -16,2 +18,3 @@ flipXIcon: React.ReactNode;
     actions: {
+        onActive?: (offset: number) => void;
         onFlipY: () => void;
@@ -18,0 +21,0 @@ onFlipX: () => void;

es/Preview.js

@@ -137,26 +137,17 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
   };
-  var onSwitchLeft = function onSwitchLeft(event) {
-    event === null || event === void 0 || event.preventDefault();
-    event === null || event === void 0 || event.stopPropagation();
-    if (current > 0) {
-      setEnableTransition(false);
-      resetTransform('prev');
-      onChange === null || onChange === void 0 || onChange(current - 1, current);
+  var onActive = function onActive(offset) {
+    var position = current + offset;
+    if (!Number.isInteger(position) || position < 0 || position > count - 1) {
+      return;
     }
+    setEnableTransition(false);
+    resetTransform(offset < 0 ? 'prev' : 'next');
+    onChange === null || onChange === void 0 || onChange(position, current);
   };
-  var onSwitchRight = function onSwitchRight(event) {
-    event === null || event === void 0 || event.preventDefault();
-    event === null || event === void 0 || event.stopPropagation();
-    if (current < count - 1) {
-      setEnableTransition(false);
-      resetTransform('next');
-      onChange === null || onChange === void 0 || onChange(current + 1, current);
-    }
-  };
   var onKeyDown = function onKeyDown(event) {
     if (!visible || !showLeftOrRightSwitches) return;
     if (event.keyCode === KeyCode.LEFT) {
-      onSwitchLeft();
+      onActive(-1);
     } else if (event.keyCode === KeyCode.RIGHT) {
-      onSwitchRight();
+      onActive(1);
     }
@@ -247,4 +238,3 @@ };
     toolbarRender: toolbarRender,
-    onSwitchLeft: onSwitchLeft,
-    onSwitchRight: onSwitchRight,
+    onActive: onActive,
     onZoomIn: onZoomIn,
@@ -251,0 +241,0 @@ onZoomOut: onZoomOut,

lib/Operations.d.ts

@@ -14,4 +14,3 @@ import * as React from 'react';
     maxScale: number;
-    onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
-    onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
+    onActive: (offset: number) => void;
     onZoomIn: () => void;
@@ -18,0 +17,0 @@ onZoomOut: () => void;

lib/Operations.js

@@ -37,4 +37,3 @@ "use strict";
     closeIcon = props.closeIcon,
-    onSwitchLeft = props.onSwitchLeft,
-    onSwitchRight = props.onSwitchRight,
+    onActive = props.onActive,
     onClose = props.onClose,
@@ -75,19 +74,55 @@ onZoomIn = props.onZoomIn,
   }, [visible]);
-  var tools = [{
+  var handleActive = function handleActive(e, offset) {
+    e.preventDefault();
+    e.stopPropagation();
+    onActive(offset);
+  };
+  var renderOperation = React.useCallback(function (_ref) {
+    var type = _ref.type,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      icon = _ref.icon;
+    return /*#__PURE__*/React.createElement("div", {
+      key: type,
+      className: (0, _classnames4.default)(toolClassName, "".concat(prefixCls, "-operations-operation-").concat(type), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled)),
+      onClick: onClick
+    }, icon);
+  }, [toolClassName, prefixCls]);
+  var switchPrevNode = showSwitch ? renderOperation({
+    icon: left,
+    onClick: function onClick(e) {
+      return handleActive(e, -1);
+    },
+    type: 'prev',
+    disabled: current === 0
+  }) : undefined;
+  var switchNextNode = showSwitch ? renderOperation({
+    icon: right,
+    onClick: function onClick(e) {
+      return handleActive(e, 1);
+    },
+    type: 'next',
+    disabled: current === count - 1
+  }) : undefined;
+  var flipYNode = renderOperation({
     icon: flipY,
     onClick: onFlipY,
     type: 'flipY'
-  }, {
+  });
+  var flipXNode = renderOperation({
     icon: flipX,
     onClick: onFlipX,
     type: 'flipX'
-  }, {
+  });
+  var rotateLeftNode = renderOperation({
     icon: rotateLeft,
     onClick: onRotateLeft,
     type: 'rotateLeft'
-  }, {
+  });
+  var rotateRightNode = renderOperation({
     icon: rotateRight,
     onClick: onRotateRight,
     type: 'rotateRight'
-  }, {
+  });
+  var zoomOutNode = renderOperation({
     icon: zoomOut,
@@ -97,3 +132,4 @@ onClick: onZoomOut,
     disabled: scale <= minScale
-  }, {
+  });
+  var zoomInNode = renderOperation({
     icon: zoomIn,
@@ -103,18 +139,6 @@ onClick: onZoomIn,
     disabled: scale === maxScale
-  }];
-  var toolsNode = tools.map(function (_ref) {
-    var _classnames;
-    var icon = _ref.icon,
-      onClick = _ref.onClick,
-      type = _ref.type,
-      disabled = _ref.disabled;
-    return /*#__PURE__*/React.createElement("div", {
-      className: (0, _classnames4.default)(toolClassName, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-operations-operation-").concat(type), true), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames)),
-      onClick: onClick,
-      key: type
-    }, icon);
   });
   var toolbarNode = /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-operations")
-  }, toolsNode);
+  }, flipYNode, flipXNode, rotateLeftNode, rotateRightNode, zoomOutNode, zoomInNode);
   return /*#__PURE__*/React.createElement(_rcMotion.default, {
@@ -139,6 +163,10 @@ visible: visible,
       className: (0, _classnames4.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
-      onClick: onSwitchLeft
+      onClick: function onClick(e) {
+        return handleActive(e, -1);
+      }
     }, left), /*#__PURE__*/React.createElement("div", {
       className: (0, _classnames4.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
-      onClick: onSwitchRight
+      onClick: function onClick(e) {
+        return handleActive(e, 1);
+      }
     }, right)), /*#__PURE__*/React.createElement("div", {
@@ -150,10 +178,13 @@ className: "".concat(prefixCls, "-footer")
       icons: {
-        flipYIcon: toolsNode[0],
-        flipXIcon: toolsNode[1],
-        rotateLeftIcon: toolsNode[2],
-        rotateRightIcon: toolsNode[3],
-        zoomOutIcon: toolsNode[4],
-        zoomInIcon: toolsNode[5]
+        prevIcon: switchPrevNode,
+        nextIcon: switchNextNode,
+        flipYIcon: flipYNode,
+        flipXIcon: flipXNode,
+        rotateLeftIcon: rotateLeftNode,
+        rotateRightIcon: rotateRightNode,
+        zoomOutIcon: zoomOutNode,
+        zoomInIcon: zoomInNode
       },
       actions: {
+        onActive: onActive,
         onFlipY: onFlipY,
@@ -160,0 +191,0 @@ onFlipX: onFlipX,

lib/Preview.d.ts

@@ -7,2 +7,4 @@ import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
     icons: {
+        prevIcon?: React.ReactNode;
+        nextIcon?: React.ReactNode;
         flipYIcon: React.ReactNode;
@@ -16,2 +18,3 @@ flipXIcon: React.ReactNode;
     actions: {
+        onActive?: (offset: number) => void;
         onFlipY: () => void;
@@ -18,0 +21,0 @@ onFlipX: () => void;

lib/Preview.js

@@ -147,26 +147,17 @@ "use strict";
   };
-  var onSwitchLeft = function onSwitchLeft(event) {
-    event === null || event === void 0 || event.preventDefault();
-    event === null || event === void 0 || event.stopPropagation();
-    if (current > 0) {
-      setEnableTransition(false);
-      resetTransform('prev');
-      onChange === null || onChange === void 0 || onChange(current - 1, current);
+  var onActive = function onActive(offset) {
+    var position = current + offset;
+    if (!Number.isInteger(position) || position < 0 || position > count - 1) {
+      return;
     }
+    setEnableTransition(false);
+    resetTransform(offset < 0 ? 'prev' : 'next');
+    onChange === null || onChange === void 0 || onChange(position, current);
   };
-  var onSwitchRight = function onSwitchRight(event) {
-    event === null || event === void 0 || event.preventDefault();
-    event === null || event === void 0 || event.stopPropagation();
-    if (current < count - 1) {
-      setEnableTransition(false);
-      resetTransform('next');
-      onChange === null || onChange === void 0 || onChange(current + 1, current);
-    }
-  };
   var onKeyDown = function onKeyDown(event) {
     if (!visible || !showLeftOrRightSwitches) return;
     if (event.keyCode === _KeyCode.default.LEFT) {
-      onSwitchLeft();
+      onActive(-1);
     } else if (event.keyCode === _KeyCode.default.RIGHT) {
-      onSwitchRight();
+      onActive(1);
     }
@@ -257,4 +248,3 @@ };
     toolbarRender: toolbarRender,
-    onSwitchLeft: onSwitchLeft,
-    onSwitchRight: onSwitchRight,
+    onActive: onActive,
     onZoomIn: onZoomIn,
@@ -261,0 +251,0 @@ onZoomOut: onZoomOut,

package.json

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

README.md

@@ -175,2 +175,4 @@ # rc-image
   icons: {
+    prevIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
     flipYIcon: React.ReactNode;
@@ -184,2 +186,3 @@ flipXIcon: React.ReactNode;
   actions: {
+    onActive?: (offset: number) => void;
     onFlipY: () => void;
@@ -186,0 +189,0 @@ onFlipX: () => void;

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

158553

increased by0.72%

Lines of code

3769

increased by1.21%

Number of lines in readme file

227

increased by1.34%

No dependency changes