mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Merge pull request #17873 from long-zhuge/feature

Browse Source 
feat: add Breadcrumb.Separator
This commit is contained in:
偏右 2019-08-02 22:48:58 +08:00 committed by GitHub
commit 36db887bec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 127 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/breadcrumb/Breadcrumb.tsx
View File

@ -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';
@ -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: '/',
@ -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,

4
components/breadcrumb/BreadcrumbItem.tsx
View File

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

17
components/breadcrumb/BreadcrumbSeparator.tsx Normal file
View File

@ -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
components/breadcrumb/__tests__/Breadcrumb.test.js
View File

@ -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>
@ -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",
);
});

145
components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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"
@ -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"

31
components/breadcrumb/demo/separator-indepent.md Normal file
View File

@ -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
components/breadcrumb/index.tsx
View File

@ -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
components/breadcrumb/index.zh-CN.md
View File

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