feat: can use a wrapper on panel when using items props of collapse

react-component · Jan 8, 2024 · cb9d480 · cb9d480
1 parent 1def17f
commit cb9d480
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx
@@ -24,6 +24,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
     const {
       children,
       label,
+      wrapper,
       key: rawKey,
       collapsible: rawCollapsible,
       onItemClick: rawOnItemClick,
@@ -50,7 +51,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
       isActive = activeKey.indexOf(key) > -1;
     }
 
-    return (
+    const collapsePanel = (
       <CollapsePanel
         {...restProps}
         prefixCls={prefixCls}
@@ -68,6 +69,12 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
         {children}
       </CollapsePanel>
     );
+
+    if (wrapper) {
+      return wrapper(collapsePanel);
+    }
+
+    return collapsePanel;
   });
 };
 

diff --git a/src/interface.ts b/src/interface.ts
@@ -1,5 +1,6 @@
 import type { CSSMotionProps } from 'rc-motion';
 import type * as React from 'react';
+import type { ReactNode } from 'react';
 
 export type CollapsibleType = 'header' | 'icon' | 'disabled';
 
@@ -16,6 +17,7 @@ export interface ItemType
   > {
   key?: CollapsePanelProps['panelKey'];
   label?: CollapsePanelProps['header'];
+  wrapper?: ReactNode;
   ref?: React.RefObject<HTMLDivElement>;
 }