feat: reset preview prop to Dialog (#76)

* feat: reset preview prop to Dialog

* code style

* add omit prop

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<ImageProps> = ({
     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<ImageProps> = ({
           alt={alt}
           getContainer={getPreviewContainer}
           icons={icons}
+          {...dialogProps}
         />
       )}
     </>

src/Preview.tsx

@@ -234,7 +234,6 @@ const Preview: React.FC<PreviewProps> = props => {
 
   return (
     <Dialog
-      {...restProps}
       transitionName="zoom"
       maskTransitionName="fade"
       closable={false}
@@ -244,6 +243,7 @@ const Preview: React.FC<PreviewProps> = props => {
       afterClose={onAfterClose}
       visible={visible}
       wrapClassName={wrapClassName}
+      {...restProps}
     >
       <ul className={`${prefixCls}-operations`}>
         {tools.map(({ icon, onClick, type, disabled }) => (

src/PreviewGroup.tsx

@@ -5,7 +5,7 @@ import { ImagePreviewType } from './Image';
 import Preview, { PreviewProps } from './Preview';
 
 export interface PreviewGroupPreview
-  extends Pick<ImagePreviewType, 'visible' | 'onVisibleChange' | 'getContainer'> {
+  extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName'> {
   /**
    * If Preview the show img index
    * @default 0
@@ -54,6 +54,7 @@ const Group: React.FC<GroupConsumerProps> = ({
     onVisibleChange: onPreviewVisibleChange = undefined,
     getContainer = undefined,
     current: currentIndex = 0,
+    ...dialogProps
   } = typeof preview === 'object' ? preview : {};
   const [previewUrls, setPreviewUrls] = useState<Map<number, string>>(new Map());
   const [current, setCurrent] = useState<number>();
@@ -127,6 +128,7 @@ const Group: React.FC<GroupConsumerProps> = ({
         src={previewUrls.get(current)}
         icons={icons}
         getContainer={getContainer}
+        {...dialogProps}
       />
     </Provider>
   );

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(
+      <Image
+        src={src}
+        preview={{
+          visible: true,
+          transitionName: 'abc',
+          maskTransitionName: 'def',
+        }}
+      />,
+    );
+
+    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(
+      <Image.PreviewGroup
+        preview={{ visible: true, transitionName: 'abc', maskTransitionName: 'def' }}
+      >
+        <Image src={src} />
+      </Image.PreviewGroup>,
+    );
+
+    expect(wrapper.find('Preview').prop('transitionName')).toBe('abc');
+    expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('def');
+  });
 });