Improve data netry list UI for new entry
This commit is contained in:
parent
c9176f96ac
commit
27b7b72a57
@ -5,6 +5,7 @@ import './multi-data-entry.css';
|
||||
import { BaseDataEntryProps } from '../data-entry';
|
||||
import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
|
||||
import { DataTitleCopyable } from '../data-title';
|
||||
import { CloseIcon, SaveIcon } from '../../../components/icons';
|
||||
|
||||
interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
|
||||
value: string[];
|
||||
@ -42,6 +43,9 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
|
||||
props.onChange(props.slug, editedValues);
|
||||
}, [newValue, values, props.onChange, props.slug]);
|
||||
|
||||
const clearNew = useCallback(() => {
|
||||
setNewValue(null);
|
||||
}, []);
|
||||
|
||||
const remove = useCallback((index: number) => {
|
||||
const editedValues = values.slice();
|
||||
@ -65,13 +69,13 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
|
||||
copy={copyable ? props.copy : undefined}
|
||||
/>
|
||||
<div id={`${props.slug}-wrapper`}>
|
||||
<ul className="data-link-list">
|
||||
{
|
||||
values.length === 0 && !isEditing &&
|
||||
<div className="input-group">
|
||||
<input className="form-control no-entries" type="text" value="No entries" disabled={true} />
|
||||
</div>
|
||||
}
|
||||
<ul className="data-entry-list">
|
||||
{
|
||||
values.map((val, i) => (
|
||||
<li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
|
||||
@ -95,16 +99,15 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
|
||||
<div className="input-group-append">
|
||||
<button type="button" onClick={() => remove(i)}
|
||||
title="Remove"
|
||||
data-index={i} className="btn btn-outline-dark">✕</button>
|
||||
data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
|
||||
</div>
|
||||
}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
{
|
||||
!isDisabled &&
|
||||
<div className="input-group">
|
||||
<li className="input-group">
|
||||
<DataEntryInput
|
||||
slug={props.slug}
|
||||
name={slugWithModifier}
|
||||
@ -125,16 +128,26 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
|
||||
showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
|
||||
confirmOnAutofillSelect={true}
|
||||
/>
|
||||
{
|
||||
newValue != undefined &&
|
||||
<>
|
||||
<div className="input-group-append">
|
||||
<button type="button"
|
||||
className="btn btn-outline-dark"
|
||||
title="Add to list"
|
||||
className="btn btn-primary data-entry-list-button"
|
||||
title="Confirm new value"
|
||||
onClick={() => addNew()}
|
||||
disabled={newValue == undefined}
|
||||
>+</button>
|
||||
><SaveIcon /></button>
|
||||
</div>
|
||||
<div className="input-group-append">
|
||||
<button type="button" onClick={() => clearNew()}
|
||||
title="Clear new value"
|
||||
className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</>)
|
||||
};
|
||||
|
@ -10,6 +10,7 @@ import { MultiDataEntry } from '../../data-components/multi-data-entry/multi-dat
|
||||
import { NumberRangeDataEntry } from './number-range-data-entry';
|
||||
|
||||
import './dynamics-data-entry.css';
|
||||
import { CloseIcon } from '../../../components/icons';
|
||||
|
||||
type DemolishedBuilding = (BuildingAttributes['demolished_buildings'][number]);
|
||||
|
||||
@ -211,7 +212,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
|
||||
<label>Please supply sources for any edits of existing records</label>
|
||||
</>
|
||||
}
|
||||
<ul className="data-link-list">
|
||||
<ul className="data-entry-list">
|
||||
{
|
||||
values.length === 0 &&
|
||||
<div className="input-group">
|
||||
@ -229,7 +230,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
|
||||
title="Delete Record"
|
||||
onClick={() => remove(id)}
|
||||
data-index={id}
|
||||
>x</button>
|
||||
><CloseIcon /></button>
|
||||
}
|
||||
<DynamicsDataRow
|
||||
value={pastBuilding}
|
||||
|
@ -162,13 +162,17 @@
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.data-section .data-link-list {
|
||||
.data-section .data-entry-list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.data-link-list li {
|
||||
.data-entry-list li {
|
||||
border-color: #6c757d;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.data-entry-list-button {
|
||||
width: 2.5em;
|
||||
}
|
@ -43,9 +43,7 @@ label {
|
||||
margin-bottom: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
form .btn {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.buttons-container.btn-center {
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
|
Loading…
Reference in New Issue
Block a user