Skip to content

Commit 27656a1

Browse files
droshevdroshev
authored
Merge pull request #24 from SAP/fix/megamenu
fix for megamenu console warnings & selection issue
2 parents db59f48 + 916aa43 commit 27656a1

File tree

1 file changed

+119
-94
lines changed

1 file changed

+119
-94
lines changed

‎src/MegaMenu/MegaMenu.js‎

Lines changed: 119 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,135 @@
1-
import React, { Component } from 'react'
2-
import PropTypes from 'prop-types'
3-
import { BrowserRouter, Link } from 'react-router-dom'
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import { BrowserRouter, Link } from "react-router-dom";
44

5-
6-
export const MegaMenu = (props) => {
7-
const { id, children } = props
8-
return (
9-
<nav className="fd-mega-menu" id={id}>
10-
{children}
11-
</nav>
12-
);
13-
}
5+
export const MegaMenu = props => {
6+
const { id, children } = props;
7+
return (
8+
<nav className="fd-mega-menu" id={id}>
9+
{children}
10+
</nav>
11+
);
12+
};
1413
MegaMenu.propTypes = {
15-
id: PropTypes.string
16-
}
14+
id: PropTypes.string
15+
};
1716

1817
export class MegaMenuList extends Component {
19-
constructor(props) {
20-
super(props)
21-
this.handleSelect = this.handleSelect.bind(this)
22-
this.handleSelectChild = this.handleSelectChild.bind(this)
23-
24-
let initialState = []
18+
constructor(props) {
19+
super(props);
20+
this.handleSelect = this.handleSelect.bind(this);
21+
this.handleSelectChild = this.handleSelectChild.bind(this);
2522

26-
props.links.map(link => {
27-
if (link.hasChild) {
28-
let id = link.id
29-
let obj = {}
23+
let initialState = [];
3024

31-
obj[id] = false
32-
initialState.push(obj)
33-
}
34-
})
25+
props.links.map(link => {
26+
if (link.hasChild) {
27+
let id = link.id;
28+
let obj = {};
3529

36-
this.state = {
37-
selectedItem: 'item_2',
38-
itemStates: initialState
39-
}
40-
}
30+
obj[id] = false;
31+
initialState = obj;
32+
}
33+
});
4134

42-
handleSelectChild(e, id) {
43-
this.setState({
44-
selectedItem: id
45-
})
46-
}
35+
this.state = {
36+
selectedItem: "item_2",
37+
itemStates: initialState
38+
};
39+
}
4740

48-
handleSelect(e, id) {
41+
handleSelectChild(e, id) {
42+
this.setState({
43+
selectedItem: id
44+
});
45+
}
4946

50-
let iStates = Object.assign({}, this.state.itemStates)
51-
iStates[id] = !iStates[id]
52-
this.setState({ itemStates: iStates })
53-
this.setState({ selectedItem: id })
54-
}
47+
handleSelect(e, id) {
48+
const { itemStates } = this.state;
49+
let iStates = itemStates;
50+
iStates[id] = !iStates[id];
51+
Object.keys(iStates).map((key, item) => {
52+
if (key == id) {
53+
iStates[key] = true;
54+
} else {
55+
iStates[key] = false;
56+
}
57+
});
58+
this.setState({ itemStates: iStates });
59+
this.setState({ selectedItem: id });
60+
}
5561

56-
render() {
57-
const { links } = this.props
58-
return (
59-
<BrowserRouter>
60-
<ul className="fd-mega-menu__list">
61-
{
62-
links.map(link => {
63-
return (
64-
<li className="fd-mega-menu__item" key={link.id} >
65-
<Link className={`fd-mega-menu__link${(this.state.selectedItem === link.id) ? ' is-selected' : ''}${link.hasChild ? ' has-child' : ''}${(this.state.itemStates[link.id] && link.hasChild) ? ' is-expanded' : ''}`} to={{ pathname: link.url }} key={link.id} onClick={(e) => this.handleSelect(e, link.id)}>
66-
{link.name}
67-
</Link>
68-
{
69-
link.hasChild ? (
70-
<ul className="fd-mega-menu__sublist" id={link.id} aria-hidden={!this.state.itemStates[link.id]} aria-expanded={this.state.itemStates[link.id]}>
71-
{
72-
link.child.map(ch => {
73-
return (
74-
<li class="fd-mega-menu__subitem">
75-
<Link className={`fd-mega-menu__sublink${(this.state.selectedItem === ch.id) ? ' is-selected' : ''}`} to={{ pathname: ch.url }} key={ch.id} onClick={(e) => this.handleSelectChild(e, ch.id)}>
76-
{ch.name}
77-
</Link>
78-
</li>
79-
)
80-
})
81-
}
82-
</ul>
83-
) : null
84-
}
85-
</li>
86-
)
87-
})
88-
}
89-
</ul>
90-
</BrowserRouter>
91-
);
92-
}
93-
}
94-
MegaMenuList.propTypes = {
95-
links: PropTypes.array.isRequired
96-
}
97-
98-
export const MegaMenuGroup = (props) => {
99-
const { title, children } = props
62+
render() {
63+
const { links } = this.props;
10064
return (
101-
<div className="fd-mega-menu__group">
102-
<h1 className="fd-mega-menu__title">{title}</h1>
103-
{children}
104-
</div>
65+
<BrowserRouter>
66+
<ul className="fd-mega-menu__list">
67+
{links.map(link => {
68+
return (
69+
<li className="fd-mega-menu__item" key={link.id}>
70+
<Link
71+
className={`fd-mega-menu__link${
72+
this.state.selectedItem === link.id ? " is-selected" : ""
73+
}${link.hasChild ? " has-child" : ""}${
74+
this.state.itemStates[link.id] && link.hasChild
75+
? " is-expanded"
76+
: ""
77+
}`}
78+
to={{ pathname: link.url }}
79+
key={link.id}
80+
onClick={e => this.handleSelect(e, link.id)}
81+
>
82+
{link.name}
83+
</Link>
84+
{link.hasChild ? (
85+
<ul
86+
className="fd-mega-menu__sublist"
87+
id={link.id}
88+
aria-hidden={!this.state.itemStates[link.id]}
89+
aria-expanded={this.state.itemStates[link.id]}
90+
>
91+
{link.child.map(ch => {
92+
return (
93+
<li className="fd-mega-menu__subitem" key={ch.id}>
94+
<Link
95+
className={`fd-mega-menu__sublink${
96+
this.state.selectedItem === ch.id
97+
? " is-selected"
98+
: ""
99+
}`}
100+
to={{ pathname: ch.url }}
101+
key={ch.id}
102+
onClick={e => this.handleSelectChild(e, ch.id)}
103+
>
104+
{ch.name}
105+
</Link>
106+
</li>
107+
);
108+
})}
109+
</ul>
110+
) : null}
111+
</li>
112+
);
113+
})}
114+
</ul>
115+
</BrowserRouter>
105116
);
117+
}
106118
}
119+
MegaMenuList.propTypes = {
120+
links: PropTypes.array.isRequired
121+
};
122+
123+
export const MegaMenuGroup = props => {
124+
const { title, children } = props;
125+
return (
126+
<div className="fd-mega-menu__group">
127+
<h1 className="fd-mega-menu__title">{title}</h1>
128+
{children}
129+
</div>
130+
);
131+
};
107132

108133
MegaMenuGroup.propTypes = {
109-
title: PropTypes.string
110-
}
134+
title: PropTypes.string
135+
};

0 commit comments

Comments
 (0)