Skip to content
This repository was archived by the owner on Nov 19, 2025. It is now read-only.
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