Permalink
Browse files

New type autocomplete in forms (react only).

  • Loading branch information...
1 parent 42964af commit 8714a3f358f0acbc9daba069cc8cb07c62e56181 @cdujeu cdujeu committed Jul 21, 2016
@@ -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",
@@ -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;
@@ -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();
Oops, something went wrong.
@@ -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;
+ }
}
@@ -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;

0 comments on commit 8714a3f

Please sign in to comment.