refactor attributes code

Author: Vivek Kumar Bansal

CHANGELOG.md

@@ -9,6 +9,9 @@ All the changes can be found below. Order used:
 - Fixed
 - Security
 
+## v1.5.0
+- Added `attributes` prop to `MenuItem` and `ContextMenuLayer` for further customization.
+
 ## v1.4.0
 
 ### Added

README.md

@@ -168,6 +168,12 @@ Default: `false`
 
 By default, the context menu is closed as soon as an item is clicked. Set this prop to control this behavior.
 
+**props.attributes**
+
+Type: `Object` optional
+
+The attributes will be passed directly passed to the root element of `MenuItem`. Use this to customize it like adding custom classes, etc.
+
 ### SubMenu(props)
 
 Type: React Component
@@ -247,6 +253,12 @@ Type: React Element (optional)
 
 The element inside which the Component must be wrapped. By default `div` is used. But this prop can used to customize it.
 
+**attributes**
+
+Type: `Object` optional
+
+The attributes will be passed directly passed to the root element of component. Use this to customize it like adding custom classes, adding `colspan` etc.
+
 ```js
 // following examples shows usage of `tr` instead of `div`
 

examples/custom-wrappers/constants.js renamed to examples/customization/constants.js

@@ -24,7 +24,8 @@ const Container = React.createClass({
             <table className="table table-bordered">
                 <tbody>
                 {targets.map((item, i) => (
-                    <Target renderTag="tr" name={item.name} key={i}/>
+                    <Target renderTag="tr" name={item.name} key={i}
+                        attributes={{className: "my-custom-row-class"}}/>
                 ))}
                 </tbody>
             </table>

examples/custom-wrappers/container.js renamed to examples/customization/container.js

@@ -4,8 +4,8 @@ import React from "react";
 import Container from "./container";
 import Menu from "./menu";
 
-const CustomWrappers = React.createClass({
-    displayName: "CustomWrappers",
+const Customization = React.createClass({
+    displayName: "Customization",
     getInitialState() {
         return { logs: [] };
     },
@@ -18,7 +18,7 @@ const CustomWrappers = React.createClass({
         return (
             <div>
                 <h3>Custom Wrappers</h3>
-                <p>This demo shows usage of custom wrappers. Instead of using <code>div</code>s by default, we are using <code>tr</code>s</p>
+                <p>This demo shows usage of customization. Instead of using <code>div</code>s by default, we are using <code>tr</code>s</p>
                 <Container/>
                 <div>
                 {this.state.logs.map((log, i) => (<p key={i}>{log}</p>))}
@@ -29,4 +29,4 @@ const CustomWrappers = React.createClass({
     }
 });
 
-export default CustomWrappers;
+export default Customization;

examples/custom-wrappers/index.js renamed to examples/customization/index.js

@@ -15,10 +15,20 @@ const Menu = React.createClass({
     render() {
         let { name } = this.props.item;
 
+        const attributes = {
+            className: "my-custom-menu-item-class"
+        };
+
         return (
             <ContextMenu identifier={MenuTypes.multi}>
-                <MenuItem onClick={this.handleClick} data={{item: "item 1"}}>Menu Item 1</MenuItem>
-                <MenuItem onClick={this.handleClick} data={{item: "item 2"}}>Menu Item 2</MenuItem>
+                <MenuItem onClick={this.handleClick} attributes={attributes}
+                    data={{item: "item 1"}}>
+                    Menu Item 1
+                </MenuItem>
+                <MenuItem onClick={this.handleClick} attributes={attributes}
+                    data={{item: "item 2"}}>
+                    Menu Item 2
+                </MenuItem>
                 <MenuItem onClick={this.handleEat}>Eat {name}</MenuItem>
             </ContextMenu>
         );

examples/custom-wrappers/menu.js renamed to examples/customization/menu.js

@@ -7,7 +7,7 @@ import SimpleMenu from "./simple-menu";
 import MultipleTargets from "./multiple-targets";
 import MultipleMenus from "./multiple-menus";
 import SubMenus from "./submenus";
-import CustomWrappers from "./custom-wrappers";
+import Customization from "./customization";
 
 const App = React.createClass({
     displayName: "App",
@@ -32,7 +32,7 @@ const App = React.createClass({
                             <Link to="/submenus">Sub Menus</Link>
                         </li>
                         <li>
-                            <Link to="/custom-wrappers">Custom Wrappers</Link>
+                            <Link to="/customization">Customization</Link>
                         </li>
                     </ul>
                 </div>
@@ -52,7 +52,7 @@ const Routes = (
             <Route path="multiple-targets" component={MultipleTargets}/>
             <Route path="multiple-menus" component={MultipleMenus}/>
             <Route path="submenus" component={SubMenus}/>
-            <Route path="custom-wrappers" component={CustomWrappers}/>
+            <Route path="customization" component={Customization}/>
         </Route>
     </Router>
 );

examples/custom-wrappers/target.js renamed to examples/customization/target.js

@@ -5,7 +5,6 @@ import invariant from "invariant";
 import _isObject from "lodash.isobject";
 
 import store from "./redux/store";
-import tagAttributes from "./tag-attributes.js";
 
 export default function(identifier, configure) {
     return function(Component) {
@@ -61,16 +60,17 @@ export default function(identifier, configure) {
                     }
                 });
             },
-            render: function() {
+            render() {
+                let { attributes: {className = "", ...attributes}, renderTag, ...props } = this.props;
 
-                var attributes = this.props.attributes;
-                var classNames = tagAttributes.getClassNames(this.props.attributes);
+                attributes.className = `react-context-menu-wrapper ${className}`;
+                attributes.onContextMenu = this.handleContextClick;
 
-                //Make sure to add the react-context-menu-wrapper information
-                attributes["className"] = "react-context-menu-wrapper" + classNames;
-                attributes["onContextMenu"] = this.handleContextClick;
-
-                return React.createElement(this.props.renderTag, attributes, React.createElement(Component, this.props));
+                return React.createElement(
+                    renderTag,
+                    attributes,
+                    React.createElement(Component, props)
+                );
             }
         });
     };

examples/index.js

@@ -5,8 +5,6 @@ import classnames from "classnames";
 import assign from "object-assign";
 import monitor from "./monitor";
 
-import tagAttributes from "./tag-attributes.js";
-
 let { PropTypes } = React;
 
 const MenuItem = React.createClass({
@@ -42,20 +40,17 @@ const MenuItem = React.createClass({
         monitor.hideMenu();
     },
     render() {
-        let { disabled, children } = this.props;
+        let { disabled, children, attributes: { className = "", ...props } } = this.props,
+            menuItemClassNames = `react-context-menu-item ${className}`;
 
         const classes = classnames({
             "react-context-menu-link": true,
             disabled
         });
 
-        var menuItemClassNames = tagAttributes.getClassNames(this.props.attributes);
-
-        //Make sure to add the react-context-menu-item information
-        menuItemClassNames = "react-context-menu-item" + menuItemClassNames;
 
         return (
-            <div className={menuItemClassNames}>
+            <div className={menuItemClassNames} {...props}>
                 <a href="#" className={classes} onClick={this.handleClick}>
                     {children}
                 </a>