[2.5] Revert change JSON form (#2598)

* Revert change

* Revert file

ui/src/app/components/react/json-form-ace-editor.jsx

@@ -83,9 +83,9 @@ class ThingsboardAceEditor extends React.Component {
         fixAceEditor(editor);
     }
 
-    onToggleFull(groupId) {
+    onToggleFull() {
         this.setState({ isFull: !this.state.isFull });
-        this.props.onToggleFullscreen(groupId);
+        this.props.onToggleFullscreen();
         this.updateAceEditorSize = true;
     }
 
@@ -140,7 +140,7 @@ class ThingsboardAceEditor extends React.Component {
                     <div className="title-panel">
                         <label>{this.props.mode}</label>
                         <FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={'Tidy'} onTouchTap={this.onTidy}/>
-                        <FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={this.state.isFull ? 'Exit fullscreen' : 'Fullscreen'} onTouchTap={() => this.onToggleFull(this.props.groupId)}/>
+                        <FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={this.state.isFull ? 'Exit fullscreen' : 'Fullscreen'} onTouchTap={this.onToggleFull}/>
                     </div>
                     <AceEditor mode={this.props.mode}
                                height={this.state.isFull ? "100%" : "150px"}

ui/src/app/components/react/json-form-array.jsx

@@ -131,7 +131,7 @@ class ThingsboardArray extends React.Component {
             }
             let forms = this.props.form.items.map(function(form, index){
                 var copy = this.copyWithIndex(form, i);
-                return this.props.builder(copy, this.props.groupId, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
+                return this.props.builder(copy, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
             }.bind(this));
             arrays.push(
             <li key={keys[i]} className="list-group-item">

ui/src/app/components/react/json-form-fieldset.jsx

@@ -19,7 +19,7 @@ class ThingsboardFieldSet extends React.Component {
 
     render() {
         let forms = this.props.form.items.map(function(form, index){
-            return this.props.builder(form, this.props.groupId, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
+            return this.props.builder(form, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
         }.bind(this));
 
         return (

ui/src/app/components/react/json-form-schema-form.jsx

@@ -40,9 +40,6 @@ class ThingsboardSchemaForm extends React.Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            groupId: null,
-        };
 
         this.mapper = {
             'number': ThingsboardNumber,
@@ -88,15 +85,12 @@ class ThingsboardSchemaForm extends React.Component {
         this.props.onIconClick(event);
     }
 
-    onToggleFullscreen(groupId) {
+    onToggleFullscreen() {
-        this.setState({
-            groupId: groupId
-        });
         this.props.onToggleFullscreen();
     }
 
 
-    builder(form, groupId, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
+    builder(form, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
         var type = form.type;
         let Field = this.mapper[type];
         if(!Field) {
@@ -109,21 +103,21 @@ class ThingsboardSchemaForm extends React.Component {
                 return null;
             }
         }
-        return <Field model={model} groupId={groupId} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
+        return <Field model={model} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
     }
 
-    createSchema(theForm, groupId) {
+    createSchema(theForm) {
         let merged = utils.merge(this.props.schema, theForm, this.props.ignore, this.props.option);
         let mapper = this.mapper;
         if(this.props.mapper) {
             mapper = _.merge(this.mapper, this.props.mapper);
         }
         let forms = merged.map(function(form, index) {
-            return this.builder(form, groupId, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
+            return this.builder(form, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
         }.bind(this));
 
         let formClass = 'SchemaForm';
-        if (this.props.isFullscreen && groupId === this.state.groupId) {
+        if (this.props.isFullscreen) {
             formClass += ' SchemaFormFullscreen';
         }
 
@@ -136,7 +130,7 @@ class ThingsboardSchemaForm extends React.Component {
         if(this.props.groupInfoes&&this.props.groupInfoes.length>0){
             let content=[];
             for(let info of this.props.groupInfoes){
-                let forms = this.createSchema(this.props.form[info.formIndex], info.formIndex);
+                let forms = this.createSchema(this.props.form[info.formIndex]);
                 let item = <ThingsboardSchemaGroup key={content.length} forms={forms} info={info}></ThingsboardSchemaGroup>;
                 content.push(item);
             }
@@ -166,8 +160,8 @@ class ThingsboardSchemaGroup extends React.Component{
     render() {
         let theCla = "pull-right fa fa-chevron-down md-toggle-icon"+(this.state.showGroup?"":" tb-toggled")
         return (<section className="md-whiteframe-z1" style={{marginTop: '10px'}}>
-                    <div className='SchemaGroupname md-button-toggle' onClick={this.toogleGroup.bind(this)}>{this.props.info.GroupTitle}<span className={theCla}></span></div>
+            <div className='SchemaGroupname md-button-toggle' onClick={this.toogleGroup.bind(this)}>{this.props.info.GroupTitle}<span className={theCla}></span></div>
-                    <div style={{padding: '20px'}} className={this.state.showGroup?"":"invisible"}>{this.props.forms}</div>
+            <div style={{padding: '20px'}} className={this.state.showGroup?"":"invisible"}>{this.props.forms}</div>
-                </section>);
+        </section>);
     }
 }

ui/src/app/components/react/json-form.scss

@@ -24,15 +24,12 @@ $input-label-float-scale: .75 !default;
 .tb-fullscreen {
   [name="ReactSchemaForm"] {
     .SchemaForm {
-      display: none;
-
       &.SchemaFormFullscreen {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        display: block;
 
         > div:not(.fullscreen-form-field) {
           display: none !important;