feat: support items & add deprecated warning

Author: Wxh16144

docs/demo/basic.md

@@ -0,0 +1,8 @@
+---
+title: Basic
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/basic.tsx"></code>

docs/examples/basic.tsx

@@ -0,0 +1,32 @@
+import type { CollapseProps } from 'rc-collapse';
+import Collapse from 'rc-collapse';
+import * as React from 'react';
+import '../../assets/index.less';
+
+const App = () => {
+  const items: CollapseProps['items'] = [
+    {
+      header: 'title',
+      children: 'content',
+    },
+    {
+      header: 'title 2',
+      children: 'content 2',
+      collapsible: 'disabled',
+    },
+    {
+      header: 'title 3',
+      children: 'content 3',
+      onItemClick: console.log,
+    },
+    {
+      header: 'title 4',
+      children: 'content 4',
+      expandIcon: () => <i>custom icon</i>,
+    },
+  ];
+
+  return <Collapse items={items} />;
+};
+
+export default App;

src/Collapse.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import warning from 'rc-util/lib/warning';
 import React from 'react';
-import type { CollapsePanelProps, CollapseProps, CollapsibleType } from './interface';
+import type { CollapsePanelProps, CollapseProps, CollapsibleType, ItemType } from './interface';
 import CollapsePanel from './Panel';
 
 function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
@@ -29,6 +30,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     activeKey: rawActiveKey,
     defaultActiveKey,
     onChange,
+    items,
   } = props;
 
   const collapseClassName = classNames(prefixCls, className);
@@ -56,6 +58,11 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     });
 
   // ======================== Children ========================
+  warning(
+    !rawChildren,
+    '`children` will be removed in next major version. Please use `items` instead.',
+  );
+
   const getNewChild = (child: React.ReactElement<CollapsePanelProps>, index: number) => {
     if (!child) return null;
 
@@ -114,7 +121,54 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     return React.cloneElement(child, childProps);
   };
 
-  const children = toArray(rawChildren).map(getNewChild);
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const convertItemsToNodes = (items: ItemType[]) =>
+    items.map((item, index) => {
+      const {
+        children,
+        key: rawKey,
+        collapsible: rawCollapsible,
+        onItemClick: rawOnItemClick,
+        destroyInactivePanel: rawDestroyInactivePanel,
+        ...restProps
+      } = item;
+
+      const key = rawKey || String(index);
+      const mergeCollapsible = rawCollapsible ?? collapsible;
+      const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel;
+
+      const handleItemClick = (value: React.Key) => {
+        if (mergeCollapsible === 'disabled') return;
+        onClickItem(value);
+        rawOnItemClick?.(value);
+      };
+
+      let isActive = false;
+      if (accordion) {
+        isActive = activeKey[0] === key;
+      } else {
+        isActive = activeKey.indexOf(key) > -1;
+      }
+
+      return (
+        <CollapsePanel
+          prefixCls={prefixCls}
+          key={key}
+          panelKey={key}
+          isActive={isActive}
+          collapsible={mergeCollapsible}
+          onItemClick={handleItemClick}
+          destroyInactivePanel={mergeDestroyInactivePanel}
+          {...restProps}
+        >
+          {children}
+        </CollapsePanel>
+      );
+    });
+
+  const children = Array.isArray(items)
+    ? convertItemsToNodes(items)
+    : toArray(rawChildren).map(getNewChild);
 
   // ======================== Render ========================
   return (
@@ -129,4 +183,9 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   );
 });
 
-export default Object.assign(Collapse, { Panel: CollapsePanel });
+export default Object.assign(Collapse, {
+  /**
+   * @deprecated use `items` instead, will be removed in `v4.0.0`
+   */
+  Panel: CollapsePanel,
+});

src/index.tsx

@@ -3,4 +3,8 @@ import Collapse from './Collapse';
 export type { CollapsePanelProps, CollapseProps } from './interface';
 
 export default Collapse;
+
+/**
+ * @deprecated use `items` instead, will be removed in `v4.0.0`
+ */
 export const { Panel } = Collapse;

src/interface.ts

@@ -3,6 +3,11 @@ import type * as React from 'react';
 
 export type CollapsibleType = 'header' | 'icon' | 'disabled';
 
+export interface ItemType extends Omit<CollapsePanelProps, 'prefixCls' | 'panelKey' | 'isActive'> {
+  ref?: React.RefObject<HTMLDivElement>;
+  key?: React.Key;
+}
+
 export interface CollapseProps {
   prefixCls?: string;
   activeKey?: React.Key | React.Key[];
@@ -15,7 +20,15 @@ export interface CollapseProps {
   destroyInactivePanel?: boolean;
   expandIcon?: (props: object) => React.ReactNode;
   collapsible?: CollapsibleType;
+  /**
+   * @deprecated use `items` instead, will be removed in `v4.0.0`
+   */
   children?: React.ReactNode;
+  /**
+   * Collapse items content
+   * @since 3.6.0
+   */
+  items?: ItemType[];
 }
 
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {