fixed: focus on fullscreen for react schema grouped forms (#2400)

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

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

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

@@ -40,6 +40,9 @@ class ThingsboardSchemaForm extends React.Component {
 
     constructor(props) {
         super(props);
+        this.state = {
+            groupId: null,
+        };
 
         this.mapper = {
             'number': ThingsboardNumber,
@@ -71,7 +74,6 @@ class ThingsboardSchemaForm extends React.Component {
     }
 
     onChange(key, val) {
-        //console.log('SchemaForm.onChange', key, val);
         this.props.onModelChange(key, val);
         if (this.hasConditions) {
             this.forceUpdate();
@@ -86,12 +88,15 @@ class ThingsboardSchemaForm extends React.Component {
         this.props.onIconClick(event);
     }
 
-    onToggleFullscreen() {
+    onToggleFullscreen(groupId) {
+        this.setState({
+            groupId: groupId
+        });
         this.props.onToggleFullscreen();
     }
 
-    
+
-    builder(form, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
+    builder(form, groupId, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
         var type = form.type;
         let Field = this.mapper[type];
         if(!Field) {
@@ -104,21 +109,21 @@ class ThingsboardSchemaForm extends React.Component {
                 return null;
             }
         }
-        return <Field model={model} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
+        return <Field model={model} groupId={groupId} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
     }
 
-    createSchema(theForm) {
+    createSchema(theForm, groupId) {
         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, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
+            return this.builder(form, groupId, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
         }.bind(this));
 
         let formClass = 'SchemaForm';
-        if (this.props.isFullscreen) {
+        if (this.props.isFullscreen && groupId === this.state.groupId) {
             formClass += ' SchemaFormFullscreen';
         }
 
@@ -131,7 +136,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]);
+                let forms = this.createSchema(this.props.form[info.formIndex], info.formIndex);
                 let item = <ThingsboardSchemaGroup key={content.length} forms={forms} info={info}></ThingsboardSchemaGroup>;
                 content.push(item);
             }
@@ -165,4 +170,4 @@ class ThingsboardSchemaGroup extends React.Component{
                     <div style={{padding: '20px'}} className={this.state.showGroup?"":"invisible"}>{this.props.forms}</div>
                 </section>);
     }
-} 
+}

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

@@ -24,12 +24,15 @@ $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;