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 { 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 { validateAbi } from '../../../util/validation';
@ -43,8 +47,9 @@ class TypedInput extends Component {
const { accounts, label, value = param.default } = this.props;
const { subtype, length } = param;
if (length) {
const inputs = range(length).map((_, index) => {
const fixedLength = !!length;
const inputs = range(length || value.length).map((_, index) => {
const onChange = (inputValue) => {
const newValues = [].concat(this.props.value);
newValues[index] = inputValue;
@ -65,15 +70,42 @@ class TypedInput extends Component {
return (
<div className={ styles.inputs }>
<label>{ label }</label>
{ fixedLength ? null : this.renderLength() }
{ inputs }
</div>
);
}
}
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) {
if (type === ADDRESS_TYPE) {
return this.renderAddress();
@ -184,6 +216,20 @@ class TypedInput extends Component {
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 {

View File

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

View File

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

View File

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