Merge pull request #17873 from long-zhuge/feature

feat: add Breadcrumb.Separator

components/breadcrumb/Breadcrumb.tsx

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

components/breadcrumb/BreadcrumbItem.tsx

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

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>;
+  }
+}

components/breadcrumb/__tests__/Breadcrumb.test.js

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

components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap

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

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,
+);
+```

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;

components/breadcrumb/index.zh-CN.md

@@ -26,12 +26,19 @@ title: Breadcrumb
 
 ### Breadcrumb.Item
 
-| 参数      | 参数           | 类型                                   | 默认值 | 版本   |
+| 参数    | 参数           | 类型                                   | 默认值 | 版本   |
-| --------- | -------------- | -------------------------------------- | ------ | ------ |
+| ------- | -------------- | -------------------------------------- | ------ | ------ |
-| href      | 链接的目的地   | string                                 | -      | 3.17.0 |
+| href    | 链接的目的地   | string                                 | -      | 3.17.0 |
-| separator | 自定义的分隔符 | string\|ReactNode                      | '/'    | 3.17.0 |
+| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      | 3.17.0 |
-| overlay   | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      | 3.17.0 |
+| onClick | 单击事件       | (e:MouseEvent)=>void                   | -      | 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