fix(collapse): fix the behavior of the defaultExpandAll prop (#775)

* fix(collapse): fix the behavior of the defaultExpandAll prop

- Fix the abnormal opening issue caused by the defaultExpandAll prop
- Fix the conflict issue when defaultExpandAll and expandMutex are passed together

* test(collapse): supplement test cases for the collapse component

fix #697

* chore: update demo

---------

Co-authored-by: novlan1 <[email protected]>

Author: ImaginingMaker

site/test-coverage.js

@@ -8,7 +8,7 @@ module.exports = {
   cascader: { statements: '4.3%', branches: '0%', functions: '0%', lines: '4.59%' },
   cell: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   checkbox: { statements: '99.12%', branches: '98.27%', functions: '100%', lines: '100%' },
-  collapse: { statements: '69.09%', branches: '36.66%', functions: '72.72%', lines: '72.54%' },
+  collapse: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
   colorPicker: { statements: '3.03%', branches: '0%', functions: '0%', lines: '3.03%' },
   common: { statements: '82.75%', branches: '66.66%', functions: '83.33%', lines: '92%' },
   configProvider: { statements: '54.54%', branches: '0%', functions: '0%', lines: '54.54%' },

src/collapse/Collapse.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
+import { debounce } from 'lodash-es';
 import type { StyledProps } from '../common';
 import type { TdCollapseProps, CollapseValue } from './type';
 import { collapseDefaultProps } from './defaultProps';
@@ -29,25 +30,59 @@ const Collapse = forwardRef<HTMLDivElement, CollapseProps>((originProps, ref) =>
   } = props;
 
   const [activeValue, setActiveValue] = useDefault<CollapseValue, any[]>(value, defaultValue, onChange);
+  const firstNewValRef = useRef<any[] | null>(null);
+  const collectedValuesRef = useRef<(string | number)[]>([]);
+
+  const debouncedUpdate = useMemo(
+    () =>
+      debounce((values: (string | number)[], args: { e: React.MouseEvent<HTMLDivElement> }) => {
+        const uniqueValues = [...new Set(values)];
+        setActiveValue(uniqueValues);
+        onChange?.(uniqueValues, args);
+        collectedValuesRef.current = [];
+      }, 100),
+    [onChange, setActiveValue],
+  );
 
   const onPanelChange = useCallback(
-    (panelValue: string | number, args: { e: React.MouseEvent<HTMLDivElement> }) => {
-      if (Array.isArray(activeValue)) {
-        const hit = activeValue.indexOf(panelValue);
+    (panelValue: string | number, args: { e: React.MouseEvent<HTMLDivElement> }, isDefaultExpandAll: boolean) => {
+      if (!Array.isArray(activeValue)) {
+        return;
+      }
+
+      const isPanelActive = activeValue.includes(panelValue);
+
+      if (isPanelActive) {
+        const newActiveValues = activeValue.filter((item) => item !== panelValue);
+        setActiveValue(newActiveValues);
+        onChange?.(newActiveValues, args);
+        return;
+      }
 
-        if (hit > -1) {
-          const newVal = activeValue.filter((item) => item !== panelValue);
-          setActiveValue(newVal);
-          onChange?.(newVal, args);
-        } else {
-          const newVal = expandMutex ? [panelValue] : activeValue.concat(panelValue);
-          setActiveValue(newVal);
-          onChange?.(newVal, args);
+      if (isDefaultExpandAll && expandMutex) {
+        if (firstNewValRef.current === null) {
+          firstNewValRef.current = [panelValue];
+          setActiveValue([panelValue]);
+          onChange?.([panelValue], args);
         }
+        return;
       }
+
+      if (isDefaultExpandAll && !expandMutex) {
+        if (!collectedValuesRef.current.includes(panelValue)) {
+          collectedValuesRef.current.push(panelValue);
+        }
+        const finalValues = [...activeValue, ...collectedValuesRef.current];
+        debouncedUpdate(finalValues, args);
+        return;
+      }
+
+      const newActiveValues = expandMutex ? [panelValue] : [...activeValue, panelValue];
+      setActiveValue(newActiveValues);
+      onChange?.(newActiveValues, args);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [activeValue, onChange, expandMutex],
+    [activeValue, onChange, expandMutex, debouncedUpdate],
   );
 
   const memoProviderValues = useMemo(

src/collapse/CollapseContext.tsx

@@ -6,7 +6,11 @@ export interface CollapseContextValue {
   activeValue: CollapseValue | undefined;
   disabled: boolean;
   expandIcon: TNode;
-  onPanelChange: (name: string | number, args: { e: React.MouseEvent<HTMLDivElement> }) => void;
+  onPanelChange: (
+    name: string | number,
+    args: { e: React.MouseEvent<HTMLDivElement> },
+    isDefaultExpandAll?: boolean,
+  ) => void;
   defaultExpandAll: boolean;
 }
 

src/collapse/CollapsePanel.tsx

@@ -46,9 +46,10 @@ const CollapsePanel = forwardRef<HTMLDivElement, CollapsePanelProps>((originProp
 
   useEffect(() => {
     if (parent?.defaultExpandAll) {
-      parent.onPanelChange(value, { e: null });
+      parent.onPanelChange(value, { e: null }, true);
     }
-  }, [parent, value]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const renderDefaultIcon = () => {
     if (placement === 'bottom') {