build

vkbansal · vkbansal · commit 893abc8656ef · 2016-03-08T08:14:42.000+05:30
diff --git a/dist/react-contextmenu.js b/dist/react-contextmenu.js
diff --git a/modules/context-menu/index.js b/modules/context-menu/index.js
@@ -10,13 +10,13 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _store = require("./redux/store");
+var _store = require("../redux/store");
 
 var _store2 = _interopRequireDefault(_store);
 
-var _menuContainer = require("./menu-container");
+var _wrapper = require("./wrapper");
 
-var _menuContainer2 = _interopRequireDefault(_menuContainer);
+var _wrapper2 = _interopRequireDefault(_wrapper);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,7 +41,7 @@ var ContextMenu = _react2.default.createClass({
         this.setState(this.getInitialState());
     },
     render: function render() {
-        return _react2.default.createElement(_menuContainer2.default, _extends({}, this.props, this.state));
+        return _react2.default.createElement(_wrapper2.default, _extends({}, this.props, this.state));
     }
 });
 
diff --git a/modules/context-menu/wrapper.js b/modules/context-menu/wrapper.js
@@ -10,7 +10,7 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _monitor = require("./monitor");
+var _monitor = require("../monitor");
 
 var _monitor2 = _interopRequireDefault(_monitor);
 
@@ -34,8 +34,8 @@ var modalStyle = {
     zIndex: "auto"
 };
 
-var MenuContainer = _react2.default.createClass({
-    displayName: "MenuContainer",
+var ContextMenuWrapper = _react2.default.createClass({
+    displayName: "ContextMenuWrapper",
     getInitialState: function getInitialState() {
         return {
             left: 0,
@@ -45,7 +45,7 @@ var MenuContainer = _react2.default.createClass({
     componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
         var _this = this;
 
-        if (nextProps.isVisible) {
+        if (nextProps.isVisible === nextProps.identifier) {
             var wrapper = window.requestAnimationFrame || setTimeout;
 
             wrapper(function () {
@@ -62,20 +62,18 @@ var MenuContainer = _react2.default.createClass({
         var _window = window;
         var innerWidth = _window.innerWidth;
         var innerHeight = _window.innerHeight;
-        var _menu = this.menu;
-        var offsetWidth = _menu.offsetWidth;
-        var offsetHeight = _menu.offsetHeight;
+        var rect = this.menu.getBoundingClientRect();
         var menuStyles = {
             top: y + scrollY,
             left: x + scrollX
         };
 
-        if (y + offsetHeight > innerHeight) {
-            menuStyles.top -= offsetHeight;
+        if (y + rect.height > innerHeight) {
+            menuStyles.top -= rect.height;
         }
 
-        if (x + offsetWidth > innerWidth) {
-            menuStyles.left -= offsetWidth;
+        if (x + rect.width > innerWidth) {
+            menuStyles.left -= rect.width;
         }
 
         return menuStyles;
@@ -109,4 +107,4 @@ var MenuContainer = _react2.default.createClass({
     }
 });
 
-exports.default = MenuContainer;
+exports.default = ContextMenuWrapper;
diff --git a/modules/contextmenu-layer.js b/modules/contextmenu-layer.js
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
 
 exports.default = function (identifier, configure) {
@@ -20,36 +18,30 @@ exports.default = function (identifier, configure) {
 
         return _react2.default.createClass({
             displayName: displayName + "ContextMenuLayer",
-            componentDidMount: function componentDidMount() {
-                document.addEventListener("contextmenu", this.handleContextClick);
-            },
-            componentWillUnmount: function componentWillUnmount() {
-                document.removeEventListener("contextmenu", this.handleContextClick);
-            },
             handleContextClick: function handleContextClick(event) {
-                var target = event.target,
-                    domNode = _reactDom2.default.findDOMNode(this);
-
-                if (target === domNode || domNode.contains(target)) {
-                    var currentItem = typeof configure === "function" ? configure(this.props) : {};
-
-                    (0, _invariant2.default)((0, _lodash2.default)(currentItem), "Expected configure to return an object. See %s", displayName);
-
-                    event.preventDefault();
-
-                    _store2.default.dispatch({
-                        type: "SET_PARAMS",
-                        data: {
-                            x: event.clientX,
-                            y: event.clientY,
-                            currentItem: currentItem,
-                            isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
-                        }
-                    });
-                }
+                var currentItem = typeof configure === "function" ? configure(this.props) : {};
+
+                (0, _invariant2.default)((0, _lodash2.default)(currentItem), "Expected configure to return an object. See %s", displayName);
+
+                event.preventDefault();
+
+                _store2.default.dispatch({
+                    type: "SET_PARAMS",
+                    data: {
+                        x: event.clientX,
+                        y: event.clientY,
+                        currentItem: currentItem,
+                        isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
+                    }
+                });
             },
             render: function render() {
-                return _react2.default.createElement(Component, _extends({}, this.props, { identifier: identifier }));
+                return _react2.default.createElement(
+                    "div",
+                    { className: "react-context-menu-wrapper",
+                        onContextMenu: this.handleContextClick },
+                    _react2.default.createElement(Component, this.props)
+                );
             }
         });
     };
@@ -59,10 +51,6 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require("react-dom");
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _invariant = require("invariant");
 
 var _invariant2 = _interopRequireDefault(_invariant);
diff --git a/modules/index.js b/modules/index.js
@@ -40,4 +40,13 @@ Object.defineProperty(exports, "monitor", {
   }
 });
 
+var _submenu = require("./submenu");
+
+Object.defineProperty(exports, "SubMenu", {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_submenu).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
diff --git a/modules/menu-item.js b/modules/menu-item.js
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
-
 var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
@@ -47,8 +45,6 @@ var MenuItem = _react2.default.createClass({
         var preventClose = _props.preventClose;
 
 
-        console.log(typeof onClick === "undefined" ? "undefined" : _typeof(onClick));
-
         event.preventDefault();
 
         if (disabled) return;
@@ -79,7 +75,7 @@ var MenuItem = _react2.default.createClass({
             { className: "react-context-menu-item" },
             _react2.default.createElement(
                 "a",
-                { href: "#", classes: classes, onClick: this.handleClick },
+                { href: "#", className: classes, onClick: this.handleClick },
                 children
             )
         );
diff --git a/modules/submenu/index.js b/modules/submenu/index.js
@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require("classnames");
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _wrapper = require("./wrapper");
+
+var _wrapper2 = _interopRequireDefault(_wrapper);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var menuStyles = {
+    position: "relative",
+    zIndex: "auto"
+};
+
+var SubMenu = _react2.default.createClass({
+    displayName: "SubMenu",
+    propTypes: {
+        title: _react2.default.PropTypes.string.isRequired,
+        disabled: _react2.default.PropTypes.bool,
+        hoverDelay: _react2.default.PropTypes.number
+    },
+    getDefaultProps: function getDefaultProps() {
+        return {
+            hoverDelay: 500
+        };
+    },
+    getInitialState: function getInitialState() {
+        return {
+            visible: false
+        };
+    },
+    shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
+        return this.state.isVisible !== nextState.visible;
+    },
+    handleClick: function handleClick(e) {
+        e.preventDefault();
+    },
+    handleMouseEnter: function handleMouseEnter() {
+        var _this = this;
+
+        if (this.closetimer) clearTimeout(this.closetimer);
+
+        if (this.props.disabled || this.state.visible) return;
+
+        this.opentimer = setTimeout(function () {
+            return _this.setState({ visible: true });
+        }, this.props.hoverDelay);
+    },
+    handleMouseLeave: function handleMouseLeave() {
+        var _this2 = this;
+
+        if (this.opentimer) clearTimeout(this.opentimer);
+
+        if (!this.state.visible) return;
+
+        this.closetimer = setTimeout(function () {
+            return _this2.setState({ visible: false });
+        }, this.props.hoverDelay);
+    },
+    render: function render() {
+        var _this3 = this;
+
+        var _props = this.props;
+        var disabled = _props.disabled;
+        var children = _props.children;
+        var title = _props.title;
+        var visible = this.state.visible;
+
+
+        var classes = (0, _classnames2.default)({
+            "react-context-menu-link": true,
+            disabled: disabled,
+            active: visible
+        }),
+            menuClasses = "react-context-menu-item submenu";
+
+        return _react2.default.createElement(
+            "div",
+            { ref: function ref(c) {
+                    return _this3.item = c;
+                }, className: menuClasses, style: menuStyles,
+                onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
+            _react2.default.createElement(
+                "a",
+                { href: "#", className: classes, onClick: this.handleClick },
+                title
+            ),
+            _react2.default.createElement(
+                _wrapper2.default,
+                { visible: visible },
+                children
+            )
+        );
+    }
+});
+
+exports.default = SubMenu;
diff --git a/modules/submenu/wrapper.js b/modules/submenu/wrapper.js
