test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Merge pull request #27485 from ant-design/pageHeader

Browse Source 
fix(pageHeader): if title is null,no render title view
This commit is contained in:
信鑫-King 2020-11-01 22:03:23 -08:00 committed by GitHub
commit 47c61cb776
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

25
components/page-header/index.tsx
View File

@ -69,11 +69,17 @@ const getBackIcon = (props: PageHeaderProps, direction: string = 'ltr') => {
const renderTitle = (prefixCls: string, props: PageHeaderProps, direction: string = 'ltr') => {
const { title, avatar, subTitle, tags, extra, onBack } = props;
const headingPrefixCls = `${prefixCls}-heading`;
if (title || subTitle || tags || extra) {
const backIcon = getBackIcon(props, direction);
const backIconDom = renderBack(prefixCls, backIcon, onBack);
return (
<div className={headingPrefixCls}>
const hasHeading = title || subTitle || tags || extra;
// 如果 什么都没有，直接返回一个 null
if (!hasHeading) {
return null;
}
const backIcon = getBackIcon(props, direction);
const backIconDom = renderBack(prefixCls, backIcon, onBack);
const hasTitle = backIconDom || avatar || hasHeading;
return (
<div className={headingPrefixCls}>
{hasTitle && (
<div className={`${headingPrefixCls}-left`}>
{backIconDom}
{avatar && <Avatar {...avatar} />}
@ -95,11 +101,10 @@ const renderTitle = (prefixCls: string, props: PageHeaderProps, direction: strin
)}
{tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
</div>
{extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
</div>
);
}
return null;
)}
{extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
</div>
);
};
const renderFooter = (prefixCls: string, footer: React.ReactNode) => {