improve: preview props (#34)

* improve: preview props * Update README.md * ts * fix test
react-component · Oct 14, 2020 · ce47c04 · ce47c04 · vercel · Oct 14, 2020
1 parent 2a164d7
commit ce47c04
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -58,7 +58,7 @@ ReactDOM.render(
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue) } | true | Whether to show preview |
+| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: string \| HTMLElement \| (() => HTMLElement) \| false } | true | Whether to show preview |
 | prefixCls | string | rc-image | Classname prefix |
 | placeholder | boolean \| ReactElement | - | if `true` will set default placeholder or use `ReactElement` set customize placeholder |
 | fallback | string | - | Load failed src |

diff --git a/src/Image.tsx b/src/Image.tsx
@@ -3,11 +3,13 @@ import { useState } from 'react';
 import cn from 'classnames';
 import { getOffset } from 'rc-util/lib/Dom/css';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { GetContainer } from 'rc-util/lib/PortalWrapper';
 import Preview from './Preview';
 
 export interface ImagePreviewType {
   visible?: boolean;
   onVisibleChange?: (value: boolean, prevValue: boolean) => void;
+  getContainer?: GetContainer | false;
 }
 
 export interface ImageProps
@@ -25,7 +27,6 @@ export interface ImageProps
    */
   onPreviewClose?: (value: boolean, prevValue: boolean) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-  getPopupContainer?: () => HTMLElement;
 }
 
 type ImageStatus = 'normal' | 'error' | 'loading';
@@ -34,7 +35,6 @@ const ImageInternal: React.FC<ImageProps> = ({
   src,
   alt,
   onPreviewClose: onInitialPreviewClose,
-  getPopupContainer,
   prefixCls = 'rc-image',
   previewPrefixCls = `${prefixCls}-preview`,
   placeholder,
@@ -57,7 +57,7 @@ const ImageInternal: React.FC<ImageProps> = ({
   ...otherProps
 }) => {
   const isCustomPlaceholder = placeholder && placeholder !== true;
-  const { visible = undefined, onVisibleChange = onInitialPreviewClose } =
+  const { visible = undefined, onVisibleChange = onInitialPreviewClose, getContainer = undefined } =
     typeof preview === 'object' ? preview : {};
   const isControlled = visible !== undefined;
   const [isShowPreview, setShowPreview] = useMergedState(!!visible, {
@@ -157,7 +157,7 @@ const ImageInternal: React.FC<ImageProps> = ({
           mousePosition={mousePosition}
           src={mergedSrc}
           alt={alt}
-          getContainer={getPopupContainer}
+          getContainer={getContainer}
         />
       )}
     </>

diff --git a/tests/__snapshots__/controlled.test.tsx.snap b/tests/__snapshots__/controlled.test.tsx.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Controlled With previewVisible 1`] = `
+<div
+  className="rc-image-preview"
+  onClick={[Function]}
+  role="document"
+  style={Object {}}
+>
+  <div
+    aria-hidden="true"
+    style={
+      Object {
+        "height": 0,
+        "outline": "none",
+        "overflow": "hidden",
+        "width": 0,
+      }
+    }
+    tabIndex={0}
+  />
+  <div
+    className="rc-image-preview-content"
+  >
+    <div
+      className="rc-image-preview-body"
+    >
+      <ul
+        className="rc-image-preview-operations"
+      >
+        <li
+          className="rc-image-preview-operations-operation"
+          onClick={[Function]}
+        >
+          <ForwardRef(CloseOutlined)
+            className="rc-image-preview-operations-icon"
+          />
+        </li>
+        <li
+          className="rc-image-preview-operations-operation"
+          onClick={[Function]}
+        >
+          <ForwardRef(ZoomInOutlined)
+            className="rc-image-preview-operations-icon"
+          />
+        </li>
+        <li
+          className="rc-image-preview-operations-operation rc-image-preview-operations-operation-disabled"
+          onClick={[Function]}
+        >
+          <ForwardRef(ZoomOutOutlined)
+            className="rc-image-preview-operations-icon"
+          />
+        </li>
+        <li
+          className="rc-image-preview-operations-operation"
+          onClick={[Function]}
+        >
+          <ForwardRef(RotateRightOutlined)
+            className="rc-image-preview-operations-icon"
+          />
+        </li>
+        <li
+          className="rc-image-preview-operations-operation"
+          onClick={[Function]}
+        >
+          <ForwardRef(RotateLeftOutlined)
+            className="rc-image-preview-operations-icon"
+          />
+        </li>
+      </ul>
+      <div
+        className="rc-image-preview-img-wrapper"
+        style={
+          Object {
+            "transform": "translate3d(0px, 0px, 0)",
+          }
+        }
+      >
+        <img
+          className="rc-image-preview-img"
+          onMouseDown={[Function]}
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          style={
+            Object {
+              "transform": "scale3d(1, 1, 1) rotate(0deg)",
+            }
+          }
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    aria-hidden="true"
+    style={
+      Object {
+        "height": 0,
+        "outline": "none",
+        "overflow": "hidden",
+        "width": 0,
+      }
+    }
+    tabIndex={0}
+  />
+</div>
+`;
diff --git a/tests/controlled.test.tsx b/tests/controlled.test.tsx
@@ -27,6 +27,6 @@ describe('Controlled', () => {
       wrapper.update();
     });
 
-    expect(wrapper.find('.rc-image-preview').get(0)).toBeFalsy();
+    expect(wrapper.find('.rc-image-preview').get(0)).toMatchSnapshot();
   });
 });