diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index e78e44bda0..6b2804ab09 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import RcDrawer from 'rc-drawer'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; +import { NoFormStyle } from '../form/context'; import { tuple } from '../_util/type'; type DrawerRef = { @@ -292,37 +293,39 @@ const Drawer = React.forwardRef( return ( - { - if (open) { - destroyCloseRef.current = false; - } else if (destroyOnClose) { - destroyCloseRef.current = true; - setLoad(false); - } - afterVisibleChange?.(open); - }} - > - {renderBody()} - + + { + if (open) { + destroyCloseRef.current = false; + } else if (destroyOnClose) { + destroyCloseRef.current = true; + setLoad(false); + } + afterVisibleChange?.(open); + }} + > + {renderBody()} + + ); }, diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx index 1f18f88462..55b7015a34 100644 --- a/components/drawer/style/index.tsx +++ b/components/drawer/style/index.tsx @@ -1,3 +1,3 @@ -// deps-lint-skip: empty +// deps-lint-skip: empty, form import '../../style/index.less'; import './index.less'; diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 2288e30643..bb602f29db 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -1,33 +1,33 @@ -import * as React from 'react'; -import type { ReactNode } from 'react'; -import { useContext, useMemo } from 'react'; +import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; +import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; +import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; +import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import classNames from 'classnames'; import type { FormInstance } from 'rc-field-form'; import { Field, FieldContext, ListContext } from 'rc-field-form'; import type { FieldProps } from 'rc-field-form/lib/Field'; import type { 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 { supportRef } from 'rc-util/lib/ref'; +import type { ReactNode } from 'react'; +import * as React from 'react'; +import { useContext, useMemo } from 'react'; import { ConfigContext } from '../config-provider'; +import Row from '../grid/row'; +import { cloneElement, isValidElement } from '../_util/reactNode'; import { tuple } from '../_util/type'; import warning from '../_util/warning'; -import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel'; -import FormItemLabel from './FormItemLabel'; -import type { FormItemInputProps } from './FormItemInput'; -import FormItemInput from './FormItemInput'; import type { FormItemStatusContextProps } from './context'; import { FormContext, FormItemInputContext, NoStyleItemContext } from './context'; -import { toArray, getFieldId } from './util'; -import { cloneElement, isValidElement } from '../_util/reactNode'; -import useFrameState from './hooks/useFrameState'; +import type { FormItemInputProps } from './FormItemInput'; +import FormItemInput from './FormItemInput'; +import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel'; +import FormItemLabel from './FormItemLabel'; import useDebounce from './hooks/useDebounce'; +import useFrameState from './hooks/useFrameState'; import useItemRef from './hooks/useItemRef'; +import { getFieldId, toArray } from './util'; const NAME_SPLIT = '__SPLIT__'; @@ -217,9 +217,14 @@ function FormItem(props: FormItemProps): React.ReactElemen const getItemRef = useItemRef(); // ======================== Status ======================== - let mergedValidateStatus: ValidateStatus = ''; + const { status: contextStatus, hasFeedback: contextHasFeedback } = + useContext(FormItemInputContext); + + let mergedValidateStatus: ValidateStatus | undefined; if (validateStatus !== undefined) { mergedValidateStatus = validateStatus; + } else if (contextStatus !== undefined) { + mergedValidateStatus = contextStatus; } else if (meta?.validating) { mergedValidateStatus = 'validating'; } else if (debounceErrors.length) { @@ -230,9 +235,11 @@ function FormItem(props: FormItemProps): React.ReactElemen mergedValidateStatus = 'success'; } + const mergedHasFeedback = hasFeedback || contextHasFeedback; + const formItemStatusContext = useMemo(() => { let feedbackIcon: ReactNode; - if (hasFeedback) { + if (mergedHasFeedback) { const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; feedbackIcon = IconNode ? ( (props: FormItemProps): React.ReactElemen return { status: mergedValidateStatus, - hasFeedback, + hasFeedback: mergedHasFeedback, feedbackIcon, isFormItemInput: true, }; - }, [mergedValidateStatus, hasFeedback]); + }, [mergedValidateStatus, mergedHasFeedback]); + + const noOverrideFormItemContext = useMemo( + () => ({ + ...formItemStatusContext, + isFormItemInput: false, + }), + [formItemStatusContext], + ); // ======================== Render ======================== function renderLayout( @@ -261,7 +276,11 @@ function FormItem(props: FormItemProps): React.ReactElemen isRequired?: boolean, ): React.ReactNode { if (noStyle && !hidden) { - return baseChildren; + return ( + + {baseChildren} + + ); } const itemClassName = { @@ -271,7 +290,7 @@ function FormItem(props: FormItemProps): React.ReactElemen [`${className}`]: !!className, // Status - [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && hasFeedback, + [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && mergedHasFeedback, [`${prefixCls}-item-has-success`]: mergedValidateStatus === 'success', [`${prefixCls}-item-has-warning`]: mergedValidateStatus === 'warning', [`${prefixCls}-item-has-error`]: mergedValidateStatus === 'error', diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 348af0076d..54c70913dc 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -6836,7 +6836,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly class="ant-form-item-control-input-content" >