replace merge with assign and remove children cloning

Author: vkbansal

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 bundle.js
+bundle.js.map
 index.html

examples.config.js

@@ -6,6 +6,7 @@ module.exports = {
     entry: "./examples/index.js",
     output: {
         filename: "./bundle.js",
+        sourceMapFileName: "./bundle.js.map"
     },
     module: {
         loaders: [
@@ -16,6 +17,7 @@ module.exports = {
             }
         ]
     },
+    devtool: "source-map",
     plugins: [
         new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.optimize.UglifyJsPlugin({

package.json

@@ -3,7 +3,13 @@
   "version": "0.1.0",
   "description": "Context Menu implemented in React",
   "main": "modules/index.js",
-  "keywords": ["react", "reactjs", "react-component", "contextmenu", "rightclick" ],
+  "keywords": [
+    "react",
+    "reactjs",
+    "react-component",
+    "contextmenu",
+    "rightclick"
+  ],
   "scripts": {
     "dist": "./node_modules/.bin/webpack --progress --profile --colors",
     "module": "./node_modules/.bin/babel src --out-dir modules",
@@ -26,7 +32,7 @@
     "flummox": "^3.5.2",
     "invariant": "^2.1.0",
     "lodash.isobject": "^3.0.2",
-    "lodash.merge": "^3.3.2",
+    "object-assign": "^3.0.0",
     "react": "^0.13.3"
   },
   "devDependencies": {

src/menu-container.js

@@ -54,12 +54,6 @@ const MenuContainer = React.createClass({
 
         return menuStyles;
     },
-    _hideMenu() {
-        this.props.flux.getActions("menu").setParams({
-            isVisible: false,
-            currentItem: {}
-        });
-    },
     _outsideClickHandler(event) {
         let localNode = this.localNode,
             source = event.target,
@@ -102,9 +96,7 @@ const MenuContainer = React.createClass({
         return (
             <div className={classes} style={this.state}>
                 <ul ref="menu" className="dropdown-menu">
-                    {React.Children.map(this.props.children, (child) => {
-                        return React.cloneElement(child, { currentItem, hideMenu: this._hideMenu });
-                    })}
+                    {this.props.children}
                 </ul>
             </div>
         );

src/menu-item.js

@@ -1,48 +1,56 @@
 "use strict";
 
-import React from "react";
+import React, { PropTypes } from "react";
 import classnames from "classnames";
-import _merge from "lodash.merge";
-
-let { PropTypes } = React;
+import assign from "object-assign";
+import flux from "./flux";
+import monitor from "./monitor";
 
 const MenuItem = React.createClass({
     displayName: "MenuItem",
     propTypes: {
+        data: PropTypes.object,
         disabled: PropTypes.bool,
-        selected: PropTypes.bool,
         divider: PropTypes.bool,
-        data: PropTypes.object,
+        onClick: PropTypes.func,
         onSelect: PropTypes.func,
-        onClick: PropTypes.func
+        selected: PropTypes.bool
     },
     getDefaultProps() {
         return {
             disabled: false,
             selected: false,
-            data: null
+            data: {}
         };
     },
     handleClick(event) {
-        let { disabled, onSelect, onClick, currentItem, data } = this.props;
+        let { disabled, onSelect, onClick, data } = this.props;
 
         if (disabled) {
             event.preventDefault();
             return;
         }
 
+        assign(data, monitor.getItem());
+
         if (typeof onSelect === "function") {
             event.preventDefault();
-            onSelect(_merge(currentItem, data));
-            this.props.hideMenu();
+            onSelect(data);
+            this.hideMenu();
             return;
         }
 
         if (typeof onClick === "function") {
-            onClick(event, _merge(currentItem, data));
+            onClick(event, data);
         }
 
-        this.props.hideMenu();
+        this.hideMenu();
+    },
+    hideMenu() {
+        flux.getActions("menu").setParams({
+            isVisible: false,
+            currentItem: {}
+        });
     },
     render() {
         let { divider, disabled, selected, children } = this.props;

src/monitor.js

@@ -2,14 +2,12 @@
 
 import flux from "./flux";
 
-const { state } = flux.getStore("menu");
-
 export default {
     getItem() {
-        return state.currentItem;
+        return flux.getStore("menu").state.currentItem;
     },
     getPosition() {
-        let { x, y } = state;
+        let { x, y } = flux.getStore("menu").state;
         return {x, y};
     }
 };