diff options
author | Emiliano Ciavatta | 2020-09-30 20:58:05 +0000 |
---|---|---|
committer | Emiliano Ciavatta | 2020-09-30 20:58:05 +0000 |
commit | 55afd62a8cfe2cde6e627f1905ab8fe77965afd6 (patch) | |
tree | 57545a722a62d2279bfcd2e36f1cbd1da5a5736a /frontend/src/components/fields/CheckField.js | |
parent | 4cfdf6e2dfe9184e988a145495e072571d512cdc (diff) | |
parent | d6e2aaad41f916c2080c59cf7b4e42bf87a1a03f (diff) |
Merge branch 'feature/frontend' into develop
Diffstat (limited to 'frontend/src/components/fields/CheckField.js')
-rw-r--r-- | frontend/src/components/fields/CheckField.js | 37 |
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; |