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

Merge branch 'feature' into next-merge-feature

Browse Source
This commit is contained in:
MadCcc 2022-03-25 20:08:05 +08:00
commit cf18b1443b
26 changed files with 689 additions and 798 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

@ -149,7 +149,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 =====================
@ -234,8 +239,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,

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 { 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,7 +71,15 @@ export default function generateRangePicker<DateType>(
return (
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => (
{({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCRangePicker<DateType>
separator={
<span aria-label="to" className={`${prefixCls}-separator`}>
@ -99,7 +89,7 @@ export default function generateRangePicker<DateType>(
ref={this.pickerRef}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, picker)}
suffixIcon={suffixNode}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
@ -128,7 +118,8 @@ export default function generateRangePicker<DateType>(
components={Components}
direction={direction}
/>
)}
);
}}
</FormItemInputContext.Consumer>
);
}}

39
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,11 +106,19 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
return (
<FormItemInputContext.Consumer>
{({ hasFeedback, status: contextStatus }) => (
{({ hasFeedback, status: contextStatus, feedbackIcon }) => {
const suffixNode = (
<>
{mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
{hasFeedback && feedbackIcon}
</>
);
return (
<RCPicker<DateType>
ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
suffixIcon={this.renderSuffix(prefixCls, mergedPicker)}
suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
@ -163,7 +149,8 @@ export default function generatePicker<DateType>(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(

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

@ -5188,7 +5188,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
data-count="0 / 100"
>
<textarea
@ -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,7 +22218,10 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
/>
</div>
<span
class="ant-mentions-feedback-icon"
class="ant-mentions-suffix"
>
<span
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -22240,6 +22243,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
@ -22268,7 +22272,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-status-error ant-input-textarea-has-feedback"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
data-count="0"
>
<span
@ -22299,7 +22303,10 @@ 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
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -22321,6 +22328,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
</svg>
</span>
</span>
</span>
</div>
</div>
</div>

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

@ -4370,7 +4370,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
data-count="0 / 100"
>
<textarea
@ -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,7 +8948,10 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
/>
</div>
<span
class="ant-mentions-feedback-icon"
class="ant-mentions-suffix"
>
<span
class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
>
<span
aria-label="close-circle"
@ -8970,6 +8973,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
@ -8998,7 +9002,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-status-error ant-input-textarea-has-feedback"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
data-count="0"
>
<span
@ -9029,7 +9033,10 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</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
aria-label="close-circle"
@ -9051,6 +9058,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</svg>
</span>
</span>
</span>
</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 { 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>({});

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

@ -212,17 +212,38 @@
min-height: @form-item-margin-bottom;
}
.@{ant-prefix}-input-textarea-show-count {
&::after {
margin-bottom: -22px;
}
}
&-with-help &-explain {
height: auto;
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,13 +8,8 @@ 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 useStyle from './style';
import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
type ValueType = string | number;
@ -76,7 +71,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;
@ -144,9 +144,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';
@ -151,7 +146,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 =====================
@ -202,7 +197,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const suffixNode = (hasFeedback || suffix) && (
<>
{suffix}
{hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)}
{hasFeedback && feedbackIcon}
</>
);

17
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';
import useStyle from './style';
@ -80,7 +75,12 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
const {
status: contextStatus,
hasFeedback,
isFormItemInput,
feedbackIcon,
} = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
const innerRef = React.useRef<RcTextArea>(null);
@ -240,6 +240,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
{
[`${prefixCls}-textarea-rtl`]: direction === 'rtl',
[`${prefixCls}-textarea-show-count`]: showCount,
[`${prefixCls}-textarea-in-form-item`]: isFormItemInput,
},
getStatusClassNames(`${prefixCls}-textarea`, mergedStatus, hasFeedback),
className,
@ -249,7 +250,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
data-count={dataCount}
>
{textareaNode}
{hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)}
{hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
</div>
);
}

62
components/input/style/index.tsx
View File

@ -96,7 +96,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
}),
},
[`.${prefixCls}-feedback-icon, .${prefixCls}-prefix`]: {
[`.${prefixCls}-prefix`]: {
color: colorError,
},
},
@ -114,7 +114,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
}),
},
[`.${prefixCls}-feedback-icon, .${prefixCls}-prefix`]: {
[`.${prefixCls}-prefix`]: {
color: colorWarning,
},
},
@ -510,22 +510,6 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
paddingBottom: 3, // FIXME: magic number
},
},
'&-textarea-show-count': {
// https://github.com/ant-design/ant-design/issues/33049
[`> .${prefixCls}`]: {
height: '100%',
},
'&::after': {
textAlign: 'end',
color: token.colorTextSecondary,
whiteSpace: 'nowrap',
content: 'attr(data-count)',
pointerEvents: 'none',
display: 'block',
},
},
},
};
};
@ -633,6 +617,10 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
display: 'flex',
flex: 'none',
alignItems: 'center',
'> *:not(:last-child)': {
marginInlineEnd: 8, // FIXME: magic number
},
},
'&-show-count-suffix': {
@ -640,7 +628,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
},
'&-show-count-has-suffix': {
marginInlineEnd: 2, // FIXME: magic number
marginInlineEnd: token.marginXXS,
},
'&-prefix': {
@ -667,18 +655,6 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
// status
...genStatusStyle(token),
'&-status-validating': {
[`.${prefixCls}-feedback-icon`]: {
display: 'inline-block',
color: colorPrimary,
},
},
'&-status-success': {
[`.${prefixCls}-feedback-icon`]: {
color: colorSuccess,
// FIXME: animationName
},
},
},
};
};
@ -834,7 +810,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
return {
[textareaPrefixCls]: {
[`.${prefixCls}-feedback-icon`]: {
[`${textareaPrefixCls}-suffix`]: {
position: 'absolute',
top: 0,
insetInlineEnd: inputPaddingHorizontal,
@ -855,6 +831,28 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
},
},
},
'&-show-count': {
// https://github.com/ant-design/ant-design/issues/33049
[`> .${prefixCls}`]: {
height: '100%',
},
'&::after': {
textAlign: 'end',
color: token.colorTextSecondary,
whiteSpace: 'nowrap',
content: 'attr(data-count)',
pointerEvents: 'none',
display: 'block',
},
[`&${textareaPrefixCls}-in-form-item`]: {
'&::after': {
marginBottom: -Math.floor(token.fontSize * token.lineHeight),
},
},
},
},
};
};

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,13 +6,8 @@ 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 useStyle from './style';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
export const { Option } = RcMentions;
@ -72,7 +67,11 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
const innerRef = React.useRef<HTMLElement>();
const mergedRef = composeRef(ref, innerRef);
const { getPrefixCls, renderEmpty, direction, iconPrefixCls } = 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) => {
@ -162,7 +161,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
)}
>
{mentions}
{getFeedbackIcon(prefixCls, mergedStatus)}
<span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>
</div>
);
}

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

@ -61,6 +61,17 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
...genActiveStyle(token),
},
[`&-affix-wrapper ${mentionsCls}-suffix`]: {
position: 'absolute',
top: 0,
insetInlineEnd: inputPaddingHorizontal,
bottom: 0,
zIndex: 1,
display: 'inline-flex',
alignItems: 'center',
margin: 'auto',
},
// ================= Input Area =================
[`> textarea, ${mentionsCls}-measure`]: {
minHeight: controlHeight - 2,

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

@ -105,7 +105,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 =====================
@ -122,8 +127,8 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({
...props,
multiple: isMultiple,
status: mergedStatus,
hasFeedback,
feedbackIcon,
showArrow: mergedShowArrow,
prefixCls,
});

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

@ -1,54 +1,54 @@
// @import '../../style/themes/index';
// @import '../../style/mixins/index';
// @import '../../input/style/mixin';
// @import './single';
// @import './multiple';
// @import './status';
// @select-prefix-cls: ~'@{ant-prefix}-select';
// @select-height-without-border: @input-height-base - 2 * @border-width-base;
// @select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
// .select-selector() {
//@import '../../style/themes/index';
//@import '../../style/mixins/index';
//@import '../../input/style/mixin';
//@import './single';
//@import './multiple';
//@import './status';
//
//@select-prefix-cls: ~'@{ant-prefix}-select';
//@select-height-without-border: @input-height-base - 2 * @border-width-base;
//@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
//
//.select-selector() {
// position: relative;
// background-color: @select-background;
// border: @border-width-base @border-style-base @select-border-color;
// border-radius: @border-radius-base;
// transition: all 0.3s @ease-in-out;
//
// input {
// cursor: pointer;
// }
//
// .@{select-prefix-cls}-show-search& {
// cursor: text;
//
// input {
// cursor: auto;
// }
// }
//
// .@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
// .active();
// }
//
// .@{select-prefix-cls}-disabled& {
// color: @disabled-color;
// background: @input-disabled-bg;
// cursor: not-allowed;
//
// .@{select-prefix-cls}-multiple& {
// background: @select-multiple-disabled-background;
// }
//
// input {
// cursor: not-allowed;
// }
// }
// }
// /* Reset search input style */
// .select-search-input-without-border() {
//}
//
///* Reset search input style */
//.select-search-input-without-border() {
// .@{select-prefix-cls}-selection-search-input {
// margin: 0;
// padding: 0;
@ -56,30 +56,30 @@
// border: none;
// outline: none;
// appearance: none;
//
// &::-webkit-search-cancel-button {
// display: none;
// /* stylelint-disable-next-line property-no-vendor-prefix */
// -webkit-appearance: none;
// }
// }
// }
// .@{select-prefix-cls} {
//}
//
//.@{select-prefix-cls} {
// .reset-component();
// position: relative;
// display: inline-block;
// cursor: pointer;
//
// &:not(&-customize-input) &-selector {
// .select-selector();
// .select-search-input-without-border();
// }
//
// &:not(&-disabled):hover &-selector {
// .hover();
// }
//
// // ======================== Selection ========================
// &-selection-item {
// flex: 1;
@ -87,7 +87,7 @@
// font-weight: normal;
// white-space: nowrap;
// text-overflow: ellipsis;
//
// // IE11 css hack. `*::-ms-backdrop,` is a must have
// @media all and (-ms-high-contrast: none) {
// *::-ms-backdrop,
@ -96,7 +96,7 @@
// }
// }
// }
//
// // ======================= Placeholder =======================
// &-selection-placeholder {
// flex: 1;
@ -105,7 +105,7 @@
// white-space: nowrap;
// text-overflow: ellipsis;
// pointer-events: none;
//
// // IE11 css hack. `*::-ms-backdrop,` is a must have
// @media all and (-ms-high-contrast: none) {
// *::-ms-backdrop,
@ -114,7 +114,7 @@
// }
// }
// }
//
// // ========================== Arrow ==========================
// &-arrow {
// .iconfont-mixin();
@ -130,25 +130,25 @@
// line-height: 1;
// text-align: center;
// pointer-events: none;
//
// .@{iconfont-css-prefix} {
// vertical-align: top;
// transition: transform 0.3s;
//
// > svg {
// vertical-align: top;
// }
//
// &:not(.@{select-prefix-cls}-suffix) {
// pointer-events: auto;
// }
// }
//
// .@{select-prefix-cls}-disabled & {
// cursor: not-allowed;
// }
// }
//
// // ========================== Clear ==========================
// &-clear {
// position: absolute;
@ -170,20 +170,20 @@
// opacity: 0;
// transition: color 0.3s ease, opacity 0.15s ease;
// text-rendering: auto;
//
// &::before {
// display: block;
// }
//
// &:hover {
// color: @text-color-secondary;
// }
//
// .@{select-prefix-cls}:hover & {
// opacity: 1;
// }
// }
//
// // ========================== Popup ==========================
// &-dropdown {
// .reset-component();
@ -203,34 +203,34 @@
// border-radius: @border-radius-base;
// outline: none;
// box-shadow: @box-shadow-base;
//
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
// animation-name: antSlideUpIn;
// }
//
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
// animation-name: antSlideDownIn;
// }
//
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
// animation-name: antSlideUpOut;
// }
//
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
// animation-name: antSlideDownOut;
// }
//
// &-hidden {
// display: none;
// }
//
// &-empty {
// color: @disabled-color;
// }
// }
//
// // ========================= Options =========================
// .item() {
// position: relative;
@ -242,54 +242,54 @@
// font-size: @select-dropdown-font-size;
// line-height: @select-dropdown-line-height;
// }
//
// &-item-empty {
// .item();
// color: @disabled-color;
// }
//
// &-item {
// .item();
//
// cursor: pointer;
// transition: background 0.3s ease;
//
// // =========== Group ============
// &-group {
// color: @text-color-secondary;
// font-size: @font-size-sm;
// cursor: default;
// }
//
// // =========== Option ===========
// &-option {
// display: flex;
//
// &-content {
// flex: auto;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
// }
//
// &-state {
// flex: none;
// }
//
// &-active:not(&-disabled) {
// background-color: @select-item-active-bg;
// }
//
// &-selected:not(&-disabled) {
// color: @select-item-selected-color;
// font-weight: @select-item-selected-font-weight;
// background-color: @select-item-selected-bg;
//
// .@{select-prefix-cls}-item-option-state {
// color: @primary-color;
// }
// }
//
// &-disabled {
// &.@{select-prefix-cls}-item-option-selected {
// background-color: @select-multiple-disabled-background;
@ -297,26 +297,26 @@
// color: @disabled-color;
// cursor: not-allowed;
// }
//
// &-grouped {
// padding-left: @control-padding-horizontal * 2;
// }
// }
// }
//
// // ============================================================
// // == Size ==
// // ============================================================
// &-lg {
// font-size: @font-size-lg;
// }
//
// // no border style
// &-borderless &-selector {
// background-color: transparent !important;
// border-color: transparent !important;
// box-shadow: none !important;
// }
// }
// @import './rtl';
//}
//
//@import './rtl';

24
components/select/style/index.tsx
View File

@ -179,7 +179,6 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
top: '50%',
insetInlineStart: 'auto',
insetInlineEnd: inputPaddingHorizontalBase,
width: token.fontSizeSM,
height: token.fontSizeSM,
marginTop: -token.fontSizeSM / 2,
color: token.colorTextDisabled,
@ -187,6 +186,8 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
lineHeight: 1,
textAlign: 'center',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
[`.${iconPrefixCls}`]: {
verticalAlign: 'top',
@ -204,6 +205,10 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
[`${selectCls}-disabled &`]: {
cursor: 'not-allowed',
},
'> *:not(:last-child)': {
marginInlineEnd: 8, // FIXME: magic
},
},
// ========================== Clear ==========================
@ -248,23 +253,6 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
[`${selectCls}-clear`]: {
insetInlineEnd: token.padding * 2,
},
// FIXME: what's this? @MadCcc
[`${selectCls}-selection-selected-value`]: {
paddingInlineEnd: 42,
},
[`${selectCls}-feedback-icon`]: {
fontSize: token.fontSize,
textAlign: 'center',
visibility: 'visible',
animation: `zoomIn ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
pointerEvents: 'none',
'&:not(:first-child)': {
marginInlineStart: token.marginXS,
},
},
},
};
};

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

@ -117,16 +117,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,
});