陈帅 il y a 6 ans
Parent
commit
5748748074

+ 0 - 135
src/components/PageHeaderWrapper/Breadcrumb.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import pathToRegexp from 'path-to-regexp';
-import Link from 'umi/link';
-import { FormattedMessage } from 'umi-plugin-react/locale';
-import { urlToList } from '../_utils/pathTools';
-import { PageHeaderWrapperProps } from '.';
-import { MenuDataItem } from '../SiderMenu';
-import { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/lib/breadcrumb';
-
-type BreadcrumbProps = PageHeaderWrapperProps;
-
-// 渲染Breadcrumb 子节点
-// Render the Breadcrumb child node
-const itemRender: AntdBreadcrumbProps['itemRender'] = (route, params, routes, paths) => {
-  const last = routes.indexOf(route) === routes.length - 1;
-  return last || !route.component ? (
-    <span>{route.breadcrumbName}</span>
-  ) : (
-    <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
-  );
-};
-
-const renderItemLocal = (item: MenuDataItem): React.ReactNode => {
-  if (item.locale) {
-    return <FormattedMessage id={item.locale} defaultMessage={item.name} />;
-  }
-  return item.name;
-};
-
-export const getBreadcrumb = (
-  breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
-  url: string,
-): MenuDataItem => {
-  if (!breadcrumbNameMap) {
-    return {
-      path: '',
-    };
-  }
-  let breadcrumb = breadcrumbNameMap[url];
-  if (!breadcrumb) {
-    Object.keys(breadcrumbNameMap).forEach(item => {
-      if (pathToRegexp(item).test(url)) {
-        breadcrumb = breadcrumbNameMap[item];
-      }
-    });
-  }
-  return breadcrumb || { path: '' };
-};
-
-export const getBreadcrumbProps = (props: BreadcrumbProps): PageHeaderWrapperProps => {
-  const { location, breadcrumbNameMap } = props;
-  return {
-    location,
-    breadcrumbNameMap,
-  };
-};
-
-// Generated according to props
-const conversionFromProps = (props: BreadcrumbProps): AntdBreadcrumbProps['routes'] => {
-  const { breadcrumbList = [] } = props;
-  return breadcrumbList
-    .map(item => {
-      const { title, href } = item;
-      return {
-        path: href,
-        breadcrumbName: title,
-      };
-    })
-    .filter(item => item.path);
-};
-
-const conversionFromLocation = (
-  routerLocation: PageHeaderWrapperProps['location'],
-  breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
-  props: BreadcrumbProps,
-): AntdBreadcrumbProps['routes'] => {
-  if (!routerLocation) {
-    return [];
-  }
-  const { home } = props;
-  // Convert the url to an array
-  const pathSnippets = urlToList(routerLocation.pathname);
-  // Loop data mosaic routing
-  const extraBreadcrumbItems: AntdBreadcrumbProps['routes'] = pathSnippets
-    .map(url => {
-      const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
-      if (currentBreadcrumb.inherited) {
-        return { path: '', breadcrumbName: '' };
-      }
-      const name = renderItemLocal(currentBreadcrumb);
-      const { hideInBreadcrumb } = currentBreadcrumb;
-      return name && !hideInBreadcrumb
-        ? {
-            path: url,
-            breadcrumbName: name,
-          }
-        : { path: '', breadcrumbName: '' };
-    })
-    .filter(item => item && item.path);
-  // Add home breadcrumbs to your head if defined
-  if (home) {
-    extraBreadcrumbItems.unshift({
-      path: '/',
-      breadcrumbName: home,
-    });
-  }
-  return extraBreadcrumbItems;
-};
-
-/**
- * 将参数转化为面包屑
- * Convert parameters into breadcrumbs
- */
-export const conversionBreadcrumbList = (props: BreadcrumbProps): AntdBreadcrumbProps => {
-  const { breadcrumbList } = props;
-  const { location, breadcrumbNameMap } = getBreadcrumbProps(props);
-  if (breadcrumbList && breadcrumbList.length) {
-    return {
-      routes: conversionFromProps(props),
-      itemRender,
-    };
-  }
-
-  // 根据 location 生成 面包屑
-  // Generate breadcrumbs based on location
-  if (location && location.pathname) {
-    return {
-      routes: conversionFromLocation(location, breadcrumbNameMap, props),
-      itemRender,
-    };
-  }
-  return {
-    routes: [],
-  };
-};

+ 0 - 135
src/components/PageHeaderWrapper/breadcrumb.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import pathToRegexp from 'path-to-regexp';
-import Link from 'umi/link';
-import { FormattedMessage } from 'umi-plugin-react/locale';
-import { urlToList } from '../_utils/pathTools';
-import { PageHeaderWrapperProps } from '.';
-import { MenuDataItem } from '../SiderMenu';
-import { BreadcrumbProps as AntdBreadcrumbProps } from 'antd/lib/breadcrumb';
-
-type BreadcrumbProps = PageHeaderWrapperProps;
-
-// 渲染Breadcrumb 子节点
-// Render the Breadcrumb child node
-const itemRender: AntdBreadcrumbProps['itemRender'] = (route, params, routes, paths) => {
-  const last = routes.indexOf(route) === routes.length - 1;
-  return last || !route.component ? (
-    <span>{route.breadcrumbName}</span>
-  ) : (
-    <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
-  );
-};
-
-const renderItemLocal = (item: MenuDataItem): React.ReactNode => {
-  if (item.locale) {
-    return <FormattedMessage id={item.locale} defaultMessage={item.name} />;
-  }
-  return item.name;
-};
-
-export const getBreadcrumb = (
-  breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
-  url: string,
-): MenuDataItem => {
-  if (!breadcrumbNameMap) {
-    return {
-      path: '',
-    };
-  }
-  let breadcrumb = breadcrumbNameMap[url];
-  if (!breadcrumb) {
-    Object.keys(breadcrumbNameMap).forEach(item => {
-      if (pathToRegexp(item).test(url)) {
-        breadcrumb = breadcrumbNameMap[item];
-      }
-    });
-  }
-  return breadcrumb || { path: '' };
-};
-
-export const getBreadcrumbProps = (props: BreadcrumbProps): PageHeaderWrapperProps => {
-  const { location, breadcrumbNameMap } = props;
-  return {
-    location,
-    breadcrumbNameMap,
-  };
-};
-
-// Generated according to props
-const conversionFromProps = (props: BreadcrumbProps): AntdBreadcrumbProps['routes'] => {
-  const { breadcrumbList = [] } = props;
-  return breadcrumbList
-    .map(item => {
-      const { title, href } = item;
-      return {
-        path: href,
-        breadcrumbName: title,
-      };
-    })
-    .filter(item => item.path);
-};
-
-const conversionFromLocation = (
-  routerLocation: PageHeaderWrapperProps['location'],
-  breadcrumbNameMap: PageHeaderWrapperProps['breadcrumbNameMap'],
-  props: BreadcrumbProps,
-): AntdBreadcrumbProps['routes'] => {
-  if (!routerLocation) {
-    return [];
-  }
-  const { home } = props;
-  // Convert the url to an array
-  const pathSnippets = urlToList(routerLocation.pathname);
-  // Loop data mosaic routing
-  const extraBreadcrumbItems: AntdBreadcrumbProps['routes'] = pathSnippets
-    .map(url => {
-      const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
-      if (currentBreadcrumb.inherited) {
-        return { path: '', breadcrumbName: '' };
-      }
-      const name = renderItemLocal(currentBreadcrumb);
-      const { hideInBreadcrumb } = currentBreadcrumb;
-      return name && !hideInBreadcrumb
-        ? {
-            path: url,
-            breadcrumbName: name,
-          }
-        : { path: '', breadcrumbName: '' };
-    })
-    .filter(item => item && item.path);
-  // Add home breadcrumbs to your head if defined
-  if (home) {
-    extraBreadcrumbItems.unshift({
-      path: '/',
-      breadcrumbName: home,
-    });
-  }
-  return extraBreadcrumbItems;
-};
-
-/**
- * 将参数转化为面包屑
- * Convert parameters into breadcrumbs
- */
-export const conversionBreadcrumbList = (props: BreadcrumbProps): AntdBreadcrumbProps => {
-  const { breadcrumbList } = props;
-  const { location, breadcrumbNameMap } = getBreadcrumbProps(props);
-  if (breadcrumbList && breadcrumbList.length) {
-    return {
-      routes: conversionFromProps(props),
-      itemRender,
-    };
-  }
-
-  // 根据 location 生成 面包屑
-  // Generate breadcrumbs based on location
-  if (location && location.pathname) {
-    return {
-      routes: conversionFromLocation(location, breadcrumbNameMap, props),
-      itemRender,
-    };
-  }
-  return {
-    routes: [],
-  };
-};

+ 7 - 5
src/components/PageHeaderWrapper/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'umi-plugin-react/locale';
+import { formatMessage } from 'umi-plugin-react/locale';
 import { PageHeader, Tabs, Typography } from 'antd';
 import { connect } from 'dva';
 import classNames from 'classnames';
@@ -46,13 +46,13 @@ export interface PageHeaderWrapperProps {
   action?: React.ReactNode | string;
   content?: React.ReactNode;
   extraContent?: React.ReactNode;
-  breadcrumbList?: Array<{ title: string | number; href: string }>;
+  breadcrumbList?: Array<{ title: string; href: string }>;
   tabList?: Array<{ key: string; tab: React.ReactNode }>;
   tabActiveKey?: string;
   onTabChange?: (key: string) => void;
   tabBarExtraContent?: React.ReactNode;
   style?: React.CSSProperties;
-  home?: React.ReactNode;
+  home?: string;
   wide?: boolean;
   contentWidth?: ContentWidth;
   className?: string;
@@ -84,7 +84,10 @@ class PageHeaderWrapper extends React.Component<PageHeaderWrapperProps> {
     let pageTitle = title;
     const breadcrumb = conversionBreadcrumbList({
       ...restProps,
-      home: <FormattedMessage id="menu.home" defaultMessage="Home" />,
+      home: formatMessage({
+        id: 'menu.home',
+        defaultMessage: 'Home',
+      }),
     });
     if (!title && breadcrumb.routes) {
       const router = breadcrumb.routes[breadcrumb.routes.length - 1];
@@ -128,7 +131,6 @@ class PageHeaderWrapper extends React.Component<PageHeaderWrapperProps> {
     const { children } = this.mergePropsAndChildren();
     return (
       <div style={{ margin: '-24px -24px 0' }} className={classNames(classNames, styles.main)}>
-        {this.renderPageHeader()}
         {children ? (
           <div className={styles['children-content']}>
             <GridContent>{children}</GridContent>