refactor: Panel 默认展开属性重命名 & 移除在effect中使用 defaultActiveKey

Author: lihongxiangfrontend

examples/panel.tsx

@@ -61,8 +61,6 @@ export default () => {
 
   const [value2, setValue2] = React.useState<string[][]>([]);
 
-  const [defaultActiveValueCells, setDefaultActiveValueCells] = React.useState<string[]>([]);
-
   return (
     <>
       <h1>Panel</h1>
@@ -82,22 +80,16 @@ export default () => {
         }}
       />
 
-      <button
-        onClick={() => {
-            setDefaultActiveValueCells(['bj', 'haidian']);
-        }}
-      >
-        Set defaultActiveValueCells
-      </button>
+      <div>defaultActiveKey=[bj, haidian]</div>
       <Cascader.Panel
         checkable
         value={value2}
         options={addressOptions}
         onChange={nextValue => {
-          console.log('Change:', nextValue);
-          setValue2(nextValue);
+        console.log('Change:', nextValue);
+        setValue2(nextValue);
         }}
-        defaultActiveValueCells={defaultActiveValueCells}
+        defaultActiveKey={['bj', 'haidian']}
       />
 
       <Cascader.Panel options={addressOptions} direction="rtl" />

src/Cascader.tsx

@@ -159,7 +159,7 @@ export interface CascaderProps<
     value: GetValueType<OptionType, ValueField, Multiple>,
     selectOptions: OptionType[],
   ) => void;
-  defaultActiveValueCells?: React.Key[];
+  defaultActiveKey?: React.Key[];
 }
 
 export type SingleValueType = (string | number)[];
@@ -176,7 +176,7 @@ export type InternalCascaderProps = Omit<CascaderProps, 'onChange' | 'value' | '
     value: InternalValueType,
     selectOptions: BaseOptionType[] | BaseOptionType[][],
   ) => void;
-  defaultActiveValueCells?: React.Key[];
+  defaultActiveKey?: React.Key[];
 };
 
 export type CascaderRef = Omit<BaseSelectRef, 'scrollTo'>;

src/OptionList/List.tsx

@@ -22,10 +22,10 @@ import useKeyboard from './useKeyboard';
 export type RawOptionListProps = Pick<
   ReturnType<typeof useBaseProps>,
   'prefixCls' | 'multiple' | 'searchValue' | 'toggleOpen' | 'notFoundContent' | 'direction' | 'open'
-> & { defaultActiveValueCells?: React.Key[]; };
+> & { defaultActiveKey?: React.Key[]; };
 
 const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((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<HTMLDivElement>(null);
   const rtl = direction === 'rtl';
@@ -89,7 +89,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
   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<RefOptionListProps, RawOptionListProps>((
     internalLoadData(nextValueCells);
   };
 
-  React.useEffect(() => {
-    if (defaultActiveValueCells && defaultActiveValueCells?.length > 0) {
-        setActiveValueCells(defaultActiveValueCells)
-    }
-  }, [defaultActiveValueCells]);
-
   const isSelectable = (option: DefaultOptionType) => {
     const { disabled } = option;
 

src/OptionList/useActive.ts

@@ -7,14 +7,15 @@ import CascaderContext from '../context';
 const useActive = (
   multiple?: boolean,
   open?: boolean,
+  defaultActiveKey?: React.Key[],
 ): [React.Key[], (activeValueCells: React.Key[]) => void] => {
   const { values } = React.useContext(CascaderContext);
 
   const firstValueCells = values[0];
 
   // Record current dropdown active options
   // This also control the open status
-  const [activeValueCells, setActiveValueCells] = React.useState<React.Key[]>([]);
+  const [activeValueCells, setActiveValueCells] = React.useState<React.Key[]>(defaultActiveKey ?? []);
 
   React.useEffect(
     () => {

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<InternalCascaderProps, PickType>;
 
   // ======================== Multiple ========================
@@ -202,7 +202,7 @@ export default function Panel<
             toggleOpen={noop}
             open
             direction={direction}
-            defaultActiveValueCells={defaultActiveValueCells}
+            defaultActiveKey={defaultActiveKey}
           />
         )}
       </div>

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(
       <Cascader.Panel
         checkable
         options={options}
         onChange={onChange}
-        defaultActiveValueCells={['bamboo', 'little']}
+        defaultActiveKey={['bamboo', 'little']}
       />,
     );
     expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(2);

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;