Skip to content
Snippets Groups Projects
Commit bd6139ca authored by Maximilian Giller's avatar Maximilian Giller :squid:
Browse files

Implemets generic text input change handler and image url text fields

parent 82f76595
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56742 passed
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment