mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

feat: Input.Group prevent components from getting style from Form.Item (#34764)

Browse Source 
* feat: Input.Group provide isFormInput false

* test: update snapshot

* chore: code clean
This commit is contained in:
MadCcc 2022-03-29 13:49:50 +08:00 committed by GitHub
parent 93bc388ad5
commit 2bff96fdd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -754,7 +754,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%" style="width:30%"
> >
<div <div
@ -870,7 +870,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -1035,7 +1035,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%" style="width:30%"
> >
<div <div
@ -1151,7 +1151,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -1249,7 +1249,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%" style="width:30%"
> >
<div <div
@ -1365,7 +1365,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -1472,7 +1472,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:20%" style="width:20%"
> >
<div <div
@ -1588,7 +1588,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"

16
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -332,7 +332,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%" style="width:30%"
> >
<div <div
@ -388,7 +388,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -525,7 +525,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%" style="width:30%"
> >
<div <div
@ -581,7 +581,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -665,7 +665,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:30%" style="width:30%"
> >
<div <div
@ -721,7 +721,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -814,7 +814,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-input-group ant-input-group-compact" class="ant-input-group ant-input-group-compact"
> >
<div <div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
style="width:20%" style="width:20%"
> >
<div <div
@ -870,7 +870,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"

16
components/input/Group.tsx
View File

@ -1,7 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext, useMemo } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { FormItemInputContext } from '../form/context';
export interface GroupProps { export interface GroupProps {
className?: string; className?: string;
@ -31,6 +32,15 @@ const Group: React.FC<GroupProps> = props => {
className, className,
); );
const formItemContext = useContext(FormItemInputContext);
const groupFormItemContext = useMemo(
() => ({
...formItemContext,
isFormItemInput: false,
}),
[formItemContext],
);
return ( return (
<span <span
className={cls} className={cls}
@ -40,7 +50,9 @@ const Group: React.FC<GroupProps> = props => {
onFocus={props.onFocus} onFocus={props.onFocus}
onBlur={props.onBlur} onBlur={props.onBlur}
> >
{props.children} <FormItemInputContext.Provider value={groupFormItemContext}>
{props.children}
</FormItemInputContext.Provider>
</span> </span>
); );
}; };