mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
fix(Card): should show tab when tabList is empty (#43416)
* fix(Card): should show tab when tabList is empty * test: add case * test: adjust case
This commit is contained in:
parent
e36d50f379
commit
266e60aa95
@ -118,19 +118,18 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
|
||||
let head: React.ReactNode;
|
||||
const mergedSize = useSize(customizeSize);
|
||||
const tabSize = !mergedSize || mergedSize === 'default' ? 'large' : mergedSize;
|
||||
const tabs =
|
||||
tabList && tabList.length ? (
|
||||
<Tabs
|
||||
size={tabSize}
|
||||
{...extraProps}
|
||||
className={`${prefixCls}-head-tabs`}
|
||||
onChange={onTabChange}
|
||||
items={tabList.map(({ tab, ...item }) => ({
|
||||
label: tab,
|
||||
...item,
|
||||
}))}
|
||||
/>
|
||||
) : null;
|
||||
const tabs = tabList ? (
|
||||
<Tabs
|
||||
size={tabSize}
|
||||
{...extraProps}
|
||||
className={`${prefixCls}-head-tabs`}
|
||||
onChange={onTabChange}
|
||||
items={tabList.map(({ tab, ...item }) => ({
|
||||
label: tab,
|
||||
...item,
|
||||
}))}
|
||||
/>
|
||||
) : null;
|
||||
if (title || extra || tabs) {
|
||||
head = (
|
||||
<div className={`${prefixCls}-head`} style={headStyle}>
|
||||
|
@ -132,6 +132,17 @@ describe('Card', () => {
|
||||
expect(cardRef.current).toHaveClass('ant-card');
|
||||
});
|
||||
|
||||
it('should show tab when tabList is empty', () => {
|
||||
const { container } = render(
|
||||
<Card title="Card title" tabList={[]} tabProps={{ type: 'editable-card' }}>
|
||||
<p>Card content</p>
|
||||
</Card>,
|
||||
);
|
||||
|
||||
expect(container.querySelector('.ant-tabs')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-tabs-nav-add')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('correct pass tabList props', () => {
|
||||
const { container } = render(
|
||||
<Card
|
||||
|
Loading…
Reference in New Issue
Block a user