fix(components，website): 重构Breadcrumb组件

affects: @gio-design/components, website
growingio · Aug 19, 2020 · df27b8f · df27b8f
1 parent 6467661
commit df27b8f
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 31 deletions.
diff --git a/packages/components/src/components/breadcrumb/Breadcrumb.tsx b/packages/components/src/components/breadcrumb/Breadcrumb.tsx
@@ -2,19 +2,22 @@ import React from 'react';
 import classNames from 'classnames';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
+import { ConfigContext } from '../config-provider';
 
 export interface Route {
   path: string;
   breadcrumbName: string;
+  children?: Omit<Route, 'children'>[];
 }
 
 export interface BreadcrumbProps {
+  prefixCls?: string;
   routes?: Route[];
   params?: any;
-  separator?: string;
+  style?: React.CSSProperties;
+  separator?: React.ReactNode;
   className?: string;
   itemRender?: (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode;
-  children?: React.ReactNode;
 }
 
 function getBreadcrumbName(route: Route, params: any) {
@@ -36,7 +39,7 @@ function isLastItem(route: Route, routes: Route[]) {
 /* eslint-disable-next-line */
 function defaultItemRender(route: Route, params: any, routes: Route[], paths: string[]) {
   const name = getBreadcrumbName(route, params);
-  return isLastItem(route, routes) ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
+  return isLastItem(route, routes) ? <span>{name}</span> : <a href={`/${paths.join('/')}`}>{name}</a>;
 }
 
 const getPath = (path: string, params: any) => {
@@ -52,9 +55,21 @@ interface BreadcrumbInterface extends React.FC<BreadcrumbProps> {
   Separator: typeof BreadcrumbSeparator;
 }
 
-const Breadcrumb: BreadcrumbInterface = (props: BreadcrumbProps) => {
-  const { routes, separator = '/', itemRender = defaultItemRender, params = {}, children } = props;
+const Breadcrumb: BreadcrumbInterface = ({
+  prefixCls: customizePrefixCls,
+  separator = '/',
+  style,
+  className,
+  routes,
+  children,
+  itemRender = defaultItemRender,
+  params = {},
+  ...restProps
+}) => {
+  const { getPrefixCls } = React.useContext(ConfigContext);
+
   let crumbs;
+  const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
   if (routes && routes.length > 0) {
     const paths: string[] = [];
     crumbs = routes.map((route: Route) => {
@@ -63,22 +78,20 @@ const Breadcrumb: BreadcrumbInterface = (props: BreadcrumbProps) => {
       if (path) {
         paths.push(path);
       }
-
       return (
-        <BreadcrumbItem
-          separator={separator}
-          key={path || route.breadcrumbName}
-          {...route}
-          isLastItem={isLastItem(route, routes)}
-        >
+        <BreadcrumbItem separator={separator} key={path || route.breadcrumbName}>
           {itemRender(route, params, routes, paths)}
         </BreadcrumbItem>
       );
     });
   } else if (children) {
     crumbs = children;
   }
-  return <div className={classNames(props.className, 'gio-breadcrumb')}>{crumbs}</div>;
+  return (
+    <div className={classNames(className, prefixCls)} style={style} {...restProps}>
+      {crumbs}
+    </div>
+  );
 };
 
 Breadcrumb.Item = BreadcrumbItem;

diff --git a/packages/components/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/components/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -3,7 +3,7 @@ import BreadcrumbSeparator from './BreadcrumbSeparator';
 import classnames from 'classnames';
 
 export interface BreadcrumbItemProps {
-  separator?: string;
+  separator?: React.ReactNode;
   href?: string;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   children?: React.ReactNode;
@@ -12,15 +12,16 @@ export interface BreadcrumbItemProps {
 
 const BreadcrumbItem: React.FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) => {
   const { href, children, separator, isLastItem } = props;
+  /* eslint-disable prettier/prettier */
   const link = href ? (
     <a className="gio-breadcrumb-item-link-target" {...props}>
       {children}
     </a>
   ) : (
-    <span className="gio-breadcrumb-item-link-target" {...props}>
-      {children}
-    </span>
-  );
+      <span className="gio-breadcrumb-item-link-target" {...props}>
+        {children}
+      </span>
+    );
 
   if (children) {
     return (

diff --git a/packages/components/src/components/breadcrumb/BreadcrumbSeparator.tsx b/packages/components/src/components/breadcrumb/BreadcrumbSeparator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export interface BreadcrumbSeparatorProps {
-  separator?: string;
+  separator?: React.ReactNode;
 }
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = (props: BreadcrumbSeparatorProps) => {

diff --git a/packages/components/src/components/breadcrumb/style/index.less b/packages/components/src/components/breadcrumb/style/index.less
@@ -30,4 +30,7 @@
     padding: 0 8px;
     text-align: center;
   }
+  & > span:last-child &-separator {
+    display: none;
+  }
 }
diff --git a/packages/website/src/components/basic/breadcrumb/demo/basic.tsx b/packages/website/src/components/basic/breadcrumb/demo/basic.tsx
@@ -1,25 +1,35 @@
 import * as React from 'react';
-import { Breadcrumb } from '@gio-design/components';
+import Breadcrumb from '@gio-design/components/es/components/breadcrumb';
 import '@gio-design/components/es/components/breadcrumb/style/css.js';
 
 export default () => {
   const routes = [
     {
-      path: 'index',
+      path: 'components',
       breadcrumbName: '首页',
-      onClick: () => {
-        alert('首页');
-      },
     },
     {
+      path: 'basic',
       breadcrumbName: '一级面包屑',
-      onClick: () => {
-        alert('一级面包屑');
-      },
     },
     {
+      path: 'breadcrumb',
       breadcrumbName: '二级面包屑',
     },
   ];
-  return <Breadcrumb routes={routes} />;
+  return (
+    <div>
+      <Breadcrumb routes={routes} />
+      <Breadcrumb>
+        <Breadcrumb.Item>首页</Breadcrumb.Item>
+        <Breadcrumb.Item>
+          <a href="/components/basic/breadcrumb">一级面包屑</a>
+        </Breadcrumb.Item>
+        <Breadcrumb.Item>
+          <a href="breadcrumb">二级面包屑</a>
+        </Breadcrumb.Item>
+        <Breadcrumb.Item>三级面包屑</Breadcrumb.Item>
+      </Breadcrumb>
+    </div>
+  );
 };
diff --git a/packages/website/src/components/basic/breadcrumb/index.zh-CN.md b/packages/website/src/components/basic/breadcrumb/index.zh-CN.md
@@ -20,17 +20,16 @@ group:
 | ---------- | ---------------------------------------- | ------------------------------------------- | ------ |
 | routes     | router 的路由栈信息                      | routes[]                                    | -      |
 | params     | 路由的参数                               | object                                      | -      |
-| separator  | 分隔符自定义                             | string                                      | '/'    |
+| separator  | 分隔符自定义                             | string \| ReactNode                          | /    |
 | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | -      |
 
 ### Breadcrumb.Item
 
 | 参数       | 说明                | 类型                 | 默认值 |
 | ---------- | ------------------- | -------------------- | ------ |
-| separator  | 分隔符自定义        | string               | '/'    |
+| separator  | 分隔符自定义        | string \| ReactNode    | /    |
 | onClick    | 单击事件            | (e:MouseEvent)=>void | -      |
 | href       | 链接的目的地        | string               | -      |
-| isLastItem | 是否为最后一个 item | boolean              | false  |
 
 ##### Option