feat: useItems support classnames and styles (#361)

* feat: useItems support classnames and styles

* fix

* fix

Author: thinkasany

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 ========================

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[];
   };
@@ -18,6 +21,8 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
     activeKey,
     openMotion,
     expandIcon,
+    classNames: collapseClassNames,
+    styles,
   } = props;
 
   return items.map((item, index) => {
@@ -53,6 +58,8 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
     return (
       <CollapsePanel
         {...restProps}
+        classNames={collapseClassNames}
+        styles={styles}
         prefixCls={prefixCls}
         key={key}
         panelKey={key}
@@ -90,6 +97,8 @@ const getNewChild = (
     activeKey,
     openMotion,
     expandIcon,
+    classNames: collapseClassNames,
+    styles,
   } = props;
 
   const key = child.key || String(index);
@@ -122,6 +131,8 @@ const getNewChild = (
     panelKey: key,
     header,
     headerClass,
+    classNames: collapseClassNames,
+    styles,
     isActive,
     prefixCls,
     destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel,

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';

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,
             },
           ]}
         />,