From 7d8eeade053278dd19df95c3f5189d842727dea2 Mon Sep 17 00:00:00 2001 From: srgooglo Date: Tue, 20 Oct 2020 16:31:06 +0200 Subject: [PATCH] changed Sider render method --- src/components/Layout/Sider/default/index.js | 2 + src/components/Layout/Sider/index.js | 66 +++++++++++++++----- src/components/Layout/Sider/mobile/index.js | 3 +- 3 files changed, 54 insertions(+), 17 deletions(-) diff --git a/src/components/Layout/Sider/default/index.js b/src/components/Layout/Sider/default/index.js index 057bd3ca..c35292b2 100644 --- a/src/components/Layout/Sider/default/index.js +++ b/src/components/Layout/Sider/default/index.js @@ -4,10 +4,12 @@ import * as Icons from 'components/Icons' import styles from './index.less' import classnames from 'classnames' import { connect } from 'umi' +import { __legacy__objectToArray, queryObjectToString} from 'core' @connect(({ app }) => ({ app })) export default class Sider_Default extends React.Component { state = { + type: "desktop", loading: true, menus: null } diff --git a/src/components/Layout/Sider/index.js b/src/components/Layout/Sider/index.js index c346a5dc..ee426df9 100755 --- a/src/components/Layout/Sider/index.js +++ b/src/components/Layout/Sider/index.js @@ -1,21 +1,33 @@ import React from 'react' import { app_config } from 'config' import { router } from 'core/libs' - +import { __legacy__objectToArray } from 'core' import Sider_Mobile from './mobile' import Sider_Default from './default' import { connect } from 'umi' import MenuList from 'globals/sidebar_menu.js' +import { FloatComponent } from 'components' @connect(({ app, extended }) => ({ app, extended })) -class Sider extends React.PureComponent { +class Sider extends React.Component { state = { loading: true, + menuAtrributes: [], menus: [] } handleClickMenu = e => { - router.go(`/${e.key}`) + const elementAtrributes = this.state.menuAtrributes[e.key] + + if (typeof(this.state.menuAtrributes[e.key]) !== "undefined") { + + if (typeof(elementAtrributes.onClick) == "function") { + elementAtrributes.onClick() + } + + } + + router.go(`/${e.key}`) // by default push to router } async menuQuery(data){ @@ -24,23 +36,20 @@ class Sider extends React.PureComponent { const filterArray = (data) =>{ return new Promise(resolve => { - let menuMap = { - desktop: [], - mobile: [] - } + let menuMap = [] + let menuAtrributes = [] data.forEach(async (element) => { if(!element.attributes){ element.attributes = {} } let validRequire = typeof(element.attributes.require) !== 'undefined'? await window.requireQuery(element.attributes.require) : true - let onDekstopMode = typeof(element.attributes.desktop) !== 'undefined'? element.attributes.desktop : true - let onMobileMode = typeof(element.attributes.mobile) !== 'undefined'? element.attributes.mobile : true - + if (validRequire) { - onDekstopMode? menuMap.desktop.push(element) : null - onMobileMode? menuMap.mobile.push(element) : null + menuAtrributes[element.id] = element.attributes + menuMap.push(element) } }) + this.setState({menuAtrributes}) resolve(menuMap) }) } @@ -57,13 +66,40 @@ class Sider extends React.PureComponent { this.menuQuery(MenuList) } + filterMenusByType(type) { + let arrayResults = [] + this.state.menus.forEach((e) => { + if (typeof (e.attributes) !== "undefined") { + const isType = typeof (e.attributes[type]) !== "undefined" ? e.attributes[type] : true // Returns as valid by default if is not set + if (isType) { + arrayResults.push(e) + } + } + }) + return arrayResults + } + + renderByType(type){ + const sider_props = { handleClickMenu: this.handleClickMenu, logo: app_config.LogoPath } + const filteredMenus = this.filterMenusByType(type) + switch (type) { + case "desktop":{ + return + } + case "mobile":{ + return + } + default:{ + return null // include invalid default + } + } + } + render() { const { isMobile } = this.props - const sider_props = { handleClickMenu: this.handleClickMenu, logo: app_config.LogoPath } - if(this.state.loading) return null - return isMobile? : + return this.renderByType(isMobile? "mobile" : "desktop") } } diff --git a/src/components/Layout/Sider/mobile/index.js b/src/components/Layout/Sider/mobile/index.js index f1009e5b..7cf5f3ba 100644 --- a/src/components/Layout/Sider/mobile/index.js +++ b/src/components/Layout/Sider/mobile/index.js @@ -1,9 +1,8 @@ import React from 'react' import * as antd from 'antd' -import * as Icons from 'components/Icons' import styles from './index.less' -export default class Sider_Mobile extends React.PureComponent { +export default class Sider_Mobile extends React.Component { renderMenus(data){ return data.map(e => {