Working add/remove fields for var. length #3314

This commit is contained in:
Nicolas Gotchac 2016-11-14 17:00:36 +01:00
parent 046d2f2333
commit 9e2214c513
4 changed files with 82 additions and 26 deletions

View File

@ -18,6 +18,10 @@ import React, { Component, PropTypes } from 'react';
import { MenuItem } from 'material-ui'; import { MenuItem } from 'material-ui';
import { range } from 'lodash'; import { range } from 'lodash';
import IconButton from 'material-ui/IconButton';
import AddIcon from 'material-ui/svg-icons/content/add';
import RemoveIcon from 'material-ui/svg-icons/content/remove';
import { AddressSelect, Form, Input, InputAddressSelect, Select } from '../../../ui'; import { AddressSelect, Form, Input, InputAddressSelect, Select } from '../../../ui';
import { validateAbi } from '../../../util/validation'; import { validateAbi } from '../../../util/validation';
@ -43,8 +47,9 @@ class TypedInput extends Component {
const { accounts, label, value = param.default } = this.props; const { accounts, label, value = param.default } = this.props;
const { subtype, length } = param; const { subtype, length } = param;
if (length) { const fixedLength = !!length;
const inputs = range(length).map((_, index) => {
const inputs = range(length || value.length).map((_, index) => {
const onChange = (inputValue) => { const onChange = (inputValue) => {
const newValues = [].concat(this.props.value); const newValues = [].concat(this.props.value);
newValues[index] = inputValue; newValues[index] = inputValue;
@ -65,15 +70,42 @@ class TypedInput extends Component {
return ( return (
<div className={ styles.inputs }> <div className={ styles.inputs }>
<label>{ label }</label> <label>{ label }</label>
{ fixedLength ? null : this.renderLength() }
{ inputs } { inputs }
</div> </div>
); );
} }
}
return this.renderType(type); return this.renderType(type);
} }
renderLength () {
const style = {
width: 16,
height: 16
};
return (
<div>
<IconButton
iconStyle={ style }
style={ style }
onClick={ this.onAddField }
>
<AddIcon />
</IconButton>
<IconButton
iconStyle={ style }
style={ style }
onClick={ this.onRemoveField }
>
<RemoveIcon />
</IconButton>
</div>
);
}
renderType (type) { renderType (type) {
if (type === ADDRESS_TYPE) { if (type === ADDRESS_TYPE) {
return this.renderAddress(); return this.renderAddress();
@ -184,6 +216,20 @@ class TypedInput extends Component {
this.props.onChange(value); this.props.onChange(value);
} }
onAddField = () => {
const { value, onChange, param } = this.props;
const newValues = [].concat(value, param.subtype.default);
onChange(newValues);
}
onRemoveField = () => {
const { value, onChange } = this.props;
const newValues = value.slice(0, -1);
onChange(newValues);
}
} }
export default class DetailsStep extends Component { export default class DetailsStep extends Component {

View File

@ -33,7 +33,7 @@
} }
.inputs { .inputs {
padding-top: 18px; padding-top: 2px;
label { label {
line-height: 22px; line-height: 22px;
@ -41,7 +41,7 @@
color: rgba(255, 255, 255, 0.498039); color: rgba(255, 255, 255, 0.498039);
-webkit-user-select: none; -webkit-user-select: none;
font-size: 12px; font-size: 12px;
top: 8px; top: 11px;
position: relative; position: relative;
} }
} }

View File

@ -39,6 +39,10 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 35px; top: 35px;
&.noLabel {
top: 11px;
}
} }
.paddedInput input { .paddedInput input {

View File

@ -106,15 +106,21 @@ export default class AddressSelect extends Component {
} }
renderIdentityIcon (inputValue) { renderIdentityIcon (inputValue) {
const { error, value } = this.props; const { error, value, label } = this.props;
if (error || !inputValue || value.length !== 42) { if (error || !inputValue || value.length !== 42) {
return null; return null;
} }
const classes = [ styles.icon ];
if (!label) {
classes.push(styles.noLabel);
}
return ( return (
<IdentityIcon <IdentityIcon
className={ styles.icon } className={ classes.join(' ') }
inline center inline center
address={ value } /> address={ value } />
); );