Skip to content

Commit 5a0833b

Browse files
Wxh16144Wxh16144
committed
docs: update docs
1 parent c5c24a8 commit 5a0833b

File tree

4 files changed

+106
-92
lines changed

4 files changed

+106
-92
lines changed

‎docs/demo/fragment.md

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎docs/examples/custom-icon.tsx

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import Collapse, { Panel } from 'rc-collapse';
1+
import Collapse from 'rc-collapse';
22
import * as React from 'react';
33
import '../../assets/index.less';
4+
import type { ItemType } from '../../src/interface';
45
import motion from './_util/motionUtil';
56

67
const initLength = 3;
@@ -48,31 +49,54 @@ const App: React.FC = () => {
4849

4950
const time = random();
5051

51-
const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
52+
const panelItems = Array.from<object, ItemType>({ length: initLength }, (_, i) => {
5253
const key = i + 1;
53-
return (
54-
<Panel header={`This is panel header ${key}`} key={key}>
55-
<p>{text.repeat(time)}</p>
56-
</Panel>
57-
);
54+
return {
55+
key,
56+
header: `This is panel header ${key}`,
57+
children: <p>{text.repeat(time)}</p>,
58+
};
5859
}).concat(
59-
<Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
60-
<Collapse defaultActiveKey="1" expandIcon={expandIcon}>
61-
<Panel header="This is panel nest panel" key="1" id="header-test">
62-
<p>{text}</p>
63-
</Panel>
64-
</Collapse>
65-
</Panel>,
66-
<Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
67-
<Collapse defaultActiveKey="1">
68-
<Panel header="This is panel nest panel" key="1" id="another-test">
69-
<form>
70-
<label htmlFor="test">Name:&nbsp;</label>
71-
<input type="text" id="test" />
72-
</form>
73-
</Panel>
74-
</Collapse>
75-
</Panel>,
60+
{
61+
key: initLength + 1,
62+
header: `This is panel header ${initLength + 1}`,
63+
children: (
64+
<Collapse
65+
defaultActiveKey="1"
66+
expandIcon={expandIcon}
67+
items={[
68+
{
69+
key: '1',
70+
header: 'This is panel nest panel',
71+
id: 'header-test',
72+
children: <p>{text}</p>,
73+
},
74+
]}
75+
/>
76+
),
77+
},
78+
{
79+
key: initLength + 2,
80+
header: `This is panel header ${initLength + 2}`,
81+
children: (
82+
<Collapse
83+
defaultActiveKey="1"
84+
items={[
85+
{
86+
key: '1',
87+
header: 'This is panel nest panel',
88+
id: 'another-test',
89+
children: (
90+
<form>
91+
<label htmlFor="test">Name:&nbsp;</label>
92+
<input type="text" id="test" />
93+
</form>
94+
),
95+
},
96+
]}
97+
/>
98+
),
99+
},
76100
);
77101

78102
const tools = (
@@ -104,9 +128,8 @@ const App: React.FC = () => {
104128
activeKey={activeKey}
105129
expandIcon={expandIcon}
106130
openMotion={motion}
107-
>
108-
{panelItems}
109-
</Collapse>
131+
items={panelItems}
132+
/>
110133
</>
111134
);
112135
};

‎docs/examples/fragment.tsx

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎docs/examples/simple.tsx

Lines changed: 56 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { CollapseProps } from 'rc-collapse';
2-
import Collapse, { Panel } from 'rc-collapse';
2+
import Collapse from 'rc-collapse';
33
import * as React from 'react';
44
import '../../assets/index.less';
5+
import type { ItemType } from '../../src/interface';
56
import motion from './_util/motionUtil';
67

78
const initLength = 3;
@@ -50,38 +51,60 @@ const App: React.FC = () => {
5051

5152
const time = random();
5253

53-
const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
54+
const panelItems = Array.from<object, ItemType>({ length: initLength }, (_, i) => {
5455
const key = i + 1;
55-
return (
56-
<Panel header={`This is panel header ${key}`} key={key}>
57-
<p>{text.repeat(time)}</p>
58-
</Panel>
59-
);
56+
return {
57+
key,
58+
header: `This is panel header ${key}`,
59+
children: <p>{text.repeat(time)}</p>,
60+
};
6061
}).concat(
61-
<Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
62-
<Collapse defaultActiveKey="1" expandIcon={expandIcon}>
63-
<Panel header="This is panel nest panel" key="1" id="header-test">
64-
<p>{text}</p>
65-
</Panel>
66-
</Collapse>
67-
</Panel>,
68-
<Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
69-
<Collapse defaultActiveKey="1">
70-
<Panel header="This is panel nest panel" key="1" id="another-test">
71-
<form>
72-
<label htmlFor="test">Name:&nbsp;</label>
73-
<input type="text" id="test" />
74-
</form>
75-
</Panel>
76-
</Collapse>
77-
</Panel>,
78-
<Panel
79-
header={`This is panel header ${initLength + 3}`}
80-
key={initLength + 3}
81-
extra={<span>Extra Node</span>}
82-
>
83-
<p>Panel with extra</p>
84-
</Panel>,
62+
{
63+
key: initLength + 1,
64+
header: `This is panel header ${initLength + 1}`,
65+
children: (
66+
<Collapse
67+
defaultActiveKey="1"
68+
expandIcon={expandIcon}
69+
items={[
70+
{
71+
key: '1',
72+
header: 'This is panel nest panel',
73+
id: 'header-test',
74+
children: <p>{text}</p>,
75+
},
76+
]}
77+
/>
78+
),
79+
},
80+
{
81+
key: initLength + 2,
82+
header: `This is panel header ${initLength + 2}`,
83+
children: (
84+
<Collapse
85+
defaultActiveKey="1"
86+
items={[
87+
{
88+
key: '1',
89+
header: 'This is panel nest panel',
90+
id: 'another-test',
91+
children: (
92+
<form>
93+
<label htmlFor="test">Name:&nbsp;</label>
94+
<input type="text" id="test" />
95+
</form>
96+
),
97+
},
98+
]}
99+
/>
100+
),
101+
},
102+
{
103+
key: initLength + 3,
104+
header: `This is panel header ${initLength + 3}`,
105+
extra: <span>Extra Node</span>,
106+
children: <p>Panel with extra</p>,
107+
},
85108
);
86109

87110
const handleCollapsibleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -129,9 +152,8 @@ const App: React.FC = () => {
129152
expandIcon={expandIcon}
130153
openMotion={motion}
131154
collapsible={collapsible}
132-
>
133-
{panelItems}
134-
</Collapse>
155+
items={panelItems}
156+
/>
135157
</>
136158
);
137159
};

0 commit comments

Comments
 (0)