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:
daisy 2023-07-07 17:29:01 +08:00 committed by GitHub
parent e36d50f379
commit 266e60aa95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 13 deletions

View File

@ -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}>

View File

@ -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