From 05678b74d98247c957faa1ca3d0bafc5f68974d1 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Wed, 23 Sep 2020 23:16:58 +0200
Subject: Add BooleanField

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

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

diff --git a/frontend/src/components/fields/BooleanField.js b/frontend/src/components/fields/BooleanField.js
new file mode 100644
index 0000000..06a6da7
--- /dev/null
+++ b/frontend/src/components/fields/BooleanField.js
@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import './BooleanField.scss';
+import {randomClassName} from "../../utils";
+
+const classNames = require('classnames');
+
+class BooleanField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+    }
+
+    render() {
+
+        const checked = this.props.checked || false;
+        const small = this.props.small || false;
+        const name = this.props.name || null;
+        const handler = () => {
+            if (this.props.onChange) {
+                this.props.onChange(!checked);
+            }
+        };
+
+        return (
+            <div className={classNames( "boolean-field", {"field-checked" : checked}, {"field-small": small})}>
+                <div className="field-input">
+                    <input type="checkbox" id={this.id} checked={checked} onChange={handler} />
+                    <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + name}</label>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default BooleanField;
-- 
cgit v1.2.3-70-g09d2