diff --git a/examples/panel.tsx b/examples/panel.tsx index c0c51353..1bfb2417 100644 --- a/examples/panel.tsx +++ b/examples/panel.tsx @@ -99,6 +99,7 @@ export default () => { setValue2(nextValue); }} disabled={disabled} + 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 3c63432b..e4f21ba5 100644 --- a/src/OptionList/List.tsx +++ b/src/OptionList/List.tsx @@ -29,7 +29,7 @@ export type RawOptionListProps = Pick< | 'direction' | 'open' | 'disabled' -> & { defaultActiveValueCells?: React.Key[]; }; +> & { defaultActiveKey?: React.Key[]; }; const RawOptionList = React.forwardRef((props, ref) => { const { @@ -41,7 +41,7 @@ const RawOptionList = React.forwardRef(( direction, open, disabled, - defaultActiveValueCells, + defaultActiveKey, } = props; const containerRef = React.useRef(null); @@ -106,7 +106,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[]) => { @@ -116,12 +116,6 @@ const RawOptionList = React.forwardRef(( internalLoadData(nextValueCells); }; - React.useEffect(() => { - if (defaultActiveValueCells && defaultActiveValueCells?.length > 0) { - setActiveValueCells(defaultActiveValueCells) - } - }, [defaultActiveValueCells]); - const isSelectable = (option: DefaultOptionType) => { if (disabled) { return false; 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 279f2510..8bdaed40 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -71,7 +71,7 @@ export default function Panel< direction, notFoundContent = 'Not Found', disabled, - defaultActiveValueCells + defaultActiveKey, } = props as Pick; // ======================== Multiple ======================== diff --git a/tests/Panel.spec.tsx b/tests/Panel.spec.tsx index 1408e30b..ad917dc0 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;