Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: remove deprecated #313

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

refactor: remove deprecated #313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
827ffc2
docs: update docs
Wxh16144 Mar 29, 2023
aecd0c9
test: remove `<Panel />` because deprecated
Wxh16144 Apr 14, 2023
e3025c4
Revert "test: remove `<Panel />` because deprecated"
Wxh16144 Apr 14, 2023
fb3888a
refactor: remove deprecated
Wxh16144 Apr 14, 2023
2664cb0
test: update test
Wxh16144 Apr 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions docs/demo/fragment.md
View file
Open in desktop

This file was deleted.

77 changes: 50 additions & 27 deletions docs/examples/custom-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 = (
Expand Down Expand Up @@ -104,9 +128,8 @@ const App: React.FC = () => {
activeKey={activeKey}
expandIcon={expandIcon}
openMotion={motion}
>
{panelItems}
</Collapse>
items={panelItems}
/>
</>
);
};
Expand Down
23 changes: 0 additions & 23 deletions docs/examples/fragment.tsx
View file
Open in desktop

This file was deleted.

90 changes: 56 additions & 34 deletions docs/examples/simple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>) => {
Expand Down Expand Up @@ -129,9 +152,8 @@ const App: React.FC = () => {
expandIcon={expandIcon}
openMotion={motion}
collapsible={collapsible}
>
{panelItems}
</Collapse>
items={panelItems}
/>
</>
);
};
Expand Down
9 changes: 1 addition & 8 deletions src/Collapse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import warning from 'rc-util/lib/warning';
import React from 'react';
import useItems from './hooks/useItems';
import type { CollapseProps } from './interface';
Expand All @@ -23,7 +22,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
style,
accordion,
className,
children,
collapsible,
openMotion,
expandIcon,
Expand Down Expand Up @@ -58,12 +56,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
});

// ======================== Children ========================
warning(
!children,
'`children` will be removed in next major version. Please use `items` instead.',
);

const mergedChildren = useItems(items, children, {
const mergedChildren = useItems(items, {
prefixCls,
accordion,
openMotion,
Expand Down
87 changes: 2 additions & 85 deletions src/hooks/useItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import toArray from 'rc-util/lib/Children/toArray';
import React from 'react';
import type { CollapsePanelProps, CollapseProps, ItemType } from '../interface';
import CollapsePanel from '../Panel';
Expand Down Expand Up @@ -31,8 +30,6 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
...restProps
} = item;

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

/**
* @deprecated The next major version will be removed
*/
const getNewChild = (
child: React.ReactElement<CollapsePanelProps>,
index: number,
props: Props,
) => {
if (!child) return null;

const {
prefixCls,
accordion,
collapsible,
destroyInactivePanel,
onItemClick,
activeKey,
openMotion,
expandIcon,
} = props;

const key = child.key || String(index);

const {
header,
headerClass,
destroyInactivePanel: childDestroyInactivePanel,
collapsible: childCollapsible,
onItemClick: childOnItemClick,
} = child.props;

let isActive = false;
if (accordion) {
isActive = activeKey[0] === key;
} else {
isActive = activeKey.indexOf(key) > -1;
}

const mergeCollapsible = childCollapsible ?? collapsible;

const handleItemClick = (value: React.Key) => {
if (mergeCollapsible === 'disabled') return;
onItemClick(value);
childOnItemClick?.(value);
};

const childProps = {
key,
panelKey: key,
header,
headerClass,
isActive,
prefixCls,
destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel,
openMotion,
accordion,
children: child.props.children,
onItemClick: handleItemClick,
expandIcon,
collapsible: mergeCollapsible,
};

// https://github.com/ant-design/ant-design/issues/20479
if (typeof child.type === 'string') {
return child;
}

Object.keys(childProps).forEach((propName) => {
if (typeof childProps[propName] === 'undefined') {
delete childProps[propName];
}
});

return React.cloneElement(child, childProps);
};

function useItems(
items?: ItemType[],
rawChildren?: React.ReactNode,
props?: Props,
): React.ReactElement<CollapsePanelProps>[] {
function useItems(items?: ItemType[], props?: Props) {
if (Array.isArray(items)) {
return convertItemsToNodes(items, props);
}

return toArray(rawChildren).map((child, index) => getNewChild(child, index, props));
return null;
}

export default useItems;
10 changes: 1 addition & 9 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,2 @@
import Collapse from './Collapse';

export { default } 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;
Loading