refactor: Replace with destroyOnHidden (#364)

lijianan · zombieJ · web-flow · commit cf0fa801bdda · 2025-05-19T11:29:23.000+08:00
* Refactoring

* Refactoring

* Refactoring

* chore: update vercel

* chore: fix peer

* chore: update build config

---------

Co-authored-by: 二货机器人 &lt;smith3816@gmail.com&gt;
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -16,7 +16,6 @@ export default defineConfig({
     name: 'Collapse',
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
-  outputPath: '.doc',
   base: basePath,
   publicPath,
 });
diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml
@@ -33,7 +33,7 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./.doc
+          publish_dir: ./dist
           force_orphan: true
           user_name: 'github-actions[bot]'
           user_email: 'github-actions[bot]@users.noreply.github.com'
diff --git a/.gitignore b/.gitignore
@@ -28,6 +28,7 @@ coverage
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 .storybook
 .doc
 
diff --git a/README.md b/README.md
@@ -78,7 +78,7 @@ ReactDOM.render(App, container);
           <td>default active key</td>
       </tr>
       <tr>
-          <td>destroyInactivePanel</td>
+          <td>destroyOnHidden</td>
           <td>Boolean</td>
           <th>false</th>
           <td>If destroy the panel which not active, default false. </td>
diff --git a/docs/examples/_util/motionUtil.ts b/docs/examples/_util/motionUtil.ts
@@ -1,4 +1,8 @@
-import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
+import type {
+  CSSMotionProps,
+  MotionEndEventHandler,
+  MotionEventHandler,
+} from '@rc-component/motion';
 
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });
diff --git a/now.json b/now.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "compile": "father build && lessc assets/index.less assets/index.css",
     "coverage": "rc-test --coverage",
     "docs:build": "dumi build",
-    "docs:deploy": "npm run docs:build && gh-pages -d .doc",
+    "docs:deploy": "npm run docs:build && gh-pages -d dist",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prepare": "husky",
     "now-build": "npm run docs:build",
@@ -46,19 +46,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
+    "@rc-component/motion": "^1.1.4",
     "@rc-component/util": "^1.0.1",
-    "classnames": "2.x",
-    "rc-motion": "^2.3.4"
+    "classnames": "2.x"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/np": "^1.0.4",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/node": "^22.15.18",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@umijs/fabric": "^4.0.0",
     "dumi": "^2.1.1",
     "eslint": "^8.55.0",
@@ -70,15 +72,14 @@
     "jest": "^29.1.2",
     "less": "^4.2.0",
     "lint-staged": "^15.0.2",
-    "np": "^9.1.0",
     "prettier": "^3.0.3",
     "rc-test": "^7.0.14",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
 }
diff --git a/src/Collapse.tsx b/src/Collapse.tsx
@@ -20,7 +20,7 @@ function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
 const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
   const {
     prefixCls = 'rc-collapse',
-    destroyInactivePanel = false,
+    destroyOnHidden = false,
     style,
     accordion,
     className,
@@ -72,7 +72,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     openMotion,
     expandIcon,
     collapsible,
-    destroyInactivePanel,
+    destroyOnHidden,
     onItemClick,
     activeKey,
     classNames: customizeClassNames,
diff --git a/src/Panel.tsx b/src/Panel.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React from 'react';
 import type { CollapsePanelProps } from './interface';
@@ -23,7 +23,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     header,
     expandIcon,
     openMotion,
-    destroyInactivePanel,
+    destroyOnHidden,
     children,
     ...resetProps
   } = props;
@@ -104,7 +104,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
         leavedClassName={`${prefixCls}-panel-hidden`}
         {...openMotion}
         forceRender={forceRender}
-        removeOnLeave={destroyInactivePanel}
+        removeOnLeave={destroyOnHidden}
       >
         {({ className: motionClassName, style: motionStyle }, motionRef) => {
           return (
@@ -117,7 +117,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
               styles={styles}
               isActive={isActive}
               forceRender={forceRender}
-              role={accordion ? 'tabpanel' : void 0}
+              role={accordion ? 'tabpanel' : undefined}
             >
               {children}
             </PanelContent>
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
@@ -4,7 +4,7 @@ import type { CollapsePanelProps } from './interface';
 
 const PanelContent = React.forwardRef<
   HTMLDivElement,
-  CollapsePanelProps & { children: React.ReactNode }
+  React.PropsWithChildren<Readonly<CollapsePanelProps>>
 >((props, ref) => {
   const {
     prefixCls,
diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx
@@ -7,7 +7,7 @@ type Props = Pick<
   CollapsePanelProps,
   'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles'
 > &
-  Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyInactivePanel'> & {
+  Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyOnHidden'> & {
     activeKey: React.Key[];
   };
 
@@ -16,7 +16,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
     prefixCls,
     accordion,
     collapsible,
-    destroyInactivePanel,
+    destroyOnHidden,
     onItemClick,
     activeKey,
     openMotion,
@@ -32,18 +32,20 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
       key: rawKey,
       collapsible: rawCollapsible,
       onItemClick: rawOnItemClick,
-      destroyInactivePanel: rawDestroyInactivePanel,
+      destroyOnHidden: rawDestroyOnHidden,
       ...restProps
     } = item;
 
     // You may be puzzled why you want to convert them all into strings, me too.
     // Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15
     const key = String(rawKey ?? index);
     const mergeCollapsible = rawCollapsible ?? collapsible;
-    const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel;
+    const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden;
 
     const handleItemClick = (value: React.Key) => {
-      if (mergeCollapsible === 'disabled') return;
+      if (mergeCollapsible === 'disabled') {
+        return;
+      }
       onItemClick(value);
       rawOnItemClick?.(value);
     };
@@ -70,7 +72,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
         header={label}
         collapsible={mergeCollapsible}
         onItemClick={handleItemClick}
-        destroyInactivePanel={mergeDestroyInactivePanel}
+        destroyOnHidden={mergedDestroyOnHidden}
       >
         {children}
       </CollapsePanel>
@@ -86,13 +88,15 @@ const getNewChild = (
   index: number,
   props: Props,
 ) => {
-  if (!child) return null;
+  if (!child) {
+    return null;
+  }
 
   const {
     prefixCls,
     accordion,
     collapsible,
-    destroyInactivePanel,
+    destroyOnHidden,
     onItemClick,
     activeKey,
     openMotion,
@@ -106,7 +110,7 @@ const getNewChild = (
   const {
     header,
     headerClass,
-    destroyInactivePanel: childDestroyInactivePanel,
+    destroyOnHidden: childDestroyOnHidden,
     collapsible: childCollapsible,
     onItemClick: childOnItemClick,
   } = child.props;
@@ -121,7 +125,9 @@ const getNewChild = (
   const mergeCollapsible = childCollapsible ?? collapsible;
 
   const handleItemClick = (value: React.Key) => {
-    if (mergeCollapsible === 'disabled') return;
+    if (mergeCollapsible === 'disabled') {
+      return;
+    }
     onItemClick(value);
     childOnItemClick?.(value);
   };
@@ -135,7 +141,7 @@ const getNewChild = (
     styles,
     isActive,
     prefixCls,
-    destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel,
+    destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
     openMotion,
     accordion,
     children: child.props.children,
@@ -155,7 +161,7 @@ const getNewChild = (
     }
   });
 
-  return React.cloneElement(child, childProps);
+  return React.cloneElement<CollapsePanelProps>(child, childProps);
 };
 
 function useItems(
@@ -166,8 +172,9 @@ function useItems(
   if (Array.isArray(items)) {
     return convertItemsToNodes(items, props);
   }
-
-  return toArray(rawChildren).map((child, index) => getNewChild(child, index, props));
+  return toArray(rawChildren).map((child, index) =>
+    getNewChild(child as React.ReactElement<CollapsePanelProps>, index, props),
+  );
 }
 
 export default useItems;
diff --git a/src/interface.ts b/src/interface.ts
@@ -1,4 +1,4 @@
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
 import type * as React from 'react';
 
 export type CollapsibleType = 'header' | 'icon' | 'disabled';
@@ -28,7 +28,7 @@ export interface CollapseProps {
   accordion?: boolean;
   className?: string;
   style?: object;
-  destroyInactivePanel?: boolean;
+  destroyOnHidden?: boolean;
   expandIcon?: (props: object) => React.ReactNode;
   collapsible?: CollapsibleType;
   children?: React.ReactNode;
@@ -42,9 +42,10 @@ export interface CollapseProps {
 }
 
 export type SemanticName = 'header' | 'title' | 'body' | 'icon';
+
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
   id?: string;
-  header?: string | React.ReactNode;
+  header?: React.ReactNode;
   prefixCls?: string;
   headerClass?: string;
   showArrow?: boolean;
@@ -54,10 +55,10 @@ export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement>
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   isActive?: boolean;
   openMotion?: CSSMotionProps;
-  destroyInactivePanel?: boolean;
+  destroyOnHidden?: boolean;
   accordion?: boolean;
   forceRender?: boolean;
-  extra?: string | React.ReactNode;
+  extra?: React.ReactNode;
   onItemClick?: (panelKey: React.Key) => void;
   expandIcon?: (props: object) => React.ReactNode;
   panelKey?: React.Key;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -1,6 +1,6 @@
 import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render } from '@testing-library/react';
-import KeyCode from 'rc-util/lib/KeyCode';
+import KeyCode from '@rc-component/util/lib/KeyCode';
 import React, { Fragment } from 'react';
 import Collapse, { Panel } from '../src/index';
 import type { CollapseProps, ItemType } from '../src/interface';
@@ -240,7 +240,7 @@ describe('collapse', () => {
 
   it('click should toggle panel state', () => {
     const { container } = render(
-      <Collapse onChange={onChange} destroyInactivePanel>
+      <Collapse onChange={onChange} destroyOnHidden>
         <Panel header="collapse 1" key="1">
           first
         </Panel>
diff --git a/vercel.json b/vercel.json
@@ -0,0 +1,3 @@
+{
+  "framework": "umijs"
+}
