feat: CP support Image closeIcon (#47252)

* feat: CP support Image closeIcon * type: update type * type: update type * fix: fix
ant-design · Feb 1, 2024 · a206593 · a206593
1 parent cbf2242
commit a206593
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 15 deletions.
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
@@ -455,19 +455,25 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
-  it('Should Image className & style works', () => {
-    const { container } = render(
+  it('Should Image className & style & closeIcon works', () => {
+    const { container, baseElement } = render(
       <ConfigProvider
-        image={{ className: 'config-provider-image', style: { backgroundColor: 'red' } }}
+        image={{
+          className: 'config-provider-image',
+          style: { backgroundColor: 'red' },
+          preview: { closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span> },
+        }}
       >
         <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
       </ConfigProvider>,
     );
-    const element = container
-      ?.querySelector<HTMLDivElement>('.ant-image')
-      ?.querySelector<HTMLImageElement>('img');
+    const element = container?.querySelector<HTMLImageElement>('.ant-image img');
     expect(element).toHaveClass('config-provider-image');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
+    fireEvent.click(container.querySelector<HTMLDivElement>('.ant-image')!);
+    expect(
+      baseElement.querySelector<HTMLSpanElement>('.ant-image-preview-close .cp-test-closeIcon'),
+    ).toBeTruthy();
   });
 
   it('Should Input className & style & classNames & styles works', () => {

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -77,6 +77,10 @@ export interface TableConfig extends ComponentStyleConfig {
   };
 }
 
+export interface ImageConfig extends ComponentStyleConfig {
+  preview?: Partial<Record<'closeIcon', React.ReactNode>>;
+}
+
 export type TourConfig = Pick<TourProps, 'closeIcon'>;
 
 export type ModalConfig = ComponentStyleConfig &
@@ -145,7 +149,7 @@ export interface ConfigConsumerProps {
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
   statistic?: ComponentStyleConfig;
-  image?: ComponentStyleConfig;
+  image?: ImageConfig;
   layout?: ComponentStyleConfig;
   list?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -123,7 +123,7 @@ const {
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
-| image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| image | Set Image common props | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } } | - | 5.7.0, closeIcon: 5.14.0 |
 | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 |
 | layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | list | Set List common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -31,6 +31,7 @@ import type {
   DirectionType,
   DrawerConfig,
   FlexConfig,
+  ImageConfig,
   ModalConfig,
   NotificationConfig,
   PopupOverflow,
@@ -149,7 +150,7 @@ export interface ConfigProviderProps {
   segmented?: ComponentStyleConfig;
   statistic?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
-  image?: ComponentStyleConfig;
+  image?: ImageConfig;
   layout?: ComponentStyleConfig;
   list?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -125,7 +125,7 @@ const {
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
-| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } } | - | 5.7.0, closeIcon: 5.14.0 |
 | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | list | 设置 List 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx
@@ -32,7 +32,7 @@ export const icons = {
 const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
   previewPrefixCls: customizePrefixCls,
   preview,
-  ...props
+  ...otherProps
 }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('image', customizePrefixCls);
@@ -73,7 +73,7 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
       preview={mergedPreview}
       previewPrefixCls={previewPrefixCls}
       icons={icons}
-      {...props}
+      {...otherProps}
     />,
   );
 };

diff --git a/components/image/index.tsx b/components/image/index.tsx
@@ -7,10 +7,10 @@ import type { ImageProps } from 'rc-image';
 import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import defaultLocale from '../locale/en_US';
 import PreviewGroup, { icons } from './PreviewGroup';
 import useStyle from './style';
-import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface CompositionImage<P> extends React.FC<P> {
   PreviewGroup: typeof PreviewGroup;
@@ -54,7 +54,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
       return preview;
     }
     const _preview = typeof preview === 'object' ? preview : {};
-    const { getContainer, ...restPreviewProps } = _preview;
+    const { getContainer, closeIcon, ...restPreviewProps } = _preview;
     return {
       mask: (
         <div className={`${prefixCls}-mask-info`}>
@@ -68,8 +68,9 @@ const Image: CompositionImage<ImageProps> = (props) => {
       transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
       maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
       zIndex,
+      closeIcon: closeIcon ?? image?.preview?.closeIcon,
     };
-  }, [preview, imageLocale]);
+  }, [preview, imageLocale, image?.preview?.closeIcon]);
 
   const mergedStyle: React.CSSProperties = { ...image?.style, ...style };