diff --git a/src/Image.tsx b/src/Image.tsx index e17364dd..8b647a42 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -6,8 +6,13 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState'; import { GetContainer } from 'rc-util/lib/PortalWrapper'; import Preview, { PreviewProps } from './Preview'; import PreviewGroup, { context } from './PreviewGroup'; +import { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes'; -export interface ImagePreviewType { +export interface ImagePreviewType + extends Omit< + IDialogPropTypes, + 'mask' | 'visible' | 'closable' | 'prefixCls' | 'onClose' | 'afterClose' | 'wrapClassName' + > { src?: string; visible?: boolean; onVisibleChange?: (value: boolean, prevValue: boolean) => void; @@ -81,6 +86,7 @@ const ImageInternal: CompoundedComponent = ({ mask: previewMask, maskClassName, icons, + ...dialogProps }: ImagePreviewType = typeof preview === 'object' ? preview : {}; const src = previewSrc ?? imgSrc; const isControlled = previewVisible !== undefined; @@ -255,6 +261,7 @@ const ImageInternal: CompoundedComponent = ({ alt={alt} getContainer={getPreviewContainer} icons={icons} + {...dialogProps} /> )} diff --git a/src/Preview.tsx b/src/Preview.tsx index dbd18892..986f320f 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -234,7 +234,6 @@ const Preview: React.FC = props => { return ( = props => { afterClose={onAfterClose} visible={visible} wrapClassName={wrapClassName} + {...restProps} >
    {tools.map(({ icon, onClick, type, disabled }) => ( diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx index 842c4531..f09f3f08 100644 --- a/src/PreviewGroup.tsx +++ b/src/PreviewGroup.tsx @@ -5,7 +5,7 @@ import { ImagePreviewType } from './Image'; import Preview, { PreviewProps } from './Preview'; export interface PreviewGroupPreview - extends Pick { + extends Omit { /** * If Preview the show img index * @default 0 @@ -54,6 +54,7 @@ const Group: React.FC = ({ onVisibleChange: onPreviewVisibleChange = undefined, getContainer = undefined, current: currentIndex = 0, + ...dialogProps } = typeof preview === 'object' ? preview : {}; const [previewUrls, setPreviewUrls] = useState>(new Map()); const [current, setCurrent] = useState(); @@ -127,6 +128,7 @@ const Group: React.FC = ({ src={previewUrls.get(current)} icons={icons} getContainer={getContainer} + {...dialogProps} /> ); diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 4cfac160..80ad27b9 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -479,4 +479,35 @@ describe('Preview', () => { expect(wrapper.find('.rc-image-preview').get(0)).toBeTruthy(); expect(wrapper.find('.rc-image-preview-img').prop('src')).toBe(previewSrc); }); + + it('Customize preview props', () => { + const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'; + const wrapper = mount( + , + ); + + expect(wrapper.find('Preview').prop('transitionName')).toBe('abc'); + expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('def'); + }); + + it('Customize Group preview props', () => { + const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'; + const wrapper = mount( + + + , + ); + + expect(wrapper.find('Preview').prop('transitionName')).toBe('abc'); + expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('def'); + }); });