From aabf381cf971ca6fc5f09b94df4a42c448b3e151 Mon Sep 17 00:00:00 2001 From: mma Date: Wed, 29 Jul 2020 22:54:52 +0200 Subject: [PATCH] Added selection support for primitive values --- .../components/ConfigEditor/EnumEditor.tsx | 37 +------------- .../components/ConfigEditor/NumberEditor.tsx | 23 +++++---- .../ConfigEditor/SelectionEditorBase.tsx | 48 +++++++++++++++++++ .../components/ConfigEditor/StringEditor.tsx | 10 ++-- 4 files changed, 68 insertions(+), 50 deletions(-) create mode 100644 src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/SelectionEditorBase.tsx diff --git a/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/EnumEditor.tsx b/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/EnumEditor.tsx index 47a6f35..dba2bd4 100644 --- a/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/EnumEditor.tsx +++ b/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 { +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, entry: Entry): void { - entry.Value.Current = e.currentTarget.value; - this.setState({ PossibleValues: this.props.Entry.Value.Possible }); - this.forceUpdate(); - } - - public render(): React.ReactNode { - return ( - ) => this.onValueChange(e, this.props.Entry)}> - { - this.state.PossibleValues.map((possibleValue, idx) => { - return (); - }) - } - - ); } } diff --git a/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/NumberEditor.tsx b/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/NumberEditor.tsx index 87f2b48..77046ca 100644 --- a/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/NumberEditor.tsx +++ b/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 () => 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) => 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(); } } diff --git a/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/SelectionEditorBase.tsx b/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/SelectionEditorBase.tsx new file mode 100644 index 0000000..6a27e84 --- /dev/null +++ b/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 { + 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, entry: Entry): void { + entry.Value.Current = e.currentTarget.value; + this.setState({ PossibleValues: this.props.Entry.Value.Possible }); + this.forceUpdate(); + } + + public render(): React.ReactNode { + return ( + ) => this.onValueChange(e, this.props.Entry)}> + { + this.state.PossibleValues.map((possibleValue, idx) => { + return (); + }) + } + + ); + } +} diff --git a/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/StringEditor.tsx b/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/StringEditor.tsx index f7188f1..9f21f77 100644 --- a/src/Moryx.Runtime.Maintenance.Web.UI/src/modules/components/ConfigEditor/StringEditor.tsx +++ b/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 (); + return super.render(); } public render(): React.ReactNode {