From e3967a729ad8ad86aca0e42220a2940c6b8360cf Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Tue, 13 Oct 2020 09:57:37 +0800 Subject: [PATCH 1/4] improve: preview props --- README.md | 2 +- src/Image.tsx | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a01223b7..5fe93468 100644 --- 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: HTMLElement | (() => HTMLElement) } | 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 index 4505c3f4..e91d1485 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -8,6 +8,7 @@ import Preview from './Preview'; export interface ImagePreviewType { visible?: boolean; onVisibleChange?: (value: boolean, prevValue: boolean) => void; + getContainer?: HTMLElement | (() => HTMLElement); } export interface ImageProps @@ -25,7 +26,6 @@ export interface ImageProps */ onPreviewClose?: (value: boolean, prevValue: boolean) => void; onClick?: (e: React.MouseEvent) => void; - getPopupContainer?: () => HTMLElement; } type ImageStatus = 'normal' | 'error' | 'loading'; @@ -34,7 +34,6 @@ const ImageInternal: React.FC = ({ src, alt, onPreviewClose: onInitialPreviewClose, - getPopupContainer, prefixCls = 'rc-image', previewPrefixCls = `${prefixCls}-preview`, placeholder, @@ -57,7 +56,7 @@ const ImageInternal: React.FC = ({ ...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 +156,7 @@ const ImageInternal: React.FC = ({ mousePosition={mousePosition} src={mergedSrc} alt={alt} - getContainer={getPopupContainer} + getContainer={getContainer} /> )} From a9c74a72e842d0896f711f6c88a07a64cdb7caef Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Tue, 13 Oct 2020 09:58:59 +0800 Subject: [PATCH 2/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5fe93468..e93ff4e6 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ ReactDOM.render( | Name | Type | Default | Description | | --- | --- | --- | --- | -| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: HTMLElement | (() => HTMLElement) } | true | Whether to show preview | +| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: HTMLElement \| (() => HTMLElement) } | 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 | From 1da980808f1c12e6c91e257522ffa4291f60ca2f Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Wed, 14 Oct 2020 17:32:39 +0800 Subject: [PATCH 3/4] ts --- README.md | 2 +- src/Image.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e93ff4e6..a3f3dbfd 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ ReactDOM.render( | Name | Type | Default | Description | | --- | --- | --- | --- | -| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: HTMLElement \| (() => HTMLElement) } | 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 index e91d1485..24cb2ecf 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -3,12 +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?: HTMLElement | (() => HTMLElement); + getContainer?: GetContainer | false; } export interface ImageProps From 20abbbc59f3215fe9ce8e5566087b6e20b5461d0 Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Wed, 14 Oct 2020 17:48:12 +0800 Subject: [PATCH 4/4] fix test --- tests/__snapshots__/controlled.test.tsx.snap | 106 +++++++++++++++++++ tests/controlled.test.tsx | 2 +- 2 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 tests/__snapshots__/controlled.test.tsx.snap diff --git a/tests/__snapshots__/controlled.test.tsx.snap b/tests/__snapshots__/controlled.test.tsx.snap new file mode 100644 index 00000000..ee025635 --- /dev/null +++ b/tests/__snapshots__/controlled.test.tsx.snap @@ -0,0 +1,106 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Controlled With previewVisible 1`] = ` +
+