mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

feat: config-provider support Mentions className and style properties (#43192)

Browse Source 
* feat: config-provider support Mentions className and style properties

* fix: rename contextMentions
This commit is contained in:
muxin 2023-06-27 10:51:23 +08:00 committed by GitHub
parent 32ff4eef2c
commit 8ff8679844
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/config-provider/__tests__/style.test.tsx
View File

@ -8,6 +8,7 @@ import Descriptions from '../../descriptions';
import Divider from '../../divider';
import Empty from '../../empty';
import Image from '../../image';
import Mentions from '../../mentions';
import Pagination from '../../pagination';
import Radio from '../../radio';
import Result from '../../result';
@ -189,6 +190,40 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Mentions className & style works', () => {
const { container } = render(
<ConfigProvider
mentions={{
className: 'cp-className',
style: {
background: 'red',
},
}}
>
<Mentions
defaultValue="@afc163"
options={[
{
value: 'afc163',
label: 'afc163',
},
{
value: 'zombieJ',
label: 'zombieJ',
},
{
value: 'yesmeck',
label: 'yesmeck',
},
]}
/>
</ConfigProvider>,
);
expect(container.querySelector('.ant-mentions')).toHaveClass('cp-className');
expect(container.querySelector('.ant-mentions')).toHaveStyle({ background: 'red' });
});
it('Should Result className & style works', () => {
const { container } = render(
<ConfigProvider result={{ className: 'cp-result', style: { backgroundColor: 'red' } }}>

1
components/config-provider/context.ts
View File

@ -93,6 +93,7 @@ export interface ConfigConsumerProps {
segmented?: ComponentStyleConfig;
steps?: ComponentStyleConfig;
image?: ComponentStyleConfig;
mentions?: ComponentStyleConfig;
result?: ComponentStyleConfig;
slider?: ComponentStyleConfig;
breadcrumb?: ComponentStyleConfig;

1
components/config-provider/index.en-US.md
View File

@ -111,6 +111,7 @@ const {
| 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 |
| mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

3
components/config-provider/index.tsx
View File

@ -142,6 +142,7 @@ export interface ConfigProviderProps {
segmented?: ComponentStyleConfig;
steps?: ComponentStyleConfig;
image?: ComponentStyleConfig;
mentions?: ComponentStyleConfig;
result?: ComponentStyleConfig;
slider?: ComponentStyleConfig;
breadcrumb?: ComponentStyleConfig;
@ -245,6 +246,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
divider,
steps,
image,
mentions,
result,
slider,
breadcrumb,
@ -311,6 +313,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
divider,
steps,
image,
mentions,
result,
slider,
breadcrumb,

1
components/config-provider/index.zh-CN.md
View File

@ -113,6 +113,7 @@ const {
| 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 |
| mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

10
components/mentions/index.tsx
View File

@ -76,6 +76,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
options,
status: customStatus,
popupClassName,
style,
...restProps
},
ref,
@ -93,7 +94,12 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
);
}
const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
const {
getPrefixCls,
renderEmpty,
direction,
mentions: contextMentions,
} = React.useContext(ConfigContext);
const {
status: contextStatus,
hasFeedback,
@ -158,6 +164,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
[`${prefixCls}-rtl`]: direction === 'rtl',
},
getStatusClassNames(prefixCls, mergedStatus),
contextMentions?.className,
!hasFeedback && className,
rootClassName,
hashId,
@ -170,6 +177,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
className={mergedClassName}
disabled={disabled}
direction={direction}
style={{ ...contextMentions?.style, ...style }}
{...restProps}
filterOption={mentionsfilterOption}
onFocus={onFocus}