Context menu functional

Author: i-rocky

build.js

@@ -1,4 +1,5 @@
 import initFM from './src';
+import ImagePreview from "./src/plugins/ImagePreview";
 
 window.openFileManager = initFM('/react-filemanager-server/', document.querySelector('.app'));
 
@@ -8,3 +9,5 @@ window.openFileManager = initFM('/react-filemanager-server/', document.querySele
   link.href = href;
   document.head.insertBefore(link, document.head.firstChild);
 });
+
+window.ReactFileManager.registerPlugin(ImagePreview);

src/core/PluginContainer.jsx

@@ -2,18 +2,18 @@ import React, {Component} from 'react'
 import {inject, observer} from "mobx-react";
 
 const PluginContainer =  class PluginContainer extends Component {
-    constructor(props) {
-        super(props);
-    }
+  constructor(props) {
+    super(props);
+  }
 
-    render = () => {
-        const store = this.props.fm_store;
-        if(!store.plugin.component)
-            return null;
-        return (
-            <store.plugin.component key={store.plugin.key} store={store}/>
-        );
-    };
+  render = () => {
+    const store = this.props.fm_store;
+    if (!store.plugin.component)
+      return null;
+    return (
+      <store.plugin.component key={store.plugin.key} store={store}/>
+    );
+  };
 };
 
 export default inject("fm_store")(observer(PluginContainer))

src/core/file_types.js

@@ -1,6 +1,6 @@
 module.exports = {
   text: ['txt', 'html', 'css', 'js', 'php', 'log', 'inc'],
   image: ['png', 'jpg', 'jpeg', 'bmp', 'webm', 'gif', 'svg'],
-  video: ['mp4', 'flv', 'mkv', 'vob'],
+  video: ['mkv', 'flv', 'mp4', 'vob', '3gp'],
   audio: ['mp3', 'aac', 'ogg'],
 };

src/core/fm/content/index.jsx

@@ -38,17 +38,20 @@ const FMContent = class FMContent extends Component {
 
     const menu_items = this.getFilteredMenuItems(ext).map(menu_item => {
       const {callback} = menu_item;
-      menu_item.callback = () => {
-        return callback.call(this, item);
+      const n_menu_item = Object.assign({}, menu_item);
+      n_menu_item.callback = () => {
+        console.log('Inside callback', item);
+        return callback.call(this, this.props.fm_store, item);
       };
-      return menu_item;
+      return n_menu_item;
     });
 
     this.setState({menu_items});
   };
 
   getFilteredMenuItems = ext => {
-    const menu = [
+    const menu = this.props.fm_store.context_menu;
+    /*[
       {
         scopes: ['image'],
         label: 'Preview',
@@ -89,7 +92,7 @@ const FMContent = class FMContent extends Component {
         },
         category: ['general']
       },
-    ];
+    ];*/
     const type = ['screen', 'dir'].indexOf(ext) >= 0 ? ext : Object.keys(file_types).find(type => {
       return file_types[type].indexOf(ext) >= 0;
     });

src/core/store.js

@@ -16,6 +16,7 @@ import Rename from "./general/rename/index";
 import FileInfo from "./general/file-info/index";
 import FM from "./fm";
 import {remove_duplicate_slash} from "./Helper";
+import {audio, image, video} from "./file_types";
 
 require('antd/lib/message/style');
 
@@ -70,7 +71,8 @@ export default class FMStore {
       },
       file_info: {
         file: null
-      }
+      },
+      item_in_action: null,
     },
     //all the core information
     data: {
@@ -91,6 +93,8 @@ export default class FMStore {
     },
     //action menu buttons
     action_menu: {},
+    //context menu items
+    context_menu: [],
     //tab panels
     tabs: [
       {
@@ -102,9 +106,9 @@ export default class FMStore {
     ],
     filter_types: {
       null: {title: "All", types: []},
-      image: {title: null, icon: "picture", types: ['png', 'jpeg', 'svg', 'jpg', 'bmp', 'gif']},
-      audio: {title: null, icon: "sound", types: ['mp3', 'ogg', 'aac']},
-      video: {title: null, icon: "video-camera", types: ['mkv', 'flv', 'mp4', 'vob', '3gp']}
+      image: {title: null, icon: "picture", types: image},
+      audio: {title: null, icon: "sound", types: audio},
+      video: {title: null, icon: "video-camera", types: video}
     }
   });
 
@@ -147,6 +151,9 @@ export default class FMStore {
       //add the action menu
       plugin[hook].action_menu && (this.config.action_menu[hook] = plugin[hook].action_menu);
 
+      //ad context menu
+      plugin[hook].context_menu && this.config.context_menu.push(plugin[hook].context_menu);
+
       //add the tab entry
       plugin[hook].tab && this.config.tabs.push({
         title: [<span key="title">{plugin[hook].tab}</span>],
@@ -164,11 +171,13 @@ export default class FMStore {
         message.error('The requested plugin is not installed.');
         return;
       }
-      const plugin = this.config.plugins[alias];
-      this.config.plugin.component = plugin.component;
-      this.config.plugin.alias = alias;
-      this.config.plugin.plugin = plugin.plugin;
-      this.config.plugin.key = Math.random();
+      try {
+        const plugin = this.config.plugins[alias];
+        this.config.plugin.component = plugin.component;
+        this.config.plugin.alias = alias;
+        this.config.plugin.plugin = plugin.plugin;
+        this.config.plugin.key = Math.random();
+      }catch(e) {console.log(e)}
     };
   });
 
@@ -234,6 +243,10 @@ export default class FMStore {
     this.config.data.filter_type = filter_type;
   }
 
+  set item_in_action(item) {
+    this.config.plugin_data.item_in_action = item;
+  };
+
   //endregion
 
   //region Config getters
@@ -253,6 +266,11 @@ export default class FMStore {
     return this.config.action_menu;
   }
 
+  //context menu items
+  get context_menu() {
+    return this.config.context_menu;
+  }
+
   //tabs list
   get tabs() {
     return this.config.tabs.filter(tab=>{
@@ -323,6 +341,11 @@ export default class FMStore {
     return this.list.filter(item => item.selected);
   };
 
+  // get the item selected for action
+  get item_in_action() {
+    return this.config.plugin_data.item_in_action;
+  }
+
   //endregion
 
   //region Http