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.

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: add Breadcrumb.Separator #17873

Merged
merged 4 commits into from Aug 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 7 additions & 2 deletions components/breadcrumb/Breadcrumb.tsx
Expand Up @@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
import { cloneElement } from 'react';
import classNames from 'classnames';
import BreadcrumbItem from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';
import Menu from '../menu';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
Expand Down Expand Up @@ -49,6 +50,7 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st

export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
static Item: typeof BreadcrumbItem;
static Separator: typeof BreadcrumbSeparator;

static defaultProps = {
separator: '/',
Expand Down Expand Up @@ -141,11 +143,14 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
if (!element) {
return element;
}

warning(
element.type && element.type.__ANT_BREADCRUMB_ITEM,
element.type &&
(element.type.__ANT_BREADCRUMB_ITEM || element.type.__ANT_BREADCRUMB_SEPARATOR),
'Breadcrumb',
"Only accepts Breadcrumb.Item as it's children",
"Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
);

return cloneElement(element, {
separator,
key: index,
Expand Down
4 changes: 3 additions & 1 deletion components/breadcrumb/BreadcrumbItem.tsx
Expand Up @@ -55,7 +55,9 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
return (
<span>
{link}
<span className={`${prefixCls}-separator`}>{separator}</span>
{separator && separator !== '' && (
<span className={`${prefixCls}-separator`}>{separator}</span>
)}
</span>
);
}
Expand Down
17 changes: 17 additions & 0 deletions components/breadcrumb/BreadcrumbSeparator.tsx
@@ -0,0 +1,17 @@
import * as React from 'react';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

export default class BreadcrumbSeparator extends React.Component<any> {
static __ANT_BREADCRUMB_SEPARATOR = true;

renderSeparator = ({ getPrefixCls }: ConfigConsumerProps) => {
const { children } = this.props;
const prefixCls = getPrefixCls('breadcrumb');

return <span className={`${prefixCls}-separator`}>{children || '/'}</span>;
};

render() {
return <ConfigConsumer>{this.renderSeparator}</ConfigConsumer>;
}
}
4 changes: 2 additions & 2 deletions components/breadcrumb/__tests__/Breadcrumb.test.js
Expand Up @@ -14,7 +14,7 @@ describe('Breadcrumb', () => {
});

// https://github.com/airbnb/enzyme/issues/875
it('warns on non-Breadcrumb.Item children', () => {
it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
const MyCom = () => <div>foo</div>;
mount(
<Breadcrumb>
Expand All @@ -23,7 +23,7 @@ describe('Breadcrumb', () => {
);
expect(errorSpy.mock.calls).toHaveLength(1);
expect(errorSpy.mock.calls[0][0]).toMatch(
"Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item as it's children",
"Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
);
});

Expand Down
145 changes: 52 additions & 93 deletions components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -149,99 +149,6 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
</div>
`;

exports[`renders ./components/breadcrumb/demo/router.md correctly 1`] = `
<div
class="demo"
>
<div
class="demo-nav"
>
<a
href="#/"
>
Home
</a>
<a
href="#/apps"
>
Application List
</a>
</div>
Home Page
<div
class="ant-alert ant-alert-info ant-alert-no-icon"
data-show="true"
style="margin:16px 0;"
>
<span
class="ant-alert-message"
>
Click the navigation above to switch:
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Home
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
</div>
`;

exports[`renders ./components/breadcrumb/demo/router-4.md correctly 1`] = `
<div
class="demo"
>
<div
class="demo-nav"
>
<a
href="#/"
>
Home
</a>
<a
href="#/apps"
>
Application List
</a>
</div>
Home Page
<div
class="ant-alert ant-alert-info ant-alert-no-icon"
data-show="true"
style="margin:16px 0;"
>
<span
class="ant-alert-message"
>
Click the navigation above to switch:
</span>
<span
class="ant-alert-description"
/>
</div>
<div
class="ant-breadcrumb"
/>
</div>
`;

exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
<div
class="ant-breadcrumb"
Expand Down Expand Up @@ -299,6 +206,58 @@ exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
</div>
`;

exports[`renders ./components/breadcrumb/demo/separator-indepent.md correctly 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
:
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
</span>
</div>
`;

exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
<div
class="ant-breadcrumb"
Expand Down
31 changes: 31 additions & 0 deletions components/breadcrumb/demo/separator-indepent.md
@@ -0,0 +1,31 @@
---
order: 6
title:
zh-CN: 分隔符
en-US: Configuring the Separator
---

## zh-CN

使用 `Breadcrumb.Separator` 可以自定义分隔符。

## en-US

The separator can be customized by setting the separator property: `Breadcrumb.Separator`

```jsx
import { Breadcrumb } from 'antd';

ReactDOM.render(
<Breadcrumb separator="">
<Breadcrumb.Item>Location</Breadcrumb.Item>
<Breadcrumb.Separator>:</Breadcrumb.Separator>
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>,
mountNode,
);
```
2 changes: 2 additions & 0 deletions components/breadcrumb/index.tsx
@@ -1,8 +1,10 @@
import Breadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';

export { BreadcrumbProps } from './Breadcrumb';
export { BreadcrumbItemProps } from './BreadcrumbItem';

Breadcrumb.Item = BreadcrumbItem;
Breadcrumb.Separator = BreadcrumbSeparator;
export default Breadcrumb;
19 changes: 13 additions & 6 deletions components/breadcrumb/index.zh-CN.md
Expand Up @@ -26,12 +26,19 @@ title: Breadcrumb

### Breadcrumb.Item

| 参数 | 参数 | 类型 | 默认值 | 版本 |
| --------- | -------------- | -------------------------------------- | ------ | ------ |
| href | 链接的目的地 | string | - | 3.17.0 |
| separator | 自定义的分隔符 | string\|ReactNode | '/' | 3.17.0 |
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | 3.17.0 |
| onClick | 单击事件 | (e:MouseEvent)=>void | - | 3.17.0 |
| 参数 | 参数 | 类型 | 默认值 | 版本 |
| ------- | -------------- | -------------------------------------- | ------ | ------ |
| href | 链接的目的地 | string | - | 3.17.0 |
| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | 3.17.0 |
| onClick | 单击事件 | (e:MouseEvent)=>void | - | 3.17.0 |

### Breadcrumb.Separator `3.21.0`

| 参数 | 参数 | 类型 | 默认值 | 版本 |
| -------- | -------------- | ----------------- | ------ | ------ |
| children | 要显示的分隔符 | string\|ReactNode | '/' | 3.21.0 |

> 注意:在使用 `Breadcrumb.Separator` 时,其父组件的分隔符必须设置为 `separator=""`,否则会出现父组件默认的分隔符。

### routes
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文档里要加一下 Breadcrumb.Separator 的说明。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

说明的表格中的“版本”字段该如何填写?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3.21.0 好了,赶上车这个月底就发了。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


Expand Down