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

Group multi-data-entry elements

Browse Source
This commit is contained in:
Maciej Ziarkowski 2020-01-09 15:08:58 +00:00
parent c07937baee
commit 11743dc983
1 changed files with 49 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,62 +69,64 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined || props.value.length === 0}
/>
<ul id={props.slug} className="data-link-list">
{
values.length === 0 &&
<div>No entries</div>
}
{
values.map((val, i) => (
<li className="input-group" key={i /* is as key prevents input component recreation on edit */}>
<div id={`${props.slug}-wrapper`}>
<ul className="data-link-list">
{
values.length === 0 &&
<div>No entries</div>
}
{
values.map((val, i) => (
<li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
<DataEntryInput
slug={props.slug}
name={`${props.slug}-${i}`}
id={`${props.slug}-${i}`}
value={val}
disabled={isDisabled}
onChange={(key, val) => this.edit(i, val)}
maxLength={props.maxLength}
placeholder={props.placeholder}
valueTransform={props.valueTransform}
autofill={props.autofill}
/>
{
!isDisabled &&
<div className="input-group-append">
<button type="button" onClick={e => this.remove(i)}
title="Remove"
data-index={i} className="btn btn-outline-dark">✕</button>
</div>
}
</li>
))
}
</ul>
{
!isDisabled &&
<div className="input-group">
<DataEntryInput
slug={props.slug}
name={`${props.slug}-${i}`}
id={`${props.slug}-${i}`}
value={val}
disabled={isDisabled}
onChange={(key, val) => this.edit(i, val)}
name={`${props.slug}`}
id={`${props.slug}`}
value={this.state.newValue}
disabled={props.disabled}
onChange={(key, val) => this.setNewValue(val)}
maxLength={props.maxLength}
placeholder={props.placeholder}
valueTransform={props.valueTransform}
autofill={props.autofill}
/>
{
!isDisabled &&
<div className="input-group-append">
<button type="button" onClick={e => this.remove(i)}
title="Remove"
data-index={i} className="btn btn-outline-dark">✕</button>
</div>
}
</li>
))
}
</ul>
{
!isDisabled &&
<div className="input-group">
<DataEntryInput
slug={props.slug}
name={`${props.slug}-new`}
id={`${props.slug}-new`}
value={this.state.newValue}
disabled={props.disabled}
onChange={(key, val) => this.setNewValue(val)}
maxLength={props.maxLength}
placeholder={props.placeholder}
valueTransform={props.valueTransform}
autofill={props.autofill}
/>
<div className="input-group-append">
<button type="button" onClick={this.addNew}
title="Add to list"
className="btn btn-outline-dark">+</button>
<div className="input-group-append">
<button type="button" onClick={this.addNew}
title="Add to list"
className="btn btn-outline-dark">+</button>
</div>
</div>
</div>
}
}
</div>
</Fragment>;
}
}