CCM NG: ccm-cms-js now uses new structure of ccm-pagemodelseditor
git-svn-id: https://svn.libreccm.org/ccm/ccm_ng@5617 8810af33-2d31-482b-a856-94f89814c4dfpull/2/head
jensp
parent
1e0640d46e
commit
b8985344aa
|
|
@ -1,142 +1,134 @@
|
|||
import * as React from "react";
|
||||
import { render } from "react-dom";
|
||||
|
||||
import { AbstractComponentModelEditor,
|
||||
ComponentModel,
|
||||
ComponentModelEditorProps,
|
||||
ComponentModelEditorState,
|
||||
import {
|
||||
// AbstractComponentModelEditor,
|
||||
ComponentModel,
|
||||
BasicComponentModelEditorDialog,
|
||||
BasicComponentModelEditorDialogProps,
|
||||
BasicComponentModelEditorDialogState,
|
||||
BasicComponentModelPropertiesList,
|
||||
BasicComponentModelPropertiesListProps,
|
||||
ComponentModelEditor,
|
||||
ComponentModelEditorProps,
|
||||
ComponentModelEditorDialogProps,
|
||||
ComponentInfo,
|
||||
EditorComponents,
|
||||
// ComponentModelEditorProps,
|
||||
// ComponentModelEditorState,
|
||||
PageModelEditor,
|
||||
} from "ccm-pagemodelseditor";
|
||||
|
||||
PageModelEditor.registerComponentModelEditor(
|
||||
"org.librecms.pagemodel.CategoryTreeComponent",
|
||||
(props: ComponentModelEditorProps<ComponentModel>) => {
|
||||
return <CategoryTreeComponentEditor
|
||||
ccmApplication={props.ccmApplication}
|
||||
component={props.component as CategoryTreeComponent}
|
||||
containerKey={props.containerKey}
|
||||
dispatcherPrefix={props.dispatcherPrefix}
|
||||
pageModelName={props.pageModelName} />
|
||||
}
|
||||
);
|
||||
PageModelEditor.registerComponentModelEditor(
|
||||
"org.librecms.pagemodel.ItemListComponent",
|
||||
(props: ComponentModelEditorProps<ComponentModel>) => {
|
||||
return <ItemListComponentEditor
|
||||
ccmApplication={props.ccmApplication}
|
||||
component={props.component as ItemListComponent}
|
||||
containerKey={props.containerKey}
|
||||
dispatcherPrefix={props.dispatcherPrefix}
|
||||
pageModelName={props.pageModelName} />
|
||||
}
|
||||
);
|
||||
class CategoryTreeComponentPropertiesList
|
||||
extends React.Component<
|
||||
BasicComponentModelPropertiesListProps<CategoryTreeComponent>, {}> {
|
||||
|
||||
render(
|
||||
<PageModelEditor />,
|
||||
document.getElementById("cms-content"),
|
||||
);
|
||||
constructor(
|
||||
props: BasicComponentModelPropertiesListProps<CategoryTreeComponent>) {
|
||||
|
||||
interface CategoryTreeComponent extends ComponentModel {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
|
||||
return <BasicComponentModelPropertiesList
|
||||
component={this.props.component}>
|
||||
<dt>showFullTree</dt>
|
||||
<dd>{this.props.component.showFullTree}</dd>
|
||||
</BasicComponentModelPropertiesList>
|
||||
}
|
||||
}
|
||||
|
||||
interface CategoryTreeComponentEditorDialogState
|
||||
extends BasicComponentModelEditorDialogState {
|
||||
|
||||
showFullTree: boolean;
|
||||
}
|
||||
|
||||
interface CategoryTreeComponentEditorProps
|
||||
extends ComponentModelEditorProps<CategoryTreeComponent> {
|
||||
class CategoryTreeComponentEditorDialog
|
||||
extends React.Component<
|
||||
BasicComponentModelEditorDialogProps<CategoryTreeComponent>,
|
||||
CategoryTreeComponentEditorDialogState> {
|
||||
|
||||
}
|
||||
|
||||
interface CategoryTreeComponentEditorState
|
||||
extends ComponentModelEditorState {
|
||||
|
||||
showFullTree: boolean;
|
||||
}
|
||||
|
||||
|
||||
class CategoryTreeComponentEditor
|
||||
extends AbstractComponentModelEditor<CategoryTreeComponent,
|
||||
CategoryTreeComponentEditorProps,
|
||||
CategoryTreeComponentEditorState> {
|
||||
|
||||
public constructor(props: CategoryTreeComponentEditorProps) {
|
||||
constructor(
|
||||
props: BasicComponentModelEditorDialogProps<CategoryTreeComponent>) {
|
||||
|
||||
super(props);
|
||||
|
||||
this.setState({
|
||||
...this.state as any,
|
||||
dialogExpanded: "dialogClosed",
|
||||
showFullTree: false,
|
||||
});
|
||||
}
|
||||
|
||||
public renderPropertyList(): React.ReactFragment {
|
||||
|
||||
return <React.Fragment>
|
||||
<dt>Show full tree</dt>
|
||||
<dd>{this.props.component.showFullTree}</dd>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
public renderEditorDialog(): React.ReactFragment {
|
||||
|
||||
return <React.Fragment />;
|
||||
}
|
||||
}
|
||||
|
||||
interface ItemListComponent extends ComponentModel {
|
||||
|
||||
descending: boolean;
|
||||
limitToType: string;
|
||||
pageSize: number;
|
||||
listOrder: string[],
|
||||
}
|
||||
|
||||
interface ItemListComponentEditorProps
|
||||
extends ComponentModelEditorProps<ItemListComponent> {
|
||||
|
||||
}
|
||||
|
||||
interface ItemListComponentEditorState
|
||||
extends ComponentModelEditorState {
|
||||
|
||||
descending: boolean;
|
||||
limitToType: string;
|
||||
pageSize: number;
|
||||
listOrder: string[];
|
||||
}
|
||||
|
||||
class ItemListComponentEditor
|
||||
extends AbstractComponentModelEditor<ItemListComponent,
|
||||
ItemListComponentEditorProps,
|
||||
ItemListComponentEditorState> {
|
||||
|
||||
public constructor(props: ItemListComponentEditorProps) {
|
||||
|
||||
super(props as any);
|
||||
|
||||
this.setState({
|
||||
this.state = {
|
||||
...this.state,
|
||||
dialogExpanded: "dialogClosed",
|
||||
descending: false,
|
||||
limitToType: "",
|
||||
pageSize: 30,
|
||||
listOrder: [],
|
||||
});
|
||||
showFullTree: this.props.component.showFullTree,
|
||||
};
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
public renderPropertyList(): React.ReactFragment {
|
||||
public render(): React.ReactNode {
|
||||
|
||||
console.log("Rendering properties list for ItemListComponent...");
|
||||
console.log(`listOrder = ${this.props.component.listOrder}`);
|
||||
const idPrefix: string
|
||||
= `${this.props.containerKey}_${this.props.component.key}_`;
|
||||
|
||||
return <React.Fragment>
|
||||
<dt>descending</dt>
|
||||
return <BasicComponentModelEditorDialog
|
||||
ccmApplication={this.props.ccmApplication}
|
||||
component={this.props.component}
|
||||
containerKey={this.props.containerKey}
|
||||
dispatcherPrefix={this.props.dispatcherPrefix}
|
||||
getComponentModelProperties={this.getComponentModelProperties}
|
||||
pageModelName={this.props.pageModelName}>
|
||||
|
||||
<label htmlFor={`${idPrefix}showFullTree`}>Show full tree?</label>
|
||||
<input checked={this.props.component.showFullTree}
|
||||
id={`${idPrefix}showFullTree`}
|
||||
onChange={this.handleChange}
|
||||
type="checkbox" />
|
||||
</BasicComponentModelEditorDialog>
|
||||
}
|
||||
|
||||
private getComponentModelProperties(): {[name: string]: any} {
|
||||
|
||||
return {
|
||||
showFullTree: this.state.showFullTree,
|
||||
};
|
||||
}
|
||||
|
||||
private handleChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
|
||||
const target: HTMLInputElement = event.currentTarget;
|
||||
const idPrefix: string
|
||||
= `${this.props.containerKey}_${this.props.component.key}_`;
|
||||
|
||||
switch(target.id) {
|
||||
case `${idPrefix}showFullTree`: {
|
||||
this.setState({
|
||||
...this.state,
|
||||
showFullTree: target.checked,
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ItemListComponentPropertiesList extends React.Component<
|
||||
BasicComponentModelPropertiesListProps<ItemListComponent>, {}> {
|
||||
|
||||
constructor(
|
||||
props: BasicComponentModelPropertiesListProps<ItemListComponent>) {
|
||||
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
|
||||
return <BasicComponentModelPropertiesList
|
||||
component={this.props.component}>
|
||||
<dt>Descending?</dt>
|
||||
<dd>{this.props.component.descending}</dd>
|
||||
<dt>limitToType</dt>
|
||||
<dt>Limit to type</dt>
|
||||
<dd>{this.props.component.limitToType}</dd>
|
||||
<dt>pageSize</dt>
|
||||
<dt>Page size</dt>
|
||||
<dd>{this.props.component.pageSize}</dd>
|
||||
<dt>listOrder</dt>
|
||||
<dt>List Order</dt>
|
||||
<dd>
|
||||
{Array.isArray(this.props.component.listOrder) ?
|
||||
(
|
||||
|
|
@ -148,37 +140,342 @@ class ItemListComponentEditor
|
|||
) : ("No order set")
|
||||
}
|
||||
</dd>
|
||||
</React.Fragment>
|
||||
</BasicComponentModelPropertiesList>
|
||||
}
|
||||
}
|
||||
|
||||
interface ItemListComponentEditorDialogState
|
||||
extends BasicComponentModelEditorDialogState {
|
||||
|
||||
descending: boolean;
|
||||
limitToType: string;
|
||||
pageSize: number;
|
||||
listOrder: string[];
|
||||
}
|
||||
|
||||
class ItemListComponentEditorDialog extends React.Component<
|
||||
BasicComponentModelEditorDialogProps<ItemListComponent>,
|
||||
ItemListComponentEditorDialogState> {
|
||||
|
||||
constructor(
|
||||
props: BasicComponentModelEditorDialogProps<ItemListComponent>) {
|
||||
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
descending: this.props.component.descending,
|
||||
limitToType: this.props.component.limitToType,
|
||||
pageSize: this.props.component.pageSize,
|
||||
listOrder: this.props.component.listOrder,
|
||||
};
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
public renderEditorDialog(): React.ReactFragment {
|
||||
public render(): React.ReactNode {
|
||||
|
||||
return <React.Fragment>
|
||||
<label htmlFor="descending">
|
||||
const idPrefix: string
|
||||
= `${this.props.containerKey}_${this.props.component.key}_`;
|
||||
|
||||
return <BasicComponentModelEditorDialog
|
||||
ccmApplication={this.props.ccmApplication}
|
||||
component={this.props.component}
|
||||
containerKey={this.props.containerKey}
|
||||
dispatcherPrefix={this.props.dispatcherPrefix}
|
||||
pageModelName={this.props.pageModelName}
|
||||
getComponentModelProperties={this.getComponentModelProperties}>
|
||||
<label htmlFor={`${idPrefix}descending`}>
|
||||
Descending?
|
||||
</label>
|
||||
<input checked={this.props.component.descending}
|
||||
id="descending"
|
||||
id={`${idPrefix}descending`}
|
||||
onChange={this.handleChange}
|
||||
type="checkbox" />
|
||||
<label htmlFor="limitToType">Limit to type</label>
|
||||
<input id="limitToType"
|
||||
<label htmlFor={`${idPrefix}limitToType`}>
|
||||
Limit to type
|
||||
</label>
|
||||
<input id={`${idPrefix}limitToType`}
|
||||
maxLength={1024}
|
||||
onChange={this.handleChange}
|
||||
size={64}
|
||||
type="text"
|
||||
value={this.props.component.limitToType}/>
|
||||
<label htmlFor="pageSize">Page size</label>
|
||||
<input id="pageSize"
|
||||
<label htmlFor={`$idPrefix}pageSize`}>
|
||||
Page size
|
||||
</label>
|
||||
<input id={`${idPrefix}pageSize`}
|
||||
min="1"
|
||||
onChange={this.handleChange}
|
||||
type="number"
|
||||
value={this.props.component.pageSize}/>
|
||||
<label htmlFor="listOrder">List Order</label>
|
||||
<textarea cols={40} id="listOrder" rows={5}>
|
||||
<label htmlFor={`${idPrefix}listOrder`}>
|
||||
List Order
|
||||
</label>
|
||||
<textarea cols={40}
|
||||
id={`${idPrefix}listOrder`}
|
||||
onChange={this.handleListOrderChange}
|
||||
rows={5}>
|
||||
{Array.isArray(this.props.component.listOrder) ? (
|
||||
this.props.component.listOrder.join(", ")
|
||||
this.props.component.listOrder.join("\n")
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</textarea>
|
||||
</React.Fragment>;
|
||||
|
||||
</BasicComponentModelEditorDialog>;
|
||||
}
|
||||
|
||||
private getComponentModelProperties(): {[name: string]: any} {
|
||||
|
||||
return {
|
||||
descending: this.state.descending,
|
||||
limitToType: this.state.limitToType,
|
||||
pageSize: this.state.pageSize,
|
||||
listOrder: this.state.listOrder,
|
||||
};
|
||||
}
|
||||
|
||||
private handleChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
|
||||
const target: HTMLInputElement = event.currentTarget;
|
||||
const idPrefix: string
|
||||
= `${this.props.containerKey}_${this.props.component.key}_`;
|
||||
|
||||
switch(target.id) {
|
||||
case `${idPrefix}descending`: {
|
||||
this.setState({
|
||||
...this.state,
|
||||
descending: target.checked,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case `${idPrefix}limitToType`: {
|
||||
this.setState({
|
||||
...this.state,
|
||||
limitToType: target.value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case `${idPrefix}pageSize`: {
|
||||
this.setState({
|
||||
...this.state,
|
||||
pageSize: target.valueAsNumber,
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private handleListOrderChange(
|
||||
event: React.ChangeEvent<HTMLTextAreaElement>) {
|
||||
|
||||
const target: HTMLTextAreaElement = event.currentTarget;
|
||||
const componentId: string
|
||||
= `${this.props.containerKey}_${this.props.component.key}`
|
||||
+ `_listOrder`;
|
||||
|
||||
this.setState({
|
||||
...this.state,
|
||||
listOrder: target.value.split("\n"),
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// PageModelEditor.registerComponentModelEditor(
|
||||
// "org.librecms.pagemodel.CategoryTreeComponent",
|
||||
// (props: ComponentModelEditorProps<ComponentModel>) => {
|
||||
// return <CategoryTreeComponentEditor
|
||||
// ccmApplication={props.ccmApplication}
|
||||
// component={props.component as CategoryTreeComponent}
|
||||
// containerKey={props.containerKey}
|
||||
// dispatcherPrefix={props.dispatcherPrefix}
|
||||
// pageModelName={props.pageModelName} />
|
||||
// }
|
||||
// );
|
||||
// PageModelEditor.registerComponentModelEditor(
|
||||
// "org.librecms.pagemodel.ItemListComponent",
|
||||
// (props: ComponentModelEditorProps<ComponentModel>) => {
|
||||
// return <ItemListComponentEditor
|
||||
// ccmApplication={props.ccmApplication}
|
||||
// component={props.component as ItemListComponent}
|
||||
// containerKey={props.containerKey}
|
||||
// dispatcherPrefix={props.dispatcherPrefix}
|
||||
// pageModelName={props.pageModelName} />
|
||||
// }
|
||||
// );
|
||||
|
||||
render(
|
||||
<PageModelEditor />,
|
||||
document.getElementById("cms-content"),
|
||||
);
|
||||
|
||||
interface CategoryTreeComponent extends ComponentModel {
|
||||
|
||||
showFullTree: boolean;
|
||||
}
|
||||
|
||||
// interface CategoryTreeComponentEditorProps
|
||||
// extends ComponentModelEditorProps<CategoryTreeComponent> {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// interface CategoryTreeComponentEditorState
|
||||
// extends ComponentModelEditorState {
|
||||
//
|
||||
// showFullTree: boolean;
|
||||
// }
|
||||
//
|
||||
//
|
||||
// class CategoryTreeComponentEditor
|
||||
// extends AbstractComponentModelEditor<CategoryTreeComponent,
|
||||
// CategoryTreeComponentEditorProps,
|
||||
// CategoryTreeComponentEditorState> {
|
||||
//
|
||||
// public constructor(props: CategoryTreeComponentEditorProps) {
|
||||
//
|
||||
// super(props);
|
||||
//
|
||||
// this.setState({
|
||||
// ...this.state as any,
|
||||
// dialogExpanded: "dialogClosed",
|
||||
// showFullTree: false,
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// public renderPropertyList(): React.ReactFragment {
|
||||
//
|
||||
// return <React.Fragment>
|
||||
// <dt>Show full tree</dt>
|
||||
// <dd>{this.props.component.showFullTree}</dd>
|
||||
// </React.Fragment>;
|
||||
// }
|
||||
//
|
||||
// public renderEditorDialog(): React.ReactFragment {
|
||||
//
|
||||
// return <React.Fragment />;
|
||||
// }
|
||||
// }
|
||||
|
||||
interface ItemListComponent extends ComponentModel {
|
||||
|
||||
descending: boolean;
|
||||
limitToType: string;
|
||||
pageSize: number;
|
||||
listOrder: string[],
|
||||
}
|
||||
|
||||
ComponentModelEditor.registerEditorComponents(
|
||||
"org.librecms.pagemodel.CategoryTreeComponent",
|
||||
{
|
||||
editorDialog:
|
||||
CategoryTreeComponentEditorDialog as typeof React.Component,
|
||||
propertiesList:
|
||||
CategoryTreeComponentPropertiesList as typeof React.Component,
|
||||
}
|
||||
);
|
||||
|
||||
ComponentModelEditor.registerEditorComponents(
|
||||
"org.librecms.pagemodel.ItemListComponent",
|
||||
{
|
||||
editorDialog:
|
||||
ItemListComponentEditorDialog as typeof React.Component,
|
||||
propertiesList:
|
||||
ItemListComponentPropertiesList as typeof React.Component,
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// interface ItemListComponentEditorProps
|
||||
// extends ComponentModelEditorProps<ItemListComponent> {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// interface ItemListComponentEditorState
|
||||
// extends ComponentModelEditorState {
|
||||
//
|
||||
// descending: boolean;
|
||||
// limitToType: string;
|
||||
// pageSize: number;
|
||||
// listOrder: string[];
|
||||
// }
|
||||
//
|
||||
// class ItemListComponentEditor
|
||||
// extends AbstractComponentModelEditor<ItemListComponent,
|
||||
// ItemListComponentEditorProps,
|
||||
// ItemListComponentEditorState> {
|
||||
//
|
||||
// public constructor(props: ItemListComponentEditorProps) {
|
||||
//
|
||||
// super(props as any);
|
||||
//
|
||||
// this.setState({
|
||||
// ...this.state,
|
||||
// dialogExpanded: "dialogClosed",
|
||||
// descending: false,
|
||||
// limitToType: "",
|
||||
// pageSize: 30,
|
||||
// listOrder: [],
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// public renderPropertyList(): React.ReactFragment {
|
||||
//
|
||||
// console.log("Rendering properties list for ItemListComponent...");
|
||||
// console.log(`listOrder = ${this.props.component.listOrder}`);
|
||||
//
|
||||
// return <React.Fragment>
|
||||
// <dt>descending</dt>
|
||||
// <dd>{this.props.component.descending}</dd>
|
||||
// <dt>limitToType</dt>
|
||||
// <dd>{this.props.component.limitToType}</dd>
|
||||
// <dt>pageSize</dt>
|
||||
// <dd>{this.props.component.pageSize}</dd>
|
||||
// <dt>listOrder</dt>
|
||||
// <dd>
|
||||
// {Array.isArray(this.props.component.listOrder) ?
|
||||
// (
|
||||
// this.props.component.listOrder.map((order) => {
|
||||
// <li>
|
||||
// {order}
|
||||
// </li>
|
||||
// })
|
||||
// ) : ("No order set")
|
||||
// }
|
||||
// </dd>
|
||||
// </React.Fragment>
|
||||
// }
|
||||
//
|
||||
// public renderEditorDialog(): React.ReactFragment {
|
||||
//
|
||||
// return <React.Fragment>
|
||||
// <label htmlFor="descending">
|
||||
// Descending?
|
||||
// </label>
|
||||
// <input checked={this.props.component.descending}
|
||||
// id="descending"
|
||||
// type="checkbox" />
|
||||
// <label htmlFor="limitToType">Limit to type</label>
|
||||
// <input id="limitToType"
|
||||
// maxLength={1024}
|
||||
// size={64}
|
||||
// type="text"
|
||||
// value={this.props.component.limitToType}/>
|
||||
// <label htmlFor="pageSize">Page size</label>
|
||||
// <input id="pageSize"
|
||||
// min="1"
|
||||
// type="number"
|
||||
// value={this.props.component.pageSize}/>
|
||||
// <label htmlFor="listOrder">List Order</label>
|
||||
// <textarea cols={40} id="listOrder" rows={5}>
|
||||
// {Array.isArray(this.props.component.listOrder) ? (
|
||||
// this.props.component.listOrder.join(", ")
|
||||
// ) : (
|
||||
// ""
|
||||
// )}
|
||||
// </textarea>
|
||||
// </React.Fragment>;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -10,10 +10,19 @@ import {
|
|||
|
||||
export {
|
||||
// OldAbstractComponentModelEditor,
|
||||
ComponentModel,
|
||||
BasicComponentModelEditorDialog,
|
||||
BasicComponentModelEditorDialogProps,
|
||||
BasicComponentModelEditorDialogState,
|
||||
BasicComponentModelPropertiesList,
|
||||
BasicComponentModelPropertiesListProps,
|
||||
// OldComponentModelEditorProps,
|
||||
// OldComponentModelEditorState,
|
||||
ComponentModel,
|
||||
ComponentModelEditor,
|
||||
ComponentModelEditorProps,
|
||||
ComponentModelEditorDialogProps,
|
||||
ComponentInfo,
|
||||
EditorComponents,
|
||||
PageModelEditor,
|
||||
PageModelEditorState,
|
||||
// PageModelEditorProps,
|
||||
|
|
@ -1128,8 +1137,8 @@ class BasicComponentModelEditorDialog
|
|||
|
||||
interface EditorComponents {
|
||||
|
||||
propertiesList: typeof React.Component;
|
||||
editorDialog: typeof React.Component;
|
||||
propertiesList: typeof React.Component;
|
||||
}
|
||||
|
||||
interface ComponentModelEditorProps {
|
||||
|
|
@ -1144,42 +1153,42 @@ interface ComponentModelEditorProps {
|
|||
class ComponentModelEditor
|
||||
extends React.Component<ComponentModelEditorProps, {}> {
|
||||
|
||||
private editorComponents: {[type: string]: EditorComponents};
|
||||
private propertiesListComponents: {[type: string]: typeof React.Component};
|
||||
private editorDialogComponents: {[type: string]: typeof React.Component};
|
||||
private static editorComponents: {[type: string]: EditorComponents} = {};
|
||||
// private propertiesListComponents: {[type: string]: typeof React.Component};
|
||||
// private editorDialogComponents: {[type: string]: typeof React.Component};
|
||||
|
||||
constructor(props: ComponentModelEditorProps) {
|
||||
|
||||
super(props);
|
||||
|
||||
this.editorComponents = {};
|
||||
this.propertiesListComponents = {};
|
||||
this.editorDialogComponents = {};
|
||||
// this.editorComponents = {};
|
||||
// this.propertiesListComponents = {};
|
||||
// this.editorDialogComponents = {};
|
||||
}
|
||||
|
||||
public registerEditorComponents(type: string,
|
||||
components: EditorComponents) {
|
||||
public static registerEditorComponents(type: string,
|
||||
components: EditorComponents) {
|
||||
|
||||
this.editorComponents = {
|
||||
...this.editorComponents,
|
||||
ComponentModelEditor.editorComponents = {
|
||||
...ComponentModelEditor.editorComponents,
|
||||
type: components,
|
||||
};
|
||||
|
||||
this.propertiesListComponents = {
|
||||
...this.propertiesListComponents,
|
||||
type: components.propertiesList,
|
||||
};
|
||||
|
||||
this.editorDialogComponents = {
|
||||
...this.editorDialogComponents,
|
||||
type: components.editorDialog,
|
||||
}
|
||||
// this.propertiesListComponents = {
|
||||
// ...this.propertiesListComponents,
|
||||
// type: components.propertiesList,
|
||||
// };
|
||||
//
|
||||
// this.editorDialogComponents = {
|
||||
// ...this.editorDialogComponents,
|
||||
// type: components.editorDialog,
|
||||
// }
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
|
||||
const components: EditorComponents
|
||||
= this.editorComponents[this.props.component.type];
|
||||
= ComponentModelEditor.editorComponents[this.props.component.type];
|
||||
const PropertiesList: typeof React.Component
|
||||
= components.propertiesList;
|
||||
const EditorDialog: typeof React.Component
|
||||
|
|
@ -1199,8 +1208,8 @@ class ComponentModelEditor
|
|||
|
||||
private getEditorComponents(type: string): EditorComponents {
|
||||
|
||||
if (this.editorComponents.hasOwnProperty(type)) {
|
||||
return this.editorComponents[type];
|
||||
if (ComponentModelEditor.editorComponents.hasOwnProperty(type)) {
|
||||
return ComponentModelEditor.editorComponents[type];
|
||||
} else {
|
||||
const basicComponents: EditorComponents = {
|
||||
propertiesList:
|
||||
|
|
|
|||
Loading…
Reference in New Issue