diff --git a/components/auto-complete/__tests__/index.test.js b/components/auto-complete/__tests__/index.test.js index 7686e70722..0ca10bf750 100644 --- a/components/auto-complete/__tests__/index.test.js +++ b/components/auto-complete/__tests__/index.test.js @@ -89,4 +89,18 @@ describe('AutoComplete', () => { ); expect(container.querySelector('input').classList.contains('custom')).toBeTruthy(); }); + + it('should show warning when use dropdownClassName', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render( + + 111 + 222 + , + ); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: AutoComplete] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', + ); + errorSpy.mockRestore(); + }); }); diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md index b2105127df..55ca772e93 100644 --- a/components/auto-complete/demo/certain-category.md +++ b/components/auto-complete/demo/certain-category.md @@ -66,7 +66,7 @@ const options = [ const App: React.FC = () => ( { dataSource?: DataSourceItemType[]; status?: InputStatus; + /** + * @deprecated `dropdownClassName` is deprecated which will be removed in next major version. + * Please use `popupClassName` instead. + */ + dropdownClassName?: string; + popupClassName?: string; } function isSelectOptionOrSelectOptGroup(child: any): Boolean { @@ -51,7 +57,14 @@ const AutoComplete: React.ForwardRefRenderFunction { - const { prefixCls: customizePrefixCls, className, children, dataSource } = props; + const { + prefixCls: customizePrefixCls, + className, + popupClassName, + dropdownClassName, + children, + dataSource, + } = props; const childNodes: React.ReactElement[] = toArray(children); // ============================= Input ============================= @@ -112,6 +125,12 @@ const AutoComplete: React.ForwardRefRenderFunction document.body | | diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js index 93e27fcb07..2486e85ff6 100644 --- a/components/cascader/__tests__/index.test.js +++ b/components/cascader/__tests__/index.test.js @@ -540,7 +540,7 @@ describe('Cascader', () => { it('popupClassName', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const { container } = render( - , + , ); expect(container.querySelector('.mock-cls')).toBeTruthy(); @@ -549,7 +549,7 @@ describe('Cascader', () => { expect(global.triggerProps.popupPlacement).toEqual('bottomLeft'); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.', + 'Warning: [antd: Cascader] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', ); errorSpy.mockRestore(); diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index f7eadde579..84095106ce 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -30,7 +30,7 @@ Cascade selection box. | defaultValue | Initial selected value | string\[] \| number\[] | \[] | | | disabled | Whether disabled select | boolean | false | | | displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 | -| dropdownClassName | The additional className of popup overlay | string | - | 4.17.0 | +| popupClassName | The additional className of popup overlay | string | - | 4.23.0 | | dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 | | expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 | | expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | | diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 7de0b61a45..de4d1566a3 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -108,6 +108,11 @@ export type CascaderProps = UnionCascaderProps & { suffixIcon?: React.ReactNode; options?: DataNodeType[]; status?: InputStatus; + /** + * @deprecated `dropdownClassName` is deprecated which will be removed in next major + * version.Please use `popupClassName` instead. + */ + dropdownClassName?: string; }; export interface CascaderRef { @@ -164,9 +169,9 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref, ref: React.Ref ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 | -| dropdownClassName | 自定义浮层类名 | string | - | 4.17.0 | +| popupClassName | 自定义浮层类名 | string | - | 4.23.0 | | dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 | | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 | | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | | diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js index d917117c4e..b782ef3989 100644 --- a/components/date-picker/__tests__/DatePicker.test.js +++ b/components/date-picker/__tests__/DatePicker.test.js @@ -184,6 +184,20 @@ describe('DatePicker', () => { ).toBe(60); }); + it('DatePicker should show warning when use dropdownClassName', () => { + mount(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', + ); + }); + + it('RangePicker should show warning when use dropdownClassName', () => { + mount(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', + ); + }); + it('DatePicker.RangePicker with defaultPickerValue and showTime', () => { const startDate = moment('1982-02-12'); const endDate = moment('1982-02-22'); diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 3e56dc9d3a..a7afe57978 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -18,6 +18,7 @@ import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'; import enUS from '../locale/en_US'; import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util'; import type { CommonPickerMethods, PickerComponentClass } from './interface'; +import warning from '../../_util/warning'; export default function generateRangePicker( generateConfig: GenerateConfig, @@ -26,7 +27,14 @@ export default function generateRangePicker( const RangePicker = forwardRef< InternalRangePickerProps | CommonPickerMethods, - RangePickerProps + RangePickerProps & { + /** + * @deprecated `dropdownClassName` is deprecated which will be removed in next major + * version.Please use `popupClassName` instead. + */ + dropdownClassName: string; + popupClassName?: string; + } >((props, ref) => { const { prefixCls: customizePrefixCls, @@ -37,6 +45,8 @@ export default function generateRangePicker( disabled: customDisabled, bordered = true, placeholder, + popupClassName, + dropdownClassName, status: customStatus, ...restProps } = props; @@ -54,6 +64,12 @@ export default function generateRangePicker( ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}), }; + warning( + !dropdownClassName, + 'RangePicker', + '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', + ); + // ===================== Size ===================== const size = React.useContext(SizeContext); const mergedSize = customizeSize || size; @@ -92,6 +108,7 @@ export default function generateRangePicker( } disabled={mergedDisabled} ref={innerRef} + dropdownClassName={popupClassName || dropdownClassName} dropdownAlign={transPlacement2DropdownAlign(direction, placement)} placeholder={getRangePlaceholder(picker, locale, placeholder)} suffixIcon={suffixNode} diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 0fdf155105..2827728e02 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -24,8 +24,13 @@ import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './i export default function generatePicker(generateConfig: GenerateConfig) { type DatePickerProps = PickerProps & { status?: InputStatus; + /** + * @deprecated `dropdownClassName` is deprecated which will be removed in next major + * version.Please use `popupClassName` instead. + */ + dropdownClassName?: string; + popupClassName?: string; }; - function getPicker( picker?: PickerMode, displayName?: string, @@ -40,17 +45,13 @@ export default function generatePicker(generateConfig: GenerateConfig< bordered = true, placement, placeholder, + popupClassName, + dropdownClassName, disabled: customDisabled, status: customStatus, ...restProps } = props; - warning( - picker !== 'quarter', - displayName!, - `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`, - ); - const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext); const prefixCls = getPrefixCls('picker', customizePrefixCls); const innerRef = React.useRef>(null); @@ -80,6 +81,18 @@ export default function generatePicker(generateConfig: GenerateConfig< }; const rootPrefixCls = getPrefixCls(); + // =================== Warning ===================== + warning( + picker !== 'quarter', + displayName!, + `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`, + ); + + warning( + !dropdownClassName, + 'DatePicker', + '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', + ); // ===================== Size ===================== const size = React.useContext(SizeContext); const mergedSize = customizeSize || size; @@ -110,6 +123,7 @@ export default function generatePicker(generateConfig: GenerateConfig< placeholder={getPlaceholder(mergedPicker, locale, placeholder)} suffixIcon={suffixNode} dropdownAlign={transPlacement2DropdownAlign(direction, placement)} + dropdownClassName={popupClassName || dropdownClassName} clearIcon={} prevIcon={} nextIcon={} diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 21ce15417e..cc1a151c89 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -59,7 +59,7 @@ The following APIs are shared by DatePicker, RangePicker. | dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | | | disabled | Determine whether the DatePicker is disabled | boolean | false | | | disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - | | -| dropdownClassName | To customize the className of the popup calendar | string | - | | +| popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 | | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | | | locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 756a38dab9..3672b52d1f 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -60,7 +60,7 @@ import locale from 'antd/es/locale/zh_CN'; | dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | | | disabled | 禁用 | boolean | false | | | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | | -| dropdownClassName | 额外的弹出日历 className | string | - | | +| popupClassName | 额外的弹出日历 className | string | - | 4.23.0 | | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | | | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | | | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.js index cbd69cb000..39473475e7 100644 --- a/components/select/__tests__/index.test.js +++ b/components/select/__tests__/index.test.js @@ -91,6 +91,16 @@ describe('Select', () => { expect(container.querySelectorAll('.anticon-down').length).toBe(0); expect(container.querySelectorAll('.anticon-search').length).toBe(1); }); + + it('should show warning when use dropdownClassName', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render(