rc-image - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

es/Image.d.ts

 import * as React from 'react';
 import { GetContainer } from 'rc-util/lib/PortalWrapper';
+import PreviewGroup from './PreviewGroup';
 export interface ImagePreviewType {
@@ -23,3 +24,6 @@ visible?: boolean;
 }
-declare const ImageInternal: React.FC<ImageProps>;
+interface CompoundedComponent<P> extends React.FC<P> {
+    PreviewGroup: typeof PreviewGroup;
+}
+declare const ImageInternal: CompoundedComponent<ImageProps>;
 export default ImageInternal;

es/Image.js

@@ -12,2 +12,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import Preview from './Preview';
+import PreviewGroup, { context } from './PreviewGroup';
 
@@ -74,2 +75,12 @@ var ImageInternal = function ImageInternal(_ref) {
 
+  var _React$useContext = React.useContext(context),
+      isPreviewGroup = _React$useContext.isPreviewGroup,
+      previewUrls = _React$useContext.previewUrls,
+      setPreviewUrls = _React$useContext.setPreviewUrls,
+      setCurrent = _React$useContext.setCurrent,
+      setGroupShowPreview = _React$useContext.setShowPreview,
+      setGroupMousePosition = _React$useContext.setMousePosition;
+
+  var groupIndexRef = React.useRef(0);
+
   var onLoad = function onLoad() {
@@ -81,2 +92,7 @@ setStatus('normal');
     setStatus('error');
+
+    if (isPreviewGroup) {
+      previewUrls.splice(groupIndexRef.current);
+      setPreviewUrls(previewUrls);
+    }
   };
@@ -90,9 +106,22 @@
 
-      setMousePosition({
-        x: left,
-        y: top
-      });
+      if (isPreviewGroup) {
+        setCurrent(src);
+        setGroupMousePosition({
+          x: left,
+          y: top
+        });
+      } else {
+        setMousePosition({
+          x: left,
+          y: top
+        });
+      }
     }
 
-    setShowPreview(true);
+    if (isPreviewGroup) {
+      setGroupShowPreview(true);
+    } else {
+      setShowPreview(true);
+    }
+
     if (onClick) onClick(e);
@@ -119,5 +148,18 @@ };
   React.useEffect(function () {
+    if (isPreviewGroup && previewUrls.indexOf(src) < 0) {
+      groupIndexRef.current = previewUrls.length;
+      previewUrls.push(src);
+      setPreviewUrls(previewUrls);
+    }
+  }, [previewUrls]);
+  React.useEffect(function () {
     if (isCustomPlaceholder) {
       setStatus('loading');
     }
+
+    return function () {
+      setPreviewUrls(previewUrls.filter(function (url) {
+        return url !== src;
+      }));
+    };
   }, [src]);
@@ -140,3 +182,3 @@ var wrappperClass = cn(prefixCls, wrapperClassName, _defineProperty({}, "".concat(prefixCls, "-error"), isError));
   };
-  return React.createElement(React.Fragment, null, React.createElement("div", Object.assign({}, otherProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
     className: wrappperClass,
@@ -148,5 +190,5 @@ onClick: preview && !isError ? onPreview : onClick,
     }, wrapperStyle)
-  }), isError && fallback ? React.createElement("img", Object.assign({}, imgCommonProps, {
+  }), isError && fallback ? /*#__PURE__*/React.createElement("img", Object.assign({}, imgCommonProps, {
     src: fallback
-  })) : React.createElement("img", Object.assign({}, imgCommonProps, {
+  })) : /*#__PURE__*/React.createElement("img", Object.assign({}, imgCommonProps, {
     onLoad: onLoad,
@@ -156,6 +198,6 @@ onError: onError,
     ref: getImgRef
-  })), status === 'loading' && React.createElement("div", {
+  })), status === 'loading' && /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",
     className: "".concat(prefixCls, "-placeholder")
-  }, placeholder)), preview && !isError && React.createElement(Preview, {
+  }, placeholder)), !isPreviewGroup && preview && !isError && /*#__PURE__*/React.createElement(Preview, {
     "aria-hidden": !isShowPreview,
@@ -172,3 +214,4 @@ visible: isShowPreview,
 
+ImageInternal.PreviewGroup = PreviewGroup;
 ImageInternal.displayName = 'Image';
 export default ImageInternal;

es/Preview.js

@@ -12,2 +12,4 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import RightOutlined from '@ant-design/icons/RightOutlined';
 import classnames from 'classnames';
@@ -18,3 +20,5 @@ import addEventListener from "rc-util/es/Dom/addEventListener";
 import useFrameSetState from './hooks/useFrameSetState';
+import usePreviewIndex from './hooks/usePreviewIndex';
 import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
+import { context } from './PreviewGroup';
 var useState = React.useState;
@@ -63,2 +67,12 @@ var initialPosition = {
 
+  var _React$useContext = React.useContext(context),
+      previewUrls = _React$useContext.previewUrls;
+
+  var urls = previewUrls && previewUrls.length ? previewUrls : [src];
+
+  var _usePreviewIndex = usePreviewIndex(src, urls),
+      _usePreviewIndex2 = _slicedToArray(_usePreviewIndex, 2),
+      index = _usePreviewIndex2[0],
+      setIndex = _usePreviewIndex2[1];
+
   var onAfterClose = function onAfterClose() {
@@ -99,2 +113,24 @@ setScale(1);
 
+  var onSwitchLeft = function onSwitchLeft(event) {
+    event.preventDefault(); // Without this mask close will abnormal
+
+    event.stopPropagation();
+
+    if (index > 0) {
+      onAfterClose();
+      setIndex(index - 1);
+    }
+  };
+
+  var onSwitchRight = function onSwitchRight(event) {
+    event.preventDefault(); // Without this mask close will abnormal
+
+    event.stopPropagation();
+
+    if (index < urls.length - 1) {
+      onAfterClose();
+      setIndex(index + 1);
+    }
+  };
+
   var wrapClassName = classnames(_defineProperty({}, "".concat(prefixCls, "-moving"), isMoving));
@@ -193,5 +229,9 @@ var toolClassName = "".concat(prefixCls, "-operations-operation");
       if (onTopMouseMoveListener) onTopMouseMoveListener.remove();
+
+      if (!visible) {
+        setIndex(urls.indexOf(src));
+      }
     };
   }, [visible, isMoving]);
-  return React.createElement(Dialog, Object.assign({}, restProps, {
+  return /*#__PURE__*/React.createElement(Dialog, Object.assign({}, restProps, {
     transitionName: "zoom",
@@ -206,3 +246,3 @@ maskTransitionName: "fade",
     wrapClassName: wrapClassName
-  }), React.createElement("ul", {
+  }), /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-operations")
@@ -214,10 +254,10 @@ }, tools.map(function (_ref) {
         disabled = _ref.disabled;
-    return React.createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       className: classnames(toolClassName, _defineProperty({}, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled)),
       onClick: onClick,
       key: type
-    }, React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       className: iconClassName
     }));
-  })), React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-img-wrapper"),
@@ -227,7 +267,7 @@ style: {
     }
-  }, React.createElement("img", {
+  }, /*#__PURE__*/React.createElement("img", {
     onMouseDown: onMouseDown,
     ref: imgRef,
     className: "".concat(prefixCls, "-img"),
-    src: src,
+    src: urls[index],
     alt: alt,
@@ -237,5 +277,11 @@ style: {
     }
-  })));
+  })), urls.length > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), index <= 0)),
+    onClick: onSwitchLeft
+  }, /*#__PURE__*/React.createElement(LeftOutlined, null)) : null, urls.length > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), index >= urls.length - 1)),
+    onClick: onSwitchRight
+  }, /*#__PURE__*/React.createElement(RightOutlined, null)) : null);
 };
 
 export default Preview;

lib/Image.d.ts

 import * as React from 'react';
 import { GetContainer } from 'rc-util/lib/PortalWrapper';
+import PreviewGroup from './PreviewGroup';
 export interface ImagePreviewType {
@@ -23,3 +24,6 @@ visible?: boolean;
 }
-declare const ImageInternal: React.FC<ImageProps>;
+interface CompoundedComponent<P> extends React.FC<P> {
+    PreviewGroup: typeof PreviewGroup;
+}
+declare const ImageInternal: CompoundedComponent<ImageProps>;
 export default ImageInternal;

lib/Image.js

@@ -32,2 +32,4 @@ "use strict";
 
+var _PreviewGroup = _interopRequireWildcard(require("./PreviewGroup"));
+
 var ImageInternal = function ImageInternal(_ref) {
@@ -92,2 +94,12 @@ var src = _ref.src,
 
+  var _React$useContext = React.useContext(_PreviewGroup.context),
+      isPreviewGroup = _React$useContext.isPreviewGroup,
+      previewUrls = _React$useContext.previewUrls,
+      setPreviewUrls = _React$useContext.setPreviewUrls,
+      setCurrent = _React$useContext.setCurrent,
+      setGroupShowPreview = _React$useContext.setShowPreview,
+      setGroupMousePosition = _React$useContext.setMousePosition;
+
+  var groupIndexRef = React.useRef(0);
+
   var onLoad = function onLoad() {
@@ -99,2 +111,7 @@ setStatus('normal');
     setStatus('error');
+
+    if (isPreviewGroup) {
+      previewUrls.splice(groupIndexRef.current);
+      setPreviewUrls(previewUrls);
+    }
   };
@@ -108,9 +125,22 @@
 
-      setMousePosition({
-        x: left,
-        y: top
-      });
+      if (isPreviewGroup) {
+        setCurrent(src);
+        setGroupMousePosition({
+          x: left,
+          y: top
+        });
+      } else {
+        setMousePosition({
+          x: left,
+          y: top
+        });
+      }
     }
 
-    setShowPreview(true);
+    if (isPreviewGroup) {
+      setGroupShowPreview(true);
+    } else {
+      setShowPreview(true);
+    }
+
     if (onClick) onClick(e);
@@ -137,5 +167,18 @@ };
   React.useEffect(function () {
+    if (isPreviewGroup && previewUrls.indexOf(src) < 0) {
+      groupIndexRef.current = previewUrls.length;
+      previewUrls.push(src);
+      setPreviewUrls(previewUrls);
+    }
+  }, [previewUrls]);
+  React.useEffect(function () {
     if (isCustomPlaceholder) {
       setStatus('loading');
     }
+
+    return function () {
+      setPreviewUrls(previewUrls.filter(function (url) {
+        return url !== src;
+      }));
+    };
   }, [src]);
@@ -158,3 +201,3 @@ var wrappperClass = (0, _classnames.default)(prefixCls, wrapperClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-error"), isError));
   };
-  return React.createElement(React.Fragment, null, React.createElement("div", Object.assign({}, otherProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
     className: wrappperClass,
@@ -166,5 +209,5 @@ onClick: preview && !isError ? onPreview : onClick,
     }, wrapperStyle)
-  }), isError && fallback ? React.createElement("img", Object.assign({}, imgCommonProps, {
+  }), isError && fallback ? /*#__PURE__*/React.createElement("img", Object.assign({}, imgCommonProps, {
     src: fallback
-  })) : React.createElement("img", Object.assign({}, imgCommonProps, {
+  })) : /*#__PURE__*/React.createElement("img", Object.assign({}, imgCommonProps, {
     onLoad: onLoad,
@@ -174,6 +217,6 @@ onError: onError,
     ref: getImgRef
-  })), status === 'loading' && React.createElement("div", {
+  })), status === 'loading' && /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",
     className: "".concat(prefixCls, "-placeholder")
-  }, placeholder)), preview && !isError && React.createElement(_Preview.default, {
+  }, placeholder)), !isPreviewGroup && preview && !isError && /*#__PURE__*/React.createElement(_Preview.default, {
     "aria-hidden": !isShowPreview,
@@ -190,4 +233,5 @@ visible: isShowPreview,
 
+ImageInternal.PreviewGroup = _PreviewGroup.default;
 ImageInternal.displayName = 'Image';
 var _default = ImageInternal;
 exports.default = _default;

lib/Preview.js

@@ -34,4 +34,8 @@ "use strict";
 
-var _classnames3 = _interopRequireDefault(require("classnames"));
+var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
 
+var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
+
+var _classnames5 = _interopRequireDefault(require("classnames"));
+
 var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
@@ -45,4 +49,8 @@
 
+var _usePreviewIndex3 = _interopRequireDefault(require("./hooks/usePreviewIndex"));
+
 var _getFixScaleEleTransPosition = _interopRequireDefault(require("./getFixScaleEleTransPosition"));
 
+var _PreviewGroup = require("./PreviewGroup");
+
 var useState = React.useState;
@@ -91,2 +99,12 @@ var initialPosition = {
 
+  var _React$useContext = React.useContext(_PreviewGroup.context),
+      previewUrls = _React$useContext.previewUrls;
+
+  var urls = previewUrls && previewUrls.length ? previewUrls : [src];
+
+  var _usePreviewIndex = (0, _usePreviewIndex3.default)(src, urls),
+      _usePreviewIndex2 = (0, _slicedToArray2.default)(_usePreviewIndex, 2),
+      index = _usePreviewIndex2[0],
+      setIndex = _usePreviewIndex2[1];
+
   var onAfterClose = function onAfterClose() {
@@ -127,3 +145,25 @@ setScale(1);
 
-  var wrapClassName = (0, _classnames3.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-moving"), isMoving));
+  var onSwitchLeft = function onSwitchLeft(event) {
+    event.preventDefault(); // Without this mask close will abnormal
+
+    event.stopPropagation();
+
+    if (index > 0) {
+      onAfterClose();
+      setIndex(index - 1);
+    }
+  };
+
+  var onSwitchRight = function onSwitchRight(event) {
+    event.preventDefault(); // Without this mask close will abnormal
+
+    event.stopPropagation();
+
+    if (index < urls.length - 1) {
+      onAfterClose();
+      setIndex(index + 1);
+    }
+  };
+
+  var wrapClassName = (0, _classnames5.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-moving"), isMoving));
   var toolClassName = "".concat(prefixCls, "-operations-operation");
@@ -221,5 +261,9 @@ var iconClassName = "".concat(prefixCls, "-operations-icon");
       if (onTopMouseMoveListener) onTopMouseMoveListener.remove();
+
+      if (!visible) {
+        setIndex(urls.indexOf(src));
+      }
     };
   }, [visible, isMoving]);
-  return React.createElement(_rcDialog.default, Object.assign({}, restProps, {
+  return /*#__PURE__*/React.createElement(_rcDialog.default, Object.assign({}, restProps, {
     transitionName: "zoom",
@@ -234,3 +278,3 @@ maskTransitionName: "fade",
     wrapClassName: wrapClassName
-  }), React.createElement("ul", {
+  }), /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-operations")
@@ -242,10 +286,10 @@ }, tools.map(function (_ref) {
         disabled = _ref.disabled;
-    return React.createElement("li", {
-      className: (0, _classnames3.default)(toolClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled)),
+    return /*#__PURE__*/React.createElement("li", {
+      className: (0, _classnames5.default)(toolClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled)),
       onClick: onClick,
       key: type
-    }, React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       className: iconClassName
     }));
-  })), React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-img-wrapper"),
@@ -255,7 +299,7 @@ style: {
     }
-  }, React.createElement("img", {
+  }, /*#__PURE__*/React.createElement("img", {
     onMouseDown: onMouseDown,
     ref: imgRef,
     className: "".concat(prefixCls, "-img"),
-    src: src,
+    src: urls[index],
     alt: alt,
@@ -265,3 +309,9 @@ style: {
     }
-  })));
+  })), urls.length > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), index <= 0)),
+    onClick: onSwitchLeft
+  }, /*#__PURE__*/React.createElement(_LeftOutlined.default, null)) : null, urls.length > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), index >= urls.length - 1)),
+    onClick: onSwitchRight
+  }, /*#__PURE__*/React.createElement(_RightOutlined.default, null)) : null);
 };
@@ -268,0 +318,0 @@

package.json

 {
   "name": "rc-image",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "React easy to use image component",
@@ -66,4 +66,4 @@ "keywords": [
     "react-dom": "^16.13.1",
-    "typescript": "^4.0.2"
+    "typescript": "^3.9.7"
   }
 }

README.md

@@ -35,2 +35,3 @@ # rc-image
 - [x] Fallback
+- [x] Multiple Preview
 
@@ -68,2 +69,17 @@ ### Keyboard
 
+## Image.PreviewGroup
+
+preview the merged src
+
+```jsx
+const Image = require('rc-image');
+
+ReactDOM.render(
+  <Image.PreviewGroup>
+    <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+    <Image src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" />
+  </Image.PreviewGroup>
+), document.getElementById('root'));
+```
+
 ## Example
@@ -70,0 +86,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

Improved metrics

Total package byte prevSize

68270

increased by31.68%

Number of package files

32

increased by33.33%

Lines of code

1678

increased by32.96%

Number of lines in readme file

102

increased by18.6%

No dependency changes