aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/fields/CheckField.js
diff options
context:
space:
mode:
authorEmiliano Ciavatta2020-09-30 20:58:05 +0000
committerEmiliano Ciavatta2020-09-30 20:58:05 +0000
commit55afd62a8cfe2cde6e627f1905ab8fe77965afd6 (patch)
tree57545a722a62d2279bfcd2e36f1cbd1da5a5736a /frontend/src/components/fields/CheckField.js
parent4cfdf6e2dfe9184e988a145495e072571d512cdc (diff)
parentd6e2aaad41f916c2080c59cf7b4e42bf87a1a03f (diff)
Merge branch 'feature/frontend' into develop
Diffstat (limited to 'frontend/src/components/fields/CheckField.js')
-rw-r--r--frontend/src/components/fields/CheckField.js37
1 files changed, 37 insertions, 0 deletions
diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js
new file mode 100644
index 0000000..33f4f83
--- /dev/null
+++ b/frontend/src/components/fields/CheckField.js
@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import './CheckField.scss';
+import './common.scss';
+import {randomClassName} from "../../utils";
+
+const classNames = require('classnames');
+
+class CheckField 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( "field", "check-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 != null ? name : "")}</label>
+ </div>
+ </div>
+ );
+ }
+}
+
+export default CheckField;