remove unnecessary ‘a’ tags

Author: vkbansal

README.md

@@ -21,7 +21,7 @@ npm install --save react-contextmenu
 
 You need to setup two things:
 1. The `ContextMenu`
-2. The `ContextMenuTrigger` 
+2. The `ContextMenuTrigger`
 
 ```jsx
 import React from "react";
@@ -73,9 +73,8 @@ The styling can be apllied to using following classes.
 - `react-contextmenu` : applied to menu root element.
 - `react-contextmenu--visible` : applied to menu root element when visible.
 - `react-contextmenu-item` : applied to menu items.
-- `react-contextmenu-link` : applied to menu links inside items.
-- `react-contextmenu-link--disabled` : applied to links (title in submenu) when they are disabled.
-- `react-contextmenu-link--active` : applied to title in submenu when submenu is open.
+- `react-contextmenu-item--active` : applied to menu items and title in submenu when submenu is open.
+- `react-contextmenu-item--disabled` : applied to menu items and title in submenu when they are disabled.
 - `react-contextmenu-wrapper` : applied to wrapper around elements in `ContextMenuTrigger`.
 - `react-contextmenu-submenu` : applied to items that are submenus.
 

examples/react-contextmenu.css

@@ -19,32 +19,35 @@
     pointer-events: auto;
 }
 
-.react-contextmenu-link {
-    display: inline-block;
-    width: 100%;
+.react-contextmenu-item {
+    width: 200px;
     padding: 3px 20px;
-    clear: both;
     font-weight: 400;
     line-height: 1.5;
     color: #373a3c;
     text-align: inherit;
     white-space: nowrap;
     background: 0 0;
     border: 0;
+	cursor: pointer;
 }
 
-.react-contextmenu-link.active,
-.react-contextmenu-link:hover {
+.react-contextmenu-item.react-contextmenu-item--active,
+.react-contextmenu-item:hover {
     color: #fff;
     background-color: #0275d8;
     border-color: #0275d8;
     text-decoration: none;
 }
-.react-contextmenu-item.submenu > a {
-    padding-right: 27px;
+
+.react-contextmenu-item.react-contextmenu-submenu {
+	padding: 0;
+}
+
+.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item {
 }
 
-.react-contextmenu-item.submenu > a:after {
+.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item:after {
     content: "▶";
     display: inline-block;
     position: absolute;

src/MenuItem.js

@@ -39,17 +39,14 @@ export default class MenuItem extends Component {
 
     render() {
         const { disabled, children, attributes } = this.props;
-        const menuItemClassNames = cx(cssClasses.menuItem, attributes && attributes.className);
-
-        const linkClasses = cx(cssClasses.menuLink, {
-            [cssClasses.menuLinkDisabled]: disabled
+        const menuItemClassNames = cx(cssClasses.menuItem, attributes && attributes.className, {
+            [cssClasses.menuItemDisabled]: disabled
         });
 
         return (
-            <div {...attributes} className={menuItemClassNames} onTouchEnd={this.handleClick} onClick={this.handleClick}>
-                <a href='#' className={linkClasses}>
-                    {children}
-                </a>
+            <div {...attributes} className={menuItemClassNames}
+                onTouchEnd={this.handleClick} onClick={this.handleClick}>
+                {children}
             </div>
         );
     }

src/SubMenu.js

@@ -134,7 +134,7 @@ export default class SubMenu extends Component {
     render() {
         const { children, disabled, title } = this.props;
         const { visible } = this.state;
-        const menuItemProps = {
+        const menuProps = {
             ref: this.menuRef,
             onMouseEnter: this.handleMouseEnter,
             onMouseLeave: this.handleMouseLeave,
@@ -143,11 +143,10 @@ export default class SubMenu extends Component {
                 position: 'relative'
             }
         };
-        const menuLinkProps = {
-            href: '#',
-            className: cx(cssClasses.menuLink, {
-                [cssClasses.menuLinkDisabled]: disabled,
-                [cssClasses.menuLinkActive]: visible
+        const menuItemProps = {
+            className: cx(cssClasses.menuItem, {
+                [cssClasses.menuItemDisabled]: disabled,
+                [cssClasses.menuItemActive]: visible
             }),
             onClick: this.handleClick
         };
@@ -162,10 +161,10 @@ export default class SubMenu extends Component {
         };
 
         return (
-            <nav {...menuItemProps}>
-                <a {...menuLinkProps}>
+            <nav {...menuProps}>
+                <div {...menuItemProps}>
                     {title}
-                </a>
+                </div>
                 <nav {...subMenuProps}>
                     {children}
                 </nav>

src/helpers.js

@@ -15,9 +15,8 @@ export const cssClasses = {
     menuVisible: 'react-contextmenu--visible',
     menuWrapper: 'react-contextmenu-wrapper',
     menuItem: 'react-contextmenu-item',
-    menuLink: 'react-contextmenu-link',
-    menuLinkActive: 'react-contextmenu-link--active',
-    menuLinkDisabled: 'react-contextmenu-link--disabled',
+    menuItemActive: 'react-contextmenu-item--active',
+    menuItemDisabled: 'react-contextmenu-item--disabled',
     subMenu: 'react-contextmenu-submenu'
 };