ant-design/components/collapse/CollapsePanel.tsx
@linhf2023 83cfad4714
fix: Add ref to Collapse and Panel component (#40443)
* chore: update rc-collapse to 3.5.x

* feat: Add ref to Collapse and Panel component

* test(collapse): add ref case

* update snapshot

* Revert "update snapshot"

This reverts commit 1d4710a8db4dd2dec552e5b8d0599f3a1c3cc7d0.

* chore(deps): bump rc-collapse

* chore: update
2023-02-01 22:55:41 +08:00

51 lines
1.4 KiB
TypeScript

import classNames from 'classnames';
import RcCollapse from 'rc-collapse';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import warning from '../_util/warning';
export type CollapsibleType = 'header' | 'icon' | 'disabled';
export interface CollapsePanelProps {
key: string | number;
header: React.ReactNode;
/** @deprecated Use `collapsible="disabled"` instead */
disabled?: boolean;
className?: string;
style?: React.CSSProperties;
showArrow?: boolean;
prefixCls?: string;
forceRender?: boolean;
id?: string;
extra?: React.ReactNode;
collapsible?: CollapsibleType;
children?: React.ReactNode;
}
const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((props, ref) => {
warning(
!('disabled' in props),
'Collapse.Panel',
'`disabled` is deprecated. Please use `collapsible="disabled"` instead.',
);
const { getPrefixCls } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, className = '', showArrow = true } = props;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const collapsePanelClassName = classNames(
{
[`${prefixCls}-no-arrow`]: !showArrow,
},
className,
);
return (
<RcCollapse.Panel
ref={ref}
{...props}
prefixCls={prefixCls}
className={collapsePanelClassName}
/>
);
});
export default CollapsePanel;