Extract grid inputs to <GridInput/>

frontend/farm_designer/plants/grid/grid_inputs.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { BlurableInput } from "../../../ui/blurable_input";
+import {
+  PlantGridData,
+  PlantGridKey,
+  plantGridKeys,
+} from "./constants";
+
+interface GridInputProps {
+  disabled: boolean;
+  grid: PlantGridData;
+  onChange(key: PlantGridKey, value: number): void;
+}
+
+const createCB = (key: PlantGridKey, cb: GridInputProps["onChange"]) =>
+  (x: React.ChangeEvent<HTMLInputElement>) => {
+    const number = parseInt(x.currentTarget.value, 10);
+    if (!isNaN(number)) {
+      cb(key, number);
+    }
+  };
+
+export function GridInput(props: GridInputProps) {
+  return <div>
+    {plantGridKeys.map(key => {
+      return <div key={key}>
+        {key}
+        <BlurableInput
+          disabled={props.disabled}
+          value={props.grid[key]}
+          onCommit={createCB(key, props.onChange)} />
+      </div>;
+    })}
+  </div>;
+}

frontend/farm_designer/plants/grid/plant_grid.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-import { BlurableInput } from "../../../ui";
 import {
   EMPTY_PLANT_GRID,
   PlantGridKey,
-  plantGridKeys,
   PlantGridProps,
   PlantGridState
 } from "./constants";
@@ -13,6 +11,7 @@ import { uuid } from "farmbot";
 import { saveGrid, stashGrid } from "./thunks";
 import { error } from "../../../toast/toast";
 import { t } from "../../../i18next_wrapper";
+import { GridInput } from "./grid_inputs";
 
 export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
   state: PlantGridState = {
@@ -20,11 +19,14 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
     gridId: uuid()
   };
 
-  onchange = (key: PlantGridKey) =>
-    (x: React.ChangeEvent<HTMLInputElement>) => this.setState({
-      ...this.state,
-      grid: { ...this.state.grid, [key]: parseInt(x.currentTarget.value, 10) }
-    });
+  onchange = (key: PlantGridKey, val: number) => {
+    const grid = { ...this.state.grid, [key]: val };
+    this.setState({ grid });
+  };
+
+  componentWillUnmount() {
+    if (this.state.status === "dirty") { this.revertPreview(); }
+  }
 
   performPreview = () => {
     const { numPlantsH, numPlantsV } = this.state.grid;
@@ -54,15 +56,10 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
   }
 
   inputs = () => {
-    return plantGridKeys.map(key => {
-      return <div key={key}>
-        {key}
-        <BlurableInput
-          disabled={this.state.status === "dirty"}
-          value={this.state.grid[key]}
-          onCommit={this.onchange(key)} />
-      </div>;
-    });
+    return <GridInput
+      disabled={this.state.status === "dirty"}
+      grid={this.state.grid}
+      onChange={this.onchange} />;
   }
 
   buttons = () => {