Implemets generic text input change handler and image url text fields

src/editor/js/components/nodedetails.tsx

@@ -14,8 +14,7 @@ export class NodeDetails extends React.Component<propTypes> {
     constructor(props: propTypes) {
         super(props);
         this.handleNodeTypeChange = this.handleNodeTypeChange.bind(this);
-        this.handleLabelChange = this.handleLabelChange.bind(this);
-        this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
+        this.handleTextChange = this.handleTextChange.bind(this);
     }
 
     private handleNodeTypeChange(event: any) {
@@ -23,35 +22,25 @@ export class NodeDetails extends React.Component<propTypes> {
         this.props.onChange();
     }
 
-    private handleLabelChange(event: any) {
+    /**
+     * Generic function for handeling a changing text input and applying the new value to the currently selected node.
+     * @param event Change event of text input.
+     * @param property Property to give new value.
+     */
+    private handleTextChange(event: any, property: string) {
         const newValue = event.target.value;
 
         // Actual change?
-        if (this.props.selectedNode.label == newValue) {
+        if ((this.props.selectedNode as any)[property] == newValue) {
             return;
         }
 
         //TODO: Make sure, that this event is not triggered to quickly!
-        this.props.selectedNode.label = newValue;
+        (this.props.selectedNode as any)[property] = newValue;
         this.props.selectedNode.graph.storeCurrentData(
-            "Changed label of node [" + this.props.selectedNode.toString() + "]"
-        );
-
-        this.props.onChange();
-    }
-
-    private handleDescriptionChange(event: any) {
-        const newValue = event.target.value;
-
-        // Actual change?
-        if (this.props.selectedNode.description == newValue) {
-            return;
-        }
-
-        //TODO: Make sure, that this event is not triggered to quickly!
-        this.props.selectedNode.description = newValue;
-        this.props.selectedNode.graph.storeCurrentData(
-            "Changed description of node [" +
+            "Changed " +
+                property +
+                " of node [" +
                 this.props.selectedNode.toString() +
                 "]"
         );
@@ -77,7 +66,9 @@ export class NodeDetails extends React.Component<propTypes> {
                         placeholder="Enter name"
                         className="bottom-space"
                         value={this.props.selectedNode.label}
-                        onChange={this.handleLabelChange}
+                        onChange={(event) =>
+                            this.handleTextChange(event, "label")
+                        }
                     ></input>
                 </p>
                 <p>
@@ -88,58 +79,62 @@ export class NodeDetails extends React.Component<propTypes> {
                         name="node-description"
                         className="bottom-space"
                         value={this.props.selectedNode.description}
-                        onChange={this.handleDescriptionChange}
+                        onChange={(event) =>
+                            this.handleTextChange(event, "description")
+                        }
                     ></textarea>
                 </p>
                 <p>
                     <label htmlFor="node-image">Node Image</label>
                     <br />
-                    <img
-                        id="node-image-preview"
-                        className="preview-image"
-                        src={
-                            this.props.selectedNode.icon
-                                ? this.props.selectedNode.icon
-                                : undefined
-                        }
-                    />
-                    <br />
+                    {this.props.selectedNode.icon ? (
+                        <div>
+                            <img
+                                id="node-image-preview"
+                                className="preview-image"
+                                src={this.props.selectedNode.icon}
+                            />
+                            <br />
+                        </div>
+                    ) : (
+                        ""
+                    )}
                     <input
                         type="text"
                         id="node-image"
                         name="node-image"
-                        placeholder="Enter file name or URL"
+                        placeholder="Image URL"
                         className="bottom-space"
-                        value={
-                            this.props.selectedNode.icon
-                                ? this.props.selectedNode.icon
-                                : undefined
+                        value={this.props.selectedNode.icon}
+                        onChange={(event) =>
+                            this.handleTextChange(event, "icon")
                         }
                     />
                 </p>
                 <p>
                     <label htmlFor="node-detail-image">Info Image</label>
                     <br />
-                    <img
-                        id="node-detail-image-preview"
-                        className="preview-image"
-                        src={
-                            this.props.selectedNode.banner
-                                ? this.props.selectedNode.banner
-                                : undefined
-                        }
-                    />
-                    <br />
+                    {this.props.selectedNode.banner ? (
+                        <div>
+                            <img
+                                id="node-image-preview"
+                                className="preview-image"
+                                src={this.props.selectedNode.banner}
+                            />
+                            <br />
+                        </div>
+                    ) : (
+                        ""
+                    )}
                     <input
                         type="text"
                         id="node-detail-image"
                         name="node-detail-image"
-                        placeholder="Enter file name or URL"
+                        placeholder="Image URL"
                         className="bottom-space"
-                        value={
-                            this.props.selectedNode.banner
-                                ? this.props.selectedNode.banner
-                                : undefined
+                        value={this.props.selectedNode.banner}
+                        onChange={(event) =>
+                            this.handleTextChange(event, "banner")
                         }
                     />
                 </p>