This fix issue #11

fkhadra · May 18, 2017 · abf49d7 · abf49d7
1 parent 07f5f7b
commit abf49d7
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 17 deletions.
diff --git a/dist/ReactToastify.min.js b/dist/ReactToastify.min.js
diff --git a/dist/ReactToastify.min.js.map b/dist/ReactToastify.min.js.map
diff --git a/src/Component/ContextMenu.js b/src/Component/ContextMenu.js
@@ -43,8 +43,22 @@ class ContextMenu extends Component {
     eventManager.off(`display::${this.props.id}`);
   }
 
-  hide = () => {
+  bindWindowEvent = () => {
+    window.addEventListener('resize', this.hide);
+    window.addEventListener('contextmenu', this.hide);
+    window.addEventListener('click', this.hide);
+    window.addEventListener('scroll', this.hide);
+  };
+
+  unBindWindowEvent = () => {
     window.removeEventListener('resize', this.hide);
+    window.removeEventListener('contextmenu', this.hide);
+    window.removeEventListener('click', this.hide);
+    window.removeEventListener('scroll', this.hide);
+  };
+
+  hide = () => {
+    this.unBindWindowEvent();
     this.setState({ visible: false });
   };
 
@@ -114,7 +128,7 @@ class ContextMenu extends Component {
   getMenuStyle() {
     return {
       left: this.state.x,
-      top: this.state.y,
+      top: this.state.y + 1,
       opacity: 1
     };
   }
@@ -132,25 +146,21 @@ class ContextMenu extends Component {
   }
 
   show = e => {
+    e.stopPropagation();
     const { x, y } = this.getMousePosition(e);
-    window.addEventListener('resize', this.hide);
-
+    this.bindWindowEvent();
     this.setState({
       visible: true,
       x,
       y,
       target: e.target
     }, this.setMenuPosition);
+
   };
 
   render() {
     return this.state.visible
-      ? <aside
-        className={cssClasses.CONTAINER}
-        onClick={this.hide}
-        onContextMenu={this.hide}
-        role="presentation"
-      >
+      ?
         <div
           className={this.getMenuClasses()}
           style={this.getMenuStyle()}
@@ -160,7 +170,6 @@ class ContextMenu extends Component {
             {this.getMenuItem()}
           </div>
         </div>
-      </aside>
       : null;
   }
 }

diff --git a/src/Component/Item.js b/src/Component/Item.js
@@ -19,12 +19,17 @@ class Item extends PureComponent {
     leftIcon: '',
     rightIcon: '',
     disabled: false,
-    onClick: () => {},
+    onClick: () => {
+    },
     target: {},
     data: ''
   };
 
-  handleClick = () => this.props.onClick(this.props.target, this.props.data);
+  handleClick = (e) => {
+    this.props.disabled
+      ? e.stopPropagation()
+      : this.props.onClick(this.props.target, this.props.data);
+  };
 
   buildItem() {
     return (

diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss
@@ -1,5 +1,5 @@
 .react-contexify-menu {
-  position: absolute;
+  position: fixed;
   opacity: 0;
   user-select: none;
   background-color: #ffffff;

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 // Layout ------------------------------------------------------------ //
-@import "container";
+//@import "container";
 @import 'menu';
 
 //Themes ------------------------------------------------------------ //