From 33eeb1eff1786549b9accd6f83bf119d2b84d231 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 25 Jun 2023 14:46:13 +0800 Subject: [PATCH] feat: CP support Image className and style (#43074) * feat: CP support Image className and style * fix * fix * fix * Update basic.tsx * fix * fix: remove useMemo * update * test: fix test case * Update components/config-provider/index.en-US.md Co-authored-by: MadCcc <1075746765@qq.com> --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../config-provider/__tests__/style.test.tsx | 16 ++++++++++++++++ components/config-provider/context.ts | 4 ++++ components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 6 ++++++ components/config-provider/index.zh-CN.md | 1 + components/image/index.tsx | 12 +++++++++++- 6 files changed, 39 insertions(+), 1 deletion(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 5ad263e3ec..5368654b34 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import ConfigProvider from '..'; import { render } from '../../../tests/utils'; import Divider from '../../divider'; +import Image from '../../image'; import Segmented from '../../segmented'; import Space from '../../space'; import Spin from '../../spin'; @@ -163,4 +164,19 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveClass('config-provider-steps'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + + it('Should Image className & style works', () => { + const { container } = render( + + + , + ); + const element = container + ?.querySelector('.ant-image') + ?.querySelector('img'); + expect(element).toHaveClass('config-provider-image'); + expect(element).toHaveStyle({ backgroundColor: 'red' }); + }); }); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 298c044ce5..e8f891a1a4 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -105,6 +105,10 @@ export interface ConfigConsumerProps { className?: string; style?: React.CSSProperties; }; + image?: { + className?: string; + style?: React.CSSProperties; + }; } const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index c6981e4323..7e442c9f2f 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -104,6 +104,7 @@ const { | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 | | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | form | Set Form common props | { 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 | +| image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 | | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | select | Set Select common props | { showSearch?: boolean } | - | | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index d6b880ddb4..77f31b6618 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -154,6 +154,10 @@ export interface ConfigProviderProps { className?: string; style?: React.CSSProperties; }; + image?: { + className?: string; + style?: React.CSSProperties; + }; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -246,6 +250,7 @@ const ProviderChildren: React.FC = (props) => { typography, divider, steps, + image, } = props; // =================================== Warning =================================== @@ -302,6 +307,7 @@ const ProviderChildren: React.FC = (props) => { typography, divider, steps, + image, }; const config = { diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 2150149494..e93a1222ed 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -106,6 +106,7 @@ const { | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 | | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | form | 设置 Form 组件的通用属性 | { 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 | +| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - | | diff --git a/components/image/index.tsx b/components/image/index.tsx index 09a58b7b1a..0f85dec960 100644 --- a/components/image/index.tsx +++ b/components/image/index.tsx @@ -2,9 +2,9 @@ import EyeOutlined from '@ant-design/icons/EyeOutlined'; import classNames from 'classnames'; import RcImage, { type ImageProps } from 'rc-image'; import * as React from 'react'; +import { getTransitionName } from '../_util/motion'; import { ConfigContext } from '../config-provider'; import defaultLocale from '../locale/en_US'; -import { getTransitionName } from '../_util/motion'; // CSSINJS import PreviewGroup, { icons } from './PreviewGroup'; import useStyle from './style'; @@ -16,13 +16,16 @@ export interface CompositionImage

extends React.FC

{ const Image: CompositionImage = ({ prefixCls: customizePrefixCls, preview, + className, rootClassName, + style, ...otherProps }) => { const { getPrefixCls, locale: contextLocale = defaultLocale, getPopupContainer: getContextPopupContainer, + image, } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('image', customizePrefixCls); @@ -33,6 +36,9 @@ const Image: CompositionImage = ({ const [wrapSSR, hashId] = useStyle(prefixCls); const mergedRootClassName = classNames(rootClassName, hashId); + + const mergedClassName = classNames(className, hashId, image?.className); + const mergedPreview = React.useMemo(() => { if (preview === false) { return preview; @@ -54,11 +60,15 @@ const Image: CompositionImage = ({ }; }, [preview, imageLocale]); + const mergedStyle: React.CSSProperties = { ...image?.style, ...style }; + return wrapSSR( , );