Process input value inside DataEntry
This commit is contained in:
parent
7e9cc4cde4
commit
ca4750b0be
@ -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
|
||||||
|
};
|
||||||
|
@ -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;
|
||||||
|
@ -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"
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user