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: feedbackIcon provided by form (#34712)

Browse Source 
* refactor: feedbackIcon migration

* test: update snapshot
This commit is contained in:
MadCcc 2022-03-25 17:48:12 +08:00 committed by GitHub
parent 0de1e66ff1
commit 7c4e12f99e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 340 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/_util/statusUtils.tsx
View File

@ -1,8 +1,3 @@
import React from 'react';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames'; import classNames from 'classnames';
import { ValidateStatus } from '../form/FormItem'; import { ValidateStatus } from '../form/FormItem';
import { tuple } from './type'; import { tuple } from './type';
@ -10,22 +5,6 @@ import { tuple } from './type';
const InputStatuses = tuple('warning', 'error', ''); const InputStatuses = tuple('warning', 'error', '');
export type InputStatus = typeof InputStatuses[number]; export type InputStatus = typeof InputStatuses[number];
const iconMap = {
success: CheckCircleFilled,
warning: ExclamationCircleFilled,
error: CloseCircleFilled,
validating: LoadingOutlined,
};
export const getFeedbackIcon = (prefixCls: string, status?: ValidateStatus) => {
const IconNode = status && iconMap[status];
return IconNode ? (
<span className={`${prefixCls}-feedback-icon`}>
<IconNode />
</span>
) : null;
};
export function getStatusClassNames( export function getStatusClassNames(
prefixCls: string, prefixCls: string,
status?: ValidateStatus, status?: ValidateStatus,

9
components/cascader/index.tsx
View File

@ -146,7 +146,12 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
const isRtl = mergedDirection === 'rtl'; const isRtl = mergedDirection === 'rtl';
// =================== Form ===================== // =================== Form =====================
const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext); const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// =================== Warning ===================== // =================== Warning =====================
@ -227,8 +232,8 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !multiple; const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !multiple;
const { suffixIcon, removeIcon, clearIcon } = getIcons({ const { suffixIcon, removeIcon, clearIcon } = getIcons({
...props, ...props,
status: mergedStatus,
hasFeedback, hasFeedback,
feedbackIcon,
showArrow: mergedShowArrow, showArrow: mergedShowArrow,
multiple, multiple,
prefixCls, prefixCls,

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

@ -6,7 +6,6 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined'; import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
import { RangePicker as RCRangePicker } from 'rc-picker'; import { RangePicker as RCRangePicker } from 'rc-picker';
import { GenerateConfig } from 'rc-picker/lib/generate/index'; import { GenerateConfig } from 'rc-picker/lib/generate/index';
import { PickerMode } from 'rc-picker/lib/interface';
import enUS from '../locale/en_US'; import enUS from '../locale/en_US';
import { ConfigContext, ConfigConsumerProps } from '../../config-provider'; import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
import SizeContext from '../../config-provider/SizeContext'; import SizeContext from '../../config-provider/SizeContext';
@ -15,7 +14,7 @@ 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 { FormItemInputContext } from '../../form/context'; import { FormItemInputContext } from '../../form/context';
import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
export default function generateRangePicker<DateType>( export default function generateRangePicker<DateType>(
generateConfig: GenerateConfig<DateType>, generateConfig: GenerateConfig<DateType>,
@ -39,23 +38,6 @@ export default function generateRangePicker<DateType>(
} }
}; };
renderFeedback = (prefixCls: string) => (
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => {
const { status: customStatus } = this.props;
const status = getMergedStatus(contextStatus, customStatus);
return hasFeedback && getFeedbackIcon(prefixCls, status);
}}
</FormItemInputContext.Consumer>
);
renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{this.renderFeedback(prefixCls)}
</>
);
renderPicker = (contextLocale: PickerLocale) => { renderPicker = (contextLocale: PickerLocale) => {
const locale = { ...contextLocale, ...this.props.locale }; const locale = { ...contextLocale, ...this.props.locale };
const { getPrefixCls, direction, getPopupContainer } = this.context; const { getPrefixCls, direction, getPopupContainer } = this.context;
@ -89,7 +71,15 @@ export default function generateRangePicker<DateType>(
return ( return (
<FormItemInputContext.Consumer> <FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => ( {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCRangePicker<DateType> <RCRangePicker<DateType>
separator={ separator={
<span aria-label="to" className={`${prefixCls}-separator`}> <span aria-label="to" className={`${prefixCls}-separator`}>
@ -99,7 +89,7 @@ export default function generateRangePicker<DateType>(
ref={this.pickerRef} ref={this.pickerRef}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)} dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)} placeholder={getRangePlaceholder(picker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, picker)} suffixIcon={suffixNode}
clearIcon={<CloseCircleFilled />} clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />} prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />} nextIcon={<span className={`${prefixCls}-next-icon`} />}
@ -128,7 +118,8 @@ export default function generateRangePicker<DateType>(
components={Components} components={Components}
direction={direction} direction={direction}
/> />
)} );
}}
</FormItemInputContext.Consumer> </FormItemInputContext.Consumer>
); );
}} }}

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

@ -22,12 +22,7 @@ import {
} from '.'; } from '.';
import { PickerComponentClass } from './interface'; import { PickerComponentClass } from './interface';
import { FormItemInputContext } from '../../form/context'; import { FormItemInputContext } from '../../form/context';
import { import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../../_util/statusUtils';
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) { export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
type DatePickerProps = PickerProps<DateType> & { type DatePickerProps = PickerProps<DateType> & {
@ -68,23 +63,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
} }
}; };
renderFeedback = (prefixCls: string) => (
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => {
const { status: customStatus } = this.props;
const status = getMergedStatus(contextStatus, customStatus);
return hasFeedback && getFeedbackIcon(prefixCls, status);
}}
</FormItemInputContext.Consumer>
);
renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{this.renderFeedback(prefixCls)}
</>
);
renderPicker = (contextLocale: PickerLocale) => { renderPicker = (contextLocale: PickerLocale) => {
const locale = { ...contextLocale, ...this.props.locale }; const locale = { ...contextLocale, ...this.props.locale };
const { getPrefixCls, direction, getPopupContainer } = this.context; const { getPrefixCls, direction, getPopupContainer } = this.context;
@ -128,11 +106,19 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
return ( return (
<FormItemInputContext.Consumer> <FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => ( {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCPicker<DateType> <RCPicker<DateType>
ref={this.pickerRef} ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale, placeholder)} placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, mergedPicker)} suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)} dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />} clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />} prevIcon={<span className={`${prefixCls}-prev-icon`} />}
@ -163,7 +149,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
components={Components} components={Components}
direction={direction} direction={direction}
/> />
)} );
}}
</FormItemInputContext.Consumer> </FormItemInputContext.Consumer>
); );
}} }}

18
components/date-picker/style/status.less
View File

@ -21,10 +21,6 @@
.active(@text-color, @hoverBorderColor, @outlineColor); .active(@text-color, @hoverBorderColor, @outlineColor);
} }
} }
.@{picker-prefix-cls}-feedback-icon {
color: @text-color;
}
} }
.@{picker-prefix-cls} { .@{picker-prefix-cls} {
@ -35,18 +31,4 @@
&-status-warning { &-status-warning {
.picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
} }
&-status-validating {
.@{picker-prefix-cls}-feedback-icon {
display: inline-block;
color: @primary-color;
}
}
&-status-success {
.@{picker-prefix-cls}-feedback-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
} }

38
components/form/FormItem.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { useContext, useMemo } from 'react'; import { ReactNode, useContext, useMemo } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { Field, FormInstance, FieldContext, ListContext } from 'rc-field-form'; import { Field, FormInstance, FieldContext, ListContext } from 'rc-field-form';
import { FieldProps } from 'rc-field-form/lib/Field'; import { FieldProps } from 'rc-field-form/lib/Field';
@ -7,6 +7,10 @@ import { Meta, NamePath } from 'rc-field-form/lib/interface';
import { supportRef } from 'rc-util/lib/ref'; import { supportRef } from 'rc-util/lib/ref';
import useState from 'rc-util/lib/hooks/useState'; import useState from 'rc-util/lib/hooks/useState';
import omit from 'rc-util/lib/omit'; import omit from 'rc-util/lib/omit';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import Row from '../grid/row'; import Row from '../grid/row';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
@ -88,6 +92,13 @@ function genEmptyMeta(): Meta {
}; };
} }
const iconMap = {
success: CheckCircleFilled,
warning: ExclamationCircleFilled,
error: CloseCircleFilled,
validating: LoadingOutlined,
};
function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement { function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement {
const { const {
name, name,
@ -219,14 +230,29 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
mergedValidateStatus = 'success'; mergedValidateStatus = 'success';
} }
const formItemStatusContext = useMemo<FormItemStatusContextProps>( const formItemStatusContext = useMemo<FormItemStatusContextProps>(() => {
() => ({ let feedbackIcon: ReactNode;
if (hasFeedback) {
const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
feedbackIcon = IconNode ? (
<span
className={classNames(
`${prefixCls}-item-feedback-icon`,
`${prefixCls}-item-feedback-icon-${mergedValidateStatus}`,
)}
>
<IconNode />
</span>
) : null;
}
return {
status: mergedValidateStatus, status: mergedValidateStatus,
hasFeedback, hasFeedback,
feedbackIcon,
isFormItemInput: true, isFormItemInput: true,
}), };
[mergedValidateStatus, hasFeedback], }, [mergedValidateStatus, hasFeedback]);
);
// ======================== Render ======================== // ======================== Render ========================
function renderLayout( function renderLayout(

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

@ -16390,7 +16390,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
> >
<span <span
aria-label="loading" aria-label="loading"
@ -16464,7 +16464,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -16528,7 +16528,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -16592,7 +16592,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -16690,7 +16690,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-picker-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -17336,7 +17336,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-picker-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -18833,7 +18833,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-picker-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -20136,7 +20136,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-select-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -20273,7 +20273,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-select-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -20466,7 +20466,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-select-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -21869,7 +21869,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-number-suffix" class="ant-input-number-suffix"
> >
<span <span
class="ant-input-number-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -21957,7 +21957,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</span> </span>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -22044,7 +22044,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -22156,7 +22156,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -22218,7 +22218,10 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
/> />
</div> </div>
<span <span
class="ant-mentions-feedback-icon" class="ant-mentions-suffix"
>
<span
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -22240,6 +22243,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
</span> </span>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -22299,7 +22303,10 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</span> </span>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-input-textarea-suffix"
>
<span
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -22321,6 +22328,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg> </svg>
</span> </span>
</span> </span>
</span>
</div> </div>
</div> </div>
</div> </div>

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

@ -7451,7 +7451,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
> >
<span <span
aria-label="loading" aria-label="loading"
@ -7525,7 +7525,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -7589,7 +7589,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -7653,7 +7653,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix" class="ant-input-suffix"
> >
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -7751,7 +7751,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-picker-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -7843,7 +7843,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-picker-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -7975,7 +7975,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-picker-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -8082,7 +8082,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-select-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -8188,7 +8188,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-select-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -8304,7 +8304,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-select-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -8599,7 +8599,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-number-suffix" class="ant-input-number-suffix"
> >
<span <span
class="ant-input-number-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -8687,7 +8687,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span> </span>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
> >
<span <span
aria-label="check-circle" aria-label="check-circle"
@ -8774,7 +8774,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
> >
<span <span
aria-label="exclamation-circle" aria-label="exclamation-circle"
@ -8886,7 +8886,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -8948,7 +8948,10 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
/> />
</div> </div>
<span <span
class="ant-mentions-feedback-icon" class="ant-mentions-suffix"
>
<span
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -8970,6 +8973,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
</span> </span>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -9029,7 +9033,10 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span> </span>
</span> </span>
<span <span
class="ant-input-feedback-icon" class="ant-input-textarea-suffix"
>
<span
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
> >
<span <span
aria-label="close-circle" aria-label="close-circle"
@ -9051,6 +9058,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg> </svg>
</span> </span>
</span> </span>
</span>
</div> </div>
</div> </div>
</div> </div>

3
components/form/context.tsx
View File

@ -3,7 +3,7 @@ import omit from 'rc-util/lib/omit';
import { Meta } from 'rc-field-form/lib/interface'; import { Meta } from 'rc-field-form/lib/interface';
import { FormProvider as RcFormProvider } from 'rc-field-form'; import { FormProvider as RcFormProvider } from 'rc-field-form';
import { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext'; import { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext';
import { FC, PropsWithChildren, useMemo } from 'react'; import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
import { ColProps } from '../grid/col'; import { ColProps } from '../grid/col';
import { FormLabelAlign } from './interface'; import { FormLabelAlign } from './interface';
import { RequiredMark } from './Form'; import { RequiredMark } from './Form';
@ -56,6 +56,7 @@ export interface FormItemStatusContextProps {
isFormItemInput?: boolean; isFormItemInput?: boolean;
status?: ValidateStatus; status?: ValidateStatus;
hasFeedback?: boolean; hasFeedback?: boolean;
feedbackIcon?: ReactNode;
} }
export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({}); export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});

27
components/form/style/index.less
View File

@ -223,6 +223,33 @@
min-height: @form-item-margin-bottom; min-height: @form-item-margin-bottom;
opacity: 1; opacity: 1;
} }
// ==============================================================
// = Feedback Icon =
// ==============================================================
&-feedback-icon {
font-size: @font-size-base;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
pointer-events: none;
&-success {
color: @success-color;
}
&-error {
color: @error-color;
}
&-warning {
color: @warning-color;
}
&-validating {
color: @primary-color;
}
}
} }
// >>>>>>>>>> Motion <<<<<<<<<< // >>>>>>>>>> Motion <<<<<<<<<<

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

@ -8,12 +8,7 @@ import { ConfigContext } from '../config-provider';
import SizeContext, { SizeType } from '../config-provider/SizeContext'; import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext, NoFormStatus } from '../form/context'; import { FormItemInputContext, NoFormStatus } from '../form/context';
import { cloneElement } from '../_util/reactNode'; import { cloneElement } from '../_util/reactNode';
import { import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
getFeedbackIcon,
getStatusClassNames,
InputStatus,
getMergedStatus,
} from '../_util/statusUtils';
type ValueType = string | number; type ValueType = string | number;
@ -71,7 +66,12 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
); );
} }
const { hasFeedback, status: contextStatus, isFormItemInput } = useContext(FormItemInputContext); const {
hasFeedback,
status: contextStatus,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
const mergeSize = customizeSize || size; const mergeSize = customizeSize || size;
@ -137,9 +137,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
props.onBlur?.(event); props.onBlur?.(event);
}, },
})} })}
{hasFeedback && ( {hasFeedback && <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>}
<span className={`${prefixCls}-suffix`}>{getFeedbackIcon(prefixCls, mergedStatus)}</span>
)}
</div> </div>
); );
} }

16
components/input-number/style/status.less
View File

@ -18,22 +18,6 @@ each(@input-number-wrapper-cls, {
} }
}); });
.@{input-number-prefix-cls}-affix-wrapper {
&-status-validating {
.@{input-number-prefix-cls}-feedback-icon {
display: inline-block;
color: @primary-color;
}
}
&-status-success {
.@{input-number-prefix-cls}-feedback-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
}
.@{input-number-prefix-cls}-group-wrapper { .@{input-number-prefix-cls}-group-wrapper {
&-status-error { &-status-error {
.group-status-color(@input-number-prefix-cls, @error-color, @error-color); .group-status-color(@input-number-prefix-cls, @error-color, @error-color);

11
components/input/Input.tsx
View File

@ -4,12 +4,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import classNames from 'classnames'; import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref'; import { composeRef } from 'rc-util/lib/ref';
import SizeContext, { SizeType } from '../config-provider/SizeContext'; import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../_util/statusUtils';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { FormItemInputContext, NoFormStatus } from '../form/context'; import { FormItemInputContext, NoFormStatus } from '../form/context';
import { hasPrefixSuffix } from './utils'; import { hasPrefixSuffix } from './utils';
@ -145,7 +140,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const mergedSize = customSize || size; const mergedSize = customSize || size;
// ===================== Status ===================== // ===================== Status =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemInputContext); const { status: contextStatus, hasFeedback, feedbackIcon } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Focus warning ===================== // ===================== Focus warning =====================
@ -196,7 +191,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const suffixNode = (hasFeedback || suffix) && ( const suffixNode = (hasFeedback || suffix) && (
<> <>
{suffix} {suffix}
{hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)} {hasFeedback && feedbackIcon}
</> </>
); );

15
components/input/TextArea.tsx
View File

@ -7,12 +7,7 @@ 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 { FormItemInputContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
getFeedbackIcon,
getStatusClassNames,
InputStatus,
getMergedStatus,
} from '../_util/statusUtils';
import ClearableLabeledInput from './ClearableLabeledInput'; import ClearableLabeledInput from './ClearableLabeledInput';
import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input'; import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input';
@ -79,7 +74,11 @@ 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(FormItemInputContext); const {
status: contextStatus,
hasFeedback,
feedbackIcon,
} = 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);
@ -242,7 +241,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
data-count={dataCount} data-count={dataCount}
> >
{textareaNode} {textareaNode}
{hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)} {hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
</div> </div>
); );
} }

11
components/input/style/index.less
View File

@ -62,6 +62,17 @@
pointer-events: none; pointer-events: none;
} }
} }
&-textarea-suffix {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
} }
@import './search-input'; @import './search-input';

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

@ -453,10 +453,6 @@
@hoverBorderColor: @primary-color-hover; @hoverBorderColor: @primary-color-hover;
@outlineColor: @primary-color-outline; @outlineColor: @primary-color-outline;
) { ) {
.@{prefix-cls}-feedback-icon {
color: @text-color;
}
.@{prefix-cls}-prefix { .@{prefix-cls}-prefix {
color: @text-color; color: @text-color;
} }

40
components/input/style/status.less
View File

@ -18,47 +18,7 @@ each(@input-wrapper-cls, {
} }
}); });
.@{input-prefix-cls}-textarea,
.@{input-prefix-cls}-affix-wrapper {
&-status-validating {
.@{input-prefix-cls}-feedback-icon {
display: inline-block;
color: @primary-color;
}
}
&-status-success {
.@{input-prefix-cls}-feedback-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
}
.@{input-prefix-cls}-textarea { .@{input-prefix-cls}-textarea {
&-status-error {
.@{input-prefix-cls}-feedback-icon {
color: @error-color;
}
}
&-status-warning {
.@{input-prefix-cls}-feedback-icon {
color: @warning-color;
}
}
.@{input-prefix-cls}-feedback-icon {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
&-status-error, &-status-error,
&-status-warning, &-status-warning,
&-status-success, &-status-success,

15
components/mentions/index.tsx
View File

@ -6,12 +6,7 @@ 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 { FormItemInputContext } from '../form/context'; import { FormItemInputContext } from '../form/context';
import { import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../_util/statusUtils';
export const { Option } = RcMentions; export const { Option } = RcMentions;
@ -70,7 +65,11 @@ 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(FormItemInputContext); const {
status: contextStatus,
hasFeedback,
feedbackIcon,
} = 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) => {
@ -154,7 +153,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
)} )}
> >
{mentions} {mentions}
{getFeedbackIcon(prefixCls, mergedStatus)} <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>
</div> </div>
); );
} }

11
components/mentions/style/index.less
View File

@ -163,6 +163,17 @@
} }
} }
} }
&-suffix {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
} }
@import './rtl'; @import './rtl';

27
components/mentions/style/status.less
View File

@ -13,31 +13,4 @@
.status-color(@mention-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); .status-color(@mention-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
.status-color-common(@input-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); .status-color-common(@input-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
} }
&-affix-wrapper {
position: relative;
.@{mention-prefix-cls}-feedback-icon {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
&-status-error {
.@{mention-prefix-cls}-feedback-icon {
color: @error-color;
}
}
&-has-warning {
.@{mention-prefix-cls}-feedback-icon {
color: @warning-color;
}
}
}
} }

9
components/select/index.tsx
View File

@ -100,7 +100,12 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox'); showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
// ===================== Form Status ===================== // ===================== Form Status =====================
const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext); const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Empty ===================== // ===================== Empty =====================
@ -117,8 +122,8 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({ const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({
...props, ...props,
multiple: isMultiple, multiple: isMultiple,
status: mergedStatus,
hasFeedback, hasFeedback,
feedbackIcon,
showArrow: mergedShowArrow, showArrow: mergedShowArrow,
prefixCls, prefixCls,
}); });

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

@ -147,6 +147,10 @@
.@{select-prefix-cls}-disabled & { .@{select-prefix-cls}-disabled & {
cursor: not-allowed; cursor: not-allowed;
} }
> *:not(:last-child) {
margin-inline-end: @padding-xs;
}
} }
// ========================== Clear ========================== // ========================== Clear ==========================

28
components/select/style/status.less
View File

@ -19,10 +19,6 @@
.active(@border-color, @hoverBorderColor, @outlineColor); .active(@border-color, @hoverBorderColor, @outlineColor);
} }
} }
.@{select-prefix-cls}-feedback-icon {
color: @text-color;
}
} }
.@{select-prefix-cls} { .@{select-prefix-cls} {
@ -34,18 +30,6 @@
.select-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); .select-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
} }
&-status-success {
.@{select-prefix-cls}-feedback-icon {
color: @success-color;
}
}
&-status-validating {
.@{select-prefix-cls}-feedback-icon {
color: @primary-color;
}
}
&-status-error, &-status-error,
&-status-warning, &-status-warning,
&-status-success, &-status-success,
@ -61,16 +45,4 @@
} }
} }
} }
&-feedback-icon {
font-size: @font-size-base;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
pointer-events: none;
&:not(:first-child) {
margin-left: 8px;
}
}
} }

8
components/select/utils/iconUtil.tsx
View File

@ -6,8 +6,6 @@ import CheckOutlined from '@ant-design/icons/CheckOutlined';
import CloseOutlined from '@ant-design/icons/CloseOutlined'; import CloseOutlined from '@ant-design/icons/CloseOutlined';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import SearchOutlined from '@ant-design/icons/SearchOutlined'; import SearchOutlined from '@ant-design/icons/SearchOutlined';
import { ValidateStatus } from '../../form/FormItem';
import { getFeedbackIcon } from '../../_util/statusUtils';
export default function getIcons({ export default function getIcons({
suffixIcon, suffixIcon,
@ -17,9 +15,9 @@ export default function getIcons({
loading, loading,
multiple, multiple,
hasFeedback, hasFeedback,
status,
prefixCls, prefixCls,
showArrow, showArrow,
feedbackIcon,
}: { }: {
suffixIcon?: React.ReactNode; suffixIcon?: React.ReactNode;
clearIcon?: React.ReactNode; clearIcon?: React.ReactNode;
@ -28,7 +26,7 @@ export default function getIcons({
loading?: boolean; loading?: boolean;
multiple?: boolean; multiple?: boolean;
hasFeedback?: boolean; hasFeedback?: boolean;
status?: ValidateStatus; feedbackIcon?: ReactNode;
prefixCls: string; prefixCls: string;
showArrow?: boolean; showArrow?: boolean;
}) { }) {
@ -42,7 +40,7 @@ export default function getIcons({
const getSuffixIconNode = (arrowIcon?: ReactNode) => ( const getSuffixIconNode = (arrowIcon?: ReactNode) => (
<> <>
{showArrow !== false && arrowIcon} {showArrow !== false && arrowIcon}
{hasFeedback && getFeedbackIcon(prefixCls, status)} {hasFeedback && feedbackIcon}
</> </>
); );

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

@ -105,16 +105,21 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple; const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
// ===================== Form ===================== // ===================== Form =====================
const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext); const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus); const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Icons ===================== // ===================== Icons =====================
const { suffixIcon, removeIcon, clearIcon } = getIcons({ const { suffixIcon, removeIcon, clearIcon } = getIcons({
...props, ...props,
multiple: isMultiple, multiple: isMultiple,
status: mergedStatus,
showArrow: mergedShowArrow, showArrow: mergedShowArrow,
hasFeedback, hasFeedback,
feedbackIcon,
prefixCls, prefixCls,
}); });