From 6c0d3e46c483ffd8813dea4a9b9dfcfada30895c Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 27 Feb 2024 10:25:35 +0800 Subject: [PATCH] feat: CP support Input allowClear (#47602) --- .../config-provider/__tests__/style.test.tsx | 18 +++++++++++++++--- components/config-provider/context.ts | 5 ++++- components/config-provider/index.en-US.md | 2 +- components/config-provider/index.tsx | 4 ++-- components/config-provider/index.zh-CN.md | 2 +- components/input/Input.tsx | 13 +++++++------ 6 files changed, 30 insertions(+), 14 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 4ed527b02a..f76923f8f4 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -478,7 +478,7 @@ describe('ConfigProvider support style and className props', () => { ).toBeTruthy(); }); - it('Should Input className & style & classNames & styles works', () => { + it('Should Input className & style & classNames & styles & autoComplete & allowClear works', () => { const { container } = render( { color: 'black', }, }, + allowClear: { + clearIcon: cp-test-icon, + }, }} > - + , ); - const wrapperElement = container.querySelector('.ant-input-affix-wrapper'); + const wrapperElement = container.querySelector('.ant-input-affix-wrapper'); expect(wrapperElement).toHaveClass('cp-input'); expect(wrapperElement).toHaveStyle({ backgroundColor: 'red' }); @@ -513,6 +521,10 @@ describe('ConfigProvider support style and className props', () => { const inputElement = container.querySelector('.ant-input'); expect(inputElement).toHaveClass('cp-classNames-input'); expect(inputElement).toHaveStyle({ color: 'blue' }); + expect(inputElement?.getAttribute('autocomplete')).toBe('test-autocomplete'); + expect( + container?.querySelector('.ant-input-affix-wrapper .cp-test-icon'), + ).toBeTruthy(); }); it('Should Layout className & style works', () => { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index e581728ee4..f1b15f0d9c 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -100,6 +100,9 @@ export type AlertConfig = ComponentStyleConfig & Pick; +export type InputConfig = ComponentStyleConfig & + Pick; + export type ButtonConfig = ComponentStyleConfig & Pick; export type NotificationConfig = ComponentStyleConfig & Pick; @@ -134,7 +137,7 @@ export interface ConfigConsumerProps { renderEmpty?: RenderEmptyHandler; csp?: CSPConfig; autoInsertSpaceInButton?: boolean; - input?: ComponentStyleConfig & Pick; + input?: InputConfig; pagination?: ComponentStyleConfig & Pick; locale?: Locale; direction?: DirectionType; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 8b3a1af60a..77095eca55 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -124,7 +124,7 @@ const { | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 | | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 | | image | Set Image common props | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } } | - | 5.7.0, closeIcon: 5.14.0 | -| input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 | +| input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 4.2.0, allowClear: 5.15.0 | | layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | list | Set List common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | menu | Set Menu common props | { className?: string, style?: React.CSSProperties, expandIcon?: ReactNode \| props => ReactNode } | - | 5.7.0, expandIcon: 5.15.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 58746c81ef..8803d00f1d 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -8,7 +8,6 @@ import warning, { WarningContext } from '../_util/warning'; import type { WarningContextProps } from '../_util/warning'; import type { FormProps } from '../form/Form'; import ValidateMessagesContext from '../form/validateMessagesContext'; -import type { InputProps } from '../input'; import type { Locale } from '../locale'; import LocaleProvider, { ANT_MARK } from '../locale'; import type { LocaleContextProps } from '../locale/context'; @@ -32,6 +31,7 @@ import type { DrawerConfig, FlexConfig, ImageConfig, + InputConfig, MenuConfig, ModalConfig, NotificationConfig, @@ -123,7 +123,7 @@ export interface ConfigProviderProps { autoInsertSpaceInButton?: boolean; form?: ComponentStyleConfig & Pick; - input?: ComponentStyleConfig & Pick; + input?: InputConfig; select?: ComponentStyleConfig & Pick; pagination?: ComponentStyleConfig & Pick; locale?: Locale; diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index b36609008b..96aae0872a 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -126,7 +126,7 @@ const { | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 | | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 | | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } } | - | 5.7.0, closeIcon: 5.14.0 | -| input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 5.7.0, allowClear: 5.15.0 | | layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | list | 设置 List 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandIcon?: ReactNode \| props => ReactNode } | - | 5.7.0, expandIcon: 5.15.0 | diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 21246b3065..e77bdd552e 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -1,25 +1,25 @@ import React, { forwardRef, useContext, useEffect, useRef } from 'react'; import classNames from 'classnames'; -import type { InputProps as RcInputProps, InputRef } from 'rc-input'; +import type { InputRef, InputProps as RcInputProps } from 'rc-input'; import RcInput from 'rc-input'; import { composeRef } from 'rc-util/lib/ref'; +import getAllowClear from '../_util/getAllowClear'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import { devUseWarning } from '../_util/warning'; import { ConfigContext } from '../config-provider'; import DisabledContext from '../config-provider/DisabledContext'; +import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import useSize from '../config-provider/hooks/useSize'; import type { SizeType } from '../config-provider/SizeContext'; import { FormItemInputContext, NoFormStyle } from '../form/context'; +import type { Variant } from '../form/hooks/useVariants'; +import useVariant from '../form/hooks/useVariants'; import { NoCompactStyle, useCompactItemContext } from '../space/Compact'; import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout'; import useStyle from './style'; import { hasPrefixSuffix } from './utils'; -import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; -import type { Variant } from '../form/hooks/useVariants'; -import useVariant from '../form/hooks/useVariants'; -import getAllowClear from '../_util/getAllowClear'; export interface InputFocusOptions extends FocusOptions { cursor?: 'start' | 'end' | 'all'; @@ -172,7 +172,8 @@ const Input = forwardRef((props, ref) => { ); - const mergedAllowClear = getAllowClear(allowClear); + const mergedAllowClear = getAllowClear(allowClear ?? input?.allowClear); + const [variant, enableVariantCls] = useVariant(customVariant, bordered); return wrapCSSVar(