docs: update docs

react-component · Mar 29, 2023 · 5a0833b · 5a0833b
1 parent c5c24a8
commit 5a0833b
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 92 deletions.
diff --git a/docs/demo/fragment.md b/docs/demo/fragment.md
diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
@@ -1,6 +1,7 @@
-import Collapse, { Panel } from 'rc-collapse';
+import Collapse from 'rc-collapse';
 import * as React from 'react';
 import '../../assets/index.less';
+import type { ItemType } from '../../src/interface';
 import motion from './_util/motionUtil';
 
 const initLength = 3;
@@ -48,31 +49,54 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
+  const panelItems = Array.from<object, ItemType>({ length: initLength }, (_, i) => {
     const key = i + 1;
-    return (
-      <Panel header={`This is panel header ${key}`} key={key}>
-        <p>{text.repeat(time)}</p>
-      </Panel>
-    );
+    return {
+      key,
+      header: `This is panel header ${key}`,
+      children: <p>{text.repeat(time)}</p>,
+    };
   }).concat(
-    <Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
-      <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
-        <Panel header="This is panel nest panel" key="1" id="header-test">
-          <p>{text}</p>
-        </Panel>
-      </Collapse>
-    </Panel>,
-    <Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
-      <Collapse defaultActiveKey="1">
-        <Panel header="This is panel nest panel" key="1" id="another-test">
-          <form>
-            <label htmlFor="test">Name:&nbsp;</label>
-            <input type="text" id="test" />
-          </form>
-        </Panel>
-      </Collapse>
-    </Panel>,
+    {
+      key: initLength + 1,
+      header: `This is panel header ${initLength + 1}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          expandIcon={expandIcon}
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'header-test',
+              children: <p>{text}</p>,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 2,
+      header: `This is panel header ${initLength + 2}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'another-test',
+              children: (
+                <form>
+                  <label htmlFor="test">Name:&nbsp;</label>
+                  <input type="text" id="test" />
+                </form>
+              ),
+            },
+          ]}
+        />
+      ),
+    },
   );
 
   const tools = (
@@ -104,9 +128,8 @@ const App: React.FC = () => {
         activeKey={activeKey}
         expandIcon={expandIcon}
         openMotion={motion}
-      >
-        {panelItems}
-      </Collapse>
+        items={panelItems}
+      />
     </>
   );
 };

diff --git a/docs/examples/fragment.tsx b/docs/examples/fragment.tsx
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
@@ -1,7 +1,8 @@
 import type { CollapseProps } from 'rc-collapse';
-import Collapse, { Panel } from 'rc-collapse';
+import Collapse from 'rc-collapse';
 import * as React from 'react';
 import '../../assets/index.less';
+import type { ItemType } from '../../src/interface';
 import motion from './_util/motionUtil';
 
 const initLength = 3;
@@ -50,38 +51,60 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
+  const panelItems = Array.from<object, ItemType>({ length: initLength }, (_, i) => {
     const key = i + 1;
-    return (
-      <Panel header={`This is panel header ${key}`} key={key}>
-        <p>{text.repeat(time)}</p>
-      </Panel>
-    );
+    return {
+      key,
+      header: `This is panel header ${key}`,
+      children: <p>{text.repeat(time)}</p>,
+    };
   }).concat(
-    <Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
-      <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
-        <Panel header="This is panel nest panel" key="1" id="header-test">
-          <p>{text}</p>
-        </Panel>
-      </Collapse>
-    </Panel>,
-    <Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
-      <Collapse defaultActiveKey="1">
-        <Panel header="This is panel nest panel" key="1" id="another-test">
-          <form>
-            <label htmlFor="test">Name:&nbsp;</label>
-            <input type="text" id="test" />
-          </form>
-        </Panel>
-      </Collapse>
-    </Panel>,
-    <Panel
-      header={`This is panel header ${initLength + 3}`}
-      key={initLength + 3}
-      extra={<span>Extra Node</span>}
-    >
-      <p>Panel with extra</p>
-    </Panel>,
+    {
+      key: initLength + 1,
+      header: `This is panel header ${initLength + 1}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          expandIcon={expandIcon}
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'header-test',
+              children: <p>{text}</p>,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 2,
+      header: `This is panel header ${initLength + 2}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'another-test',
+              children: (
+                <form>
+                  <label htmlFor="test">Name:&nbsp;</label>
+                  <input type="text" id="test" />
+                </form>
+              ),
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 3,
+      header: `This is panel header ${initLength + 3}`,
+      extra: <span>Extra Node</span>,
+      children: <p>Panel with extra</p>,
+    },
   );
 
   const handleCollapsibleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -129,9 +152,8 @@ const App: React.FC = () => {
         expandIcon={expandIcon}
         openMotion={motion}
         collapsible={collapsible}
-      >
-        {panelItems}
-      </Collapse>
+        items={panelItems}
+      />
     </>
   );
 };