From 8d07bfe5f17534b7301a064aeaf8ed8071f10a40 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Wed, 23 Sep 2020 20:19:09 +0200
Subject: Frontend refactor: checkpoint

---
 frontend/src/components/fields/StringField.js | 31 +++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 frontend/src/components/fields/StringField.js

(limited to 'frontend/src/components/fields/StringField.js')

diff --git a/frontend/src/components/fields/StringField.js b/frontend/src/components/fields/StringField.js
new file mode 100644
index 0000000..09fe24d
--- /dev/null
+++ b/frontend/src/components/fields/StringField.js
@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import './StringField.scss';
+
+const classNames = require('classnames');
+
+class StringField extends Component {
+
+    render() {
+        return (
+            <div className={classNames("field", "d-inline-block", {"field-active" : this.props.isActive},
+                {"field-invalid": this.props.isInvalid})}>
+                <div className="input-group">
+                    <div className="field-name-wrapper">
+                        <span className="field-name" id={`field-${this.props.name}`}>{this.props.name}:</span>
+                    </div>
+                    <input placeholder={this.props.defaultValue} aria-label={this.props.name}
+                           aria-describedby={`filter-${this.props.name}`} className="field-value"
+                           onChange={this.props.onValueChanged} value={this.props.value} />
+                </div>
+
+                { this.props.active &&
+                <div className="field-clear">
+                        <span className="filter-delete-icon" onClick={() => this.props.onValueChanged("")}>del</span>
+                </div>
+                }
+            </div>
+        );
+    }
+}
+
+export default StringField;
-- 
cgit v1.2.3-70-g09d2