From 916aa43d3e3905380e2016b96b0bf792c5d15b00 Mon Sep 17 00:00:00 2001
From: CodesOfRa <ramona.biscoveanu@gmail.com>
Date: Wed, 24 Oct 2018 22:12:07 +0100
Subject: [PATCH] fix for megamenu console warning & selection issue

---
 src/MegaMenu/MegaMenu.js | 213 ++++++++++++++++++++++-----------------
 1 file changed, 119 insertions(+), 94 deletions(-)

diff --git a/src/MegaMenu/MegaMenu.js b/src/MegaMenu/MegaMenu.js
index 8f98a4c13..1be99d4d3 100644
--- a/src/MegaMenu/MegaMenu.js
+++ b/src/MegaMenu/MegaMenu.js
@@ -1,110 +1,135 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { BrowserRouter, Link } from 'react-router-dom'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { BrowserRouter, Link } from "react-router-dom";
 
-
-export const MegaMenu = (props) => {
-    const { id, children } = props
-    return (
-        <nav className="fd-mega-menu" id={id}>
-            {children}
-        </nav>
-    );
-}
+export const MegaMenu = props => {
+  const { id, children } = props;
+  return (
+    <nav className="fd-mega-menu" id={id}>
+      {children}
+    </nav>
+  );
+};
 MegaMenu.propTypes = {
-    id: PropTypes.string
-}
+  id: PropTypes.string
+};
 
 export class MegaMenuList extends Component {
-    constructor(props) {
-        super(props)
-        this.handleSelect = this.handleSelect.bind(this)
-        this.handleSelectChild = this.handleSelectChild.bind(this)
-
-        let initialState = []
+  constructor(props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleSelectChild = this.handleSelectChild.bind(this);
 
-        props.links.map(link => {
-            if (link.hasChild) {
-                let id = link.id
-                let obj = {}
+    let initialState = [];
 
-                obj[id] = false
-                initialState.push(obj)
-            }
-        })
+    props.links.map(link => {
+      if (link.hasChild) {
+        let id = link.id;
+        let obj = {};
 
-        this.state = {
-            selectedItem: 'item_2',
-            itemStates: initialState
-        }
-    }
+        obj[id] = false;
+        initialState = obj;
+      }
+    });
 
-    handleSelectChild(e, id) {
-        this.setState({
-            selectedItem: id
-        })
-    }
+    this.state = {
+      selectedItem: "item_2",
+      itemStates: initialState
+    };
+  }
 
-    handleSelect(e, id) {
+  handleSelectChild(e, id) {
+    this.setState({
+      selectedItem: id
+    });
+  }
 
-        let iStates = Object.assign({}, this.state.itemStates)
-        iStates[id] = !iStates[id]
-        this.setState({ itemStates: iStates })
-        this.setState({ selectedItem: id })
-    }
+  handleSelect(e, id) {
+    const { itemStates } = this.state;
+    let iStates = itemStates;
+    iStates[id] = !iStates[id];
+    Object.keys(iStates).map((key, item) => {
+      if (key == id) {
+        iStates[key] = true;
+      } else {
+        iStates[key] = false;
+      }
+    });
+    this.setState({ itemStates: iStates });
+    this.setState({ selectedItem: id });
+  }
 
-    render() {
-        const { links } = this.props
-        return (
-            <BrowserRouter>
-                <ul className="fd-mega-menu__list">
-                    {
-                        links.map(link => {
-                            return (
-                                <li className="fd-mega-menu__item" key={link.id} >
-                                    <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)}>
-                                        {link.name}
-                                    </Link>
-                                    {
-                                        link.hasChild ? (
-                                            <ul className="fd-mega-menu__sublist" id={link.id} aria-hidden={!this.state.itemStates[link.id]} aria-expanded={this.state.itemStates[link.id]}>
-                                                {
-                                                    link.child.map(ch => {
-                                                        return (
-                                                            <li class="fd-mega-menu__subitem">
-                                                                <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)}>
-                                                                    {ch.name}
-                                                                </Link>
-                                                            </li>
-                                                        )
-                                                    })
-                                                }
-                                            </ul>
-                                        ) : null
-                                    }
-                                </li>
-                            )
-                        })
-                    }
-                </ul>
-            </BrowserRouter>
-        );
-    }
-}
-MegaMenuList.propTypes = {
-    links: PropTypes.array.isRequired
-}
-
-export const MegaMenuGroup = (props) => {
-    const { title, children } = props
+  render() {
+    const { links } = this.props;
     return (
-        <div className="fd-mega-menu__group">
-            <h1 className="fd-mega-menu__title">{title}</h1>
-            {children}
-        </div>
+      <BrowserRouter>
+        <ul className="fd-mega-menu__list">
+          {links.map(link => {
+            return (
+              <li className="fd-mega-menu__item" key={link.id}>
+                <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)}
+                >
+                  {link.name}
+                </Link>
+                {link.hasChild ? (
+                  <ul
+                    className="fd-mega-menu__sublist"
+                    id={link.id}
+                    aria-hidden={!this.state.itemStates[link.id]}
+                    aria-expanded={this.state.itemStates[link.id]}
+                  >
+                    {link.child.map(ch => {
+                      return (
+                        <li className="fd-mega-menu__subitem" key={ch.id}>
+                          <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)}
+                          >
+                            {ch.name}
+                          </Link>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      </BrowserRouter>
     );
+  }
 }
+MegaMenuList.propTypes = {
+  links: PropTypes.array.isRequired
+};
+
+export const MegaMenuGroup = props => {
+  const { title, children } = props;
+  return (
+    <div className="fd-mega-menu__group">
+      <h1 className="fd-mega-menu__title">{title}</h1>
+      {children}
+    </div>
+  );
+};
 
 MegaMenuGroup.propTypes = {
-    title: PropTypes.string
-}
\ No newline at end of file
+  title: PropTypes.string
+};