mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

Revert "feat: PageHeader support breadcrumbRender props (#28723)" (#28994)

Browse Source 
This reverts commit 2d476f7fb2.
This commit is contained in:
偏右 2021-01-23 12:45:13 +08:00 committed by GitHub
parent fb21552c8b
commit 914fe4c3f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 3 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,20 +50,6 @@ describe('PageHeader', () => {
expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
});
it('pageHeader breadcrumb support jsx', () => {
const wrapper = mount(<PageHeader title="Page Title" breadcrumb={<div id="test">test</div>} />);
expect(wrapper.find('#test')).toHaveLength(1);
expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
});
it('pageHeader support breadcrumbRender', () => {
const wrapper = mount(
<PageHeader title="Page Title" breadcrumbRender={() => <div id="test">test</div>} />,
);
expect(wrapper.find('#test')).toHaveLength(1);
expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
});
it('pageHeader do not has title', () => {
const routes = [
{

1
components/page-header/index.en-US.md
View File

@ -20,7 +20,6 @@ PageHeader can be used to highlight the page topic, display important informatio
| avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - | |
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | &lt;ArrowLeft /> | |
| breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - | |
| breadcrumbRender | Customize the content of the breadcrumb area | (props,dom)=>ReactNode | - | |
| extra | Operating area, at the end of the line of the title line | ReactNode | - | |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | |
| ghost | PageHeader type, will change background color | boolean | true | |

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

@ -16,8 +16,7 @@ export interface PageHeaderProps {
title?: React.ReactNode;
subTitle?: React.ReactNode;
style?: React.CSSProperties;
breadcrumb?: BreadcrumbProps | JSX.Element;
breadcrumbRender?: (props: PageHeaderProps, defaultDom: React.ReactNode) => React.ReactNode;
breadcrumb?: BreadcrumbProps;
tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];
footer?: React.ReactNode;
extra?: React.ReactNode;
@ -73,7 +72,7 @@ const renderTitle = (
const { title, avatar, subTitle, tags, extra, onBack } = props;
const headingPrefixCls = `${prefixCls}-heading`;
const hasHeading = title || subTitle || tags || extra;
// If there is nothing, return a null
// 如果 什么都没有，直接返回一个 null
if (!hasHeading) {
return null;
}
@ -135,7 +134,6 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
footer,
children,
breadcrumb,
breadcrumbRender,
className: customizeClassName,
} = props;
let ghost: undefined | boolean = true;
@ -148,23 +146,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
}
const prefixCls = getPrefixCls('page-header', customizePrefixCls);
const getDefaultBreadcrumbDom = () => {
if ((breadcrumb as BreadcrumbProps)?.routes) {
return renderBreadcrumb(breadcrumb as BreadcrumbProps);
}
if (React.isValidElement(breadcrumb)) {
return breadcrumb;
}
return null;
};
const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
// support breadcrumbRender function
const breadcrumbDom =
breadcrumbRender?.(props, defaultBreadcrumbDom) || defaultBreadcrumbDom;
const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;
const className = classNames(prefixCls, customizeClassName, {
'has-breadcrumb': breadcrumbDom,
'has-footer': footer,

1
components/page-header/index.zh-CN.md
View File

@ -20,7 +20,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
| avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - | |
| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | &lt;ArrowLeft /> | |
| breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - | |
| breadcrumbRender | 自定义面包屑区域的内容 | (props,dom)=>ReactNode | - | |
| extra | 操作区，位于 title 行的行尾 | ReactNode | - | |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | |
| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | |