Skip to content

Commit 61de15a

Browse files
committed
[WIP] Refactor layout
1 parent 836f7b8 commit 61de15a

File tree

13 files changed

+301
-176
lines changed

13 files changed

+301
-176
lines changed

app/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const App = () => (
2222
schemaService={schemaService}
2323
schemaProviders={defaultSchemaProviders}
2424
schemaDecorators={defaultSchemaDecorators}
25-
editorTabs={[
25+
previewTabs={[
2626
{ name: 'Preview (React)', Component: ReactMaterialPreview },
2727
{ name: 'Preview (Angular)', Component: AngularMaterialPreview },
2828
]}

jsonforms-editor/src/JsonFormsEditor.tsx

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ import { SelectedElement } from './core/selection';
2727
import { tryFindByUUID } from './core/util/schemasUtil';
2828
import {
2929
defaultEditorRenderers,
30-
defaultEditorTabs,
30+
defaultPreviewTabs,
3131
EditorPanel,
3232
} from './editor';
33-
import { EditorTab } from './editor/components/EditorPanel';
33+
import { PreviewTab } from './editor/components/EditorPanel';
3434
import { PalettePanel } from './palette-panel';
3535
import { defaultPropertyRenderers, PropertiesPanel } from './properties';
3636
import {
@@ -54,14 +54,15 @@ const useStyles = makeStyles((theme) => ({
5454
reflexContainer: {
5555
flex: '1',
5656
alignItems: 'stretch',
57+
overflow: 'auto',
5758
},
5859
}));
5960

6061
interface JsonFormsEditorProps {
6162
schemaService?: SchemaService;
6263
schemaProviders: PropertySchemasProvider[];
6364
schemaDecorators: PropertySchemasDecorator[];
64-
editorTabs?: EditorTab[] | null;
65+
previewTabs?: PreviewTab[] | null;
6566
paletteService?: PaletteService;
6667
editorRenderers?: JsonFormsRendererRegistryEntry[];
6768
propertyRenderers?: JsonFormsRendererRegistryEntry[];
@@ -87,7 +88,7 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
8788
schemaProviders,
8889
schemaDecorators,
8990
editorRenderers = defaultEditorRenderers,
90-
editorTabs: editorTabsProp = defaultEditorTabs,
91+
previewTabs: previewTabsProp = defaultPreviewTabs,
9192
propertyRenderers = defaultPropertyRenderers,
9293
header = Header,
9394
footer = Footer,
@@ -97,7 +98,7 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
9798
const [propertiesService] = useState<PropertiesService>(
9899
propertiesServiceProvider(schemaProviders, schemaDecorators)
99100
);
100-
const editorTabs = editorTabsProp ?? undefined;
101+
const previewTabs = previewTabsProp ?? undefined;
101102
const headerComponent = header ?? undefined;
102103
const footerComponent = footer ?? undefined;
103104

@@ -138,7 +139,7 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
138139
<DndProvider backend={Backend}>
139140
<JsonFormsEditorUi
140141
editorRenderers={editorRenderers}
141-
editorTabs={editorTabs}
142+
previewTabs={previewTabs}
142143
propertyRenderers={propertyRenderers}
143144
header={headerComponent}
144145
footer={footerComponent}
@@ -149,44 +150,39 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
149150
};
150151

151152
interface JsonFormsEditorUiProps {
152-
editorTabs?: EditorTab[];
153+
previewTabs?: PreviewTab[];
153154
editorRenderers: JsonFormsRendererRegistryEntry[];
154155
propertyRenderers: JsonFormsRendererRegistryEntry[];
155156
header?: ComponentType;
156157
footer?: ComponentType;
157158
}
158159
const JsonFormsEditorUi: React.FC<JsonFormsEditorUiProps> = ({
159-
editorTabs,
160+
previewTabs,
160161
editorRenderers,
161162
propertyRenderers,
162163
header,
163164
footer,
164165
}) => {
165166
const classes = useStyles();
166167
return (
167-
<Layout HeaderComponent={header} FooterComponent={footer}>
168+
<Layout
169+
HeaderComponent={header}
170+
FooterComponent={footer}
171+
drawerContent={<PalettePanel propertyRenderers={propertyRenderers} />}
172+
>
168173
<ReflexContainer
169174
orientation='vertical'
170175
className={classes.reflexContainer}
171176
>
172-
<ReflexElement minSize={200} flex={1}>
173-
<div className={`${classes.pane} ${classes.leftPane}`}>
174-
<PalettePanel />
175-
</div>
176-
</ReflexElement>
177-
<ReflexSplitter propagate />
178177
<ReflexElement minSize={200} flex={2}>
179178
<div className={`${classes.pane} ${classes.centerPane}`}>
180-
<EditorPanel
181-
editorTabs={editorTabs}
182-
editorRenderers={editorRenderers}
183-
/>
179+
<EditorPanel editorRenderers={editorRenderers} />
184180
</div>
185181
</ReflexElement>
186182
<ReflexSplitter propagate />
187183
<ReflexElement minSize={200} flex={1}>
188184
<div className={`${classes.pane} ${classes.rightPane}`}>
189-
<PropertiesPanel propertyRenderers={propertyRenderers} />
185+
<PropertiesPanel previewTabs={previewTabs} />
190186
</div>
191187
</ReflexElement>
192188
</ReflexContainer>

jsonforms-editor/src/core/components/Header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const Header: React.FC = () => {
3333
const openDownloadDialog = () => setOpen(true);
3434

3535
return (
36-
<AppBar position='static' elevation={0}>
36+
<>
3737
<Toolbar>
3838
<Typography
3939
variant='h6'
@@ -59,6 +59,6 @@ export const Header: React.FC = () => {
5959
uiSchema={uiSchema}
6060
/>
6161
)}
62-
</AppBar>
62+
</>
6363
);
6464
};

jsonforms-editor/src/core/components/Layout.tsx

Lines changed: 91 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,127 @@
55
* https://github.com/eclipsesource/jsonforms-editor/blob/master/LICENSE
66
* ---------------------------------------------------------------------
77
*/
8-
import { makeStyles } from '@material-ui/core';
8+
import AppBar from '@material-ui/core/AppBar';
9+
import Divider from '@material-ui/core/Divider';
10+
import Drawer from '@material-ui/core/Drawer';
11+
import IconButton from '@material-ui/core/IconButton';
12+
import { makeStyles } from '@material-ui/core/styles';
13+
import Toolbar from '@material-ui/core/Toolbar';
14+
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
15+
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
916
import React from 'react';
1017

18+
import { DrawerContextInstance } from '../context';
19+
20+
const footerHeight = '40px';
21+
const drawerWidth = '400px';
22+
1123
const useStyles = makeStyles((theme) => ({
24+
appBar: {
25+
zIndex: theme.zIndex.drawer + 1,
26+
},
1227
main: {
13-
marginTop: theme.spacing(2),
14-
marginBottom: theme.spacing(2),
1528
minHeight: 0,
29+
flexGrow: 1,
30+
display: 'flex',
31+
flexDirection: 'column',
1632
},
1733
container: {
18-
display: 'grid',
1934
height: '100vh',
20-
gridTemplateAreas: 'header content footer',
21-
gridTemplateColumns: '1fr',
22-
gridTemplateRows: 'auto 1fr auto',
35+
display: 'flex',
2336
},
2437
footer: {
25-
padding: theme.spacing(2, 2),
38+
zIndex: theme.zIndex.drawer + 1,
39+
padding: theme.spacing(1, 1),
2640
backgroundColor:
2741
theme.palette.type === 'light'
2842
? theme.palette.grey[200]
2943
: theme.palette.grey[800],
44+
height: footerHeight,
45+
bottom: 0,
46+
left: 'auto',
47+
right: 0,
48+
position: 'fixed',
49+
width: '100%',
50+
},
51+
fakeFooter: {
52+
marginBottom: footerHeight,
53+
},
54+
drawer: {
55+
width: drawerWidth,
56+
flexShrink: 0,
57+
whiteSpace: 'nowrap',
58+
},
59+
drawerOpen: {
60+
width: drawerWidth,
61+
transition: theme.transitions.create('width', {
62+
easing: theme.transitions.easing.sharp,
63+
duration: theme.transitions.duration.enteringScreen,
64+
}),
65+
},
66+
drawerClose: {
67+
transition: theme.transitions.create('width', {
68+
easing: theme.transitions.easing.sharp,
69+
duration: theme.transitions.duration.leavingScreen,
70+
}),
71+
overflowX: 'hidden',
72+
width: theme.spacing(7) + 1,
73+
[theme.breakpoints.up('sm')]: {
74+
width: theme.spacing(9) + 1,
75+
},
3076
},
3177
}));
3278

3379
interface LayoutProps {
3480
HeaderComponent?: React.ComponentType;
3581
FooterComponent?: React.ComponentType;
82+
drawerContent?: React.ReactNode;
3683
}
3784

3885
export const Layout: React.FC<LayoutProps> = ({
3986
HeaderComponent,
4087
FooterComponent,
88+
drawerContent,
4189
children,
4290
}) => {
91+
const [open, setOpen] = React.useState(true);
92+
93+
// const toggleDrawerClose = () => {
94+
// setOpen(!open);
95+
// };
96+
const openDrawer = () => {
97+
setOpen(true);
98+
};
4399
const classes = useStyles();
100+
const classNameOpen = open ? classes.drawerOpen : classes.drawerClose;
101+
44102
return (
45103
<div className={classes.container}>
46-
<header>{HeaderComponent ? <HeaderComponent /> : null}</header>
47-
<main className={classes.main}>{children}</main>
104+
<AppBar position='fixed' elevation={0} className={classes.appBar}>
105+
{HeaderComponent ? <HeaderComponent /> : null}
106+
</AppBar>
107+
<Drawer
108+
variant='permanent'
109+
className={`${classes.drawer} ${classNameOpen}`}
110+
classes={{
111+
paper: classNameOpen,
112+
}}
113+
>
114+
<DrawerContextInstance.Provider value={{ open, openDrawer }}>
115+
<Toolbar />
116+
{/* <IconButton onClick={toggleDrawerClose}>
117+
{open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
118+
</IconButton>
119+
<Divider /> */}
120+
{drawerContent}
121+
<div className={classes.fakeFooter} />
122+
</DrawerContextInstance.Provider>
123+
</Drawer>
124+
<main className={classes.main}>
125+
<Toolbar />
126+
{children}
127+
<div className={classes.fakeFooter} />
128+
</main>
48129
<footer className={FooterComponent ? classes.footer : undefined}>
49130
{FooterComponent ? <FooterComponent /> : null}
50131
</footer>

jsonforms-editor/src/core/context/context.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ export const EditorContextInstance = React.createContext<EditorContext>(
3535

3636
export const useEditorContext = (): EditorContext =>
3737
useContext(EditorContextInstance);
38+
export interface DrawerContext {
39+
open: boolean;
40+
openDrawer: () => void;
41+
}
42+
export const DrawerContextInstance = React.createContext<DrawerContext>(
43+
defaultContext
44+
);
45+
46+
export const useDrawerContext = (): DrawerContext =>
47+
useContext(DrawerContextInstance);
3848

3949
export const useGitLabService = (): SchemaService => {
4050
const { schemaService } = useEditorContext();

jsonforms-editor/src/core/dnd/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const newUISchemaElement = (
3939
export interface MoveUISchemaElement {
4040
type: 'moveUiSchemaElement';
4141
uiSchemaElement: EditorUISchemaElement;
42-
schema?: SchemaElement;
42+
// schema?: SchemaElement;
4343
}
4444

4545
const moveUISchemaElement = (

jsonforms-editor/src/core/util/hooks.ts

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -22,48 +22,17 @@ const doBuildUiSchema = (uiSchema: EditorUISchemaElement | undefined) =>
2222
*/
2323
export const useExportSchema = () => {
2424
const schema = useSchema();
25-
return useTransform(schema, doBuildJsonSchema);
25+
// return useTransform(schema, doBuildJsonSchema);
26+
return doBuildJsonSchema(schema);
2627
};
2728

2829
/**
2930
* Ui Schema for export
3031
*/
3132
export const useExportUiSchema = () => {
3233
const uiSchema = useUiSchema();
33-
return useTransform(uiSchema, doBuildUiSchema);
34-
};
35-
36-
/**
37-
* Transforms the given element whenever it changes.
38-
*/
39-
export const useTransform = <T1, T2>(
40-
element: T1,
41-
transform: (el: T1) => T2
42-
) => {
43-
const [transformedElement, setTransformedElement] = useState(
44-
transform(element)
45-
);
46-
useEffectAfterInit(() => setTransformedElement(transform(element)), [
47-
element,
48-
transform,
49-
]);
50-
return transformedElement;
51-
};
52-
53-
/**
54-
* Hook similar to `useEffect` with the difference that the effect
55-
* is only executed from the second call onwards.
56-
*/
57-
const useEffectAfterInit = (effect: () => void, dependencies: Array<any>) => {
58-
const firstExecution = useRef(true);
59-
useEffect(() => {
60-
if (firstExecution.current) {
61-
firstExecution.current = false;
62-
return;
63-
}
64-
effect();
65-
// eslint-disable-next-line react-hooks/exhaustive-deps
66-
}, [...dependencies]);
34+
// return useTransform(uiSchema, doBuildUiSchema);
35+
return doBuildUiSchema(uiSchema);
6736
};
6837

6938
/** Force a rerender */

jsonforms-editor/src/editor/components/EditorElement.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const EditorElement: React.FC<EditorElementProps> = ({
7979
wrappedElement.linkedSchemaElement
8080
);
8181
const [{ isDragging }, drag] = useDrag({
82-
item: DndItems.moveUISchemaElement(wrappedElement, elementSchema),
82+
item: DndItems.moveUISchemaElement(wrappedElement),
8383
collect: (monitor) => ({
8484
isDragging: !!monitor.isDragging(),
8585
}),

0 commit comments

Comments
 (0)