🚧 More work on React components

packages/components/src/.form/FormFieldBool/index.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+
+const Bool = props => {
+  const [value, setValue] = useState(props.dflt);
+  const toggle = () => {
+    props.updateValue(props.name, !value);
+    setValue(!value);
+  };
+  // Force state update when rerendering due to props change
+  if (props.value !== value) setValue(props.value);
+
+  return (
+    <RadioGroup onChange={toggle} value={JSON.stringify(value)}>
+      <FormControlLabel
+        control={<Radio color="primary" />}
+        value="false"
+        checked={value === "false" ? true : false}
+        label={props.labels[0]}
+        className="po-list-item"
+      />
+      <FormControlLabel
+        control={<Radio color="primary" />}
+        value="true"
+        checked={value === "true" ? true : false}
+        label={props.labels[1]}
+        className="po-list-item"
+      />
+    </RadioGroup>
+  );
+};
+
+Bool.propTypes = {
+  dflt: PropTypes.bool,
+  labels: PropTypes.arrayOf(PropTypes.string),
+  updateValue: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired
+};
+
+Bool.defaultProps = {
+  dflt: false,
+  labels: ["false", "true"]
+};
+
+export default Bool;