rc-image - npm Package Compare versions

Comparing version 4.2.0 to 4.3.0

es/Image.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
     getContainer?: GetContainer | false;
+    mask?: React.ReactNode;
 }
@@ -10,0 +11,0 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {

es/Image.js

@@ -7,3 +7,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import cn from 'classnames';
@@ -47,13 +47,14 @@ import { getOffset } from "rc-util/es/Dom/css";
       _ref2$visible = _ref2.visible,
-      visible = _ref2$visible === void 0 ? undefined : _ref2$visible,
+      previewVisible = _ref2$visible === void 0 ? undefined : _ref2$visible,
       _ref2$onVisibleChange = _ref2.onVisibleChange,
-      onVisibleChange = _ref2$onVisibleChange === void 0 ? onInitialPreviewClose : _ref2$onVisibleChange,
+      onPreviewVisibleChange = _ref2$onVisibleChange === void 0 ? onInitialPreviewClose : _ref2$onVisibleChange,
       _ref2$getContainer = _ref2.getContainer,
-      getContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer;
+      getPreviewContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer,
+      previewMask = _ref2.mask;
 
-  var isControlled = visible !== undefined;
+  var isControlled = previewVisible !== undefined;
 
-  var _useMergedState = useMergedState(!!visible, {
-    value: visible,
-    onChange: onVisibleChange
+  var _useMergedState = useMergedState(!!previewVisible, {
+    value: previewVisible,
+    onChange: onPreviewVisibleChange
   }),
@@ -145,3 +146,3 @@ _useMergedState2 = _slicedToArray(_useMergedState, 2),
 
-  React.useEffect(function () {
+  useEffect(function () {
     if (isPreviewGroup && previewUrls.indexOf(src) < 0) {
@@ -153,3 +154,3 @@ groupIndexRef.current = previewUrls.length;
   }, [previewUrls]);
-  React.useEffect(function () {
+  useEffect(function () {
     if (isCustomPlaceholder) {
@@ -165,3 +166,3 @@ setStatus('loading');
   }, [src]);
-  var wrappperClass = cn(prefixCls, wrapperClassName, _defineProperty({}, "".concat(prefixCls, "-error"), isError));
+  var wrapperClass = cn(prefixCls, wrapperClassName, _defineProperty({}, "".concat(prefixCls, "-error"), isError));
   var mergedSrc = isError && fallback ? fallback : src;
@@ -182,4 +183,5 @@ var imgCommonProps = {
   };
+  var canPreview = preview && !isError;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
-    className: wrappperClass,
+    className: wrapperClass,
     onClick: preview && !isError ? onPreview : onClick,
@@ -200,3 +202,5 @@ style: _objectSpread({
     className: "".concat(prefixCls, "-placeholder")
-  }, placeholder)), !isPreviewGroup && preview && !isError && /*#__PURE__*/React.createElement(Preview, {
+  }, placeholder), previewMask && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-mask")
+  }, previewMask)), !isPreviewGroup && canPreview && /*#__PURE__*/React.createElement(Preview, {
     "aria-hidden": !isShowPreview,
@@ -209,3 +213,3 @@ visible: isShowPreview,
     alt: alt,
-    getContainer: getContainer
+    getContainer: getPreviewContainer
   }));
@@ -212,0 +216,0 @@ };

es/PreviewGroup.js

 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
+import { useState } from 'react';
 import Preview from './Preview';
@@ -26,21 +27,21 @@ export var context = /*#__PURE__*/React.createContext({
 
-  var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      previewUrls = _React$useState2[0],
-      setPreviewUrls = _React$useState2[1];
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      previewUrls = _useState2[0],
+      setPreviewUrls = _useState2[1];
 
-  var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      current = _React$useState4[0],
-      setCurrent = _React$useState4[1];
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      current = _useState4[0],
+      setCurrent = _useState4[1];
 
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isShowPreview = _React$useState6[0],
-      setShowPreview = _React$useState6[1];
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isShowPreview = _useState6[0],
+      setShowPreview = _useState6[1];
 
-  var _React$useState7 = React.useState(null),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      mousePosition = _React$useState8[0],
-      setMousePosition = _React$useState8[1];
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      mousePosition = _useState8[0],
+      setMousePosition = _useState8[1];
 
@@ -47,0 +48,0 @@ var onPreviewClose = function onPreviewClose(e) {

lib/Image.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
     getContainer?: GetContainer | false;
+    mask?: React.ReactNode;
 }
@@ -10,0 +11,0 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {

lib/Image.js

@@ -65,13 +65,14 @@ "use strict";
       _ref2$visible = _ref2.visible,
-      visible = _ref2$visible === void 0 ? undefined : _ref2$visible,
+      previewVisible = _ref2$visible === void 0 ? undefined : _ref2$visible,
       _ref2$onVisibleChange = _ref2.onVisibleChange,
-      onVisibleChange = _ref2$onVisibleChange === void 0 ? onInitialPreviewClose : _ref2$onVisibleChange,
+      onPreviewVisibleChange = _ref2$onVisibleChange === void 0 ? onInitialPreviewClose : _ref2$onVisibleChange,
       _ref2$getContainer = _ref2.getContainer,
-      getContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer;
+      getPreviewContainer = _ref2$getContainer === void 0 ? undefined : _ref2$getContainer,
+      previewMask = _ref2.mask;
 
-  var isControlled = visible !== undefined;
+  var isControlled = previewVisible !== undefined;
 
-  var _useMergedState = (0, _useMergedState3.default)(!!visible, {
-    value: visible,
-    onChange: onVisibleChange
+  var _useMergedState = (0, _useMergedState3.default)(!!previewVisible, {
+    value: previewVisible,
+    onChange: onPreviewVisibleChange
   }),
@@ -163,3 +164,3 @@ _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
 
-  React.useEffect(function () {
+  (0, React.useEffect)(function () {
     if (isPreviewGroup && previewUrls.indexOf(src) < 0) {
@@ -171,3 +172,3 @@ groupIndexRef.current = previewUrls.length;
   }, [previewUrls]);
-  React.useEffect(function () {
+  (0, React.useEffect)(function () {
     if (isCustomPlaceholder) {
@@ -183,3 +184,3 @@ setStatus('loading');
   }, [src]);
-  var wrappperClass = (0, _classnames.default)(prefixCls, wrapperClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-error"), isError));
+  var wrapperClass = (0, _classnames.default)(prefixCls, wrapperClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-error"), isError));
   var mergedSrc = isError && fallback ? fallback : src;
@@ -200,4 +201,5 @@ var imgCommonProps = {
   };
+  var canPreview = preview && !isError;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
-    className: wrappperClass,
+    className: wrapperClass,
     onClick: preview && !isError ? onPreview : onClick,
@@ -218,3 +220,5 @@ style: (0, _objectSpread2.default)({
     className: "".concat(prefixCls, "-placeholder")
-  }, placeholder)), !isPreviewGroup && preview && !isError && /*#__PURE__*/React.createElement(_Preview.default, {
+  }, placeholder), previewMask && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-mask")
+  }, previewMask)), !isPreviewGroup && canPreview && /*#__PURE__*/React.createElement(_Preview.default, {
     "aria-hidden": !isShowPreview,
@@ -227,3 +231,3 @@ visible: isShowPreview,
     alt: alt,
-    getContainer: getContainer
+    getContainer: getPreviewContainer
   }));
@@ -230,0 +234,0 @@ };

lib/PreviewGroup.js

@@ -41,21 +41,21 @@ "use strict";
 
-  var _React$useState = React.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      previewUrls = _React$useState2[0],
-      setPreviewUrls = _React$useState2[1];
+  var _useState = (0, React.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      previewUrls = _useState2[0],
+      setPreviewUrls = _useState2[1];
 
-  var _React$useState3 = React.useState(),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      current = _React$useState4[0],
-      setCurrent = _React$useState4[1];
+  var _useState3 = (0, React.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      current = _useState4[0],
+      setCurrent = _useState4[1];
 
-  var _React$useState5 = React.useState(false),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      isShowPreview = _React$useState6[0],
-      setShowPreview = _React$useState6[1];
+  var _useState5 = (0, React.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isShowPreview = _useState6[0],
+      setShowPreview = _useState6[1];
 
-  var _React$useState7 = React.useState(null),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      mousePosition = _React$useState8[0],
-      setMousePosition = _React$useState8[1];
+  var _useState7 = (0, React.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      mousePosition = _useState8[0],
+      setMousePosition = _useState8[1];
 
@@ -62,0 +62,0 @@ var onPreviewClose = function onPreviewClose(e) {

package.json

 {
   "name": "rc-image",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "React easy to use image component",
@@ -63,3 +63,3 @@ "keywords": [
     "less": "^3.12.2",
-    "np": "^6.3.2",
+    "np": "^7.0.0",
     "react": "^16.13.1",
@@ -66,0 +66,0 @@ "react-dom": "^16.13.1",

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

68918

increased by0.95%

Lines of code

1707

increased by1.73%

No dependency changes