fix: image prefix (#29394)

* fix: image

* fix: image group

* fix: image package

* chore: test

components/image/PreviewGroup.tsx

@@ -9,6 +9,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
 import { ConfigContext } from '../config-provider';
+import { getTransitionName } from '../_util/motion';
 
 export const icons = {
   rotateLeft: <RotateLeftOutlined />,
@@ -22,11 +23,34 @@ export const icons = {
 
 const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
   previewPrefixCls: customizePrefixCls,
+  preview,
   ...props
 }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('image-preview', customizePrefixCls);
-  return <RcImage.PreviewGroup previewPrefixCls={prefixCls} icons={icons} {...props} />;
+  const rootPrefixCls = getPrefixCls();
+
+  const mergedPreview = React.useMemo(() => {
+    if (preview === false) {
+      return preview;
+    }
+    const _preview = typeof preview === 'object' ? preview : {};
+
+    return {
+      ..._preview,
+      transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
+      maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
+    };
+  }, [preview]);
+
+  return (
+    <RcImage.PreviewGroup
+      preview={mergedPreview}
+      previewPrefixCls={prefixCls}
+      icons={icons}
+      {...props}
+    />
+  );
 };
 
 export default InternalPreviewGroup;

components/image/__tests__/index.test.js

@@ -1,8 +1,51 @@
+import React from 'react';
+import { mount } from 'enzyme';
 import Image from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
+const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+
 describe('Image', () => {
   mountTest(Image);
   rtlTest(Image);
+  it('Default preview props', () => {
+    const wrapper = mount(<Image src={src} preview={{ visible: true }} />);
+
+    expect(wrapper.find('Preview').prop('transitionName')).toBe('ant-zoom');
+    expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('ant-fade');
+  });
+  it('Default Group preview props', () => {
+    const wrapper = mount(
+      <Image.PreviewGroup preview={{ visible: true }}>
+        <Image src={src} />
+      </Image.PreviewGroup>,
+    );
+
+    expect(wrapper.find('Preview').prop('transitionName')).toBe('ant-zoom');
+    expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('ant-fade');
+  });
+  it('Customize preview props', () => {
+    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 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');
+  });
 });

components/image/index.tsx

@@ -5,6 +5,7 @@ import RcImage, { ImageProps } from 'rc-image';
 import defaultLocale from '../locale/en_US';
 import PreviewGroup, { icons } from './PreviewGroup';
 import { ConfigContext } from '../config-provider';
+import { getTransitionName } from '../_util/motion';
 
 export interface CompositionImage<P> extends React.FC<P> {
   PreviewGroup: typeof PreviewGroup;
@@ -17,6 +18,7 @@ const Image: CompositionImage<ImageProps> = ({
 }) => {
   const { getPrefixCls } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('image', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
 
   const { locale: contextLocale = defaultLocale } = useContext(ConfigContext);
   const imageLocale = contextLocale.Image || defaultLocale.Image;
@@ -25,6 +27,7 @@ const Image: CompositionImage<ImageProps> = ({
     if (preview === false) {
       return preview;
     }
+    const _preview = typeof preview === 'object' ? preview : {};
 
     return {
       mask: (
@@ -34,7 +37,9 @@ const Image: CompositionImage<ImageProps> = ({
         </div>
       ),
       icons,
-      ...(typeof preview === 'object' ? preview : null),
+      ..._preview,
+      transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
+      maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
     };
   }, [preview, imageLocale]);
 

package.json

@@ -125,7 +125,7 @@
     "rc-drawer": "~4.3.0",
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.19.0",
-    "rc-image": "~5.2.0",
+    "rc-image": "~5.2.3",
     "rc-input-number": "~6.2.0",
     "rc-mentions": "~1.5.0",
     "rc-menu": "~8.10.0",