diff --git a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css new file mode 100644 index 00000000..e18692e7 --- /dev/null +++ b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css @@ -0,0 +1,5 @@ +.input-group .no-entries { + border-style: dashed; + border-color: #aaa; + margin-bottom: 0.4em; +} \ No newline at end of file diff --git a/app/src/frontend/building/data-components/multi-data-entry.tsx b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx similarity index 86% rename from app/src/frontend/building/data-components/multi-data-entry.tsx rename to app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx index 29db6330..c2b30583 100644 --- a/app/src/frontend/building/data-components/multi-data-entry.tsx +++ b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx @@ -1,8 +1,10 @@ import React, { Component, Fragment } from 'react'; -import { BaseDataEntryProps } from './data-entry'; -import { DataEntryInput, TextDataEntryInputProps } from './data-entry-input'; -import { DataTitleCopyable } from './data-title'; +import './multi-data-entry.css'; + +import { BaseDataEntryProps } from '../data-entry'; +import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input'; +import { DataTitleCopyable } from '../data-title'; interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps { @@ -18,7 +20,7 @@ class MultiDataEntry extends Component constructor(props) { super(props); this.state = { - newValue: '' + newValue: null }; this.setNewValue = this.setNewValue.bind(this); @@ -47,6 +49,7 @@ class MultiDataEntry extends Component } addNew(event) { event.preventDefault(); + if (this.state.newValue == undefined) return; const values = this.cloneValues().concat(this.state.newValue); this.setState({newValue: ''}); this.props.onChange(this.props.slug, values); @@ -73,7 +76,9 @@ class MultiDataEntry extends Component
    { values.length === 0 && -
    No entries
    +
    + +
    } { values.map((val, i) => ( @@ -87,7 +92,6 @@ class MultiDataEntry extends Component onChange={(key, val) => this.edit(i, val)} maxLength={props.maxLength} - placeholder={props.placeholder} valueTransform={props.valueTransform} autofill={props.autofill} /> @@ -120,9 +124,12 @@ class MultiDataEntry extends Component autofill={props.autofill} />
    - + onClick={this.addNew} + disabled={this.state.newValue == undefined} + >+
    } diff --git a/app/src/frontend/building/data-containers/age.tsx b/app/src/frontend/building/data-containers/age.tsx index 1be202d7..61d03e0a 100644 --- a/app/src/frontend/building/data-containers/age.tsx +++ b/app/src/frontend/building/data-containers/age.tsx @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { dataFields } from '../../data_fields'; -import MultiDataEntry from '../data-components/multi-data-entry'; +import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry'; import NumericDataEntry from '../data-components/numeric-data-entry'; import SelectDataEntry from '../data-components/select-data-entry'; import TextboxDataEntry from '../data-components/textbox-data-entry'; diff --git a/app/src/frontend/building/data-containers/use.tsx b/app/src/frontend/building/data-containers/use.tsx index 67f292d3..7956f9ab 100644 --- a/app/src/frontend/building/data-containers/use.tsx +++ b/app/src/frontend/building/data-containers/use.tsx @@ -3,7 +3,7 @@ import React, { Fragment } from 'react'; import InfoBox from '../../components/info-box'; import { dataFields } from '../../data_fields'; import DataEntry from '../data-components/data-entry'; -import MultiDataEntry from '../data-components/multi-data-entry'; +import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry'; import withCopyEdit from '../data-container'; import { CategoryViewProps } from './category-view-props';