a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve multi-data-entry UI

Browse Source 
The "No entries" state is now contained in a dashed-border box
Adding an empty entry is not not possible
This commit is contained in:
Maciej Ziarkowski 2020-01-09 19:43:59 +00:00
parent 494ec52afb
commit 09c9261677
4 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css Normal file
View File

@ -0,0 +1,5 @@
.input-group .no-entries {
border-style: dashed;
border-color: #aaa;
margin-bottom: 0.4em;
}

23
app/src/frontend/building/data-components/multi-data-entry.tsx → app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
View File

@ -1,8 +1,10 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { BaseDataEntryProps } from './data-entry'; import './multi-data-entry.css';
import { DataEntryInput, TextDataEntryInputProps } from './data-entry-input';
import { DataTitleCopyable } from './data-title'; import { BaseDataEntryProps } from '../data-entry';
import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
import { DataTitleCopyable } from '../data-title';
interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps { interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
@ -18,7 +20,7 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
newValue: '' newValue: null
}; };
this.setNewValue = this.setNewValue.bind(this); this.setNewValue = this.setNewValue.bind(this);
@ -47,6 +49,7 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
} }
addNew(event) { addNew(event) {
event.preventDefault(); event.preventDefault();
if (this.state.newValue == undefined) return;
const values = this.cloneValues().concat(this.state.newValue); const values = this.cloneValues().concat(this.state.newValue);
this.setState({newValue: ''}); this.setState({newValue: ''});
this.props.onChange(this.props.slug, values); this.props.onChange(this.props.slug, values);
@ -73,7 +76,9 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
<ul className="data-link-list"> <ul className="data-link-list">
{ {
values.length === 0 && values.length === 0 &&
<div>No entries</div> <div className="input-group">
<input className="form-control no-entries" type="text" value="No entries" disabled={true} />
</div>
} }
{ {
values.map((val, i) => ( values.map((val, i) => (
@ -87,7 +92,6 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
onChange={(key, val) => this.edit(i, val)} onChange={(key, val) => this.edit(i, val)}
maxLength={props.maxLength} maxLength={props.maxLength}
placeholder={props.placeholder}
valueTransform={props.valueTransform} valueTransform={props.valueTransform}
autofill={props.autofill} autofill={props.autofill}
/> />
@ -120,9 +124,12 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
autofill={props.autofill} autofill={props.autofill}
/> />
<div className="input-group-append"> <div className="input-group-append">
<button type="button" onClick={this.addNew} <button type="button"
className="btn btn-outline-dark"
title="Add to list" title="Add to list"
className="btn btn-outline-dark">+</button> onClick={this.addNew}
disabled={this.state.newValue == undefined}
>+</button>
</div> </div>
</div> </div>
} }

2
app/src/frontend/building/data-containers/age.tsx
View File

@ -1,7 +1,7 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { dataFields } from '../../data_fields'; 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 NumericDataEntry from '../data-components/numeric-data-entry';
import SelectDataEntry from '../data-components/select-data-entry'; import SelectDataEntry from '../data-components/select-data-entry';
import TextboxDataEntry from '../data-components/textbox-data-entry'; import TextboxDataEntry from '../data-components/textbox-data-entry';

2
app/src/frontend/building/data-containers/use.tsx
View File

@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
import InfoBox from '../../components/info-box'; import InfoBox from '../../components/info-box';
import { dataFields } from '../../data_fields'; import { dataFields } from '../../data_fields';
import DataEntry from '../data-components/data-entry'; 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 withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';