New type autocomplete in forms (react only).

core/src/plugins/gui.ajax/package.json

@@ -25,7 +25,8 @@
     "classnames": "~2.1.3",
     "react-autosuggest": "1.18.2",
     "clipboard":"^1.5.8",
-    "qrcode.react":"0.6.1"
+    "qrcode.react":"0.6.1",
+    "prettycron":"0.10.0"
   },
   "devDependencies": {
     "grunt": "~0.4.5",

core/src/plugins/gui.ajax/res/js/ui/reactjs/jsx/ReactFormComponents.js

@@ -349,6 +349,79 @@
 
     });
 
+    var AutocompleteBox = React.createClass({
+
+        mixins:[FormMixin],
+
+        onSuggestionSelected: function(value, event){
+            this.onChange(event, value);
+        },
+
+        getInitialState:function(){
+            return {loading : 0};
+        },
+
+        suggestionLoader:function(input, callback) {
+
+            this.setState({loading:true});
+            let values = {};
+            if(this.state.choices){
+                this.state.choices.forEach(function(v){
+                    if(v.indexOf(input) === 0){
+                        values[v] = v;
+                    }
+                });
+            }
+            callback(null, LangUtils.objectValues(values));
+            this.setState({loading:false});
+
+        },
+
+        getSuggestions(input, callback){
+            bufferCallback('suggestion-loader-search', 350, function(){
+                this.suggestionLoader(input, callback);
+            }.bind(this));
+        },
+
+        suggestionValue: function(suggestion){
+            return '';
+        },
+
+        renderSuggestion(value){
+            return <span>{value}</span>;
+        },
+
+        render: function(){
+
+            const inputAttributes = {
+                id: 'pydioform-autosuggest',
+                name: 'pydioform-autosuggest',
+                className: 'react-autosuggest__input',
+                placeholder: this.props.attributes['label'],
+                /*onBlur: event => pydio.UI.enableAllKeyBindings(),*/
+                onFocus: event => pydio.UI.disableAllKeyBindings(),
+                value: this.state.value   // Initial value
+            };
+            return (
+                <div className="pydioform_autocomplete">
+                    <span className={"suggest-search icon-" + (this.state.loading ? 'refresh rotating' : 'search')}/>
+                    <ReactAutoSuggest
+                        ref="autosuggest"
+                        cache={true}
+                        showWhen = {input => true }
+                        inputAttributes={inputAttributes}
+                        suggestions={this.getSuggestions}
+                        suggestionRenderer={this.renderSuggestion}
+                        suggestionValue={this.suggestionValue}
+                        onSuggestionSelected={this.onSuggestionSelected}
+                    />
+                </div>
+
+            );
+        }
+
+    });
+
     /**
      * Select box input conforming to Pydio standard form parameter.
      */
@@ -1212,6 +1285,7 @@
                 return (
                     <PydioFormPanel
                         {...this.props}
+                        tabs={null}
                         key={index}
                         values={subValues}
                         onChange={null}
@@ -1277,6 +1351,7 @@
                 bottom:React.PropTypes.array
             }),
             tabs:React.PropTypes.array,
+            onTabChange:React.PropTypes.func,
             accordionizeIfGroupsMoreThan:React.PropTypes.number,
             onScrollCallback:React.PropTypes.func,
 
@@ -1287,6 +1362,16 @@
 
         },
 
+        externallySelectTab:function(index){
+            try{
+                let t = this.refs.tabs;
+                let c = this.refs.tabs.props.children[index];
+                t.handleTouchTap(index, c);
+            }catch(e){
+                if(global.console) global.console.log(e);
+            }
+        },
+
         getDefaultProps:function(){
             return { depth:0, values:{} };
         },
@@ -1596,27 +1681,33 @@
 
             if(this.props.tabs){
                 var className = this.props.className;
+                let initialSelectedIndex = 0;
+                let i = 0;
                 var tabs = this.props.tabs.map(function(tDef){
                     var label = tDef['label'];
                     var groups = tDef['groups'];
+                    if(tDef['selected']){
+                        initialSelectedIndex = i;
+                    }
                     var panes = groups.map(function(gId){
                         if(groupPanes[gId]){
                             return groupPanes[gId];
                         }else{
                             return null;
                         }
                     });
+                    i++;
                     return(
                         <ReactMUI.Tab label={label} key={label}>
                             <div className={(className?className+' ':' ') + 'pydio-form-panel' + (panes.length % 2 ? ' form-panel-odd':'')}>
                             {panes}
                             </div>
                         </ReactMUI.Tab>
                     );
-                });
+                }.bind(this));
                 return (
                     <div className="layout-fill vertical-layout tab-vertical-layout">
-                        <ReactMUI.Tabs>
+                        <ReactMUI.Tabs ref="tabs" initialSelectedIndex={initialSelectedIndex} onChange={this.props.onTabChange}>
                             {tabs}
                         </ReactMUI.Tabs>
                     </div>
@@ -1729,6 +1820,9 @@
                 case 'select':
                     value = <InputSelectBox {...props}/>;
                     break;
+                case 'autocomplete':
+                    value = <AutocompleteBox {...props}/>;
+                    break;
                 case 'legend':
                     value = null;
                     break;
@@ -1892,6 +1986,7 @@
     PydioForm.InputButton = InputButton;
     PydioForm.MonitoringLabel = MonitoringLabel;
     PydioForm.InputSelectBox = InputSelectBox;
+    PydioForm.AutocompleteBox = AutocompleteBox;
     PydioForm.InputImage = InputImage;
     PydioForm.FormPanel = PydioFormPanel;
     PydioForm.PydioHelper = PydioFormHelper;

core/src/plugins/gui.ajax/res/js/vendor/nodejs/export.js

@@ -15,4 +15,5 @@ window.classNames = require('classnames');
 window.ReactAutoSuggest = require('react-autosuggest');
 window.Clipboard = require('clipboard');
 window.ReactQRCode = require('qrcode.react');
+window.PrettyCron = require("prettycron");
 window.injectTapEventPlugin();

core/src/plugins/gui.ajax/res/themes/orbit/css/components/complete.less

@@ -64,4 +64,26 @@ div.react-autosuggest {
     padding-bottom: 9px !important;
     padding-left: 4px !important;
   }
+  input#pydioform-autosuggest{
+    font-size: 16px;
+    padding-bottom: 5px !important;
+    border-bottom: 1px solid #e0e0e0;
+    &:focus{
+      border-bottom: 2px solid @primary-1-color;
+    }
+  }
+}
+
+div.pydioform_autocomplete{
+  .suggest-search{
+    position: absolute;
+    right:36px;
+    padding-top: 2px;
+    color: #e0e0e0;
+  }
+  .react-autosuggest__suggestions li{
+    padding: 8px 6px;
+    font-size: 16px;
+    cursor: pointer;
+  }
 }

core/src/plugins/gui.ajax/res/themes/orbit/css/pydio.css

@@ -1954,6 +1954,25 @@ div.react-autosuggest input#users-autosuggest {
   padding-bottom: 9px !important;
   padding-left: 4px !important;
 }
+div.react-autosuggest input#pydioform-autosuggest {
+  font-size: 16px;
+  padding-bottom: 5px !important;
+  border-bottom: 1px solid #e0e0e0;
+}
+div.react-autosuggest input#pydioform-autosuggest:focus {
+  border-bottom: 2px solid #009688;
+}
+div.pydioform_autocomplete .suggest-search {
+  position: absolute;
+  right: 36px;
+  padding-top: 2px;
+  color: #e0e0e0;
+}
+div.pydioform_autocomplete .react-autosuggest__suggestions li {
+  padding: 8px 6px;
+  font-size: 16px;
+  cursor: pointer;
+}
 a.carousel-control {
   border-left: 1px solid #c4c7c1;
   border-right: 1px solid #c4c7c1;