feat: 重构collapse为details实现

Author: IVLIU

.gitignore

@@ -28,6 +28,7 @@ coverage
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 .storybook
 .doc
 

src/Collapse.tsx

@@ -46,18 +46,21 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   });
 
   const onItemClick = (key: React.Key) =>
-    setActiveKey(() => {
-      if (accordion) {
-        return activeKey[0] === key ? [] : [key];
-      }
+    // ? 为了解决https://github.com/facebook/react/issues/15486
+    React.startTransition(() => {
+      setActiveKey(() => {
+        if (accordion) {
+          return activeKey[0] === key ? [] : [key];
+        }
 
-      const index = activeKey.indexOf(key);
-      const isActive = index > -1;
-      if (isActive) {
-        return activeKey.filter((item) => item !== key);
-      }
+        const index = activeKey.indexOf(key);
+        const isActive = index > -1;
+        if (isActive) {
+          return activeKey.filter((item) => item !== key);
+        }
 
-      return [...activeKey, key];
+        return [...activeKey, key];
+      });
     });
 
   // ======================== Children ========================

src/Panel.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { CollapsePanelProps } from './interface';
 import PanelContent from './PanelContent';
 
-const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((props, ref) => {
+const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((props, ref) => {
   const {
     showArrow = true,
     headerClass,
@@ -87,8 +87,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
 
   // ======================== Render ========================
   return (
-    <div {...resetProps} ref={ref} className={collapsePanelClassNames}>
-      <div {...headerProps}>
+    <details {...resetProps} ref={ref} className={collapsePanelClassNames} open={isActive}>
+      <summary {...headerProps}>
         {showArrow && iconNode}
         <span
           className={classNames(`${prefixCls}-title`, customizeClassNames?.title)}
@@ -98,7 +98,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
           {header}
         </span>
         {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
-      </div>
+      </summary>
       <CSSMotion
         visible={isActive}
         leavedClassName={`${prefixCls}-panel-hidden`}
@@ -124,7 +124,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
           );
         }}
       </CSSMotion>
-    </div>
+    </details>
   );
 });
 

src/interface.ts

@@ -16,7 +16,7 @@ export interface ItemType
   > {
   key?: CollapsePanelProps['panelKey'];
   label?: CollapsePanelProps['header'];
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.RefObject<HTMLDetailsElement>;
 }
 
 export interface CollapseProps {
@@ -42,15 +42,15 @@ export interface CollapseProps {
 }
 
 export type SemanticName = 'header' | 'title' | 'body' | 'icon';
-export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
+export interface CollapsePanelProps extends React.DOMAttributes<HTMLDetailsElement> {
   id?: string;
   header?: string | React.ReactNode;
   prefixCls?: string;
   headerClass?: string;
   showArrow?: boolean;
   className?: string;
   classNames?: Partial<Record<SemanticName, string>>;
-  style?: object;
+  style?: React.CSSProperties;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   isActive?: boolean;
   openMotion?: CSSMotionProps;