Added selection support for primitive values

src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/EnumEditor.tsx

@@ -3,44 +3,11 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import * as React from "react";
-import { Input } from "reactstrap";
-import Entry from "../../models/Entry";
 import { InputEditorBasePropModel } from "./InputEditorBase";
+import SelectionEditorBase from "./SelectionEditorBase";
 
-interface EnumEditorStateModel {
-    PossibleValues: string[];
-}
-
-export default class EnumEditor extends React.Component<InputEditorBasePropModel, EnumEditorStateModel> {
+export default class EnumEditor extends SelectionEditorBase {
     constructor(props: InputEditorBasePropModel) {
         super(props);
-
-        const possibleValues: string[] = [...this.props.Entry.Value.Possible];
-        if (possibleValues.find((value: string) => value === this.props.Entry.Value.Current) === undefined) {
-            possibleValues.unshift("");
-        }
-
-        this.state = { PossibleValues: possibleValues };
-    }
-
-    public onValueChange(e: React.FormEvent<HTMLInputElement>, entry: Entry): void {
-        entry.Value.Current = e.currentTarget.value;
-        this.setState({ PossibleValues: this.props.Entry.Value.Possible });
-        this.forceUpdate();
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <Input type="select" value={this.props.Entry.Value.Current !== null ? this.props.Entry.Value.Current : ""}
-                   disabled={this.props.Entry.Value.IsReadOnly || this.props.IsReadOnly}
-                   onChange={(e: React.FormEvent<HTMLInputElement>) => this.onValueChange(e, this.props.Entry)}>
-                {
-                    this.state.PossibleValues.map((possibleValue, idx) => {
-                        return (<option key={idx} value={possibleValue}>{possibleValue}</option>);
-                    })
-                }
-            </Input>
-        );
     }
 }

src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/NumberEditor.tsx

@@ -6,20 +6,25 @@
 import * as React from "react";
 import { Input } from "reactstrap";
 import { toString } from "../../models/EntryValueType";
-import InputEditorBase, { InputEditorBasePropModel } from "./InputEditorBase";
+import { InputEditorBasePropModel } from "./InputEditorBase";
+import SelectionEditorBase from "./SelectionEditorBase";
 
-export default class NumberEditor extends InputEditorBase {
+export default class NumberEditor extends SelectionEditorBase {
     constructor(props: InputEditorBasePropModel) {
         super(props);
-        this.state = { };
     }
 
-    public render(): React.ReactNode {
+    private preRenderInput(): React.ReactNode {
         return (<Input type="number"
-                        onChange={(e: React.FormEvent<HTMLInputElement>) => this.onValueChange(e, this.props.Entry)}
-                        placeholder={"Please enter a value of type: " + toString(this.props.Entry.Value.Type) + " ..."}
-                        disabled={this.props.Entry.Value.IsReadOnly || this.props.IsReadOnly}
-                        value={this.props.Entry.Value.Current}
-                />);
+                onChange={(e: React.FormEvent<HTMLInputElement>) => this.onValueChange(e, this.props.Entry)}
+                placeholder={"Please enter a value of type: " + toString(this.props.Entry.Value.Type) + " ..."}
+                disabled={this.props.Entry.Value.IsReadOnly || this.props.IsReadOnly}
+                value={this.props.Entry.Value.Current}
+        />);
+    }
+
+    public render(): React.ReactNode {
+        return this.props.Entry.Value.Possible != null && this.props.Entry.Value.Possible.length > 0 ?
+                super.render() : this.preRenderInput();
     }
 }

src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/SelectionEditorBase.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2020, Phoenix Contact GmbH & Co. KG
+ * Licensed under the Apache License, Version 2.0
+*/
+
+import * as React from "react";
+import { Input } from "reactstrap";
+import Entry from "../../models/Entry";
+import { InputEditorBasePropModel } from "./InputEditorBase";
+
+interface SelectionStateModel {
+    PossibleValues: string[];
+}
+
+export default class SelectionEditorBase extends React.Component<InputEditorBasePropModel, SelectionStateModel> {
+    constructor(props: InputEditorBasePropModel) {
+        super(props);
+
+        if (this.props.Entry.Value.Possible != null) {
+            const possibleValues: string[] = [...this.props.Entry.Value.Possible];
+            if (possibleValues.find((value: string) => value === this.props.Entry.Value.Current) === undefined) {
+                possibleValues.unshift("");
+            }
+
+            this.state = { PossibleValues: possibleValues };
+        }
+    }
+
+    public onValueChange(e: React.FormEvent<HTMLInputElement>, entry: Entry): void {
+        entry.Value.Current = e.currentTarget.value;
+        this.setState({ PossibleValues: this.props.Entry.Value.Possible });
+        this.forceUpdate();
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <Input type="select" value={this.props.Entry.Value.Current !== null ? this.props.Entry.Value.Current : ""}
+                   disabled={this.props.Entry.Value.IsReadOnly || this.props.IsReadOnly}
+                   onChange={(e: React.FormEvent<HTMLInputElement>) => this.onValueChange(e, this.props.Entry)}>
+                {
+                    this.state.PossibleValues.map((possibleValue, idx) => {
+                        return (<option key={idx} value={possibleValue}>{possibleValue}</option>);
+                    })
+                }
+            </Input>
+        );
+    }
+}

src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/StringEditor.tsx

@@ -5,14 +5,12 @@
 
 import * as React from "react";
 import { Input } from "reactstrap";
-import { toString } from "../../models/EntryValueType";
-import EnumEditor from "./EnumEditor";
-import InputEditorBase, { InputEditorBasePropModel } from "./InputEditorBase";
+import { InputEditorBasePropModel } from "./InputEditorBase";
+import SelectionEditorBase from "./SelectionEditorBase";
 
-export default class StringEditor extends InputEditorBase {
+export default class StringEditor extends SelectionEditorBase {
     constructor(props: InputEditorBasePropModel) {
         super(props);
-        this.state = { };
     }
 
     private preRenderInput(): React.ReactNode {
@@ -24,7 +22,7 @@ export default class StringEditor extends InputEditorBase {
     }
 
     private preRenderPossibleValueList(): React.ReactNode {
-        return (<EnumEditor Entry={this.props.Entry} IsReadOnly={this.props.IsReadOnly} />);
+        return super.render();
     }
 
     public render(): React.ReactNode {