Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Refactor layout #116

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const App = () => (
schemaService={schemaService}
schemaProviders={defaultSchemaProviders}
schemaDecorators={defaultSchemaDecorators}
editorTabs={[
previewTabs={[
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good find

{ name: 'Preview (React)', Component: ReactMaterialPreview },
{ name: 'Preview (Angular)', Component: AngularMaterialPreview },
]}
Expand Down
47 changes: 19 additions & 28 deletions jsonforms-editor/src/JsonFormsEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,12 @@ import { SelectedElement } from './core/selection';
import { tryFindByUUID } from './core/util/schemasUtil';
import {
defaultEditorRenderers,
defaultEditorTabs,
defaultPreviewTabs,
EditorPanel,
} from './editor';
import { EditorTab } from './editor/components/EditorPanel';
import {
defaultPalettePanelTabs,
PalettePanel,
PaletteTab,
} from './palette-panel';
} from './editor';
import { PreviewTab } from './editor';
import { defaultPalettePanelTabs, PalettePanel } from './palette-panel';
import { defaultPropertyRenderers, PropertiesPanel } from './properties';
import {
PropertiesService,
Expand All @@ -58,14 +55,15 @@ const useStyles = makeStyles((theme) => ({
reflexContainer: {
flex: '1',
alignItems: 'stretch',
overflow: 'auto',
},
}));

interface JsonFormsEditorProps {
schemaService?: SchemaService;
schemaProviders: PropertySchemasProvider[];
schemaDecorators: PropertySchemasDecorator[];
editorTabs?: EditorTab[] | null;
previewTabs?: PreviewTab[] | null;
paletteService?: PaletteService;
paletteTabs?: PaletteTab[] | null;
editorRenderers?: JsonFormsRendererRegistryEntry[];
Expand All @@ -92,7 +90,7 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
schemaProviders,
schemaDecorators,
editorRenderers = defaultEditorRenderers,
editorTabs: editorTabsProp = defaultEditorTabs,
previewTabs: previewTabsProp = defaultPreviewTabs,
paletteTabs = defaultPalettePanelTabs,
propertyRenderers = defaultPropertyRenderers,
header = Header,
Expand All @@ -103,7 +101,7 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
const [propertiesService] = useState<PropertiesService>(
propertiesServiceProvider(schemaProviders, schemaDecorators)
);
const editorTabs = editorTabsProp ?? undefined;
const previewTabs = previewTabsProp ?? undefined;
const headerComponent = header ?? undefined;
const footerComponent = footer ?? undefined;

Expand Down Expand Up @@ -139,13 +137,13 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
schemaService,
paletteService,
propertiesService,
propertyRenderers,
}}
>
<DndProvider backend={Backend}>
<JsonFormsEditorUi
editorRenderers={editorRenderers}
editorTabs={editorTabs}
propertyRenderers={propertyRenderers}
previewTabs={previewTabs}
header={headerComponent}
footer={footerComponent}
paletteTabs={paletteTabs ?? undefined}
Expand All @@ -156,46 +154,39 @@ export const JsonFormsEditor: React.FC<JsonFormsEditorProps> = ({
};

interface JsonFormsEditorUiProps {
editorTabs?: EditorTab[];
previewTabs?: PreviewTab[];
editorRenderers: JsonFormsRendererRegistryEntry[];
propertyRenderers: JsonFormsRendererRegistryEntry[];
header?: ComponentType;
footer?: ComponentType;
paletteTabs?: PaletteTab[];
}
const JsonFormsEditorUi: React.FC<JsonFormsEditorUiProps> = ({
editorTabs,
previewTabs,
editorRenderers,
propertyRenderers,
header,
footer,
paletteTabs,
}) => {
const classes = useStyles();
return (
<Layout HeaderComponent={header} FooterComponent={footer}>
<Layout
HeaderComponent={header}
FooterComponent={footer}
paletteTabs={paletteTabs}
>
<ReflexContainer
orientation='vertical'
className={classes.reflexContainer}
>
<ReflexElement minSize={200} flex={1}>
<div className={`${classes.pane} ${classes.leftPane}`}>
<PalettePanel paletteTabs={paletteTabs} />
</div>
</ReflexElement>
<ReflexSplitter propagate />
<ReflexElement minSize={200} flex={2}>
<div className={`${classes.pane} ${classes.centerPane}`}>
<EditorPanel
editorTabs={editorTabs}
editorRenderers={editorRenderers}
/>
<EditorPanel editorRenderers={editorRenderers} />
</div>
</ReflexElement>
<ReflexSplitter propagate />
<ReflexElement minSize={200} flex={1}>
<div className={`${classes.pane} ${classes.rightPane}`}>
<PropertiesPanel propertyRenderers={propertyRenderers} />
<PropertiesPanel previewTabs={previewTabs} />
</div>
</ReflexElement>
</ReflexContainer>
Expand Down
20 changes: 18 additions & 2 deletions jsonforms-editor/src/core/api/paletteService.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,19 @@

import React from 'react';

import { GroupIcon, HorizontalIcon, LabelIcon, VerticalIcon } from '../icons';
import {
ControlIcon,
GroupIcon,
HorizontalIcon,
LabelIcon,
VerticalIcon,
} from '../icons';
import { EditorUISchemaElement } from '../model/uischema';
import { createLabel, createLayout } from '../util/generators/uiSchema';
import {
createEmptyControl,
createLabel,
createLayout,
} from '../util/generators/uiSchema';

export interface PaletteService {
getPaletteElements(): PaletteElement[];
Expand Down Expand Up @@ -48,6 +58,12 @@ const paletteElements: PaletteElement[] = [
icon: <LabelIcon />,
uiSchemaElementProvider: () => createLabel(),
},
{
type: 'Control',
label: 'Control',
icon: <ControlIcon />,
uiSchemaElementProvider: () => createEmptyControl(),
},
];

export class DefaultPaletteService implements PaletteService {
Expand Down
95 changes: 95 additions & 0 deletions jsonforms-editor/src/core/components/EditableControl.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/**
* ---------------------------------------------------------------------
* Copyright (c) 2020 EclipseSource Munich
* Licensed under MIT
* https://github.com/eclipsesource/jsonforms-editor/blob/master/LICENSE
* ---------------------------------------------------------------------
*/

import { Grid, TextField } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
import React from 'react';

import { useDispatch, useSchema } from '../context';
import {
Actions,
getChildren,
getScope,
isArrayElement,
isObjectElement,
SchemaElement,
} from '../model';
import { EditorControl } from '../model/uischema';

interface EditableControlProps {
uischema: EditorControl;
}
export const EditableControl: React.FC<EditableControlProps> = ({
uischema,
}) => {
const dispatch = useDispatch();
const baseSchema = useSchema() as SchemaElement;
const handleLabelChange = (event: React.ChangeEvent<HTMLInputElement>) => {
dispatch(
Actions.updateUISchemaElement(uischema.uuid, {
label: event.target.value,
})
);
};
const handleScopeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
dispatch(
Actions.changeControlScope(
uischema.uuid,
(event.target.value as any).scope,
(event.target.value as any).uuid
)
);
};
const scopes = getChildren(baseSchema)
.flatMap((child) => {
// if the child is the only item of an array, use its children instead
if (
(isObjectElement(child) &&
isArrayElement(child.parent) &&
child.parent.items === child) ||
isObjectElement(child)
) {
return getChildren(child);
}
return [child];
})
.map((e) => ({ scope: `#${getScope(e)}`, uuid: e.uuid }));
const scopeValues = scopes.filter((s) => s.scope.endsWith(uischema.scope));
const scopeValue =
scopeValues && scopeValues.length === 1 ? scopeValues[0] : '';
return (
<Grid container direction={'column'}>
<Grid item xs>
<TextField
id='filled-name'
label='Label'
value={uischema.label ?? ''}
onChange={handleLabelChange}
fullWidth
/>
</Grid>
<Grid item xs>
<TextField
id='standard-select-currency'
select
label='Scope'
value={scopeValue}
onChange={handleScopeChange}
fullWidth
helperText='Please select your scope'
>
{scopes.map((scope) => (
<MenuItem key={scope.scope} value={scope as any}>
{scope.scope}
</MenuItem>
))}
</TextField>
</Grid>
</Grid>
);
};
4 changes: 2 additions & 2 deletions jsonforms-editor/src/core/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const Header: React.FC = () => {
const openDownloadDialog = () => setOpen(true);

return (
<AppBar position='static' elevation={0}>
<>
<Toolbar>
<Typography
variant='h6'
Expand All @@ -59,6 +59,6 @@ export const Header: React.FC = () => {
uiSchema={uiSchema}
/>
)}
</AppBar>
</>
);
};
Loading