From 8e9bd3b60bbae6e3d4a774afa0591649d5f141c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= Date: Mon, 5 Jun 2023 16:56:10 +0800 Subject: [PATCH 1/7] feat: support dropdownStyle --- src/Cascader.tsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/Cascader.tsx b/src/Cascader.tsx index 284b1f96..4f813032 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -1,7 +1,7 @@ import type { BuildInPlacements } from '@rc-component/trigger/lib/interface'; -import type { BaseSelectProps, BaseSelectPropsWithoutPrivate, BaseSelectRef } from 'rc-select'; +import type { BaseSelectProps,BaseSelectPropsWithoutPrivate,BaseSelectRef } from 'rc-select'; import { BaseSelect } from 'rc-select'; -import type { DisplayValueType, Placement } from 'rc-select/lib/BaseSelect'; +import type { DisplayValueType,Placement } from 'rc-select/lib/BaseSelect'; import useId from 'rc-select/lib/hooks/useId'; import { conductCheck } from 'rc-tree/lib/utils/conductUtil'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; @@ -14,9 +14,9 @@ import useRefFunc from './hooks/useRefFunc'; import useSearchConfig from './hooks/useSearchConfig'; import useSearchOptions from './hooks/useSearchOptions'; import OptionList from './OptionList'; -import { fillFieldNames, SHOW_CHILD, SHOW_PARENT, toPathKey, toPathKeys } from './utils/commonUtil'; -import { formatStrategyValues, toPathOptions } from './utils/treeUtil'; -import warningProps, { warningNullOptions } from './utils/warningPropsUtil'; +import { fillFieldNames,SHOW_CHILD,SHOW_PARENT,toPathKey,toPathKeys } from './utils/commonUtil'; +import { formatStrategyValues,toPathOptions } from './utils/treeUtil'; +import warningProps,{ warningNullOptions } from './utils/warningPropsUtil'; export interface ShowSearchType { filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames) => boolean; @@ -199,6 +199,7 @@ const Cascader = React.forwardRef((props, re popupClassName, dropdownClassName, + dropdownStyle, dropdownMenuColumnStyle, popupPlacement, @@ -473,14 +474,16 @@ const Cascader = React.forwardRef((props, re // ============================================================== const emptyOptions = !(mergedSearchValue ? searchOptions : mergedOptions).length; - const dropdownStyle: React.CSSProperties = + const mergedDropdownStyle: React.CSSProperties = // Search to match width - (mergedSearchValue && searchConfig.matchInputWidth) || - // Empty keep the width - emptyOptions - ? {} + dropdownStyle ?? (mergedSearchValue && searchConfig.matchInputWidth) ?? emptyOptions + ? // Empty keep the width + { + ...dropdownStyle, + } : { minWidth: 'auto', + ...dropdownStyle, }; return ( @@ -492,7 +495,7 @@ const Cascader = React.forwardRef((props, re id={mergedId} prefixCls={prefixCls} dropdownMatchSelectWidth={dropdownMatchSelectWidth} - dropdownStyle={dropdownStyle} + dropdownStyle={mergedDropdownStyle} // Value displayValues={displayValues} onDisplayValuesChange={onDisplayValuesChange} From 9a81abab5d9016059157d32709f4c5de9ffdbf4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= Date: Tue, 6 Jun 2023 07:00:43 +0800 Subject: [PATCH 2/7] feat: styles prop --- src/Cascader.tsx | 21 ++++++++++++++++++--- src/utils/warningPropsUtil.ts | 10 +++++++--- tests/index.spec.tsx | 25 ++++++++++++++++++++----- 3 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/Cascader.tsx b/src/Cascader.tsx index 4f813032..4194d822 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -57,7 +57,7 @@ export interface DefaultOptionType extends BaseOptionType { disableCheckbox?: boolean; } -interface BaseCascaderProps +export interface BaseCascaderProps extends Omit< BaseSelectPropsWithoutPrivate, 'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch' @@ -97,8 +97,15 @@ interface BaseCascaderProps((props, re popupVisible, open, + styles, + popupClassName, dropdownClassName, dropdownStyle, @@ -449,7 +458,7 @@ const Cascader = React.forwardRef((props, re expandTrigger, expandIcon, loadingIcon, - dropdownMenuColumnStyle, + dropdownMenuColumnStyle: styles?.dropdownMenuColumn ?? dropdownMenuColumnStyle, }), [ mergedOptions, @@ -466,6 +475,7 @@ const Cascader = React.forwardRef((props, re expandIcon, loadingIcon, dropdownMenuColumnStyle, + styles?.dropdownMenuColumn, ], ); @@ -476,13 +486,18 @@ const Cascader = React.forwardRef((props, re const mergedDropdownStyle: React.CSSProperties = // Search to match width - dropdownStyle ?? (mergedSearchValue && searchConfig.matchInputWidth) ?? emptyOptions + styles?.dropdown ?? + dropdownStyle ?? + (mergedSearchValue && searchConfig.matchInputWidth) ?? + emptyOptions ? // Empty keep the width { + ...styles?.dropdown, ...dropdownStyle, } : { minWidth: 'auto', + ...styles?.dropdown, ...dropdownStyle, }; diff --git a/src/utils/warningPropsUtil.ts b/src/utils/warningPropsUtil.ts index 2b406996..230b1517 100644 --- a/src/utils/warningPropsUtil.ts +++ b/src/utils/warningPropsUtil.ts @@ -1,8 +1,8 @@ import warning from 'rc-util/lib/warning'; -import type { DefaultOptionType, FieldNames, InternalCascaderProps } from '../Cascader'; +import type { DefaultOptionType, FieldNames, BaseCascaderProps } from '../Cascader'; -function warningProps(props: InternalCascaderProps) { - const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement } = props; +function warningProps(props: BaseCascaderProps) { + const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement,dropdownMenuColumnStyle} = props; warning( !onPopupVisibleChange, @@ -17,6 +17,10 @@ function warningProps(props: InternalCascaderProps) { popupPlacement === undefined, '`popupPlacement` is deprecated. Please use `placement` instead.', ); + warning( + dropdownMenuColumnStyle === undefined, + '`dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.', + ); } // value in Cascader options should not be null diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 543f71d5..4cd87b2b 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -4,7 +4,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import Cascader from '../src'; -import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions'; +import { addressOptions,addressOptionsForUneven,optionsForActiveMenuItems } from './demoOptions'; import { mount } from './enzyme'; describe('Cascader.Basic', () => { @@ -655,7 +655,8 @@ describe('Cascader.Basic', () => { changeOnSelect expandTrigger="hover" options={addressOptionsForUneven} - onChange={onChange}> + onChange={onChange} + > , ); @@ -684,7 +685,7 @@ describe('Cascader.Basic', () => { wrapper.update(); expect(selectedValue).toBeFalsy(); expect(wrapper.isOpen()).toBeTruthy(); - }) + }); describe('focus test', () => { let domSpy; @@ -803,9 +804,8 @@ describe('Cascader.Basic', () => { expect(activeItems).toHaveLength(2); expect(activeItems.last().text()).toEqual('高雄'); }); - }) + }); }); - }); it('defaultValue not exist', () => { @@ -1063,4 +1063,19 @@ describe('Cascader.Basic', () => { ); errorSpy.mockReset(); }); + + it('``in Cascader options should throw a warning', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null); + mount( + , + ); + + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.', + ); + errorSpy.mockReset(); + }); }); From da4d256363e9e7dc2cb66c93baaf29f3e6f88535 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= Date: Fri, 9 Jun 2023 00:10:52 +0800 Subject: [PATCH 3/7] chore: add test case --- tests/index.spec.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 4cd87b2b..88148a28 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1064,18 +1064,26 @@ describe('Cascader.Basic', () => { errorSpy.mockReset(); }); - it('``in Cascader options should throw a warning', () => { + it('`dropdownMenuColumnStyle`in Cascader options should throw a warning', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null); - mount( - , - ); + mount(); expect(errorSpy).toHaveBeenCalledWith( 'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.', ); errorSpy.mockReset(); }); + + it('`dropdownMenuColumnStyle`in Cascader options should throw a warning', () => { + const wrapper = mount(); + expect(wrapper.find('.rc-cascader-dropdown').props().style.backgroundColor).toEqual('red'); + expect(wrapper.find('.rc-cascader-menu-item').props().style.backgroundColor).toEqual('blue'); + + }); + + }); From 54d2bf041e909ad07be95b92acdbfc3231fc371c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= <94534613+BoyYangzai@users.noreply.github.com> Date: Sat, 10 Jun 2023 15:23:18 +0800 Subject: [PATCH 4/7] format --- tests/index.spec.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 88148a28..226719ac 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1082,8 +1082,6 @@ describe('Cascader.Basic', () => { />); expect(wrapper.find('.rc-cascader-dropdown').props().style.backgroundColor).toEqual('red'); expect(wrapper.find('.rc-cascader-menu-item').props().style.backgroundColor).toEqual('blue'); - }); - }); From 4f77f87de6a5c02cf58de6168c6226c65da8f87f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= Date: Sat, 17 Jun 2023 21:24:25 +0800 Subject: [PATCH 5/7] chore: rename api --- src/Cascader.tsx | 24 ++++++++++++------------ tests/index.spec.tsx | 22 +++++++++++++--------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/Cascader.tsx b/src/Cascader.tsx index 4194d822..e0ed183b 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -1,7 +1,7 @@ import type { BuildInPlacements } from '@rc-component/trigger/lib/interface'; -import type { BaseSelectProps,BaseSelectPropsWithoutPrivate,BaseSelectRef } from 'rc-select'; +import type { BaseSelectProps, BaseSelectPropsWithoutPrivate, BaseSelectRef } from 'rc-select'; import { BaseSelect } from 'rc-select'; -import type { DisplayValueType,Placement } from 'rc-select/lib/BaseSelect'; +import type { DisplayValueType, Placement } from 'rc-select/lib/BaseSelect'; import useId from 'rc-select/lib/hooks/useId'; import { conductCheck } from 'rc-tree/lib/utils/conductUtil'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; @@ -14,9 +14,9 @@ import useRefFunc from './hooks/useRefFunc'; import useSearchConfig from './hooks/useSearchConfig'; import useSearchOptions from './hooks/useSearchOptions'; import OptionList from './OptionList'; -import { fillFieldNames,SHOW_CHILD,SHOW_PARENT,toPathKey,toPathKeys } from './utils/commonUtil'; -import { formatStrategyValues,toPathOptions } from './utils/treeUtil'; -import warningProps,{ warningNullOptions } from './utils/warningPropsUtil'; +import { fillFieldNames, SHOW_CHILD, SHOW_PARENT, toPathKey, toPathKeys } from './utils/commonUtil'; +import { formatStrategyValues, toPathOptions } from './utils/treeUtil'; +import warningProps, { warningNullOptions } from './utils/warningPropsUtil'; export interface ShowSearchType { filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames) => boolean; @@ -102,8 +102,8 @@ export interface BaseCascaderProps((props, re expandTrigger, expandIcon, loadingIcon, - dropdownMenuColumnStyle: styles?.dropdownMenuColumn ?? dropdownMenuColumnStyle, + dropdownMenuColumnStyle: styles?.popupMenuColumn ?? dropdownMenuColumnStyle, }), [ mergedOptions, @@ -475,7 +475,7 @@ const Cascader = React.forwardRef((props, re expandIcon, loadingIcon, dropdownMenuColumnStyle, - styles?.dropdownMenuColumn, + styles?.popupMenuColumn, ], ); @@ -486,18 +486,18 @@ const Cascader = React.forwardRef((props, re const mergedDropdownStyle: React.CSSProperties = // Search to match width - styles?.dropdown ?? + styles?.popup ?? dropdownStyle ?? (mergedSearchValue && searchConfig.matchInputWidth) ?? emptyOptions ? // Empty keep the width { - ...styles?.dropdown, + ...styles?.popup, ...dropdownStyle, } : { minWidth: 'auto', - ...styles?.dropdown, + ...styles?.popup, ...dropdownStyle, }; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 226719ac..f13314cb 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1069,19 +1069,23 @@ describe('Cascader.Basic', () => { mount(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.', + 'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.popupMenuColumn` instead.', ); errorSpy.mockReset(); }); - it('`dropdownMenuColumnStyle`in Cascader options should throw a warning', () => { - const wrapper = mount( { + const wrapper = mount( + ); - expect(wrapper.find('.rc-cascader-dropdown').props().style.backgroundColor).toEqual('red'); - expect(wrapper.find('.rc-cascader-menu-item').props().style.backgroundColor).toEqual('blue'); - }); - + />, + ); + expect(wrapper.find('.rc-cascader-dropdown').props().style.backgroundColor).toEqual('red'); + expect(wrapper.find('.rc-cascader-menu-item').props().style.backgroundColor).toEqual('blue'); + }); }); From 93a54213d6d7eeb4dc9ea4b77924ee045af776ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= Date: Sat, 17 Jun 2023 21:45:39 +0800 Subject: [PATCH 6/7] chore: update warning --- src/utils/warningPropsUtil.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/warningPropsUtil.ts b/src/utils/warningPropsUtil.ts index 230b1517..dd321812 100644 --- a/src/utils/warningPropsUtil.ts +++ b/src/utils/warningPropsUtil.ts @@ -19,7 +19,7 @@ function warningProps(props: BaseCascaderProps) { ); warning( dropdownMenuColumnStyle === undefined, - '`dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.', + '`dropdownMenuColumnStyle` is deprecated. Please use `styles.popupMenuColumn` instead.', ); } From 8dd950aabe5c53ed10e6adeb1db9c6de3a9c5a92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= Date: Wed, 21 Jun 2023 16:17:18 +0800 Subject: [PATCH 7/7] chore: rename popupColumn --- src/Cascader.tsx | 18 +++++++++--------- src/utils/warningPropsUtil.ts | 2 +- tests/index.spec.tsx | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Cascader.tsx b/src/Cascader.tsx index e0ed183b..7f7344c5 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -1,7 +1,7 @@ import type { BuildInPlacements } from '@rc-component/trigger/lib/interface'; -import type { BaseSelectProps, BaseSelectPropsWithoutPrivate, BaseSelectRef } from 'rc-select'; +import type { BaseSelectProps,BaseSelectPropsWithoutPrivate,BaseSelectRef } from 'rc-select'; import { BaseSelect } from 'rc-select'; -import type { DisplayValueType, Placement } from 'rc-select/lib/BaseSelect'; +import type { DisplayValueType,Placement } from 'rc-select/lib/BaseSelect'; import useId from 'rc-select/lib/hooks/useId'; import { conductCheck } from 'rc-tree/lib/utils/conductUtil'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; @@ -14,9 +14,9 @@ import useRefFunc from './hooks/useRefFunc'; import useSearchConfig from './hooks/useSearchConfig'; import useSearchOptions from './hooks/useSearchOptions'; import OptionList from './OptionList'; -import { fillFieldNames, SHOW_CHILD, SHOW_PARENT, toPathKey, toPathKeys } from './utils/commonUtil'; -import { formatStrategyValues, toPathOptions } from './utils/treeUtil'; -import warningProps, { warningNullOptions } from './utils/warningPropsUtil'; +import { fillFieldNames,SHOW_CHILD,SHOW_PARENT,toPathKey,toPathKeys } from './utils/commonUtil'; +import { formatStrategyValues,toPathOptions } from './utils/treeUtil'; +import warningProps,{ warningNullOptions } from './utils/warningPropsUtil'; export interface ShowSearchType { filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames) => boolean; @@ -97,13 +97,13 @@ export interface BaseCascaderProps((props, re expandTrigger, expandIcon, loadingIcon, - dropdownMenuColumnStyle: styles?.popupMenuColumn ?? dropdownMenuColumnStyle, + dropdownMenuColumnStyle: styles?.popupColumn ?? dropdownMenuColumnStyle, }), [ mergedOptions, @@ -475,7 +475,7 @@ const Cascader = React.forwardRef((props, re expandIcon, loadingIcon, dropdownMenuColumnStyle, - styles?.popupMenuColumn, + styles?.popupColumn, ], ); diff --git a/src/utils/warningPropsUtil.ts b/src/utils/warningPropsUtil.ts index dd321812..254a28ba 100644 --- a/src/utils/warningPropsUtil.ts +++ b/src/utils/warningPropsUtil.ts @@ -19,7 +19,7 @@ function warningProps(props: BaseCascaderProps) { ); warning( dropdownMenuColumnStyle === undefined, - '`dropdownMenuColumnStyle` is deprecated. Please use `styles.popupMenuColumn` instead.', + '`dropdownMenuColumnStyle` is deprecated. Please use `styles.popupColumn` instead.', ); } diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index f13314cb..228261fb 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1069,7 +1069,7 @@ describe('Cascader.Basic', () => { mount(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.popupMenuColumn` instead.', + 'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.popupColumn` instead.', ); errorSpy.mockReset(); }); @@ -1079,7 +1079,7 @@ describe('Cascader.Basic', () => {