Initial commit

website/src/Validated/ValidatedCheckbox.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Form, Popup, Checkbox } from 'semantic-ui-react'
+
+// This is an example of a validated component with a value that can change itself, that cannot ever be invalid.
+
+export class ValidatedCheckbox extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    width: PropTypes.number,
+    validator: PropTypes.object.isRequired,
+    className: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = props.validator.getField(props.name)
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  handleChange(e, data) {
+    const { validator, name } = this.props
+    const state = validator.getField(name)
+
+    if (!state.readOnly && !state.disabled) {
+      this.setState(validator.updateValue(name, data.checked))
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.validator !== this.props.validator) {
+      this.setState(nextProps.validator.getField(nextProps.name))
+    }
+  }
+
+  render() {
+    return (
+      <Form.Field width={this.props.width} disabled={this.state.disabled} className={this.props.className}>
+        <Popup content={this.props.message} position='bottom center' hoverable trigger={
+          <Checkbox checked={!!this.state.value} name={this.props.name} label={this.props.label}
+            onChange={this.handleChange} />} />
+      </Form.Field>
+    )
+  }
+}