diff --git a/examples/panel.tsx b/examples/panel.tsx index 82b8d03e..0321a8a5 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -61,8 +61,6 @@ export default () => { const [value2, setValue2] = React.useState([]); - const [defaultActiveValueCells, setDefaultActiveValueCells] = React.useState([]); - return ( <>

Panel

@@ -82,22 +80,16 @@ export default () => { }} /> - +
defaultActiveKey=[bj, haidian]
{ - console.log('Change:', nextValue); - setValue2(nextValue); + console.log('Change:', nextValue); + setValue2(nextValue); }} - defaultActiveValueCells={defaultActiveValueCells} + defaultActiveKey={['bj', 'haidian']} /> diff --git a/src/Cascader.tsx b/src/Cascader.tsx index cf895819..5a66dee1 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -159,7 +159,7 @@ export interface CascaderProps< value: GetValueType, selectOptions: OptionType[], ) => void; - defaultActiveValueCells?: React.Key[]; + defaultActiveKey?: React.Key[]; } export type SingleValueType = (string | number)[]; @@ -176,7 +176,7 @@ export type InternalCascaderProps = Omit void; - defaultActiveValueCells?: React.Key[]; + defaultActiveKey?: React.Key[]; }; export type CascaderRef = Omit; diff --git a/src/OptionList/List.tsx b/src/OptionList/List.tsx index f032a2bf..2ebd0a62 100644 --- a/src/OptionList/List.tsx +++ b/src/OptionList/List.tsx @@ -22,10 +22,10 @@ import useKeyboard from './useKeyboard'; export type RawOptionListProps = Pick< ReturnType, 'prefixCls' | 'multiple' | 'searchValue' | 'toggleOpen' | 'notFoundContent' | 'direction' | 'open' -> & { defaultActiveValueCells?: React.Key[]; }; +> & { defaultActiveKey?: React.Key[]; }; const RawOptionList = React.forwardRef((props, ref) => { - const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, open, defaultActiveValueCells } = props; + const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, open, defaultActiveKey } = props; const containerRef = React.useRef(null); const rtl = direction === 'rtl'; @@ -89,7 +89,7 @@ const RawOptionList = React.forwardRef(( const halfCheckedSet = React.useMemo(() => new Set(toPathKeys(halfValues)), [halfValues]); // ====================== Accessibility ======================= - const [activeValueCells, setActiveValueCells] = useActive(multiple, open); + const [activeValueCells, setActiveValueCells] = useActive(multiple, open, defaultActiveKey); // =========================== Path =========================== const onPathOpen = (nextValueCells: React.Key[]) => { @@ -99,12 +99,6 @@ const RawOptionList = React.forwardRef(( internalLoadData(nextValueCells); }; - React.useEffect(() => { - if (defaultActiveValueCells && defaultActiveValueCells?.length > 0) { - setActiveValueCells(defaultActiveValueCells) - } - }, [defaultActiveValueCells]); - const isSelectable = (option: DefaultOptionType) => { const { disabled } = option; diff --git a/src/OptionList/useActive.ts b/src/OptionList/useActive.ts index ca0519ec..513464f3 100644 --- a/src/OptionList/useActive.ts +++ b/src/OptionList/useActive.ts @@ -7,6 +7,7 @@ import CascaderContext from '../context'; const useActive = ( multiple?: boolean, open?: boolean, + defaultActiveKey?: React.Key[], ): [React.Key[], (activeValueCells: React.Key[]) => void] => { const { values } = React.useContext(CascaderContext); @@ -14,7 +15,7 @@ const useActive = ( // Record current dropdown active options // This also control the open status - const [activeValueCells, setActiveValueCells] = React.useState([]); + const [activeValueCells, setActiveValueCells] = React.useState(defaultActiveKey ?? []); React.useEffect( () => { diff --git a/src/Panel.tsx b/src/Panel.tsx index 0ed8cb58..902a9378 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -36,7 +36,7 @@ export type PickType = | 'style' | 'direction' | 'notFoundContent' - | 'defaultActiveValueCells'; + | 'defaultActiveKey'; export type PanelProps< OptionType extends DefaultOptionType = DefaultOptionType, @@ -69,7 +69,7 @@ export default function Panel< loadingIcon, direction, notFoundContent = 'Not Found', - defaultActiveValueCells + defaultActiveKey } = props as Pick; // ======================== Multiple ======================== @@ -202,7 +202,7 @@ export default function Panel< toggleOpen={noop} open direction={direction} - defaultActiveValueCells={defaultActiveValueCells} + defaultActiveKey={defaultActiveKey} /> )} diff --git a/tests/Panel.spec.tsx b/tests/Panel.spec.tsx index 333ea112..8d9cfaf3 100644 --- a/tests/Panel.spec.tsx +++ b/tests/Panel.spec.tsx @@ -79,14 +79,14 @@ describe('Cascader.Panel', () => { expect(onChange).toHaveBeenCalledWith([['bamboo', 'little']], expect.anything()); }); - it('multiple with defaultActiveValueCells', () => { + it('multiple with defaultActiveKey', () => { const onChange = jest.fn(); const { container } = render( , ); expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(2); diff --git a/tests/selector.spec.tsx b/tests/selector.spec.tsx index e7387714..dbd92540 100644 --- a/tests/selector.spec.tsx +++ b/tests/selector.spec.tsx @@ -5,10 +5,10 @@ import Cascader from '../src'; import { addressOptions } from './demoOptions'; // Mock `useActive` hook -jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean) => { +jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean, defaultActiveKey: React.Key[]) => { // Pass to origin hooks const originHook = jest.requireActual('../src/OptionList/useActive').default; - const [activeValueCells, setActiveValueCells] = originHook(multiple, open); + const [activeValueCells, setActiveValueCells] = originHook(multiple, open, defaultActiveKey); (global as any).activeValueCells = activeValueCells;