Skip to content

Commit 934479a

Browse files
Wxh16144Wxh16144
authored
Merge 2664cb0 into 2cad8d9 
2 parents 2cad8d9 + 2664cb0 commit 934479a

File tree

8 files changed

+475
-499
lines changed

8 files changed

+475
-499
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
};

‎src/Collapse.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import classNames from 'classnames';
22
import useMergedState from 'rc-util/lib/hooks/useMergedState';
3-
import warning from 'rc-util/lib/warning';
43
import React from 'react';
54
import useItems from './hooks/useItems';
65
import type { CollapseProps } from './interface';
@@ -23,7 +22,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
2322
style,
2423
accordion,
2524
className,
26-
children,
2725
collapsible,
2826
openMotion,
2927
expandIcon,
@@ -58,12 +56,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
5856
});
5957

6058
// ======================== Children ========================
61-
warning(
62-
!children,
63-
'`children` will be removed in next major version. Please use `items` instead.',
64-
);
65-
66-
const mergedChildren = useItems(items, children, {
59+
const mergedChildren = useItems(items, {
6760
prefixCls,
6861
accordion,
6962
openMotion,

‎src/hooks/useItems.tsx‎

Lines changed: 2 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import toArray from 'rc-util/lib/Children/toArray';
21
import React from 'react';
32
import type { CollapsePanelProps, CollapseProps, ItemType } from '../interface';
43
import CollapsePanel from '../Panel';
@@ -31,8 +30,6 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
3130
...restProps
3231
} = item;
3332

34-
// You may be puzzled why you want to convert them all into strings, me too.
35-
// Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15
3633
const key = String(rawKey ?? index);
3734
const mergeCollapsible = rawCollapsible ?? collapsible;
3835
const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel;
@@ -71,92 +68,12 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
7168
});
7269
};
7370

74-
/**
75-
* @deprecated The next major version will be removed
76-
*/
77-
const getNewChild = (
78-
child: React.ReactElement<CollapsePanelProps>,
79-
index: number,
80-
props: Props,
81-
) => {
82-
if (!child) return null;
83-
84-
const {
85-
prefixCls,
86-
accordion,
87-
collapsible,
88-
destroyInactivePanel,
89-
onItemClick,
90-
activeKey,
91-
openMotion,
92-
expandIcon,
93-
} = props;
94-
95-
const key = child.key || String(index);
96-
97-
const {
98-
header,
99-
headerClass,
100-
destroyInactivePanel: childDestroyInactivePanel,
101-
collapsible: childCollapsible,
102-
onItemClick: childOnItemClick,
103-
} = child.props;
104-
105-
let isActive = false;
106-
if (accordion) {
107-
isActive = activeKey[0] === key;
108-
} else {
109-
isActive = activeKey.indexOf(key) > -1;
110-
}
111-
112-
const mergeCollapsible = childCollapsible ?? collapsible;
113-
114-
const handleItemClick = (value: React.Key) => {
115-
if (mergeCollapsible === 'disabled') return;
116-
onItemClick(value);
117-
childOnItemClick?.(value);
118-
};
119-
120-
const childProps = {
121-
key,
122-
panelKey: key,
123-
header,
124-
headerClass,
125-
isActive,
126-
prefixCls,
127-
destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel,
128-
openMotion,
129-
accordion,
130-
children: child.props.children,
131-
onItemClick: handleItemClick,
132-
expandIcon,
133-
collapsible: mergeCollapsible,
134-
};
135-
136-
// https://github.com/ant-design/ant-design/issues/20479
137-
if (typeof child.type === 'string') {
138-
return child;
139-
}
140-
141-
Object.keys(childProps).forEach((propName) => {
142-
if (typeof childProps[propName] === 'undefined') {
143-
delete childProps[propName];
144-
}
145-
});
146-
147-
return React.cloneElement(child, childProps);
148-
};
149-
150-
function useItems(
151-
items?: ItemType[],
152-
rawChildren?: React.ReactNode,
153-
props?: Props,
154-
): React.ReactElement<CollapsePanelProps>[] {
71+
function useItems(items?: ItemType[], props?: Props) {
15572
if (Array.isArray(items)) {
15673
return convertItemsToNodes(items, props);
15774
}
15875

159-
return toArray(rawChildren).map((child, index) => getNewChild(child, index, props));
76+
return null;
16077
}
16178

16279
export default useItems;

‎src/index.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,2 @@
1-
import Collapse from './Collapse';
2-
1+
export { default } from './Collapse';
32
export type { CollapsePanelProps, CollapseProps } from './interface';
4-
5-
export default Collapse;
6-
7-
/**
8-
* @deprecated use `items` instead, will be removed in `v4.0.0`
9-
*/
10-
export const { Panel } = Collapse;

0 commit comments

Comments
 (0)