Skip to content

Commit

Permalink
Apply review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheZoker
TheZoker committed Feb 11, 2022
1 parent b9392e3 commit c8d0213
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 79 deletions.
20 changes: 4 additions & 16 deletions packages/example/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #f3f4fa;
}

.header {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
95 changes: 32 additions & 63 deletions packages/example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;

Expand All @@ -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'>
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit c8d0213

Please sign in to comment.