feat: Breadcrumb support DropDown

components/breadcrumb/Breadcrumb.tsx

@@ -3,12 +3,15 @@ import * as PropTypes from 'prop-types';
 import { cloneElement } from 'react';
 import classNames from 'classnames';
 import BreadcrumbItem from './BreadcrumbItem';
+import Menu from '../menu';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
+import { Omit } from '../_util/type';
 
 export interface Route {
   path: string;
   breadcrumbName: string;
+  children: Omit<Route, 'children'>[];
 }
 
 export interface BreadcrumbProps {
@@ -69,7 +72,44 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         'see: https://u.ant.design/item-render.',
     );
   }
+  genForRoutes = ({
+    routes = [],
+    params = {},
+    separator,
+    itemRender = defaultItemRender,
+  }: BreadcrumbProps) => {
+    const paths: string[] = [];
+    return routes.map(route => {
+      route.path = route.path || '';
+      let path = route.path.replace(/^\//, '');
+      Object.keys(params).forEach(key => {
+        path = path.replace(`:${key}`, params[key]);
+      });
+
+      if (path) {
+        paths.push(path);
+      }
+      // generated overlay by route.children
+      let overlay = null;
+      if (route.children && route.children.length) {
+        overlay = (
+          <Menu>
+            {route.children.map(child => (
+              <Menu.Item key={child.breadcrumbName || child.path}>
+                {itemRender(child, params, routes, paths)}
+              </Menu.Item>
+            ))}
+          </Menu>
+        );
+      }
 
+      return (
+        <BreadcrumbItem overlay={overlay} separator={separator} key={route.breadcrumbName || path}>
+          {itemRender(route, params, routes, paths)}
+        </BreadcrumbItem>
+      );
+    });
+  };
   renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => {
     let crumbs;
     const {
@@ -78,28 +118,12 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
       style,
       className,
       routes,
-      params = {},
       children,
-      itemRender = defaultItemRender,
     } = this.props;
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
     if (routes && routes.length > 0) {
-      const paths: string[] = [];
-      crumbs = routes.map(route => {
-        route.path = route.path || '';
-        let path: string = route.path.replace(/^\//, '');
-        Object.keys(params).forEach(key => {
-          path = path.replace(`:${key}`, params[key]);
-        });
-        if (path) {
-          paths.push(path);
-        }
-        return (
-          <BreadcrumbItem separator={separator} key={route.breadcrumbName || path}>
-            {itemRender(route, params, routes, paths)}
-          </BreadcrumbItem>
-        );
-      });
+      // generated by route
+      crumbs = this.genForRoutes(this.props);
     } else if (children) {
       crumbs = React.Children.map(children, (element: any, index) => {
         if (!element) {

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import DropDown, { DropDownProps } from '../dropdown/dropdown';
+import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface BreadcrumbItemProps {
   prefixCls?: string;
   separator?: React.ReactNode;
   href?: string;
+  overlay?: DropDownProps['overlay'];
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
 }
 
@@ -23,7 +26,13 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
   };
 
   renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props;
+    const {
+      prefixCls: customizePrefixCls,
+      separator,
+      children,
+      overlay,
+      ...restProps
+    } = this.props;
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
     let link;
     if ('href' in this.props) {
@@ -39,6 +48,9 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
         </span>
       );
     }
+
+    // wrap to dropDown
+    link = this.renderBreadcrumbNode(link, prefixCls);
     if (children) {
       return (
         <span>
@@ -50,6 +62,24 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
     return null;
   };
 
+  /**
+   * if overlay is have
+   * Wrap a DropDown
+   */
+  renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
+    const { overlay } = this.props;
+    if (overlay) {
+      return (
+        <DropDown overlay={overlay} placement="bottomCenter">
+          <a className={`${prefixCls}-overlay-link`}>
+            {breadcrumbItem}
+            <Icon type="down" />
+          </a>
+        </DropDown>
+      );
+    }
+    return breadcrumbItem;
+  };
   render() {
     return <ConfigConsumer>{this.renderBreadcrumbItem}</ConfigConsumer>;
   }

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -51,4 +51,37 @@ describe('Breadcrumb', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should render a menu', () => {
+    const routes = [
+      {
+        path: 'index',
+        breadcrumbName: 'home',
+      },
+      {
+        path: 'first',
+        breadcrumbName: 'first',
+        children: [
+          {
+            path: '/general',
+            breadcrumbName: 'General',
+          },
+          {
+            path: '/layout',
+            breadcrumbName: 'Layout',
+          },
+          {
+            path: '/navigation',
+            breadcrumbName: 'Navigation',
+          },
+        ],
+      },
+      {
+        path: 'second',
+        breadcrumbName: 'second',
+      },
+    ];
+    const wrapper = render(<Breadcrumb routes={routes} />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });

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

@@ -49,3 +49,78 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
   </span>
 </div>
 `;
+
+exports[`Breadcrumb should render a menu 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      <a
+        href="#/index"
+      >
+        home
+      </a>
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <a
+      class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+    >
+      <span
+        class="ant-breadcrumb-link"
+      />
+    </a>
+    <a
+      href="#/index/first"
+    >
+      first
+    </a>
+  </span>
+  <i
+    aria-label="icon: down"
+    class="anticon anticon-down"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="down"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+      />
+    </svg>
+  </i>
+  <span
+    class="ant-breadcrumb-separator"
+  >
+    /
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      <span>
+        second
+      </span>
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;

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

@@ -63,6 +63,93 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
+<div>
+  <div
+    class="ant-breadcrumb"
+  >
+    <span>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Ant Design
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+    <span>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        <a
+          href=""
+        >
+          Component
+        </a>
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+    <span>
+      <a
+        class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+      >
+        <span
+          class="ant-breadcrumb-link"
+        />
+      </a>
+      <a
+        href=""
+      >
+        General
+      </a>
+    </span>
+    <i
+      aria-label="icon: down"
+      class="anticon anticon-down"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </i>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+    <span>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Button
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/breadcrumb/demo/router.md correctly 1`] = `
 <div
   class="demo"

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

@@ -80,6 +80,7 @@ exports[`react router react router 3 1`] = `
   >
     <BreadcrumbItem
       key="Home"
+      overlay={null}
       separator="/"
     >
       <span>
@@ -101,6 +102,7 @@ exports[`react router react router 3 1`] = `
     </BreadcrumbItem>
     <BreadcrumbItem
       key="Application List"
+      overlay={null}
       separator="/"
     >
       <span>
@@ -122,6 +124,7 @@ exports[`react router react router 3 1`] = `
     </BreadcrumbItem>
     <BreadcrumbItem
       key="Application:id"
+      overlay={null}
       separator="/"
     >
       <span>
@@ -143,6 +146,7 @@ exports[`react router react router 3 1`] = `
     </BreadcrumbItem>
     <BreadcrumbItem
       key="Detail"
+      overlay={null}
       separator="/"
     >
       <span>