Merge b3a8f80 into 9a79995

react-component · Jul 26, 2022 · f75e104 · f75e104
2 parents 9a79995 + b3a8f80
commit f75e104
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/Image.tsx b/src/Image.tsx
@@ -252,7 +252,14 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
 
         {/* Preview Click Mask */}
         {previewMask && canPreview && (
-          <div className={cn(`${prefixCls}-mask`, maskClassName)}>{previewMask}</div>
+          <div
+            className={cn(`${prefixCls}-mask`, maskClassName)}
+            style={{
+              display: imgCommonProps.style?.display === 'none' ? 'none' : undefined,
+            }}
+          >
+            {previewMask}
+          </div>
         )}
       </div>
       {!isPreviewGroup && canPreview && (

diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx
@@ -42,7 +42,8 @@ describe('Basic', () => {
 
     expect(onClickMock).toHaveBeenCalledTimes(1);
   });
-  test('className and style props should work on img element', () => {
+
+  it('className and style props should work on img element', () => {
     const { container } = render(
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -56,7 +57,8 @@ describe('Basic', () => {
     expect(img).toHaveClass('img');
     expect(img).toHaveStyle({ objectFit: 'cover' });
   });
-  test('wrapperClassName and wrapperStyle should work on image wrapper element', () => {
+
+  it('wrapperClassName and wrapperStyle should work on image wrapper element', () => {
     const { container } = render(
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -70,4 +72,19 @@ describe('Basic', () => {
     expect(wrapperElement).toHaveClass('wrapper');
     expect(wrapperElement).toHaveStyle({ objectFit: 'cover' });
   });
+
+  // https://github.com/ant-design/ant-design/issues/36680
+  it('preview mask should be hidden when image has style { display: "none" }', () => {
+    const { container } = render(
+      <Image
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        style={{
+          display: 'none',
+        }}
+        preview={{ mask: 'Click to Preview' }}
+      />,
+    );
+    const maskElement = container.querySelector('.rc-image-mask');
+    expect(maskElement).toHaveStyle({ display: 'none' });
+  });
 });