From ad33da5949850216a6e0b3851c38c5d2e2fb2848 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Thu, 22 Nov 2018 08:26:32 +0800 Subject: [PATCH] refactor: remove duplicate codes (#2939) * refactor: remove duplicate getFlatMenuKeys * refactor: remove duplicate onOpenChange * remove unused method --- src/components/SiderMenu/BaseMenu.js | 23 +++----------- src/components/SiderMenu/SiderMenu.js | 29 ------------------ src/components/SiderMenu/SiderMenu.test.js | 35 +--------------------- src/components/SiderMenu/index.js | 4 +-- 4 files changed, 7 insertions(+), 84 deletions(-) diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js index 427469bd..4629c292 100644 --- a/src/components/SiderMenu/BaseMenu.js +++ b/src/components/SiderMenu/BaseMenu.js @@ -35,23 +35,6 @@ export default class BaseMenu extends PureComponent { constructor(props) { super(props); this.getSelectedMenuKeys = memoizeOne(this.getSelectedMenuKeys, isEqual); - this.flatMenuKeys = this.getFlatMenuKeys(props.menuData); - } - - /** - * Recursively flatten the data - * [{path:string},{path:string}] => {path,path2} - * @param menus - */ - getFlatMenuKeys(menus) { - let keys = []; - menus.forEach(item => { - if (item.children) { - keys = keys.concat(this.getFlatMenuKeys(item.children)); - } - keys.push(item.path); - }); - return keys; } /** @@ -73,8 +56,10 @@ export default class BaseMenu extends PureComponent { }; // Get the currently selected menu - getSelectedMenuKeys = pathname => - urlToList(pathname).map(itemPath => getMenuMatches(this.flatMenuKeys, itemPath).pop()); + getSelectedMenuKeys = pathname => { + const { flatMenuKeys } = this.props; + return urlToList(pathname).map(itemPath => getMenuMatches(flatMenuKeys, itemPath).pop()); + }; /** * get SubMenu or Item diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js index e457f2f5..fcce20d2 100644 --- a/src/components/SiderMenu/SiderMenu.js +++ b/src/components/SiderMenu/SiderMenu.js @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react'; import { Layout } from 'antd'; -import pathToRegexp from 'path-to-regexp'; import classNames from 'classnames'; import Link from 'umi/link'; import styles from './index.less'; @@ -23,36 +22,9 @@ const getDefaultCollapsedSubMenus = props => { .filter(item => item); }; -/** - * Recursively flatten the data - * [{path:string},{path:string}] => {path,path2} - * @param menu - */ -export const getFlatMenuKeys = menu => - menu.reduce((keys, item) => { - keys.push(item.path); - if (item.children) { - return keys.concat(getFlatMenuKeys(item.children)); - } - return keys; - }, []); - -/** - * Find all matched menu keys based on paths - * @param flatMenuKeys: [/abc, /abc/:id, /abc/:id/info] - * @param paths: [/abc, /abc/11, /abc/11/info] - */ -export const getMenuMatchKeys = (flatMenuKeys, paths) => - paths.reduce( - (matchKeys, path) => - matchKeys.concat(flatMenuKeys.filter(item => pathToRegexp(item).test(path))), - [] - ); - export default class SiderMenu extends PureComponent { constructor(props) { super(props); - this.flatMenuKeys = getFlatMenuKeys(props.menuData); this.state = { openKeys: getDefaultCollapsedSubMenus(props), }; @@ -117,7 +89,6 @@ export default class SiderMenu extends PureComponent { {...this.props} mode="inline" handleOpenChange={this.handleOpenChange} - onOpenChange={this.handleOpenChange} style={{ padding: '16px 0', width: '100%' }} {...defaultProps} /> diff --git a/src/components/SiderMenu/SiderMenu.test.js b/src/components/SiderMenu/SiderMenu.test.js index 8f01f669..33a7c805 100644 --- a/src/components/SiderMenu/SiderMenu.test.js +++ b/src/components/SiderMenu/SiderMenu.test.js @@ -1,5 +1,4 @@ -import { urlToList } from '../_utils/pathTools'; -import { getFlatMenuKeys, getMenuMatchKeys } from './SiderMenu'; +import { getFlatMenuKeys } from './index'; const menu = [ { @@ -38,35 +37,3 @@ describe('test convert nested menu to flat menu', () => { ]); }); }); - -describe('test menu match', () => { - it('simple path', () => { - expect(getMenuMatchKeys(flatMenuKeys, urlToList('/dashboard'))).toEqual(['/dashboard']); - }); - - it('error path', () => { - expect(getMenuMatchKeys(flatMenuKeys, urlToList('/dashboardname'))).toEqual([]); - }); - - it('Secondary path', () => { - expect(getMenuMatchKeys(flatMenuKeys, urlToList('/dashboard/name'))).toEqual([ - '/dashboard', - '/dashboard/name', - ]); - }); - - it('Parameter path', () => { - expect(getMenuMatchKeys(flatMenuKeys, urlToList('/userinfo/2144'))).toEqual([ - '/userinfo', - '/userinfo/:id', - ]); - }); - - it('three parameter path', () => { - expect(getMenuMatchKeys(flatMenuKeys, urlToList('/userinfo/2144/info'))).toEqual([ - '/userinfo', - '/userinfo/:id', - '/userinfo/:id/info', - ]); - }); -}); diff --git a/src/components/SiderMenu/index.js b/src/components/SiderMenu/index.js index bc803db4..cc911eb1 100644 --- a/src/components/SiderMenu/index.js +++ b/src/components/SiderMenu/index.js @@ -7,13 +7,13 @@ import SiderMenu from './SiderMenu'; * [{path:string},{path:string}] => {path,path2} * @param menus */ -const getFlatMenuKeys = menuData => { +export const getFlatMenuKeys = menuData => { let keys = []; menuData.forEach(item => { + keys.push(item.path); if (item.children) { keys = keys.concat(getFlatMenuKeys(item.children)); } - keys.push(item.path); }); return keys; }; -- GitLab