Process input value inside DataEntry

app/src/frontend/building/data-components/data-entry.tsx

@@ -3,7 +3,23 @@ import PropTypes from 'prop-types';
 
 import { DataTitleCopyable } from './data-title';
 
-const DataEntry: React.FunctionComponent<any> = (props) => { // TODO: remove any
+interface BaseDataEntryProps {
+    slug: string;
+    title: string;
+    tooltip?: string;
+    disabled?: boolean;
+    copy: any; // CopyProps clashes with propTypes
+    mode: 'view' | 'edit' | 'multi-edit';
+    onChange: (key: string, value: any) => void;
+}
+
+interface DataEntryProps extends BaseDataEntryProps {
+    value: string;
+    maxLength?: number;
+    placeholder?: string;
+}
+
+const DataEntry: React.FunctionComponent<DataEntryProps> = (props) => {
     return (
         <Fragment>
             <DataTitleCopyable
@@ -20,7 +36,11 @@ const DataEntry: React.FunctionComponent<any> = (props) => { // TODO: remove any
                 maxLength={props.maxLength}
                 disabled={props.mode === 'view' || props.disabled}
                 placeholder={props.placeholder}
-                onChange={props.onChange}
+                onChange={e =>
+                    e.target.value === '' ?
+                        null :
+                        props.onChange(props.slug, e.target.value)
+                }
             />
         </Fragment>
     );
@@ -43,3 +63,6 @@ DataEntry.propTypes = {
 }
 
 export default DataEntry;
+export {
+    BaseDataEntryProps
+};

app/src/frontend/building/data-components/numeric-data-entry.tsx

@@ -2,17 +2,10 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import { DataTitleCopyable } from './data-title';
+import { BaseDataEntryProps } from './data-entry';
 
 
-interface NumericDataEntryProps {
-    slug: string;
-    title: string;
-    tooltip?: string;
-    disabled?: boolean;
-    copy: any; // CopyProps clashes with propTypes
-    mode: 'view' | 'edit' | 'multi-edit';
-    onChange: (key: string, value: any) => void;
-
+interface NumericDataEntryProps extends BaseDataEntryProps {
     value?: number;
     placeholder?: string;
     step?: number;

app/src/frontend/building/data-containers/location.tsx

@@ -15,7 +15,7 @@ const LocationView = (props) => (
             value={props.building.location_name}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             tooltip="May not be needed for many buildings."
             placeholder="Building name (if any)"
             disabled={true}
@@ -35,7 +35,7 @@ const LocationView = (props) => (
             value={props.building.location_street}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             disabled={true}
             />
         <DataEntry
@@ -44,7 +44,7 @@ const LocationView = (props) => (
             value={props.building.location_line_two}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             disabled={true}
             />
         <DataEntry
@@ -53,7 +53,7 @@ const LocationView = (props) => (
             value={props.building.location_town}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             />
         <DataEntry
             title="Postcode"
@@ -61,7 +61,7 @@ const LocationView = (props) => (
             value={props.building.location_postcode}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             maxLength={8}
             />
         <DataEntry
@@ -71,7 +71,7 @@ const LocationView = (props) => (
             mode={props.mode}
             copy={props.copy}
             tooltip="Ordnance Survey Topography Layer ID (to be filled automatically)"
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             disabled={true}
             />
         <UPRNsDataEntry
@@ -87,7 +87,7 @@ const LocationView = (props) => (
             copy={props.copy}
             tooltip="OpenStreetMap feature ID"
             maxLength={20}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             />
         <NumericDataEntry
             title="Latitude"

app/src/frontend/building/data-containers/planning.tsx

@@ -17,7 +17,7 @@ const PlanningView = (props) => (
             value={props.building.planning_portal_link}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             />
         <DataEntryGroup name="Listing and protections" >
             <CheckboxDataEntry
@@ -34,7 +34,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_conservation_area_name}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <CheckboxDataEntry
                 title="Is listed on the National Heritage List for England?"
@@ -50,7 +50,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_list_id}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <SelectDataEntry
                 title="National Heritage List for England list type"
@@ -87,7 +87,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_heritage_at_risk_id}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <DataEntry
                 title="World heritage list id"
@@ -95,7 +95,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_world_list_id}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <CheckboxDataEntry
                 title="In the Greater London Historic Environment Record?"
@@ -111,7 +111,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_glher_url}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <CheckboxDataEntry
                 title="In an Architectural Priority Area?"
@@ -127,7 +127,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_apa_name}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <DataEntry
                 title="Architectural Priority Area tier"
@@ -135,7 +135,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_apa_tier}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <CheckboxDataEntry
                 title="Is locally listed?"
@@ -151,7 +151,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_local_list_url}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
             <CheckboxDataEntry
                 title="Within a historic area assessment?"
@@ -167,7 +167,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_historic_area_assessment_url}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 />
         </DataEntryGroup>
         <DataEntryGroup name="Demolition and demolition history">
@@ -195,7 +195,7 @@ const PlanningView = (props) => (
                 value={props.building.planning_demolition_history}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 disabled={true}
                 />
         </DataEntryGroup>