Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Breadcrumb support breadcrumbRender #28999

Merged
merged 2 commits into from
Jan 24, 2021
Merged

feat: Breadcrumb support breadcrumbRender #28999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98ff8a2
feat: Breadcrumb support breadcrumbRender
chenshuai2144 Jan 23, 2021
99a12a8
add version info
chenshuai2144 Jan 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions components/page-header/__tests__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,14 @@ describe('PageHeader', () => {
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 = [
{
Expand Down
1 change: 1 addition & 0 deletions components/page-header/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ 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, originBreadcrumb)=> ReactNode` | - | 4.11.0 |
| 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 | |
Expand Down
19 changes: 17 additions & 2 deletions components/page-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface PageHeaderProps {
subTitle?: React.ReactNode;
style?: React.CSSProperties;
breadcrumb?: BreadcrumbProps;
breadcrumbRender?: (props: PageHeaderProps, defaultDom: React.ReactNode) => React.ReactNode;
tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];
footer?: React.ReactNode;
extra?: React.ReactNode;
Expand Down Expand Up @@ -72,7 +73,7 @@ const renderTitle = (
const { title, avatar, subTitle, tags, extra, onBack } = props;
const headingPrefixCls = `${prefixCls}-heading`;
const hasHeading = title || subTitle || tags || extra;
// 如果 什么都没有，直接返回一个 null
// If there is nothing, return a null
if (!hasHeading) {
return null;
}
Expand Down Expand Up @@ -134,6 +135,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
footer,
children,
breadcrumb,
breadcrumbRender,
className: customizeClassName,
} = props;
let ghost: undefined | boolean = true;
Expand All @@ -146,7 +148,20 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
}

const prefixCls = getPrefixCls('page-header', customizePrefixCls);
const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;

const getDefaultBreadcrumbDom = () => {
if ((breadcrumb as BreadcrumbProps)?.routes) {
return renderBreadcrumb(breadcrumb as BreadcrumbProps);
}
return null;
};

const defaultBreadcrumbDom = getDefaultBreadcrumbDom();

// support breadcrumbRender function
const breadcrumbDom =
breadcrumbRender?.(props, defaultBreadcrumbDom) || defaultBreadcrumbDom;

const className = classNames(prefixCls, customizeClassName, {
'has-breadcrumb': breadcrumbDom,
'has-footer': footer,
Expand Down
1 change: 1 addition & 0 deletions components/page-header/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ 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, originBreadcrumb) => ReactNode` | - | 4.11.0 |
| extra | 操作区，位于 title 行的行尾 | ReactNode | - | |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | |
| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | |
Expand Down