Process input value inside DataEntry

This commit is contained in:
Maciej Ziarkowski 2019-10-17 13:15:48 +01:00
parent 7e9cc4cde4
commit ca4750b0be
4 changed files with 45 additions and 29 deletions

View File

@ -3,7 +3,23 @@ import PropTypes from 'prop-types';
import { DataTitleCopyable } from './data-title'; 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 ( return (
<Fragment> <Fragment>
<DataTitleCopyable <DataTitleCopyable
@ -20,7 +36,11 @@ const DataEntry: React.FunctionComponent<any> = (props) => { // TODO: remove any
maxLength={props.maxLength} maxLength={props.maxLength}
disabled={props.mode === 'view' || props.disabled} disabled={props.mode === 'view' || props.disabled}
placeholder={props.placeholder} placeholder={props.placeholder}
onChange={props.onChange} onChange={e =>
e.target.value === '' ?
null :
props.onChange(props.slug, e.target.value)
}
/> />
</Fragment> </Fragment>
); );
@ -43,3 +63,6 @@ DataEntry.propTypes = {
} }
export default DataEntry; export default DataEntry;
export {
BaseDataEntryProps
};

View File

@ -2,17 +2,10 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { DataTitleCopyable } from './data-title'; import { DataTitleCopyable } from './data-title';
import { BaseDataEntryProps } from './data-entry';
interface NumericDataEntryProps { interface NumericDataEntryProps extends 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;
value?: number; value?: number;
placeholder?: string; placeholder?: string;
step?: number; step?: number;

View File

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

View File

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