Browse Source

fix(pageHeader): if title is null,no render title view

pull/27485/head
chenshuai2144 4 years ago
parent
commit
ef5e6603c2
  1. 12
      components/page-header/__tests__/index.test.js
  2. 49
      components/page-header/index.tsx

12
components/page-header/__tests__/index.test.js

@ -50,6 +50,18 @@ describe('PageHeader', () => {
expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
});
it('pageHeader do not has title', () => {
const routes = [
{
path: 'index',
breadcrumbName: 'First-level Menu',
},
];
const wrapper = mount(<PageHeader breadcrumb={{ routes }}>test</PageHeader>);
expect(wrapper.find('.ant-page-header-heading-lef').exists()).toBeFalsy();
expect(wrapper.find('.ant-page-header-heading').exists()).toBeFalsy();
});
it('pageHeader should no contain back', () => {
const wrapper = mount(<PageHeader title="Page Title" backIcon={false} />);
expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);

49
components/page-header/index.tsx

@ -72,31 +72,36 @@ const renderTitle = (prefixCls: string, props: PageHeaderProps, direction: strin
if (title || subTitle || tags || extra) {
const backIcon = getBackIcon(props, direction);
const backIconDom = renderBack(prefixCls, backIcon, onBack);
const hasTitle = backIconDom || avatar || title || subTitle || tags || extra;
return (
<div className={headingPrefixCls}>
<div className={`${headingPrefixCls}-left`}>
{backIconDom}
{avatar && <Avatar {...avatar} />}
{title && (
<span
className={`${headingPrefixCls}-title`}
title={typeof title === 'string' ? title : undefined}
>
{title}
</span>
)}
{subTitle && (
<span
className={`${headingPrefixCls}-sub-title`}
title={typeof subTitle === 'string' ? subTitle : undefined}
>
{subTitle}
</span>
hasTitle && (
<div className={headingPrefixCls}>
{hasTitle && (
<div className={`${headingPrefixCls}-left`}>
{backIconDom}
{avatar && <Avatar {...avatar} />}
{title && (
<span
className={`${headingPrefixCls}-title`}
title={typeof title === 'string' ? title : undefined}
>
{title}
</span>
)}
{subTitle && (
<span
className={`${headingPrefixCls}-sub-title`}
title={typeof subTitle === 'string' ? subTitle : undefined}
>
{subTitle}
</span>
)}
{tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
</div>
)}
{tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
{extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
</div>
{extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
</div>
)
);
}
return null;

Loading…
Cancel
Save