mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor: move override code in form (#34694)

Browse Source 
* refactor: move override code in form

* refactor: radio and checkbox

* chore: code clean

* test: fix lint

* test: fix lint
This commit is contained in:
MadCcc 2022-03-24 21:54:20 +08:00 committed by GitHub
parent 2a35f74d74
commit 0de1e66ff1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 282 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -543,7 +543,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search" class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -610,7 +610,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-show-search" class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -938,7 +938,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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"
@ -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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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"

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

@ -195,7 +195,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search" class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -248,7 +248,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-show-search" class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -442,7 +442,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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"
@ -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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item 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-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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"

13
components/calendar/Header.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { GenerateConfig } from 'rc-picker/lib/generate'; import { GenerateConfig } from 'rc-picker/lib/generate';
import { Locale } from 'rc-picker/lib/interface'; import { Locale } from 'rc-picker/lib/interface';
import { useContext, useMemo } from 'react';
import { FormItemInputContext } from '../form/context';
import Select from '../select'; import Select from '../select';
import { Group, Button } from '../radio'; import { Group, Button } from '../radio';
import { CalendarMode } from './generateCalendar'; import { CalendarMode } from './generateCalendar';
@ -152,6 +154,15 @@ function CalendarHeader<DateType>(props: CalendarHeaderProps<DateType>) {
const { prefixCls, fullscreen, mode, onChange, onModeChange } = props; const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
const divRef = React.useRef<HTMLDivElement>(null); const divRef = React.useRef<HTMLDivElement>(null);
const formItemInputContext = useContext(FormItemInputContext);
const mergedFormItemInputContext = useMemo(
() => ({
...formItemInputContext,
isFormItemInput: false,
}),
[formItemInputContext],
);
const sharedProps = { const sharedProps = {
...props, ...props,
onChange, onChange,
@ -161,8 +172,10 @@ function CalendarHeader<DateType>(props: CalendarHeaderProps<DateType>) {
return ( return (
<div className={`${prefixCls}-header`} ref={divRef}> <div className={`${prefixCls}-header`} ref={divRef}>
<FormItemInputContext.Provider value={mergedFormItemInputContext}>
<YearSelect {...sharedProps} /> <YearSelect {...sharedProps} />
{mode === 'month' && <MonthSelect {...sharedProps} />} {mode === 'month' && <MonthSelect {...sharedProps} />}
</FormItemInputContext.Provider>
<ModeSwitch {...sharedProps} onModeChange={onModeChange} /> <ModeSwitch {...sharedProps} onModeChange={onModeChange} />
</div> </div>
); );

2
components/calendar/style/index.tsx
View File

@ -2,7 +2,7 @@ import '../../style/index.less';
import './index.less'; import './index.less';
// style dependencies // style dependencies
// deps-lint-skip: date-picker // deps-lint-skip: date-picker, form
import '../../select/style'; import '../../select/style';
import '../../radio/style'; import '../../radio/style';
import '../../date-picker/style'; import '../../date-picker/style';

7
components/cascader/index.tsx
View File

@ -20,7 +20,7 @@ import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext'; import SizeContext from '../config-provider/SizeContext';
import getIcons from '../select/utils/iconUtil'; import getIcons from '../select/utils/iconUtil';
import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion'; import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
import { FormItemStatusContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
// Align the design since we use `rc-select` in root. This help: // Align the design since we use `rc-select` in root. This help:
@ -145,8 +145,8 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
const mergedDirection = direction || rootDirection; const mergedDirection = direction || rootDirection;
const isRtl = mergedDirection === 'rtl'; const isRtl = mergedDirection === 'rtl';
// =================== Status ===================== // =================== Form =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext); const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// =================== Warning ===================== // =================== Warning =====================
@ -255,6 +255,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
[`${prefixCls}-sm`]: mergedSize === 'small', [`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: isRtl, [`${prefixCls}-rtl`]: isRtl,
[`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-in-form-item`]: isFormItemInput,
}, },
getStatusClassNames(prefixCls, mergedStatus, hasFeedback), getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
className, className,

4
components/checkbox/Checkbox.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import RcCheckbox from 'rc-checkbox'; import RcCheckbox from 'rc-checkbox';
import { useContext } from 'react';
import { FormItemInputContext } from '../form/context';
import { GroupContext } from './Group'; import { GroupContext } from './Group';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning'; import devWarning from '../_util/devWarning';
@ -59,6 +61,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
) => { ) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const checkboxGroup = React.useContext(GroupContext); const checkboxGroup = React.useContext(GroupContext);
const { isFormItemInput } = useContext(FormItemInputContext);
const prevValue = React.useRef(restProps.value); const prevValue = React.useRef(restProps.value);
@ -104,6 +107,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-wrapper-checked`]: checkboxProps.checked, [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
[`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled, [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
}, },
className, className,
); );

1
components/checkbox/style/index.tsx
View File

@ -1,2 +1,3 @@
import '../../style/index.less'; import '../../style/index.less';
import './index.less'; import './index.less';
// deps-lint-skip: form

7
components/checkbox/style/mixin.less
View File

@ -169,6 +169,13 @@
& + & { & + & {
margin-left: 8px; margin-left: 8px;
} }
&&-in-form-item {
input[type='checkbox'] {
width: 14px;
height: 14px;
}
}
} }
.@{checkbox-prefix-cls} + span { .@{checkbox-prefix-cls} + span {

10
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -14,7 +14,7 @@ import LocaleReceiver from '../../locale-provider/LocaleReceiver';
import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util'; import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.'; import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
import { PickerComponentClass } from './interface'; import { PickerComponentClass } from './interface';
import { FormItemStatusContext } from '../../form/context'; import { FormItemInputContext } from '../../form/context';
import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
export default function generateRangePicker<DateType>( export default function generateRangePicker<DateType>(
@ -40,13 +40,13 @@ export default function generateRangePicker<DateType>(
}; };
renderFeedback = (prefixCls: string) => ( renderFeedback = (prefixCls: string) => (
<FormItemStatusContext.Consumer> <FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => { {({ hasFeedback, status: contextStatus }) => {
const { status: customStatus } = this.props; const { status: customStatus } = this.props;
const status = getMergedStatus(contextStatus, customStatus); const status = getMergedStatus(contextStatus, customStatus);
return hasFeedback && getFeedbackIcon(prefixCls, status); return hasFeedback && getFeedbackIcon(prefixCls, status);
}} }}
</FormItemStatusContext.Consumer> </FormItemInputContext.Consumer>
); );
renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => ( renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
@ -88,7 +88,7 @@ export default function generateRangePicker<DateType>(
const mergedSize = customizeSize || size; const mergedSize = customizeSize || size;
return ( return (
<FormItemStatusContext.Consumer> <FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => ( {({ hasFeedback, status: contextStatus }) => (
<RCRangePicker<DateType> <RCRangePicker<DateType>
separator={ separator={
@ -129,7 +129,7 @@ export default function generateRangePicker<DateType>(
direction={direction} direction={direction}
/> />
)} )}
</FormItemStatusContext.Consumer> </FormItemInputContext.Consumer>
); );
}} }}
</SizeContext.Consumer> </SizeContext.Consumer>

10
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -21,7 +21,7 @@ import {
Components, Components,
} from '.'; } from '.';
import { PickerComponentClass } from './interface'; import { PickerComponentClass } from './interface';
import { FormItemStatusContext } from '../../form/context'; import { FormItemInputContext } from '../../form/context';
import { import {
getFeedbackIcon, getFeedbackIcon,
getMergedStatus, getMergedStatus,
@ -69,13 +69,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
}; };
renderFeedback = (prefixCls: string) => ( renderFeedback = (prefixCls: string) => (
<FormItemStatusContext.Consumer> <FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => { {({ hasFeedback, status: contextStatus }) => {
const { status: customStatus } = this.props; const { status: customStatus } = this.props;
const status = getMergedStatus(contextStatus, customStatus); const status = getMergedStatus(contextStatus, customStatus);
return hasFeedback && getFeedbackIcon(prefixCls, status); return hasFeedback && getFeedbackIcon(prefixCls, status);
}} }}
</FormItemStatusContext.Consumer> </FormItemInputContext.Consumer>
); );
renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => ( renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
@ -127,7 +127,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
const mergedSize = customizeSize || size; const mergedSize = customizeSize || size;
return ( return (
<FormItemStatusContext.Consumer> <FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => ( {({ hasFeedback, status: contextStatus }) => (
<RCPicker<DateType> <RCPicker<DateType>
ref={this.pickerRef} ref={this.pickerRef}
@ -164,7 +164,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
direction={direction} direction={direction}
/> />
)} )}
</FormItemStatusContext.Consumer> </FormItemInputContext.Consumer>
); );
}} }}
</SizeContext.Consumer> </SizeContext.Consumer>

7
components/form/FormItem.tsx
View File

@ -15,7 +15,7 @@ import FormItemLabel, { FormItemLabelProps, LabelTooltipType } from './FormItemL
import FormItemInput, { FormItemInputProps } from './FormItemInput'; import FormItemInput, { FormItemInputProps } from './FormItemInput';
import { import {
FormContext, FormContext,
FormItemStatusContext, FormItemInputContext,
NoStyleItemContext, NoStyleItemContext,
FormItemStatusContextProps, FormItemStatusContextProps,
} from './context'; } from './context';
@ -223,6 +223,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
() => ({ () => ({
status: mergedValidateStatus, status: mergedValidateStatus,
hasFeedback, hasFeedback,
isFormItemInput: true,
}), }),
[mergedValidateStatus, hasFeedback], [mergedValidateStatus, hasFeedback],
); );
@ -300,9 +301,9 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
help={help} help={help}
> >
<NoStyleItemContext.Provider value={onSubItemMetaChange}> <NoStyleItemContext.Provider value={onSubItemMetaChange}>
<FormItemStatusContext.Provider value={formItemStatusContext}> <FormItemInputContext.Provider value={formItemStatusContext}>
{baseChildren} {baseChildren}
</FormItemStatusContext.Provider> </FormItemInputContext.Provider>
</NoStyleItemContext.Provider> </NoStyleItemContext.Provider>
</FormItemInput> </FormItemInput>
</Row> </Row>

100
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -77,7 +77,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -329,7 +329,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -691,7 +691,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox ant-checkbox-checked" class="ant-checkbox ant-checkbox-checked"
@ -934,7 +934,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -1200,7 +1200,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -1440,7 +1440,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md extend conte
value="0" value="0"
/> />
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
style="width:80px;margin:0 8px" style="width:80px;margin:0 8px"
> >
<div <div
@ -2451,7 +2451,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -2859,7 +2859,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -3412,7 +3412,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
id="layout" id="layout"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -3432,7 +3432,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -3451,7 +3451,7 @@ exports[`renders ./components/form/demo/layout.md extend context correctly 1`] =
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -3774,7 +3774,7 @@ exports[`renders ./components/form/demo/nest-messages.md extend context correctl
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -4060,7 +4060,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox ant-checkbox-checked" class="ant-checkbox ant-checkbox-checked"
@ -4472,7 +4472,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -4870,7 +4870,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-input-number-wrapper ant-input-number-group" class="ant-input-number-wrapper ant-input-number-group"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -5117,7 +5117,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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"
@ -5224,7 +5224,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -5458,7 +5458,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -5550,7 +5550,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
id="requiredMarkValue" id="requiredMarkValue"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -5570,7 +5570,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -5589,7 +5589,7 @@ exports[`renders ./components/form/demo/required-mark.md extend context correctl
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -5835,7 +5835,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
id="size" id="size"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -5854,7 +5854,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -5874,7 +5874,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -5951,7 +5951,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -6090,7 +6090,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -6268,7 +6268,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -7022,7 +7022,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -14780,7 +14780,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-has-feedback ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -14948,7 +14948,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-multiple ant-select-show-search" class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -15104,7 +15104,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -15398,7 +15398,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
id="validate_other_radio-group" id="validate_other_radio-group"
> >
<label <label
class="ant-radio-wrapper" class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
> >
<span <span
class="ant-radio" class="ant-radio"
@ -15417,7 +15417,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span> </span>
</label> </label>
<label <label
class="ant-radio-wrapper" class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
> >
<span <span
class="ant-radio" class="ant-radio"
@ -15436,7 +15436,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span> </span>
</label> </label>
<label <label
class="ant-radio-wrapper" class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
> >
<span <span
class="ant-radio" class="ant-radio"
@ -15487,7 +15487,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
id="validate_other_radio-button" id="validate_other_radio-button"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -15506,7 +15506,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -15525,7 +15525,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -15582,7 +15582,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -15607,7 +15607,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -15633,7 +15633,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -15657,7 +15657,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -15681,7 +15681,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -15705,7 +15705,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -16081,7 +16081,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
class="" class=""
> >
<div <div
class="ant-upload ant-upload-select ant-upload-select-picture" class="ant-upload ant-upload-select ant-upload-select-picture ant-upload-in-form-item"
> >
<span <span
class="ant-upload" class="ant-upload"
@ -16160,7 +16160,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
> >
<span> <span>
<div <div
class="ant-upload ant-upload-drag" class="ant-upload ant-upload-drag ant-upload-in-form-item"
> >
<span <span
class="ant-upload ant-upload-btn" class="ant-upload ant-upload-btn"
@ -19981,7 +19981,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -20187,7 +20187,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-cascader ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -20334,7 +20334,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-tree-select ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -21793,7 +21793,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
style="width:100%" style="width:100%"
> >
<div <div
class="ant-input-number ant-input-number-status-success" class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -22453,7 +22453,7 @@ exports[`renders ./components/form/demo/without-form-create.md extend context co
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"

100
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -77,7 +77,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -247,7 +247,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -527,7 +527,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox ant-checkbox-checked" class="ant-checkbox ant-checkbox-checked"
@ -770,7 +770,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -937,7 +937,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -1078,7 +1078,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
value="0" value="0"
/> />
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
style="width:80px;margin:0 8px" style="width:80px;margin:0 8px"
> >
<div <div
@ -2007,7 +2007,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -2333,7 +2333,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -2886,7 +2886,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
id="layout" id="layout"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2906,7 +2906,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2925,7 +2925,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -3248,7 +3248,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -3534,7 +3534,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox ant-checkbox-checked" class="ant-checkbox ant-checkbox-checked"
@ -3922,7 +3922,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -4148,7 +4148,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-input-number-wrapper ant-input-number-group" class="ant-input-number-wrapper ant-input-number-group"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -4313,7 +4313,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" class="ant-select ant-select-in-form-item 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"
@ -4406,7 +4406,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -4541,7 +4541,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -4633,7 +4633,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
id="requiredMarkValue" id="requiredMarkValue"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -4653,7 +4653,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -4672,7 +4672,7 @@ exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -4870,7 +4870,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
id="size" id="size"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -4889,7 +4889,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -4909,7 +4909,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -4986,7 +4986,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -5068,7 +5068,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -5149,7 +5149,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -5295,7 +5295,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -6028,7 +6028,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-has-feedback ant-select-single ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -6114,7 +6114,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-multiple ant-select-show-search" class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -6189,7 +6189,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -6459,7 +6459,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
id="validate_other_radio-group" id="validate_other_radio-group"
> >
<label <label
class="ant-radio-wrapper" class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
> >
<span <span
class="ant-radio" class="ant-radio"
@ -6478,7 +6478,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-wrapper" class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
> >
<span <span
class="ant-radio" class="ant-radio"
@ -6497,7 +6497,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-wrapper" class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
> >
<span <span
class="ant-radio" class="ant-radio"
@ -6548,7 +6548,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
id="validate_other_radio-button" id="validate_other_radio-button"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -6567,7 +6567,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -6586,7 +6586,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -6643,7 +6643,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -6668,7 +6668,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled" class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -6694,7 +6694,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -6718,7 +6718,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -6742,7 +6742,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -6766,7 +6766,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-8" class="ant-col ant-col-8"
> >
<label <label
class="ant-checkbox-wrapper" class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
style="line-height:32px" style="line-height:32px"
> >
<span <span
@ -7142,7 +7142,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="" class=""
> >
<div <div
class="ant-upload ant-upload-select ant-upload-select-picture" class="ant-upload ant-upload-select ant-upload-select-picture ant-upload-in-form-item"
> >
<span <span
class="ant-upload" class="ant-upload"
@ -7221,7 +7221,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
> >
<span> <span>
<div <div
class="ant-upload ant-upload-drag" class="ant-upload ant-upload-drag ant-upload-in-form-item"
> >
<span <span
class="ant-upload ant-upload-btn" class="ant-upload ant-upload-btn"
@ -8026,7 +8026,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -8133,7 +8133,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-cascader ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-in-form-item ant-select-status-error ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -8249,7 +8249,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-select ant-tree-select ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-tree-select ant-select-in-form-item ant-select-status-warning ant-select-has-feedback ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
<div <div
class="ant-select-selector" class="ant-select-selector"
@ -8523,7 +8523,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
style="width:100%" style="width:100%"
> >
<div <div
class="ant-input-number ant-input-number-status-success" class="ant-input-number ant-input-number-in-form-item ant-input-number-status-success"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"
@ -9183,7 +9183,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
class="ant-form-item-control-input-content" class="ant-form-item-control-input-content"
> >
<div <div
class="ant-input-number" class="ant-input-number ant-input-number-in-form-item"
> >
<div <div
class="ant-input-number-handler-wrap" class="ant-input-number-handler-wrap"

5
components/form/context.tsx
View File

@ -53,16 +53,17 @@ export const FormItemPrefixContext = React.createContext<FormItemPrefixContextPr
}); });
export interface FormItemStatusContextProps { export interface FormItemStatusContextProps {
isFormItemInput?: boolean;
status?: ValidateStatus; status?: ValidateStatus;
hasFeedback?: boolean; hasFeedback?: boolean;
} }
export const FormItemStatusContext = React.createContext<FormItemStatusContextProps>({}); export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});
export const NoFormStatus: FC<PropsWithChildren<{}>> = ({ children }: PropsWithChildren<{}>) => { export const NoFormStatus: FC<PropsWithChildren<{}>> = ({ children }: PropsWithChildren<{}>) => {
const emptyContext = useMemo(() => ({}), []); const emptyContext = useMemo(() => ({}), []);
return ( return (
<FormItemStatusContext.Provider value={emptyContext}>{children}</FormItemStatusContext.Provider> <FormItemInputContext.Provider value={emptyContext}>{children}</FormItemInputContext.Provider>
); );
}; };

58
components/form/style/components.less
View File

@ -6,67 +6,11 @@
// ================================================================ // ================================================================
// = Children Component = // = Children Component =
// ================================================================ // ================================================================
// FIXME: useless, remove in v5
.@{form-item-prefix-cls} { .@{form-item-prefix-cls} {
// input[type=file]
.@{ant-prefix}-upload {
background: transparent;
}
.@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
background: @background-color-light;
}
input[type='radio'],
input[type='checkbox'] {
width: 14px;
height: 14px;
}
// Radios and checkboxes on same line
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-checkbox-inline {
display: inline-block;
margin-left: 8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
&:first-child {
margin-left: 0;
}
}
.@{ant-prefix}-checkbox-vertical,
.@{ant-prefix}-radio-vertical {
display: block;
}
.@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
.@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
margin-left: 0;
}
.@{ant-prefix}-input-number { .@{ant-prefix}-input-number {
+ .@{form-prefix-cls}-text { + .@{form-prefix-cls}-text {
margin-left: 8px; margin-left: 8px;
} }
&-handler-wrap {
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
}
}
.@{ant-prefix}-select,
.@{ant-prefix}-cascader-picker {
width: 100%;
}
// Don't impact select inside input group and calendar header select
.@{ant-prefix}-picker-calendar-year-select,
.@{ant-prefix}-picker-calendar-month-select,
.@{ant-prefix}-input-group .@{ant-prefix}-select,
.@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker,
.@{ant-prefix}-input-number-group .@{ant-prefix}-select,
.@{ant-prefix}-input-number-group .@{ant-prefix}-cascader-picker {
width: auto;
} }
} }

4
components/form/style/mixin.less
View File

@ -10,10 +10,6 @@
.@{ant-prefix}-form-item-split { .@{ant-prefix}-form-item-split {
color: @text-color; color: @text-color;
} }
.@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
.active(@border-color, @hoverBorderColor, @outlineColor);
}
} }
// Reset form styles // Reset form styles

5
components/input-number/index.tsx
View File

@ -6,7 +6,7 @@ import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import SizeContext, { SizeType } from '../config-provider/SizeContext'; import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { FormItemStatusContext, NoFormStatus } from '../form/context'; import { FormItemInputContext, NoFormStatus } from '../form/context';
import { cloneElement } from '../_util/reactNode'; import { cloneElement } from '../_util/reactNode';
import { import {
getFeedbackIcon, getFeedbackIcon,
@ -71,7 +71,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
); );
} }
const { hasFeedback, status: contextStatus } = useContext(FormItemStatusContext); const { hasFeedback, status: contextStatus, isFormItemInput } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
const mergeSize = customizeSize || size; const mergeSize = customizeSize || size;
@ -82,6 +82,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-readonly`]: readOnly, [`${prefixCls}-readonly`]: readOnly,
[`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-in-form-item`]: isFormItemInput,
}, },
getStatusClassNames(prefixCls, mergedStatus), getStatusClassNames(prefixCls, mergedStatus),
className, className,

6
components/input/ClearableLabeledInput.tsx
View File

@ -3,7 +3,7 @@ import classNames from 'classnames';
import * as React from 'react'; import * as React from 'react';
import { DirectionType } from '../config-provider'; import { DirectionType } from '../config-provider';
import { SizeType } from '../config-provider/SizeContext'; import { SizeType } from '../config-provider/SizeContext';
import { FormItemStatusContext, FormItemStatusContextProps } from '../form/context'; import { FormItemInputContext, FormItemStatusContextProps } from '../form/context';
import { cloneElement } from '../_util/reactNode'; import { cloneElement } from '../_util/reactNode';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
@ -118,14 +118,14 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
render() { render() {
return ( return (
<FormItemStatusContext.Consumer> <FormItemInputContext.Consumer>
{statusContext => { {statusContext => {
const { prefixCls, inputType, element } = this.props; const { prefixCls, inputType, element } = this.props;
if (inputType === ClearableInputType[0]) { if (inputType === ClearableInputType[0]) {
return this.renderTextAreaWithClearIcon(prefixCls, element, statusContext); return this.renderTextAreaWithClearIcon(prefixCls, element, statusContext);
} }
}} }}
</FormItemStatusContext.Consumer> </FormItemInputContext.Consumer>
); );
} }
} }

4
components/input/Input.tsx
View File

@ -11,7 +11,7 @@ import {
InputStatus, InputStatus,
} from '../_util/statusUtils'; } from '../_util/statusUtils';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { FormItemStatusContext, NoFormStatus } from '../form/context'; import { FormItemInputContext, NoFormStatus } from '../form/context';
import { hasPrefixSuffix } from './utils'; import { hasPrefixSuffix } from './utils';
import devWarning from '../_util/devWarning'; import devWarning from '../_util/devWarning';
@ -145,7 +145,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const mergedSize = customSize || size; const mergedSize = customSize || size;
// ===================== Status ===================== // ===================== Status =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext); const { status: contextStatus, hasFeedback } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Focus warning ===================== // ===================== Focus warning =====================

4
components/input/TextArea.tsx
View File

@ -6,7 +6,7 @@ import omit from 'rc-util/lib/omit';
import * as React from 'react'; import * as React from 'react';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import SizeContext, { SizeType } from '../config-provider/SizeContext'; import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { FormItemStatusContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { import {
getFeedbackIcon, getFeedbackIcon,
getStatusClassNames, getStatusClassNames,
@ -79,7 +79,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
const { getPrefixCls, direction } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext); const size = React.useContext(SizeContext);
const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext); const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
const innerRef = React.useRef<RcTextArea>(null); const innerRef = React.useRef<RcTextArea>(null);

4
components/mentions/index.tsx
View File

@ -5,7 +5,7 @@ import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
import { composeRef } from 'rc-util/lib/ref'; import { composeRef } from 'rc-util/lib/ref';
import Spin from '../spin'; import Spin from '../spin';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { FormItemStatusContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { import {
getFeedbackIcon, getFeedbackIcon,
getMergedStatus, getMergedStatus,
@ -70,7 +70,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
const innerRef = React.useRef<HTMLElement>(); const innerRef = React.useRef<HTMLElement>();
const mergedRef = composeRef(ref, innerRef); const mergedRef = composeRef(ref, innerRef);
const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext); const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
const { status: contextStatus, hasFeedback } = React.useContext(FormItemStatusContext); const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
const onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => { const onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {

4
components/radio/radio.tsx
View File

@ -2,6 +2,8 @@ import * as React from 'react';
import RcCheckbox from 'rc-checkbox'; import RcCheckbox from 'rc-checkbox';
import classNames from 'classnames'; import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref'; import { composeRef } from 'rc-util/lib/ref';
import { useContext } from 'react';
import { FormItemInputContext } from '../form/context';
import { RadioProps, RadioChangeEvent } from './interface'; import { RadioProps, RadioChangeEvent } from './interface';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import RadioGroupContext from './context'; import RadioGroupContext from './context';
@ -12,6 +14,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
const { getPrefixCls, direction } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const innerRef = React.useRef<HTMLElement>(); const innerRef = React.useRef<HTMLElement>();
const mergedRef = composeRef(ref, innerRef); const mergedRef = composeRef(ref, innerRef);
const { isFormItemInput } = useContext(FormItemInputContext);
React.useEffect(() => { React.useEffect(() => {
devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.'); devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
@ -37,6 +40,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
[`${prefixCls}-wrapper-checked`]: radioProps.checked, [`${prefixCls}-wrapper-checked`]: radioProps.checked,
[`${prefixCls}-wrapper-disabled`]: radioProps.disabled, [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
[`${prefixCls}-wrapper-rtl`]: direction === 'rtl', [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
}, },
className, className,
); );

7
components/radio/style/index.less
View File

@ -42,6 +42,13 @@
overflow: hidden; overflow: hidden;
content: '\a0'; content: '\a0';
} }
&&-in-form-item {
input[type='radio'] {
width: 14px;
height: 14px;
}
}
} }
.@{radio-prefix-cls} { .@{radio-prefix-cls} {

1
components/radio/style/index.tsx
View File

@ -1,2 +1,3 @@
import '../../style/index.less'; import '../../style/index.less';
import './index.less'; import './index.less';
// deps-lint-skip: form

7
components/select/index.tsx
View File

@ -10,7 +10,7 @@ import { useContext } from 'react';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import getIcons from './utils/iconUtil'; import getIcons from './utils/iconUtil';
import SizeContext, { SizeType } from '../config-provider/SizeContext'; import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { FormItemStatusContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion'; import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
@ -99,8 +99,8 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
const mergedShowArrow = const mergedShowArrow =
showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox'); showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
// ===================== Validation Status ===================== // ===================== Form Status =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext); const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Empty ===================== // ===================== Empty =====================
@ -136,6 +136,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
[`${prefixCls}-sm`]: mergedSize === 'small', [`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-in-form-item`]: isFormItemInput,
}, },
getStatusClassNames(prefixCls, mergedStatus, hasFeedback), getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
className, className,

4
components/select/style/index.less
View File

@ -317,6 +317,10 @@
border-color: transparent !important; border-color: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
&&-in-form-item {
width: 100%;
}
} }
@import './rtl'; @import './rtl';

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

@ -292,7 +292,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -312,7 +312,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -331,7 +331,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -380,7 +380,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -400,7 +400,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -419,7 +419,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -468,7 +468,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -487,7 +487,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"

16
components/skeleton/__tests__/__snapshots__/demo.test.js.snap
View File

@ -292,7 +292,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -312,7 +312,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -331,7 +331,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -380,7 +380,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -400,7 +400,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -419,7 +419,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -468,7 +468,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -487,7 +487,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"

32
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -2707,7 +2707,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2727,7 +2727,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2746,7 +2746,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2795,7 +2795,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2814,7 +2814,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2833,7 +2833,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2882,7 +2882,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2901,7 +2901,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2950,7 +2950,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2969,7 +2969,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2988,7 +2988,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -3007,7 +3007,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -3057,7 +3057,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -3076,7 +3076,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -3095,7 +3095,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -3115,7 +3115,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"

32
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2216,7 +2216,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2236,7 +2236,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2255,7 +2255,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2304,7 +2304,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2323,7 +2323,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2342,7 +2342,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2391,7 +2391,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2410,7 +2410,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2459,7 +2459,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2478,7 +2478,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2497,7 +2497,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2516,7 +2516,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2566,7 +2566,7 @@ Array [
class="ant-radio-group ant-radio-group-outline" class="ant-radio-group ant-radio-group-outline"
> >
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2585,7 +2585,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"
@ -2604,7 +2604,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button ant-radio-button-checked" class="ant-radio-button ant-radio-button-checked"
@ -2624,7 +2624,7 @@ Array [
</span> </span>
</label> </label>
<label <label
class="ant-radio-button-wrapper" class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"
> >
<span <span
class="ant-radio-button" class="ant-radio-button"

13
components/transfer/index.tsx
View File

@ -9,7 +9,7 @@ import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../conf
import { TransferListBodyProps } from './ListBody'; import { TransferListBodyProps } from './ListBody';
import { PaginationType } from './interface'; import { PaginationType } from './interface';
import devWarning from '../_util/devWarning'; import devWarning from '../_util/devWarning';
import { FormItemStatusContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
export { TransferListProps } from './list'; export { TransferListProps } from './list';
@ -79,9 +79,12 @@ export interface TransferProps<RecordType> {
showSearch?: boolean; showSearch?: boolean;
filterOption?: (inputValue: string, item: RecordType) => boolean; filterOption?: (inputValue: string, item: RecordType) => boolean;
locale?: Partial<TransferLocale>; locale?: Partial<TransferLocale>;
footer?: (props: TransferListProps<RecordType>, info?: { footer?: (
props: TransferListProps<RecordType>,
info?: {
direction: TransferDirection; direction: TransferDirection;
}) => React.ReactNode; },
) => React.ReactNode;
rowKey?: (record: RecordType) => string; rowKey?: (record: RecordType) => string;
onSearch?: (direction: TransferDirection, value: string) => void; onSearch?: (direction: TransferDirection, value: string) => void;
onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void; onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
@ -348,7 +351,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
renderTransfer = (transferLocale: TransferLocale) => ( renderTransfer = (transferLocale: TransferLocale) => (
<ConfigConsumer> <ConfigConsumer>
{({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => ( {({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => (
<FormItemStatusContext.Consumer> <FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => { {({ hasFeedback, status: contextStatus }) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
@ -458,7 +461,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
</div> </div>
); );
}} }}
</FormItemStatusContext.Consumer> </FormItemInputContext.Consumer>
)} )}
</ConfigConsumer> </ConfigConsumer>
); );

7
components/tree-select/index.tsx
View File

@ -18,7 +18,7 @@ import getIcons from '../select/utils/iconUtil';
import renderSwitcherIcon from '../tree/utils/iconUtil'; import renderSwitcherIcon from '../tree/utils/iconUtil';
import SizeContext, { SizeType } from '../config-provider/SizeContext'; import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion'; import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
import { FormItemStatusContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
type RawValue = string | number; type RawValue = string | number;
@ -104,8 +104,8 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
const isMultiple = !!(treeCheckable || multiple); const isMultiple = !!(treeCheckable || multiple);
const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple; const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
// ===================== Status ===================== // ===================== Form =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemStatusContext); const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Icons ===================== // ===================== Icons =====================
@ -153,6 +153,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
[`${prefixCls}-sm`]: mergedSize === 'small', [`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-in-form-item`]: isFormItemInput,
}, },
getStatusClassNames(prefixCls, mergedStatus, hasFeedback), getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
className, className,

6
components/upload/Upload.tsx
View File

@ -2,6 +2,8 @@ import * as React from 'react';
import RcUpload, { UploadProps as RcUploadProps } from 'rc-upload'; import RcUpload, { UploadProps as RcUploadProps } from 'rc-upload';
import useMergedState from 'rc-util/lib/hooks/useMergedState'; import useMergedState from 'rc-util/lib/hooks/useMergedState';
import classNames from 'classnames'; import classNames from 'classnames';
import { useContext } from 'react';
import { FormItemInputContext } from '../form/context';
import Dragger from './Dragger'; import Dragger from './Dragger';
import UploadList from './UploadList'; import UploadList from './UploadList';
import { import {
@ -300,6 +302,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
const prefixCls = getPrefixCls('upload', customizePrefixCls); const prefixCls = getPrefixCls('upload', customizePrefixCls);
const { isFormItemInput } = useContext(FormItemInputContext);
const rcUploadProps = { const rcUploadProps = {
onBatchStart, onBatchStart,
onError, onError,
@ -373,6 +377,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
[`${prefixCls}-drag-hover`]: dragState === 'dragover', [`${prefixCls}-drag-hover`]: dragState === 'dragover',
[`${prefixCls}-disabled`]: disabled, [`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-in-form-item`]: isFormItemInput,
}, },
className, className,
); );
@ -399,6 +404,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
[`${prefixCls}-select-${listType}`]: true, [`${prefixCls}-select-${listType}`]: true,
[`${prefixCls}-disabled`]: disabled, [`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-in-form-item`]: isFormItemInput,
}); });
const renderUploadButton = (uploadButtonStyle?: React.CSSProperties) => ( const renderUploadButton = (uploadButtonStyle?: React.CSSProperties) => (

2
components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3806,7 +3806,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md extend conte
class="" class=""
> >
<div <div
class="ant-upload ant-upload-select ant-upload-select-text" class="ant-upload ant-upload-select ant-upload-select-text ant-upload-in-form-item"
> >
<span <span
class="ant-upload" class="ant-upload"

2
components/upload/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3590,7 +3590,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
class="" class=""
> >
<div <div
class="ant-upload ant-upload-select ant-upload-select-text" class="ant-upload ant-upload-select ant-upload-select-text ant-upload-in-form-item"
> >
<span <span
class="ant-upload" class="ant-upload"

8
components/upload/style/index.less
View File

@ -137,6 +137,14 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
&&-in-form-item {
background: transparent;
&.@{upload-prefix-cls}-drag {
background: @background-color-light;
}
}
} }
.@{upload-prefix-cls}-list { .@{upload-prefix-cls}-list {

1
components/upload/style/index.tsx
View File

@ -2,6 +2,7 @@ import '../../style/index.less';
import './index.less'; import './index.less';
// style dependencies // style dependencies
// deps-lint-skip: form
import '../../button/style'; import '../../button/style';
import '../../progress/style'; import '../../progress/style';
import '../../tooltip/style'; import '../../tooltip/style';