diff --git a/package.json b/package.json index be450b75354c20c922c895eab8e29bcf62c1f791..5ae7c96602c71b5073357296b0f0f17cfeea1919 100755 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "lodash-decorators": "^6.0.0", "lodash.isequal": "^4.5.0", "moment": "^2.22.2", + "memoize-one": "^3.1.1", "numeral": "^2.0.6", "omit.js": "^1.0.0", "path-to-regexp": "^2.1.0", diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js index 433ea2eb8fb7ff3830640f251483125256304c2b..10adc2667b9cd0e27b19ba5bb43a31727308f845 100644 --- a/src/components/ActiveChart/index.js +++ b/src/components/ActiveChart/index.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; - import { MiniArea } from '../Charts'; import NumberInfo from '../NumberInfo'; @@ -34,18 +33,18 @@ export default class ActiveChart extends Component { } loopData = () => { - this.timer = setTimeout(() => { - this.setState( - { - activeData: getActiveData(), - }, - () => { - requestAnimationFrame(() => { + requestAnimationFrame(() => { + this.timer = setTimeout(() => { + this.setState( + { + activeData: getActiveData(), + }, + () => { this.loopData(); - }); - } - ); - }, 1000); + } + ); + }, 1000); + }); }; render() { diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js index 7ba31c45b434f5fc6ab1a4e3056b80261538b903..1c7daa3f50480377383bcae8fbc390bed2f6a445 100644 --- a/src/components/PageHeader/index.js +++ b/src/components/PageHeader/index.js @@ -1,12 +1,14 @@ import React, { PureComponent, createElement } from 'react'; import pathToRegexp from 'path-to-regexp'; import { Breadcrumb, Tabs, Card } from 'antd'; +import memoizeOne from 'memoize-one'; +import deepEqual from 'lodash.isequal'; import classNames from 'classnames'; import styles from './index.less'; import { urlToList } from '../_utils/pathTools'; const { TabPane } = Tabs; -export function getBreadcrumb(breadcrumbNameMap, url) { +export const getBreadcrumb = (breadcrumbNameMap, url) => { let breadcrumb = breadcrumbNameMap[url]; if (!breadcrumb) { Object.keys(breadcrumbNameMap).forEach(item => { @@ -16,8 +18,14 @@ export function getBreadcrumb(breadcrumbNameMap, url) { }); } return breadcrumb || {}; -} +}; + export default class PageHeader extends PureComponent { + constructor(props) { + super(props); + this.conversionFromLocation = memoizeOne(this.conversionFromLocation, deepEqual); + } + state = { breadcrumb: null, }; @@ -59,12 +67,11 @@ export default class PageHeader extends PureComponent { // Generated according to props conversionFromProps = () => { - const { breadcrumbList, breadcrumbSeparator, linkElement = 'a' } = this.props; - + const { breadcrumbList, breadcrumbSeparator, itemRender, linkElement = 'a' } = this.props; return ( {breadcrumbList.map(item => { - const title = this.props.itemRender ? this.props.itemRender(item) : item.title; + const title = itemRender ? itemRender(item) : item.title; return ( {item.href @@ -84,17 +91,14 @@ export default class PageHeader extends PureComponent { }; conversionFromLocation = (routerLocation, breadcrumbNameMap) => { - const { breadcrumbSeparator, linkElement = 'a' } = this.props; + const { breadcrumbSeparator, home, itemRender, linkElement = 'a' } = this.props; // Convert the url to an array const pathSnippets = urlToList(routerLocation.pathname); // Loop data mosaic routing const extraBreadcrumbItems = pathSnippets.map((url, index) => { - console.log(url); const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url); const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component; - const name = this.props.itemRender - ? this.props.itemRender(currentBreadcrumb) - : currentBreadcrumb.name; + const name = itemRender ? itemRender(currentBreadcrumb) : currentBreadcrumb.name; return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? ( {createElement( @@ -113,7 +117,7 @@ export default class PageHeader extends PureComponent { { [linkElement === 'a' ? 'href' : 'to']: '/', }, - this.props.home || 'Home' + home || 'Home' )} ); diff --git a/src/pages/layouts/BasicLayout.js b/src/pages/layouts/BasicLayout.js index 537192e39e136bc21411eda6e551917f7814247d..8fcb2efc0bc8f61896044aad081a5faa5f67aee6 100644 --- a/src/pages/layouts/BasicLayout.js +++ b/src/pages/layouts/BasicLayout.js @@ -3,6 +3,8 @@ import React from 'react'; import { Layout } from 'antd'; import DocumentTitle from 'react-document-title'; +import { injectIntl } from 'react-intl'; +import memoizeOne from 'memoize-one'; import { connect } from 'dva'; // import { Route, Redirect, Switch } from 'dva/router'; import { ContainerQuery } from 'react-container-query'; @@ -26,7 +28,7 @@ const { AuthorizedRoute, check } = Authorized; * @param {Object} menuData 菜单配置 * @param {Object} routerData 路由配置 */ -const getBreadcrumbNameMap = (meun, router) => { +const getBreadcrumbNameMap = memoizeOne((meun, router) => { const routerMap = {}; const mergeMeunAndRouter = meunData => { meunData.forEach(meunItem => { @@ -38,7 +40,7 @@ const getBreadcrumbNameMap = (meun, router) => { }; mergeMeunAndRouter(meun); return routerMap; -}; +}); const query = { 'screen-xs': { @@ -66,31 +68,38 @@ const query = { }; class BasicLayout extends React.PureComponent { + constructor(props) { + super(props); + const { routerData, menuData } = this.props; + this.breadcrumbNameMap = getBreadcrumbNameMap(menuData, routerData); + } + getContext() { - const { location, routerData, menuData } = this.props; - console.log(getBreadcrumbNameMap(menuData, routerData)); + const { location } = this.props; return { location, - breadcrumbNameMap: getBreadcrumbNameMap(menuData, routerData), + breadcrumbNameMap: this.breadcrumbNameMap, }; } - getPageTitle() { - const { routerData, location } = this.props; - const { pathname } = location; - let title = 'Ant Design Pro'; + getPageTitle = pathname => { let currRouterData = null; + const { intl } = this.props; // match params path - Object.keys(routerData).forEach(key => { + Object.keys(this.breadcrumbNameMap).forEach(key => { if (pathToRegexp(key).test(pathname)) { - currRouterData = routerData[key]; + currRouterData = this.breadcrumbNameMap[key]; } }); - if (currRouterData && currRouterData.name) { - title = `${currRouterData.name} - Ant Design Pro`; + if (!currRouterData) { + return 'Ant Design Pro'; } - return title; - } + const message = intl.formatMessage({ + id: currRouterData.locale || currRouterData.name, + defaultMessage: currRouterData.name, + }); + return `${message} - Ant Design Pro`; + }; getLayoutStyle = () => { const { fixSiderbar, collapsed, layout } = this.props; @@ -148,7 +157,7 @@ class BasicLayout extends React.PureComponent { silderTheme, layout: PropsLayout, children, - // match, + location: { pathname }, } = this.props; const isTop = PropsLayout === 'topmenu'; // const bashRedirect = this.getBashRedirect(); @@ -190,9 +199,9 @@ class BasicLayout extends React.PureComponent { ); - + const getPageTitle = memoizeOne(this.getPageTitle); return ( - + {params => ( @@ -212,4 +221,4 @@ export default connect(({ global, setting }) => ({ collapsed: global.collapsed, layout: setting.layout, ...setting, -}))(BasicLayout); +}))(injectIntl(BasicLayout));