React 15 migration fixes

MaterialUI legacy & recent now coexist in the application, start using new elements Start moving js out of the manifests
pydio · Feb 15, 2017 · 8c04912 · 8c04912
1 parent 702e2a8
commit 8c04912
Show file tree

Hide file tree

Showing 16 changed files with 846 additions and 609 deletions.
diff --git a/core/src/plugins/access.fs/Gruntfile.js b/core/src/plugins/access.fs/Gruntfile.js
@@ -0,0 +1,34 @@
+module.exports = function(grunt) {
+    grunt.initConfig({
+        babel: {
+            options: {},
+
+            dist: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: 'res/js/',
+                        src: ['**/*.js'],
+                        dest: 'res/build/',
+                        ext: '.js'
+                    }
+                ]
+            }
+        },
+        watch: {
+            js: {
+                files: [
+                    "res/**/*"
+                ],
+                tasks: ['babel'],
+                options: {
+                    spawn: false
+                }
+            }
+        }
+    });
+    grunt.loadNpmTasks('grunt-babel');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.registerTask('default', ['babel']);
+
+};
diff --git a/core/src/plugins/access.fs/fsActions.xml b/core/src/plugins/access.fs/fsActions.xml
diff --git a/core/src/plugins/access.fs/manifest.xml b/core/src/plugins/access.fs/manifest.xml
@@ -3,6 +3,7 @@
     <client_settings icon="plugins/access.fs/icon.png" description_template="{PATH}" iconClass="icon-hdd">
         <resources>
             <i18n namespace="access_fs" path="plugins/access.fs/i18n"/>
+            <js className="FSActions" file="plugins/access.fs/res/build/FSActions.js"/>
         </resources>
     </client_settings>
 	<server_settings>

diff --git a/core/src/plugins/access.fs/package.json b/core/src/plugins/access.fs/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "access.fs",
+  "version": "8.0.0",
+  "description": "Standard FS actions",
+  "source_path": "res/js",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Abstrium SAS",
+  "license": "agpl",
+  "devDependencies": {},
+  "dependencies": {
+    "grunt": "^1.0.1",
+    "grunt-babel": "^6.0.0",
+    "grunt-contrib-watch": "^1.0.0"
+  }
+}
diff --git a/core/src/plugins/access.fs/res/js/FSActions.js b/core/src/plugins/access.fs/res/js/FSActions.js
diff --git a/core/src/plugins/action.share/res/react/ShareDialog.js b/core/src/plugins/action.share/res/react/ShareDialog.js
@@ -335,7 +335,7 @@
         hideMenu: function(event){
             if(event && ( event.target.hasClassName('mui-icon-button') || event.target.up('.mui-icon-button'))){
                 var tg = event.target.hasClassName('mui-icon-button') ? event.target : event.target.up('.mui-icon-button');
-                if(this.refs["menuButton"] && tg == this.refs["menuButton"].getDOMNode()){
+                if(this.refs["menuButton"] && tg == ReactDOM.findDOMNode(this.refs["menuButton"])){
                     return;
                 }
             }
@@ -913,7 +913,7 @@
         attachClipboard: function(){
             this.detachClipboard();
             if(this.refs['copy-button']){
-                this._clip = new Clipboard(this.refs['copy-button'].getDOMNode(), {
+                this._clip = new Clipboard(this.refs['copy-button'], {
                     text: function(trigger) {
                         return this.props.linkData['public_link'];
                     }.bind(this)
@@ -1207,7 +1207,7 @@
                 expDate.setDate(today.getDate() + parseInt(expirationDateValue));
                 var clearValue = function(){
                     this.props.shareModel.setExpirationFor(linkId, "days", "");
-                    this.refs['expirationDate'].getDOMNode().querySelector(".mui-text-field-input").value = "";
+                    ReactDOM.findDOMNode(this.refs['expirationDate']).querySelector(".mui-text-field-input").value = "";
                 }.bind(this);
                 calIcon = <span className="ajxp_icon_span mdi mdi-close-circle" onClick={clearValue}/>;
                 var calLabel = <span className="calLabelHasValue">{this.context.getMessage(dateExpired?'21b':'21')}</span>

diff --git a/core/src/plugins/core.ajaxplorer/ajxp_registry.xsd b/core/src/plugins/core.ajaxplorer/ajxp_registry.xsd
@@ -473,6 +473,7 @@
             <xs:attribute name="attributes" use="required"/>
             <xs:attribute name="mime" use="required" type="xs:NCName"/>
             <xs:attribute name="theme" type="xs:NCName"/>
+            <xs:attribute name="reactComponent" type="xs:NCName"/>
             <xs:attribute name="primary" type="xs:boolean"/>
         </xs:complexType>
     </xs:element>
@@ -537,6 +538,7 @@
                 <xs:element ref="dialogOnCancel"/>
                 <xs:element ref="dialogOnComplete"/>
             </xs:choice>
+            <xs:attribute name="module" type="xs:NCName"/>
             <xs:attribute name="dialogOkButtonOnly" type="xs:boolean"/>
             <xs:attribute name="dialogOpenForm" type="xs:NCName"/>
             <xs:attribute name="dialogSkipButtons" type="xs:boolean"/>
@@ -556,6 +558,7 @@
     <xs:element name="clientListener">
         <xs:complexType mixed="true">
             <xs:attribute name="name" use="required" type="xs:NCName"/>
+            <xs:attribute name="module" type="xs:NCName"/>
         </xs:complexType>
     </xs:element>
     <xs:element name="activeCondition" type="xs:string"/>

diff --git a/core/src/plugins/gui.ajax/Gruntfile.js b/core/src/plugins/gui.ajax/Gruntfile.js
@@ -146,9 +146,9 @@ module.exports = function(grunt) {
                     {
                         mode: {loose: false},
                         expand: true,
-                        cwd: 'node_modules/material-ui/src/',
+                        cwd: 'node_modules/material-ui-legacy/src/',
                         src: ['**/*.js', '**/*.jsx'],
-                        dest: 'node_modules/material-ui/lib/',
+                        dest: 'node_modules/material-ui-legacy/lib/',
                         ext: '.js'
                     }]
             },
@@ -248,6 +248,16 @@ module.exports = function(grunt) {
                     ]
                 }
             }
+        },
+        hub: {
+            all: {
+                options:{
+                    concurrent: 20,
+                    allowSelf:true
+                },
+                src: ['../*/Gruntfile.js'],
+                tasks: ['default']
+            }
         }
     });
     grunt.loadNpmTasks('grunt-env');
@@ -258,6 +268,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-run');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-hub');
     grunt.loadNpmTasks('assemble-less');
     grunt.registerTask('type:js', [
         'copy:debug',

diff --git a/core/src/plugins/gui.ajax/package.json b/core/src/plugins/gui.ajax/package.json
@@ -3,49 +3,52 @@
   "version": "8.0.0",
   "description": "",
   "main": "index.js",
-  "source_path":"res/js",
-  "css_path":"res/themes/common/css",
+  "source_path": "res/js",
+  "css_path": "res/themes/common/css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "AGPL-v3",
   "dependencies": {
+    "chart.js": "^1.0.2",
+    "classnames": "~2.1.3",
+    "clipboard": "^1.5.8",
+    "cronstrue": "0.3.1",
+    "he": "1.1.0",
+    "lodash": "^3.10.1",
+    "material-ui": "^0.17.0",
+    "material-ui-legacy": "git://github.com/pydio/material-ui.git#pydio",
+    "qrcode.react": "0.6.1",
     "react": "15.4.2",
-    "react-dom": "^15.4.2",
     "react-addons-css-transition-group": "^15.4.2",
     "react-addons-pure-render-mixin": "^15.4.2",
     "react-addons-update": "^15.4.2",
+    "react-autosuggest": "8.0.0",
     "react-chartjs": "^0.8.0",
-    "react-grid-layout": "^0.13.9",
-    "react-infinite": "^0.7.1",
-    "material-ui": "git://github.com/pydio/material-ui.git#pydio",
-    "reactify": "^1.1.1",
-    "react-select": "^0.6.5",
     "react-dnd": "^2.2.2",
     "react-dnd-html5-backend": "^2.2.3",
-    "react-autosuggest": "8.0.0",
+    "react-dom": "^15.4.2",
+    "react-grid-layout": "^0.13.9",
+    "react-infinite": "^0.7.1",
     "react-mfb": "0.4.1",
-    "chart.js": "^1.0.2",
-    "lodash": "^3.10.1",
-    "classnames": "~2.1.3",
-    "clipboard":"^1.5.8",
-    "qrcode.react":"0.6.1",
-    "cronstrue":"0.3.1",
-    "he":"1.1.0"
+    "react-select": "^0.6.5",
+    "react-tap-event-plugin": "^2.0.1",
+    "reactify": "^1.1.1"
   },
   "devDependencies": {
+    "assemble-less": "~0.7.0",
+    "envify": "3.4.0",
     "grunt": "~0.4.5",
     "grunt-babel": "~5.0.3",
+    "grunt-browserify": "~4.0.1",
+    "grunt-contrib-copy": "1.0.0",
+    "grunt-contrib-cssmin": "~0.14.0",
     "grunt-contrib-uglify": "~0.9.2",
     "grunt-contrib-watch": "~0.6.1",
-    "grunt-contrib-copy": "1.0.0",
-    "grunt-browserify": "~4.0.1",
     "grunt-env": "~0.4.4",
-    "grunt-run":"~0.5.2",
-    "grunt-contrib-cssmin":"~0.14.0",
-    "assemble-less": "~0.7.0",
-    "less-plugin-autoprefix": "~1.5.1",
-    "envify": "3.4.0"
+    "grunt-hub": "^0.7.0",
+    "grunt-run": "~0.5.2",
+    "less-plugin-autoprefix": "~1.5.1"
   }
 }
diff --git a/core/src/plugins/gui.ajax/res/js/es6/model/Action.es6 b/core/src/plugins/gui.ajax/res/js/es6/model/Action.es6
@@ -197,7 +197,7 @@ class Action extends Observable{
             var components = XMLUtils.XPathSelectNodes(this.options.callbackDialogNode, "component");
             this.manager.uiMountComponents(components);
         }else if(this.options.callback){
-			this.options.callback();
+			this.options.callback(this.manager, arguments[0]);
 		}
 		if(this.options.subMenu && arguments[0] && arguments[0][0]){
 			this.notify("submenu_active", arguments[0][0]);
@@ -232,11 +232,15 @@ class Action extends Observable{
         }
 
 		if(this.options.listeners["contextChange"]){
-			window.listenerContext = this;
-            try{
-                this._evalScripts(this.options.listeners["contextChange"]);
-            }catch(e){
-                Logger.error("Error while evaluating script for contextChange event - action " + this.options.name);
+            if(this.options.listeners["contextChange"] instanceof Function){
+                this.options.listeners["contextChange"]();
+            }else{
+                window.listenerContext = this;
+                try{
+                    this._evalScripts(this.options.listeners["contextChange"]);
+                }catch(e){
+                    Logger.error("Error while evaluating script for contextChange event - action " + this.options.name);
+                }
             }
 		}
 		var rightsContext = this.rightsContext;
@@ -294,11 +298,15 @@ class Action extends Observable{
 	 */
 	fireSelectionChange(){
 		if(this.options.listeners["selectionChange"]){
-			window.listenerContext = this;
-            try{
-    			this._evalScripts(this.options.listeners["selectionChange"]);
-            }catch(e){
-                Logger.error("Error while evaluating script for selectionChange event - action " + this.options.name);
+            if(this.options.listeners["selectionChange"] instanceof Function){
+                this.options.listeners["selectionChange"]();
+            } else {
+                window.listenerContext = this;
+                try {
+                    this._evalScripts(this.options.listeners["selectionChange"]);
+                } catch (e) {
+                    Logger.error("Error while evaluating script for selectionChange event - action " + this.options.name);
+                }
             }
 		}
         if(this.options.activeCondition){
@@ -444,15 +452,31 @@ class Action extends Observable{
                         }
 					}else if(processNode.nodeName == "clientCallback"){
 						if(processNode.getAttribute('prepareModal') && processNode.getAttribute('prepareModal') == "true"){
-							this.options.prepareModal = true;						
+							this.options.prepareModal = true;
 						}
 						if(processNode.getAttribute('dialogOpenForm') || processNode.getAttribute("components")){
 							this.options.callbackDialogNode = processNode;
-						}else if(processNode.firstChild){
+						}else if(processNode.getAttribute('module')){
+                            let fName = processNode.getAttribute('module');
+                            this.options.callback = function(manager, otherArguments){
+                                ResourcesManager.detectModuleToLoadAndApply(fName, function(){
+                                    LangUtils.executeFunctionByName(fName, window, manager, otherArguments);
+                                });
+                            };
+                        }else if(processNode.firstChild){
 							this.options.callbackCode = processNode.firstChild.nodeValue.trim();
 						}
-					}else if(processNode.nodeName == "clientListener" && processNode.firstChild){						
-						this.options.listeners[processNode.getAttribute('name')] = processNode.firstChild.nodeValue.trim();
+					}else if(processNode.nodeName == "clientListener"){
+                        if(processNode.getAttribute('module')){
+                            let moduleName = processNode.getAttribute('module');
+                            this.options.listeners[processNode.getAttribute('name')] = function(){
+                                ResourcesManager.detectModuleToLoadAndApply(moduleName, function(){
+                                    LangUtils.getFunctionByName(moduleName, window).apply(this);
+                                }.bind(this));
+                            }.bind(this);
+                        }else if(processNode.firstChild){
+    						this.options.listeners[processNode.getAttribute('name')] = processNode.firstChild.nodeValue.trim();
+                        }
 					}else if(processNode.nodeName == "activeCondition" && processNode.firstChild){
 						this.options.activeCondition = new Function(processNode.firstChild.nodeValue.trim());
 					}

diff --git a/core/src/plugins/gui.ajax/res/js/es6/util/LangUtils.es6 b/core/src/plugins/gui.ajax/res/js/es6/util/LangUtils.es6
@@ -161,6 +161,26 @@ class LangUtils{
         return LangUtils.trimLeft(LangUtils.trimRight(string, charlist), charlist);
     }
 
+    static executeFunctionByName(functionName, context) {
+        var args = Array.prototype.slice.call(arguments, 2);
+        var namespaces = functionName.split(".");
+        var func = namespaces.pop();
+        for (var i = 0; i < namespaces.length; i++) {
+            context = context[namespaces[i]];
+        }
+        return context[func].apply(context, args);
+    }
+
+    static getFunctionByName(functionName, context) {
+        var args = Array.prototype.slice.call(arguments, 2);
+        var namespaces = functionName.split(".");
+        var func = namespaces.pop();
+        for (var i = 0; i < namespaces.length; i++) {
+            context = context[namespaces[i]];
+        }
+        return context[func];
+    }
+
 }
 
 LangUtils.slugTable = [

diff --git a/core/src/plugins/gui.ajax/res/js/ui/reactjs/jsx/ReactUI.js b/core/src/plugins/gui.ajax/res/js/ui/reactjs/jsx/ReactUI.js
@@ -8,6 +8,7 @@
             this._focusables = [];
             this.modal = window.modal;
             this._componentsRegistry = new Map();
+            this.modalSupportsComponents = false;
         }
 
         insertChildFromString(parent, html){
@@ -194,6 +195,20 @@
             }
         }
 
+        registerModalOpener(component){
+            this._modalOpener = component;
+            this.modalSupportsComponents = true;
+        }
+
+        unregisterModalOpener(){
+            this._modalOpener = null;
+            this.modalSupportsComponents = false;
+        }
+
+        openComponentInModal(namespace, componentName, props){
+            this._modalOpener.open(namespace, componentName, props);
+        }
+
         /**
          * PROXY TO PROTOTYPE UI
          * @param seedInputField
@@ -233,7 +248,7 @@
         blurAll(){}
         focusOn(){}
         focusLast(){}
-
+        
     }
 
     let ns = global.ReactUI || {};

diff --git a/core/src/plugins/gui.ajax/res/js/ui/reactjs/jsx/UsersCompleter.js b/core/src/plugins/gui.ajax/res/js/ui/reactjs/jsx/UsersCompleter.js
@@ -160,10 +160,10 @@
                             ref="autosuggest"
                             cache={false}
                             showWhen = {input => true }
-                            inputAttributes={inputAttributes}
+                            inputProps={inputAttributes}
                             suggestions={this.getSuggestions}
-                            suggestionRenderer={this.props.renderSuggestion}
-                            suggestionValue={this.suggestionValue}
+                            getSuggestionValue={this.suggestionValue}
+                            renderSuggestion={this.props.renderSuggestion}
                             onSuggestionSelected={this.onSuggestionSelected}
                         />
                     </div>