Apply review comments

Author: TheZoker

packages/example/src/App.css

@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  background: #f3f4fa;
 }
 
 .header {
@@ -35,7 +36,7 @@ body {
   margin: 0 10px 0 0;
 }
 .tools .example-selector select {
-  background: #f3f4fa;
+  background: #fff;
   border-radius: 9px;
   height: 30px;
   border: 0;
@@ -80,20 +81,11 @@ body {
   text-align: center;
 }
 .demo-wrapper .demoform .demo {
-  background: #f3f4fa;
+  background: #fff;
   border-radius: 9px;
   padding: 20px;
   margin-top: 20px;
 }
-.demo-wrapper .demoform .demo h4 {
-  text-align: center;
-  margin-top: -30px;
-}
-.demo-wrapper .demoform .demo h4 span {
-  padding: 10px;
-  background-color: #fff;
-  border-radius: 5px;
-}
 
 .action-button {
   margin-right: 10px;
@@ -135,7 +127,7 @@ body {
   max-width: 400px;
   margin: 40px auto 20px auto;
   padding: 0;
-  background: #f3f4fa;
+  background: #fff;
   border-radius: 9px;
   display: inline-block;
 }
@@ -167,13 +159,9 @@ body {
   background-color: #0047a1;
 }
 .react-tabs .panel-wrapper {
-  max-height: 150px;
   overflow: scroll;
   padding: 0 15px;
 }
-.react-tabs .panel-wrapper.full-height {
-  max-height: none !important;
-}
 .react-tabs .panel-wrapper .react-tabs__tab-panel {
   display: none;
 }

packages/example/src/App.tsx

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { JsonForms, JsonFormsInitStateProps, JsonFormsReactProps } from '@jsonforms/react';
 import { ExampleDescription } from '@jsonforms/examples';
 import {
@@ -91,10 +91,10 @@ const App = ({ examples, cells, renderers}: AppProps) => {
   const [currentExample, setExample] = useState<ExampleDescription>(examples[0]);
   const [currentIndex, setIndex] = useState<number>(0);
   const [dataAsString, setDataAsString] = useState<any>('');
-  const [schemaAsString, setSchemaAsString] = useState<any>('');
-  const [uiSchemaAsString, setUiSchemaAsString] = useState<any>('');
   const [props, setProps] = useState<any>(getProps(currentExample, cells, renderers));
   const [showPanel, setShowPanel] = useState<boolean>(true);
+  const schemaAsString = useMemo(() => JSON.stringify(props.schema, null, 2), [props.schema]);
+  const uiSchemaAsString = useMemo(() => JSON.stringify(props.uischema, null, 2), [props.uischema]);
 
   const actions: Action[] = currentExample.actions;
 
@@ -119,41 +119,10 @@ const App = ({ examples, cells, renderers}: AppProps) => {
     }
   };
 
-  useEffect(() => {
-    if(props.schema != undefined) {
-      setSchemaAsString(JSON.stringify(props.schema, null, 2));
-    } else {
-      setSchemaAsString('No schema set');
-    }
-    if(props.uischema != undefined) {
-      setUiSchemaAsString(JSON.stringify(props.uischema, null, 2));
-    } else {
-      setUiSchemaAsString('No ui schema set');
-    }
-  }, [props.schema, props.uischema]);
-
-  useEffect(() => {
-    var panel = document.getElementsByClassName('props-panel')[0];
-    if(showPanel) {
-      panel.classList.remove('hide');
-    } else {
-      panel.classList.add('hide');
-    }
-  }, [showPanel]);
-
   const changeData = (data: any) => {
     setDataAsString(JSON.stringify(data, null, 2));
   };
 
-  const togglePanelHeight = () => {
-    var panel = document.getElementsByClassName('panel-wrapper')[0];
-    panel.classList.toggle('full-height');
-  }
-
-  const togglePanel = (checked: boolean) => {
-    setShowPanel(checked);
-  }
-
   return (
     <div>
       <div className='App'>
@@ -182,47 +151,47 @@ const App = ({ examples, cells, renderers}: AppProps) => {
               </select>
             </div>
             <div className='toggle-panel'>
-              <input type='checkbox' id='panel' name='panel' checked={showPanel} onChange={e => togglePanel(e.target.checked)} />
+              <input type='checkbox' id='panel' name='panel' checked={showPanel} onChange={() => setShowPanel(!showPanel)} />
               <label htmlFor='panel'>Show sidepanel</label>
             </div>
           </div>
 
           <div className='demo-wrapper'>
-            <div className='props-panel'>
-              <Tabs>
-                <TabList>
-                  <Tab>Data</Tab>
-                  <Tab>Schema</Tab>
-                  <Tab>UISchema</Tab>
-                </TabList>
-                <p className='expand-hint' onClick={() => togglePanelHeight()}>Click here to expand</p>
-                <div className='panel-wrapper'>
-                  <TabPanel>
-                    <Highlight className='json'>
-                      {dataAsString}
-                    </Highlight>
-                  </TabPanel>
-                  <TabPanel>
-                    <Highlight className='json'>
-                      {schemaAsString}
-                    </Highlight>
-                  </TabPanel>
-                  <TabPanel>
-                    <Highlight className='json'>
-                      {uiSchemaAsString}
-                    </Highlight>
-                  </TabPanel>
-                </div>
-              </Tabs>
-            </div>
+            { showPanel && 
+              <div className='props-panel'>
+                <Tabs>
+                  <TabList>
+                    <Tab>Data</Tab>
+                    <Tab>Schema</Tab>
+                    <Tab>UISchema</Tab>
+                  </TabList>
+                  <div className="panel-wrapper">
+                    <TabPanel>
+                      <Highlight className='json'>
+                        {dataAsString}
+                      </Highlight>
+                    </TabPanel>
+                    <TabPanel>
+                      <Highlight className='json'>
+                        {schemaAsString}
+                      </Highlight>
+                    </TabPanel>
+                    <TabPanel>
+                      <Highlight className='json'>
+                        {uiSchemaAsString}
+                      </Highlight>
+                    </TabPanel>
+                  </div>
+                </Tabs>
+              </div>
+            }
             <div className='demoform'>
               <div className='buttons'>
                 {actions?.map((action: Action, index: number) => (
                   <button className='action-button' onClick={ () => setProps((oldProps: JsonFormsInitStateProps) => action.apply(oldProps))} key={index}>{action.label}</button>
                 ))}
               </div>
               <div className='demo'>
-                <h4><span>Example</span></h4>
                 <ResolvedJsonForms
                   key={currentIndex}
                   {...props}