test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 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 { ValidateStatus } from '../form/FormItem';
import { tuple } from './type';
@ -10,22 +5,6 @@ import { tuple } from './type';
const InputStatuses = tuple('warning', 'error', '');
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(
prefixCls: string,
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';
// =================== Form =====================
const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
// =================== 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 { suffixIcon, removeIcon, clearIcon } = getIcons({
...props,
status: mergedStatus,
hasFeedback,
feedbackIcon,
showArrow: mergedShowArrow,
multiple,
prefixCls,

109
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 { RangePicker as RCRangePicker } from 'rc-picker';
import { GenerateConfig } from 'rc-picker/lib/generate/index';
import { PickerMode } from 'rc-picker/lib/interface';
import enUS from '../locale/en_US';
import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
import SizeContext from '../../config-provider/SizeContext';
@ -15,7 +14,7 @@ import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
import { PickerComponentClass } from './interface';
import { FormItemInputContext } from '../../form/context';
import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
export default function generateRangePicker<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) => {
const locale = { ...contextLocale, ...this.props.locale };
const { getPrefixCls, direction, getPopupContainer } = this.context;
@ -89,46 +71,55 @@ export default function generateRangePicker<DateType>(
return (
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => (
<RCRangePicker<DateType>
separator={
<span aria-label="to" className={`${prefixCls}-separator`}>
<SwapRightOutlined />
</span>
}
ref={this.pickerRef}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, picker)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...restProps}
{...additionalOverrideProps}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
locale={locale!.lang}
prefixCls={prefixCls}
getPopupContainer={customGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
)}
{({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCRangePicker<DateType>
separator={
<span aria-label="to" className={`${prefixCls}-separator`}>
<SwapRightOutlined />
</span>
}
ref={this.pickerRef}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)}
suffixIcon={suffixNode}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...restProps}
{...additionalOverrideProps}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
locale={locale!.lang}
prefixCls={prefixCls}
getPopupContainer={customGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
);
}}
</FormItemInputContext.Consumer>
);
}}

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

@ -22,12 +22,7 @@ import {
} from '.';
import { PickerComponentClass } from './interface';
import { FormItemInputContext } from '../../form/context';
import {
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../../_util/statusUtils';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
export default function generatePicker<DateType>(generateConfig: GenerateConfig<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) => {
const locale = { ...contextLocale, ...this.props.locale };
const { getPrefixCls, direction, getPopupContainer } = this.context;
@ -128,42 +106,51 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
return (
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => (
<RCPicker<DateType>
ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, mergedPicker)}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...additionalProps}
{...restProps}
{...additionalOverrideProps}
locale={locale!.lang}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
prefixCls={prefixCls}
getPopupContainer={customizeGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
)}
{({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCPicker<DateType>
ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...additionalProps}
{...restProps}
{...additionalOverrideProps}
locale={locale!.lang}
className={classNames(
{
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
},
getStatusClassNames(
prefixCls,
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
className,
)}
prefixCls={prefixCls}
getPopupContainer={customizeGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
components={Components}
direction={direction}
/>
);
}}
</FormItemInputContext.Consumer>
);
}}

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

@ -21,10 +21,6 @@
.active(@text-color, @hoverBorderColor, @outlineColor);
}
}
.@{picker-prefix-cls}-feedback-icon {
color: @text-color;
}
}
.@{picker-prefix-cls} {
@ -35,18 +31,4 @@
&-status-warning {
.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 { useContext, useMemo } from 'react';
import { ReactNode, useContext, useMemo } from 'react';
import classNames from 'classnames';
import { Field, FormInstance, FieldContext, ListContext } from 'rc-field-form';
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 useState from 'rc-util/lib/hooks/useState';
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 { ConfigContext } from '../config-provider';
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 {
const {
name,
@ -219,14 +230,29 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
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,
hasFeedback,
feedbackIcon,
isFormItemInput: true,
}),
[mergedValidateStatus, hasFeedback],
);
};
}, [mergedValidateStatus, hasFeedback]);
// ======================== Render ========================
function renderLayout(

100
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"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
>
<span
aria-label="loading"
@ -16464,7 +16464,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -16528,7 +16528,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -16592,7 +16592,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -16690,7 +16690,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -17336,7 +17336,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -18833,7 +18833,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -20136,7 +20136,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -20273,7 +20273,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -20466,7 +20466,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -21869,7 +21869,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-input-number-suffix"
>
<span
class="ant-input-number-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -21957,7 +21957,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -22044,7 +22044,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -22156,7 +22156,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -22218,26 +22218,30 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
/>
</div>
<span
class="ant-mentions-feedback-icon"
class="ant-mentions-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</div>
@ -22299,26 +22303,30 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-input-textarea-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</div>

100
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"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
>
<span
aria-label="loading"
@ -7525,7 +7525,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -7589,7 +7589,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -7653,7 +7653,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-suffix"
>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -7751,7 +7751,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -7843,7 +7843,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -7975,7 +7975,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-picker-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8082,7 +8082,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8188,7 +8188,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8304,7 +8304,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-select-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -8599,7 +8599,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-number-suffix"
>
<span
class="ant-input-number-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -8687,7 +8687,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
>
<span
aria-label="check-circle"
@ -8774,7 +8774,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
>
<span
aria-label="exclamation-circle"
@ -8886,7 +8886,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
<span
class="ant-input-feedback-icon"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8948,26 +8948,30 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
/>
</div>
<span
class="ant-mentions-feedback-icon"
class="ant-mentions-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</div>
@ -9029,26 +9033,30 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span>
</span>
<span
class="ant-input-feedback-icon"
class="ant-input-textarea-suffix"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</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 { FormProvider as RcFormProvider } from 'rc-field-form';
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 { FormLabelAlign } from './interface';
import { RequiredMark } from './Form';
@ -56,6 +56,7 @@ export interface FormItemStatusContextProps {
isFormItemInput?: boolean;
status?: ValidateStatus;
hasFeedback?: boolean;
feedbackIcon?: ReactNode;
}
export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});

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

@ -223,6 +223,33 @@
min-height: @form-item-margin-bottom;
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 <<<<<<<<<<

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 { FormItemInputContext, NoFormStatus } from '../form/context';
import { cloneElement } from '../_util/reactNode';
import {
getFeedbackIcon,
getStatusClassNames,
InputStatus,
getMergedStatus,
} from '../_util/statusUtils';
import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
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 mergeSize = customizeSize || size;
@ -137,9 +137,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
props.onBlur?.(event);
},
})}
{hasFeedback && (
<span className={`${prefixCls}-suffix`}>{getFeedbackIcon(prefixCls, mergedStatus)}</span>
)}
{hasFeedback && <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>}
</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 {
&-status-error {
.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 { composeRef } from 'rc-util/lib/ref';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import {
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
import { ConfigContext } from '../config-provider';
import { FormItemInputContext, NoFormStatus } from '../form/context';
import { hasPrefixSuffix } from './utils';
@ -145,7 +140,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const mergedSize = customSize || size;
// ===================== Status =====================
const { status: contextStatus, hasFeedback } = useContext(FormItemInputContext);
const { status: contextStatus, hasFeedback, feedbackIcon } = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Focus warning =====================
@ -196,7 +191,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const suffixNode = (hasFeedback || 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 SizeContext, { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext } from '../form/context';
import {
getFeedbackIcon,
getStatusClassNames,
InputStatus,
getMergedStatus,
} from '../_util/statusUtils';
import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
import ClearableLabeledInput from './ClearableLabeledInput';
import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input';
@ -79,7 +74,11 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
const { getPrefixCls, direction } = React.useContext(ConfigContext);
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 innerRef = React.useRef<RcTextArea>(null);
@ -242,7 +241,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
data-count={dataCount}
>
{textareaNode}
{hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)}
{hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
</div>
);
}

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

@ -62,6 +62,17 @@
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';

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

@ -453,10 +453,6 @@
@hoverBorderColor: @primary-color-hover;
@outlineColor: @primary-color-outline;
) {
.@{prefix-cls}-feedback-icon {
color: @text-color;
}
.@{prefix-cls}-prefix {
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 {
&-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-warning,
&-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 { ConfigContext } from '../config-provider';
import { FormItemInputContext } from '../form/context';
import {
getFeedbackIcon,
getMergedStatus,
getStatusClassNames,
InputStatus,
} from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
export const { Option } = RcMentions;
@ -70,7 +65,11 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
const innerRef = React.useRef<HTMLElement>();
const mergedRef = composeRef(ref, innerRef);
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 onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {
@ -154,7 +153,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
)}
>
{mentions}
{getFeedbackIcon(prefixCls, mergedStatus)}
<span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>
</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';

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

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

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

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

@ -19,10 +19,6 @@
.active(@border-color, @hoverBorderColor, @outlineColor);
}
}
.@{select-prefix-cls}-feedback-icon {
color: @text-color;
}
}
.@{select-prefix-cls} {
@ -34,18 +30,6 @@
.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-warning,
&-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 CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import { ValidateStatus } from '../../form/FormItem';
import { getFeedbackIcon } from '../../_util/statusUtils';
export default function getIcons({
suffixIcon,
@ -17,9 +15,9 @@ export default function getIcons({
loading,
multiple,
hasFeedback,
status,
prefixCls,
showArrow,
feedbackIcon,
}: {
suffixIcon?: React.ReactNode;
clearIcon?: React.ReactNode;
@ -28,7 +26,7 @@ export default function getIcons({
loading?: boolean;
multiple?: boolean;
hasFeedback?: boolean;
status?: ValidateStatus;
feedbackIcon?: ReactNode;
prefixCls: string;
showArrow?: boolean;
}) {
@ -42,7 +40,7 @@ export default function getIcons({
const getSuffixIconNode = (arrowIcon?: ReactNode) => (
<>
{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;
// ===================== Form =====================
const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Icons =====================
const { suffixIcon, removeIcon, clearIcon } = getIcons({
...props,
multiple: isMultiple,
status: mergedStatus,
showArrow: mergedShowArrow,
hasFeedback,
feedbackIcon,
prefixCls,
});