From 14e7ab9807ff5b38025d8b075d5b8b44d92a1d20 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 14 Jan 2025 15:28:22 +0800
Subject: [PATCH 1/3] feat: useItems support classnames and styles

---
 src/hooks/useItems.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx
index 5c86d02..0532ba3 100644
--- a/src/hooks/useItems.tsx
+++ b/src/hooks/useItems.tsx
@@ -3,7 +3,10 @@ import React from 'react';
 import type { CollapsePanelProps, CollapseProps, ItemType } from '../interface';
 import CollapsePanel from '../Panel';
 
-type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon'> &
+type Props = Pick<
+  CollapsePanelProps,
+  'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles'
+> &
   Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyInactivePanel'> & {
     activeKey: React.Key[];
   };
@@ -90,6 +93,8 @@ const getNewChild = (
     activeKey,
     openMotion,
     expandIcon,
+    classNames: collapseClassNames,
+    styles,
   } = props;
 
   const key = child.key || String(index);
@@ -122,6 +127,8 @@ const getNewChild = (
     panelKey: key,
     header,
     headerClass,
+    classNames: collapseClassNames,
+    styles,
     isActive,
     prefixCls,
     destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel,

From 9f1f6d488354b4c1ce3e64d6e0bf9ddc5ecd5071 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 14 Jan 2025 15:44:52 +0800
Subject: [PATCH 2/3] fix

---
 src/Collapse.tsx       | 4 ++++
 src/hooks/useItems.tsx | 4 ++++
 src/interface.ts       | 2 ++
 tests/index.spec.tsx   | 5 +++--
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 0504476..e75ec5f 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -32,6 +32,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     defaultActiveKey,
     onChange,
     items,
+    classNames: customizeClassNames,
+    styles,
   } = props;
 
   const collapseClassName = classNames(prefixCls, className);
@@ -73,6 +75,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     destroyInactivePanel,
     onItemClick,
     activeKey,
+    classNames: customizeClassNames,
+    styles,
   });
 
   // ======================== Render ========================
diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx
index 0532ba3..08317ac 100644
--- a/src/hooks/useItems.tsx
+++ b/src/hooks/useItems.tsx
@@ -21,6 +21,8 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
     activeKey,
     openMotion,
     expandIcon,
+    classNames: collapseClassNames,
+    styles,
   } = props;
 
   return items.map((item, index) => {
@@ -56,6 +58,8 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
     return (
       <CollapsePanel
         {...restProps}
+        classNames={collapseClassNames}
+        styles={styles}
         prefixCls={prefixCls}
         key={key}
         panelKey={key}
diff --git a/src/interface.ts b/src/interface.ts
index f6ca109..123c793 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -37,6 +37,8 @@ export interface CollapseProps {
    * @since 3.6.0
    */
   items?: ItemType[];
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 export type SemanticName = 'header' | 'title' | 'body' | 'icon';
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 1a078e2..a9ba447 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -871,12 +871,12 @@ describe('collapse', () => {
       const { container } = render(
         <Collapse
           activeKey={['1']}
+          styles={customStyles}
+          classNames={customClassnames}
           items={[
             {
               key: '1',
               label: 'title',
-              styles: customStyles,
-              classNames: customClassnames,
             },
           ]}
         />,
@@ -885,6 +885,7 @@ describe('collapse', () => {
       const bodyElement = container.querySelector('.rc-collapse-body') as HTMLElement;
       const titleElement = container.querySelector('.rc-collapse-title') as HTMLElement;
       const iconElement = container.querySelector('.rc-collapse-expand-icon') as HTMLElement;
+      console.log(container.innerHTML);
 
       // check classNames
       expect(headerElement.classList).toContain('custom-header');

From fa25759e4ac5e12fc438c81d03df831bf4d34796 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Tue, 14 Jan 2025 15:51:24 +0800
Subject: [PATCH 3/3] fix

---
 tests/index.spec.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index a9ba447..ff5f759 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -885,7 +885,6 @@ describe('collapse', () => {
       const bodyElement = container.querySelector('.rc-collapse-body') as HTMLElement;
       const titleElement = container.querySelector('.rc-collapse-title') as HTMLElement;
       const iconElement = container.querySelector('.rc-collapse-expand-icon') as HTMLElement;
-      console.log(container.innerHTML);
 
       // check classNames
       expect(headerElement.classList).toContain('custom-header');