Fix demo editor

Author: rvsia

packages/react-renderer-demo/src/app/pages/live-editor.js

@@ -12,7 +12,7 @@ import dynamic from 'next/dynamic';
 
 import MapperContext from '@docs/components/mappers-context';
 const CodeEditor = dynamic(import('@docs/components/code-editor'), {
-  ssr: false
+  ssr: false,
 });
 
 const baseStructure = {
@@ -22,11 +22,11 @@ const baseStructure = {
         {
           title: 'Tab 1',
           description: 'Text boxes and text areas',
-          key: '553',
+          name: '553',
           fields: [
             {
               title: 'Text boxes',
-              key: '637',
+              name: '637',
               fields: [
                 {
                   name: 'switch_1',
@@ -115,7 +115,7 @@ const baseStructure = {
             },
             {
               title: 'Text areas',
-              key: '638',
+              name: '638',
               fields: [
                 {
                   name: 'textarea_box_1',
@@ -132,11 +132,11 @@ const baseStructure = {
         {
           title: 'Tab 2',
           description: 'Checks',
-          key: '554',
+          name: '554',
           fields: [
             {
               title: 'Check boxes',
-              key: '639',
+              name: '639',
               fields: [
                 {
                   name: 'check_box_1',
@@ -155,7 +155,7 @@ const baseStructure = {
             },
             {
               title: 'Radios',
-              key: '640',
+              name: '640',
               fields: [
                 {
                   name: 'radio_button_1',
@@ -229,11 +229,11 @@ const baseStructure = {
         {
           title: 'Tab 3',
           description: '',
-          key: '555',
+          name: '555',
           fields: [
             {
               title: 'Dropdowns',
-              key: '641',
+              name: '641',
               fields: [
                 {
                   name: 'dropdown_list_1',
@@ -345,11 +345,11 @@ const baseStructure = {
         {
           title: 'Tab 4',
           description: '',
-          key: '556',
+          name: '556',
           fields: [
             {
               title: 'Datepickers',
-              key: '642',
+              name: '642',
               fields: [
                 {
                   name: 'date_control_1',
@@ -368,7 +368,7 @@ const baseStructure = {
             },
             {
               title: 'Timepickers',
-              key: '643',
+              name: '643',
               fields: [
                 {
                   name: 'date_time_control_1',
@@ -391,11 +391,11 @@ const baseStructure = {
         {
           title: 'Mixed',
           description: '',
-          key: '558',
+          name: '558',
           fields: [
             {
               title: 'New Section',
-              key: '645',
+              name: '645',
               fields: [
                 {
                   name: 'text_box_10',
@@ -481,7 +481,7 @@ const baseStructure = {
         },
       ],
       component: components.TABS,
-      key: '57',
+      name: '57',
     },
   ],
 };
@@ -504,7 +504,7 @@ const LiveEditor = () => {
     }
 
     try {
-      defaultSchemaValidator(schema, formFieldsMapper, layoutMapper);
+      defaultSchemaValidator(schema, mappers.mappers.pf4.formFieldsMapper, mappers.mappers.pf4.layoutMapper);
       setState(state => ({ ...state, parsedSchema: schema }));
     } catch (error) {
       console.warn('not correct json schema', error);
@@ -519,17 +519,18 @@ const LiveEditor = () => {
     >
       <Grid
         item
-        xs={ 6 }
+        md={ 6 }
+        xs={ 12 }
       >
         <div style={{ width: '100%', paddingTop: 10, background: '#1d1f21' }}>
           <CodeEditor
             readOnly={ false }
             mode="json"
             onChange={ onChange }
             value={ value }
+            maxLines={ 50 }
           />
         </div>
-
         <div>
           <Grid container spacing={ 6 }>
             <Grid item xs={ 12 } md={ 6 }>
@@ -554,7 +555,8 @@ const LiveEditor = () => {
       </Grid>
       <Grid
         item
-        xs={ 6 }
+        md={ 6 }
+        xs={ 12 }
       >
         <Paper square style={{ padding: 16, paddingLeft: 24 }}>
           <Grid container spacing={ 6 }>