fix camera config input bug

webpack/farmware/weed_detector/config.tsx

@@ -14,8 +14,8 @@ import { WD_ENV } from "./remote_env/interfaces";
 import { envGet } from "./remote_env/selectors";
 import { SPECIAL_VALUES } from "./remote_env/constants";
 
-export function WeedDetectorConfig(props: SettingsMenuProps) {
-  const NumberBox = ({ conf, label }: {
+export class WeedDetectorConfig extends React.Component<SettingsMenuProps, {}> {
+  NumberBox = ({ conf, label }: {
     conf: keyof WD_ENV;
     label: string;
   }) => {
@@ -25,81 +25,83 @@ export function WeedDetectorConfig(props: SettingsMenuProps) {
       </label>
       <BlurableInput type="number"
         id={conf}
-        value={"" + envGet(conf, props.values)}
-        onCommit={e => props.onChange(conf, parseFloat(e.currentTarget.value))}
+        value={"" + envGet(conf, this.props.values)}
+        onCommit={e => this.props.onChange(conf, parseFloat(e.currentTarget.value))}
         placeholder={label} />
     </div>;
   };
 
-  const setDDI = (k: keyof WD_ENV) => (d: DropDownItem) => {
+  setDDI = (k: keyof WD_ENV) => (d: DropDownItem) => {
     if (_.isNumber(d.value)) {
-      props.onChange(k, d.value);
+      this.props.onChange(k, d.value);
     } else {
       throw new Error("Weed detector got a non-numeric value");
     }
   };
 
-  const find = (needle: keyof WD_ENV): DropDownItem => {
-    const wow = envGet(needle, props.values);
+  find = (needle: keyof WD_ENV): DropDownItem => {
+    const wow = envGet(needle, this.props.values);
     const ok = SPECIAL_VALUE_DDI[wow];
     return ok || NULL_CHOICE;
   };
 
-  return <div>
-    <label htmlFor="invert_hue_selection">
-      {t("Invert Hue Range Selection")}
-    </label>
-    <div>
-      <input
-        type="checkbox"
-        id="invert_hue_selection"
-        checked={!!envGet("CAMERA_CALIBRATION_invert_hue_selection", props.values)}
-        onChange={e => props.onChange("CAMERA_CALIBRATION_invert_hue_selection",
-          e.currentTarget.checked ?
-            SPECIAL_VALUES.TRUE : SPECIAL_VALUES.FALSE)} />
-    </div>
-    <NumberBox
-      conf={"CAMERA_CALIBRATION_calibration_object_separation"}
-      label={t(`Calibration Object Separation`)} />
-    <label>
-      {t(`Calibration Object Separation along axis`)}
-    </label>
-    <FBSelect
-      onChange={setDDI("CAMERA_CALIBRATION_calibration_along_axis")}
-      selectedItem={find("CAMERA_CALIBRATION_calibration_along_axis")}
-      list={CALIBRATION_DROPDOWNS}
-      placeholder="Select..." />
-    <Row>
-      <Col xs={6}>
-        <NumberBox
-          conf={"CAMERA_CALIBRATION_camera_offset_x"}
-          label={t(`Camera Offset X`)} />
-      </Col>
-      <Col xs={6}>
-        <NumberBox
-          conf={"CAMERA_CALIBRATION_camera_offset_y"}
-          label={t(`Camera Offset Y`)} />
-      </Col>
-    </Row>
-    <label htmlFor="image_bot_origin_location">
-      {t(`Origin Location in Image`)}
-    </label>
-    <FBSelect
-      list={ORIGIN_DROPDOWNS}
-      onChange={setDDI("CAMERA_CALIBRATION_image_bot_origin_location")}
-      selectedItem={find("CAMERA_CALIBRATION_image_bot_origin_location")}
-      placeholder="Select..." />
-    <Row>
-      <Col xs={6}>
-        <NumberBox
-          conf={"CAMERA_CALIBRATION_coord_scale"}
-          label={t(`Pixel coordinate scale`)} />
-      </Col>
-      <Col xs={6}>
-        <NumberBox
-          conf={"CAMERA_CALIBRATION_total_rotation_angle"}
-          label={t(`Camera rotation`)} />
-      </Col>
-    </Row>
-  </div>;
+  render() {
+    return <div>
+      <label htmlFor="invert_hue_selection">
+        {t("Invert Hue Range Selection")}
+      </label>
+      <div>
+        <input
+          type="checkbox"
+          id="invert_hue_selection"
+          checked={!!envGet("CAMERA_CALIBRATION_invert_hue_selection", this.props.values)}
+          onChange={e => this.props.onChange("CAMERA_CALIBRATION_invert_hue_selection",
+            e.currentTarget.checked ?
+              SPECIAL_VALUES.TRUE : SPECIAL_VALUES.FALSE)} />
+      </div>
+      <this.NumberBox
+        conf={"CAMERA_CALIBRATION_calibration_object_separation"}
+        label={t(`Calibration Object Separation`)} />
+      <label>
+        {t(`Calibration Object Separation along axis`)}
+      </label>
+      <FBSelect
+        onChange={this.setDDI("CAMERA_CALIBRATION_calibration_along_axis")}
+        selectedItem={this.find("CAMERA_CALIBRATION_calibration_along_axis")}
+        list={CALIBRATION_DROPDOWNS}
+        placeholder="Select..." />
+      <Row>
+        <Col xs={6}>
+          <this.NumberBox
+            conf={"CAMERA_CALIBRATION_camera_offset_x"}
+            label={t(`Camera Offset X`)} />
+        </Col>
+        <Col xs={6}>
+          <this.NumberBox
+            conf={"CAMERA_CALIBRATION_camera_offset_y"}
+            label={t(`Camera Offset Y`)} />
+        </Col>
+      </Row>
+      <label htmlFor="image_bot_origin_location">
+        {t(`Origin Location in Image`)}
+      </label>
+      <FBSelect
+        list={ORIGIN_DROPDOWNS}
+        onChange={this.setDDI("CAMERA_CALIBRATION_image_bot_origin_location")}
+        selectedItem={this.find("CAMERA_CALIBRATION_image_bot_origin_location")}
+        placeholder="Select..." />
+      <Row>
+        <Col xs={6}>
+          <this.NumberBox
+            conf={"CAMERA_CALIBRATION_coord_scale"}
+            label={t(`Pixel coordinate scale`)} />
+        </Col>
+        <Col xs={6}>
+          <this.NumberBox
+            conf={"CAMERA_CALIBRATION_total_rotation_angle"}
+            label={t(`Camera rotation`)} />
+        </Col>
+      </Row>
+    </div>;
+  }
 }