Hide Uischema info modal onClick and fix ArrayFieldTemplate

Author: MatinF

package.json

@@ -1,6 +1,6 @@
 {
   "name": "config-editor-base",
-  "version": "1.6.2",
+  "version": "1.6.6",
   "description": "React-based JSON Schema editor base-tool",
   "author": "CSS Electronics",
   "license": "MIT",

src/editorBase/EditorArrayFieldTemplate.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function EditorArrayFieldTemplate(props) {
+function ArrayFieldTemplate(props) {
   return (
     <div className="reset-margins">
       <legend>{props.title}</legend>
@@ -62,4 +62,4 @@ function EditorArrayFieldTemplate(props) {
   );
 }
 
-export default EditorArrayFieldTemplate;
+export default ArrayFieldTemplate;

src/editorBase/EditorNavs.js

@@ -4,6 +4,7 @@ import { GENERIC_NAV } from "rjsf-tabs";
 function EditorNavs({ navs: { links }, onNavChange }) {
   let relLinks = links.filter(({ nav }) => nav !== GENERIC_NAV);
   return (
+    <div className="col-md-12">
     <nav className="navbar navbar-default navbar-margin-reduce">
       <div className="container-fluid">
         <div className="collapse navbar-collapse">
@@ -24,6 +25,7 @@ function EditorNavs({ navs: { links }, onNavChange }) {
         </div>
       </div>
     </nav>
+    </div>
   );
 }
 

src/editorBase/EditorSection.js

@@ -13,7 +13,7 @@ import EditorToolModalWrapper from '../editorBaseTools/EditorToolModalWrapper'
 
 import applyNav from 'rjsf-tabs'
 import EditorNavs from './EditorNavs'
-import EditorArrayFieldTemplate from './EditorArrayFieldTemplate'
+import ArrayFieldTemplate from './EditorArrayFieldTemplate'
 import EditorChangesComparison from './EditorChangesComparison'
 
 import * as actionsEditor from './actions'
@@ -34,8 +34,10 @@ export class EditorSection extends React.Component {
     this.escFunction = this.escFunction.bind(this)
     this.subMenuBtnClick = this.subMenuBtnClick.bind(this)
     this.handleDropdownChange = this.handleDropdownChange.bind(this)
+    this.hideUischemaModal = this.hideUischemaModal.bind(this)
 
     this.state = {
+      showUischemaModal: true,
       schema: '',
       selecteduischema: '',
       selectedschema: '',
@@ -72,6 +74,11 @@ export class EditorSection extends React.Component {
     )
   }
 
+  hideUischemaModal(){
+    this.setState({ showUischemaModal: false })
+  }
+  
+
   handleDropdownChange(selection, dropdown) {
     const fileType = getFileType(dropdown)
     this.setState(
@@ -387,7 +394,8 @@ export class EditorSection extends React.Component {
               {editorConfigFiles.length != 0 &&
               editorSchemaFiles.length != 0 &&
               editorUIAdvancedSimpleTest == true ? (
-                <div className='schema-loader-callout uischema-loader fadeout-box'>
+                <div onClick={this.hideUischemaModal} className='schema-loader-callout uischema-loader fadeout-box'
+                style={{display: this.state.showUischemaModal ? 'block' : 'none' }}>
                   <p className='loader-callout'>
                     Change 'Presentation Mode' to unhide/hide advanced settings
                   </p>
@@ -407,7 +415,7 @@ export class EditorSection extends React.Component {
                 onChange={this.handleChange}
                 onError={this.handleError}
                 onNavChange={this.onNavChange.bind(this)}
-                ArrayFieldTemplate={EditorArrayFieldTemplate}
+                templates={{ArrayFieldTemplate}}
                 activeNav={activatedTab}
               >
                 <EditorChangesComparison