Refactoring

Author: Jianan Li

.gitignore

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

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>

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 });

package.json

@@ -46,9 +46,9 @@
   },
   "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",
@@ -57,8 +57,9 @@
     "@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",
@@ -73,12 +74,12 @@
     "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"
   }
 }

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,

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>

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,

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;

src/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Collapse from './Collapse';
 
 export type { CollapsePanelProps, CollapseProps } from './interface';

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;