Added more bug to fix later

Author: i-rocky

build.js

@@ -11,3 +11,17 @@ window.openFileManager = initFM('/react-filemanager-server/', document.querySele
 });
 
 window.ReactFileManager.registerPlugin(ImagePreview);
+window.ReactFileManager.registerPlugin({
+  details: {
+    component: ImagePreview.image_preview.component,
+    categories: [],
+    context_menu: {
+      scopes: ['all'],
+      label: 'Details',
+      category: 'details',
+      callback(store, item) {
+        console.log(store, item);
+      }
+    }
+  }
+});

src/core/fm/content/index.jsx

@@ -22,14 +22,6 @@ const FMContent = class FMContent extends Component {
     this.props.fm_store.working_dir = '/';
   }
 
-  componentDidMount = () => {
-    document.getElementById('fm-content-holder').addEventListener('scroll', this.onScroll);
-  };
-
-  componentWillUnmount = () => {
-    document.getElementById('fm-content-holder').removeEventListener('scroll', this.onScroll);
-  };
-
   onContextMenu = (e, item) => {
     e.preventDefault();
     e.stopPropagation();
@@ -106,7 +98,7 @@ const FMContent = class FMContent extends Component {
   };
 
   onScroll = throttle(e => {
-    const el = document.getElementById('fm-content-holder');
+    const el = e.target;
     const content = el.querySelector('#fm-content');
     const scrollTop = el.scrollTop;
     const offsetHeight = el.offsetHeight;
@@ -127,7 +119,7 @@ const FMContent = class FMContent extends Component {
 
   render = () => {
     return (
-      <div id="fm-content-holder">
+      <div id="fm-content-holder" onScroll={this.onScroll}>
         <div className="qx-row">
           <div id="fm-content" className="qx-col" onContextMenu={this.onContextMenu}>
             {this.props.fm_store.list
@@ -142,7 +134,7 @@ const FMContent = class FMContent extends Component {
               <Button className="fm-loadmore" icon="appstore-o" type="primary" onClick={this.onClickLoadMore}>Load
                 More</Button> : null}
           </div>
-          <ContextMenu menu_items={this.state.menu_items} closeContextMenu={this.clearContextMenu}/>
+          <ContextMenu menu_items={this.state.menu_items} closeContextMenu={this.clearContextMenu} el={this.props.fm_store.mount_point()}/>
           <PluginContainer/>
         </div>
       </div>

src/core/fm/context_menu/index.jsx

@@ -3,18 +3,22 @@ require('./style.css');
 
 export default class ContextMenu extends Component {
   componentDidMount() {
-    document.addEventListener('contextmenu', this._handleContextMenu);
-    document.addEventListener('click', this._handleClick);
+    this.props.el.addEventListener('contextmenu', this._handleContextMenu);
+    this.props.el.addEventListener('click', this._handleClick);
   };
 
   componentWillUnmount() {
-    document.removeEventListener('contextmenu', this._handleContextMenu);
-    document.removeEventListener('click', this._handleClick);
+    this.props.el.removeEventListener('contextmenu', this._handleContextMenu);
+    this.props.el.removeEventListener('click', this._handleClick);
   }
 
   _handleContextMenu = (event) => {
     event.preventDefault();
 
+    if(this.props.menu_items.length === 0) {
+      return false;
+    }
+
     const clickX = event.clientX;
     const clickY = event.clientY;
     const screenW = window.innerWidth;
@@ -45,20 +49,20 @@ export default class ContextMenu extends Component {
   };
 
   _handleClick = (event) => {
+    event.target.getAttribute('onclick').call(this);
     const menu_items = this.props.menu_items;
-    const visible = menu_items.length > 0;
     const wasOutside = !(event.target.contains === this.root);
 
-    if (wasOutside && visible) {
+    if (wasOutside) {
       this.props.closeContextMenu();
     }
   };
 
   render() {
     const menu_items = this.props.menu_items;
-    const visible = menu_items.length > 0;
-
-    return (visible || null) &&
+    if(!menu_items.length)
+      return null;
+    return (
       <div ref={ref => {
         this.root = ref
       }} className="contextMenu">
@@ -71,6 +75,6 @@ export default class ContextMenu extends Component {
         {/*<div className="contextMenu--option">Settings</div>*/}
         {/*<div className="contextMenu--separator"/>*/}
         {/*<div className="contextMenu--option">About this app</div>*/}
-      </div>
+      </div>)
   };
 }