diff --git a/.stylelintrc.json b/.stylelintrc.json index 3ee014415a..89e5943dab 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -37,7 +37,8 @@ "alpha-value-notation": "number", "color-function-notation": "legacy", "selector-class-pattern": null, - "selector-id-pattern": null + "selector-id-pattern": null, + "selector-not-notation": null }, "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"] } diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index d823bff528..a02b9ee77b 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,28 @@ timeline: true --- +## 4.21.2 + +`2022-06-15` + +- ๐Ÿž Fix incorrect Form status with `noStyle`. [#36054](https://github.com/ant-design/ant-design/pull/36054) + +## 4.21.1 + +`2022-06-13` + +- ๐Ÿž Fixed Image the `getContainer` property not reading from ConfigProvider. [#36002](https://github.com/ant-design/ant-design/pull/36002) [@robothot](https://github.com/robothot) +- ๐Ÿž Fixed Button issue [#35952](https://github.com/ant-design/ant-design/issues/35952) where the `disabled` attribute does not take effect with `href`. [#35975](https://github.com/ant-design/ant-design/pull/35975) [@MuxinFeng](https://github.com/MuxinFeng) +- ๐Ÿž Fix less color palette algorithm according to `@ant-design/colors`. [#35954](https://github.com/ant-design/ant-design/pull/35954) [@christian-lechner](https://github.com/christian-lechner) +- ๐Ÿž Fix Upload image flickering. [#35943](https://github.com/ant-design/ant-design/pull/35943) +- ๐Ÿ’„ Remove styles from Form such as `status` for children of Modal and Drawer. [#35849](https://github.com/ant-design/ant-design/pull/35849) +- TypeScript + - ๐Ÿค– Fix type definition for `autoFocus` in Dropdown. [#35990](https://github.com/ant-design/ant-design/pull/35990) [@robothot](https://github.com/robothot) + - ๐Ÿค– Fix type definition for `MenuItemGroupType` in Menu. [#35790](https://github.com/ant-design/ant-design/pull/35790) [@MasaoBlue](https://github.com/MasaoBlue) + - ๐Ÿค– Fix Carousel type definition in React 18. [#35959](https://github.com/ant-design/ant-design/pull/35959) +- ๐ŸŒ Localization + - ๐Ÿ‡ฎ๐Ÿ‡น Fix italian translation for `Table.cancelSort` key. [#35970](https://github.com/ant-design/ant-design/pull/35970) [@gariggio](https://github.com/gariggio) + ## 4.21.0 `2022-06-06` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 776e53f87b..3e88a205c7 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,28 @@ timeline: true --- +## 4.21.2 + +`2022-06-15` + +- ๐Ÿž ไฟฎๅค Form ๆœ‰ `noStyle` ๅฑžๆ€งๆ—ถๆ ก้ชŒ็Šถๆ€้”™่ฏฏ็š„้—ฎ้ข˜ใ€‚[#36054](https://github.com/ant-design/ant-design/pull/36054) + +## 4.21.1 + +`2022-06-13` + +- ๐Ÿž ไฟฎๅค Image `getContainer` ๅฑžๆ€งๆฒกๆœ‰ไปŽ ConfigProvider ไธญ่ฏปๅ–็š„้—ฎ้ข˜ใ€‚[#36002](https://github.com/ant-design/ant-design/pull/36002) [@robothot](https://github.com/robothot) +- ๐Ÿž ไฟฎๅค Button ๆœ‰ `href` ๆ—ถ `disabled` ๅฑžๆ€งไธ็”Ÿๆ•ˆ็š„้—ฎ้ข˜ใ€‚[#35952](https://github.com/ant-design/ant-design/issues/35952)ใ€‚[#35975](https://github.com/ant-design/ant-design/pull/35975) [@MuxinFeng](https://github.com/MuxinFeng) +- ๐Ÿž ไฟฎๅค Upload ็ป„ไปถๅŠจ็”ป้—ช็ƒ็š„้—ฎ้ข˜ใ€‚[#35943](https://github.com/ant-design/ant-design/pull/35943) +- ๐Ÿž ไฟฎๅค less ่‰ฒๅฝฉ็ฎ—ๆณ•๏ผŒไฝฟๅ…ถๅ’Œ `@ant-design/colors` ไฟๆŒไธ€่‡ดใ€‚[#35954](https://github.com/ant-design/ant-design/pull/35954) [@christian-lechner](https://github.com/christian-lechner) +- ๐Ÿ’„ Form.Item ไธญ็š„ Modal ๆˆ– Drawer ็ป„ไปถๅŒ…ๅซ็š„ๆŽงไปถๅŽป้™ค `status` ็ญ‰ๅ— Form ๅฝฑๅ“็š„ๆ ทๅผใ€‚[#35849](https://github.com/ant-design/ant-design/pull/35849) +- TypeScript + - ๐Ÿค– ไฟฎๅค Dropdown `autoFocus` ๅฑžๆ€งๅฎšไน‰ใ€‚[#35990](https://github.com/ant-design/ant-design/pull/35990) [@robothot](https://github.com/robothot) + - ๐Ÿค– ไฟฎๅค Menu ไธญ `MenuItemGroupType` ็š„็ฑปๅž‹ๅฎšไน‰ใ€‚[#35790](https://github.com/ant-design/ant-design/pull/35790) [@MasaoBlue](https://github.com/MasaoBlue) + - ๐Ÿค– ไฟฎๅค Carousel ๅœจ React 18 ไธ‹็š„ TS ๅฎšไน‰้—ฎ้ข˜ใ€‚[#35959](https://github.com/ant-design/ant-design/pull/35959) +- ๐ŸŒ ๅ›ฝ้™…ๅŒ– + - ๐Ÿ‡ฎ๐Ÿ‡น ไฟฎๅค `Table.cancelSort` ็š„ๆ„ๅคงๅˆฉ่ฏญ็ฟป่ฏ‘ใ€‚[#35970](https://github.com/ant-design/ant-design/pull/35970) [@gariggio](https://github.com/gariggio) + ## 4.21.0 `2022-06-06` diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index ada53bfa10..b8963850b0 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -41,7 +41,7 @@ The differences with Select are: | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | | value | Selected option | string | - | | | onBlur | Called when leaving the component | function() | - | | -| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | | +| onChange | Called when selecting an option or changing an input value | function(value) | - | | | onDropdownVisibleChange | Call when dropdown open | function(open) | - | | | onFocus | Called when entering the component | function() | - | | | onSearch | Called when searching items | function(value) | - | | diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/badge/__tests__/__snapshots__/demo.test.js.snap rename to components/badge/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/badge/__tests__/__snapshots__/index.test.js.snap rename to components/badge/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/badge/__tests__/demo.test.js b/components/badge/__tests__/demo.test.ts similarity index 100% rename from components/badge/__tests__/demo.test.js rename to components/badge/__tests__/demo.test.ts diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.tsx similarity index 56% rename from components/badge/__tests__/index.test.js rename to components/badge/__tests__/index.test.tsx index 400e3332c2..0cc406ccd2 100644 --- a/components/badge/__tests__/index.test.js +++ b/components/badge/__tests__/index.test.tsx @@ -1,11 +1,10 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; import { fireEvent, render } from '@testing-library/react'; -import Badge from '../index'; -import Tooltip from '../../tooltip'; +import React from 'react'; +import { act } from 'react-dom/test-utils'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; +import Tooltip from '../../tooltip'; +import Badge from '../index'; describe('Badge', () => { mountTest(Badge); @@ -27,34 +26,37 @@ describe('Badge', () => { }); it('badge dot not scaling count > 9', () => { - const badge = mount(); - expect(badge.find('.ant-card-multiple-words').length).toBe(0); + const { container } = render(); + expect(container.querySelectorAll('.ant-card-multiple-words').length).toBe(0); }); it('badge should support float number', () => { - let wrapper = mount(); - expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5'); + const { container } = render(); + expect(container.querySelectorAll('.ant-badge-multiple-words')[0].textContent).toEqual('3.5'); - wrapper = mount(); - expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5'); - expect(() => wrapper.unmount()).not.toThrow(); + const { container: anotherContainer, unmount } = render(); + expect(anotherContainer.querySelectorAll('.ant-badge-multiple-words')[0].textContent).toEqual( + '3.5', + ); + + expect(() => unmount()).not.toThrow(); }); it('badge dot not showing count == 0', () => { - const badge = mount(); - expect(badge.find('.ant-badge-dot').length).toBe(0); + const { container } = render(); + expect(container.querySelectorAll('.ant-badge-dot').length).toBe(0); }); it('should have an overriden title attribute', () => { - const badge = mount(); - expect( - badge.find('.ant-scroll-number').getDOMNode().attributes.getNamedItem('title').value, - ).toEqual('Custom title'); + const { container } = render(); + expect((container.querySelector('.ant-scroll-number')! as HTMLElement).title).toEqual( + 'Custom title', + ); }); // https://github.com/ant-design/ant-design/issues/10626 it('should be composable with Tooltip', () => { - const ref = React.createRef(); + const ref = React.createRef(); const { container } = render( @@ -62,22 +64,21 @@ describe('Badge', () => { ); act(() => { - fireEvent.mouseEnter(container.querySelector('.ant-badge')); + fireEvent.mouseEnter(container.querySelector('.ant-badge')!); jest.runAllTimers(); }); - expect(ref.current.props.visible).toBeTruthy(); + expect((container.firstChild! as HTMLElement).classList).toContain('ant-tooltip-open'); }); it('should render when count is changed', () => { - const wrapper = mount(); + const { asFragment, rerender } = render(); - function updateMatch(count) { - wrapper.setProps({ count }); + function updateMatch(count: number) { + rerender(); act(() => { jest.runAllTimers(); - wrapper.update(); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); } @@ -90,48 +91,52 @@ describe('Badge', () => { }); it('should be compatible with borderColor style', () => { - const wrapper = mount( + const { asFragment } = render( , ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/13694 it('should support offset when count is a ReactNode', () => { - const wrapper = mount( + const { asFragment } = render( } offset={[10, 20]}> head , ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/15349 it('should color style works on Badge', () => { - const wrapper = mount(); - expect(wrapper.find('.ant-badge-status-text').props().style.color).toBe('red'); + const { container } = render( + , + ); + expect((container.querySelector('.ant-badge-status-text')! as HTMLElement).style.color).toEqual( + 'red', + ); }); // https://github.com/ant-design/ant-design/issues/15799 it('render correct with negative number', () => { - const wrapper = mount( + const { asFragment } = render(
, ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/21331 // https://github.com/ant-design/ant-design/issues/31590 it('render Badge status/color when contains children', () => { - const wrapper = mount( + const { container, asFragment } = render( , ); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper.find(Badge).at(0).find('.ant-scroll-number-only-unit').text()).toBe('5'); - expect(wrapper.find(Badge).at(1).find('.ant-scroll-number-only-unit').text()).toBe('5'); - expect(wrapper.find(Badge).at(2).find('.ant-scroll-number-only-unit').text()).toBe('5'); + expect(asFragment().firstChild).toMatchSnapshot(); + expect(container.querySelectorAll('.ant-scroll-number-only-unit')[0].textContent).toBe('5'); + expect(container.querySelectorAll('.ant-scroll-number-only-unit')[1].textContent).toBe('5'); + expect(container.querySelectorAll('.ant-scroll-number-only-unit')[2].textContent).toBe('5'); }); it('Badge should work when status/color is empty string', () => { - const wrapper = mount( + const { container } = render( <> - + , ); - expect(wrapper.find('.ant-badge')).toHaveLength(2); + expect(container.querySelectorAll('.ant-badge')).toHaveLength(2); }); }); diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx index b708e9f25a..9206bf43b8 100644 --- a/components/badge/__tests__/ribbon.test.tsx +++ b/components/badge/__tests__/ribbon.test.tsx @@ -1,8 +1,8 @@ +import { render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; -import Badge from '../index'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; +import Badge from '../index'; describe('Ribbon', () => { mountTest(Badge.Ribbon); @@ -10,65 +10,73 @@ describe('Ribbon', () => { describe('placement', () => { it('works with `start` & `end` placement', () => { - const wrapperStart = mount( + const { container: wrapperStart } = render(
, ); - expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1); + expect(wrapperStart.querySelectorAll('.ant-ribbon-placement-start').length).toEqual(1); - const wrapperEnd = mount( + const { container: wrapperEnd } = render(
, ); - expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1); + expect(wrapperEnd.querySelectorAll('.ant-ribbon-placement-end').length).toEqual(1); }); }); describe('color', () => { it('works with preset color', () => { - const wrapper = mount( + const { container } = render(
, ); - expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1); + expect(container.querySelectorAll('.ant-ribbon-color-green').length).toEqual(1); }); it('works with custom color', () => { - const wrapperLeft = mount( + const { container: wrapperLeft } = render(
, ); - expect(wrapperLeft.find('.ant-ribbon').prop('style')?.background).toEqual('#888'); - expect(wrapperLeft.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888'); - const wrapperRight = mount( + expect((wrapperLeft.querySelector('.ant-ribbon')! as HTMLElement).style.background).toEqual( + 'rgb(136, 136, 136)', + ); + expect((wrapperLeft.querySelector('.ant-ribbon-corner')! as HTMLElement).style.color).toEqual( + 'rgb(136, 136, 136)', + ); + const { container: wrapperRight } = render(
, ); - expect(wrapperRight.find('.ant-ribbon').prop('style')?.background).toEqual('#888'); - expect(wrapperRight.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888'); + expect((wrapperRight.querySelector('.ant-ribbon')! as HTMLElement).style.background).toEqual( + 'rgb(136, 136, 136)', + ); + expect( + (wrapperRight.querySelector('.ant-ribbon-corner')! as HTMLElement).style.color, + ).toEqual('rgb(136, 136, 136)'); }); }); describe('text', () => { it('works with string', () => { - const wrapper = mount( + const { container } = render(
, ); - expect(wrapper.find('.ant-ribbon').text()).toEqual('cool'); + expect(container.querySelector('.ant-ribbon')?.textContent).toEqual('cool'); }); it('works with element', () => { - const wrapper = mount( + const { container } = render( }>
, ); - expect(wrapper.find('.cool').length).toEqual(1); + expect(container.querySelectorAll('.cool').length).toEqual(1); }); }); }); diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx index 06de4e4609..73a368f9a2 100644 --- a/components/button/__tests__/index.test.tsx +++ b/components/button/__tests__/index.test.tsx @@ -1,13 +1,13 @@ -import React, { Component } from 'react'; -import { mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; import { SearchOutlined } from '@ant-design/icons'; +import { mount } from 'enzyme'; import { resetWarned } from 'rc-util/lib/warning'; +import React, { Component } from 'react'; +import { act } from 'react-dom/test-utils'; import Button from '..'; -import ConfigProvider from '../../config-provider'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { sleep, render, fireEvent } from '../../../tests/utils'; +import { fireEvent, render, sleep } from '../../../tests/utils'; +import ConfigProvider from '../../config-provider'; import type { SizeType } from '../../config-provider/SizeContext'; describe('Button', () => { @@ -328,6 +328,15 @@ describe('Button', () => { expect(onClick).not.toHaveBeenCalled(); }); + it('should match class .ant-btn-disabled when button is disabled and href is not undefined', () => { + const wrapper = render( + , + ); + expect(wrapper.container.querySelector('.ant-btn')).toHaveClass('ant-btn-disabled'); + }); + // https://github.com/ant-design/ant-design/issues/30953 it('should handle fragment as children', () => { const wrapper = render( diff --git a/components/button/_style/index.less b/components/button/_style/index.less index cdb67c8d0e..43ccba54dc 100644 --- a/components/button/_style/index.less +++ b/components/button/_style/index.less @@ -278,6 +278,10 @@ a.@{btn-prefix-cls} { padding-top: 0.01px !important; line-height: @btn-height-base - 2px; + &-disabled { + .btn-href-disabled(); + } + &-lg { line-height: @btn-height-lg - 2px; } diff --git a/components/button/_style/mixin.less b/components/button/_style/mixin.less index 084ecaa5bf..04037fd70f 100644 --- a/components/button/_style/mixin.less +++ b/components/button/_style/mixin.less @@ -385,6 +385,24 @@ } .button-disabled(@disabled-color; transparent; transparent); } +// link button disabled style +.btn-href-disabled() { + cursor: not-allowed; + + > * { + pointer-events: none; + } + + &, + &:hover, + &:focus, + &:active { + .button-color(@btn-disable-color,transparent, transparent); + + text-shadow: none; + box-shadow: none; + } +} // text button style .btn-text() { .button-variant-other(@text-color, transparent, transparent); diff --git a/components/button/button.tsx b/components/button/button.tsx index 7a0ad6febb..24e94cdc9c 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -1,18 +1,18 @@ /* eslint-disable react/button-has-type */ -import * as React from 'react'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; +import * as React from 'react'; -import Group, { GroupSizeContext } from './button-group'; import { ConfigContext } from '../config-provider'; -import Wave from '../_util/wave'; -import { tuple } from '../_util/type'; -import warning from '../_util/warning'; import DisabledContext from '../config-provider/DisabledContext'; import type { SizeType } from '../config-provider/SizeContext'; import SizeContext from '../config-provider/SizeContext'; -import LoadingIcon from './LoadingIcon'; import { cloneElement } from '../_util/reactNode'; +import { tuple } from '../_util/type'; +import warning from '../_util/warning'; +import Wave from '../_util/wave'; +import Group, { GroupSizeContext } from './button-group'; +import LoadingIcon from './LoadingIcon'; // CSSINJS import useStyle from './style'; @@ -254,6 +254,8 @@ const InternalButton: React.ForwardRefRenderFunction = (pr const iconType = innerLoading ? 'loading' : icon; + const linkButtonRestProps = omit(rest as AnchorButtonProps & { navigate: any }, ['navigate']); + const classes = classNames( prefixCls, hashId, @@ -268,6 +270,7 @@ const InternalButton: React.ForwardRefRenderFunction = (pr [`${prefixCls}-block`]: block, [`${prefixCls}-dangerous`]: !!danger, [`${prefixCls}-rtl`]: direction === 'rtl', + [`${prefixCls}-disabled`]: linkButtonRestProps.href !== undefined && mergedDisabled, }, className, ); @@ -284,7 +287,6 @@ const InternalButton: React.ForwardRefRenderFunction = (pr ? spaceChildren(children, isNeedInserted() && autoInsertSpace) : null; - const linkButtonRestProps = omit(rest as AnchorButtonProps & { navigate: any }, ['navigate']); if (linkButtonRestProps.href !== undefined) { return wrapSSR( diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index d53469bf9e..8611457ab4 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -1,15 +1,15 @@ -import * as React from 'react'; -import RcDropdown from 'rc-dropdown'; -import classNames from 'classnames'; import RightOutlined from '@ant-design/icons/RightOutlined'; -import DropdownButton from './dropdown-button'; +import classNames from 'classnames'; +import RcDropdown from 'rc-dropdown'; +import * as React from 'react'; import { ConfigContext } from '../config-provider'; -import warning from '../_util/warning'; -import { tuple } from '../_util/type'; -import { cloneElement } from '../_util/reactNode'; -import getPlacements from '../_util/placements'; -import OverrideContext from '../menu/OverrideContext'; import type { OverrideContextProps } from '../menu/OverrideContext'; +import OverrideContext from '../menu/OverrideContext'; +import getPlacements from '../_util/placements'; +import { cloneElement } from '../_util/reactNode'; +import { tuple } from '../_util/type'; +import warning from '../_util/warning'; +import DropdownButton from './dropdown-button'; import useStyle from './style'; const Placements = tuple( @@ -45,6 +45,7 @@ export type DropdownArrowOptions = { }; export interface DropdownProps { + autoFocus?: boolean; arrow?: boolean | DropdownArrowOptions; trigger?: ('click' | 'hover' | 'contextMenu')[]; overlay: React.ReactElement | OverlayFunc; diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 594f4bfc5b..33a30c149c 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -27,8 +27,8 @@ import FormItemLabel from './FormItemLabel'; import useDebounce from './hooks/useDebounce'; import useFrameState from './hooks/useFrameState'; import useItemRef from './hooks/useItemRef'; -import { getFieldId, toArray } from './util'; import useStyle from './style'; +import { getFieldId, toArray } from './util'; const NAME_SPLIT = '__SPLIT__'; @@ -221,14 +221,9 @@ function FormItem(props: FormItemProps): React.ReactElemen const getItemRef = useItemRef(); // ======================== Status ======================== - const { status: contextStatus, hasFeedback: contextHasFeedback } = - useContext(FormItemInputContext); - - let mergedValidateStatus: ValidateStatus | undefined; + let mergedValidateStatus: ValidateStatus = ''; if (validateStatus !== undefined) { mergedValidateStatus = validateStatus; - } else if (contextStatus !== undefined) { - mergedValidateStatus = contextStatus; } else if (meta?.validating) { mergedValidateStatus = 'validating'; } else if (debounceErrors.length) { @@ -239,11 +234,9 @@ function FormItem(props: FormItemProps): React.ReactElemen mergedValidateStatus = 'success'; } - const mergedHasFeedback = hasFeedback || contextHasFeedback; - const formItemStatusContext = useMemo(() => { let feedbackIcon: ReactNode; - if (mergedHasFeedback) { + if (hasFeedback) { const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; feedbackIcon = IconNode ? ( (props: FormItemProps): React.ReactElemen return { status: mergedValidateStatus, - hasFeedback: mergedHasFeedback, + hasFeedback, feedbackIcon, isFormItemInput: true, }; - }, [mergedValidateStatus, mergedHasFeedback]); - - const noOverrideFormItemContext = useMemo( - () => ({ - ...formItemStatusContext, - isFormItemInput: false, - }), - [formItemStatusContext], - ); + }, [mergedValidateStatus, hasFeedback]); // ======================== Render ======================== function renderLayout( @@ -280,11 +265,7 @@ function FormItem(props: FormItemProps): React.ReactElemen isRequired?: boolean, ): React.ReactNode { if (noStyle && !hidden) { - return ( - - {baseChildren} - - ); + return baseChildren; } const itemClassName = { @@ -294,7 +275,7 @@ function FormItem(props: FormItemProps): React.ReactElemen [`${className}`]: !!className, // Status - [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && mergedHasFeedback, + [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && hasFeedback, [`${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 f4b9c1a160..6f50bc577d 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" >