diff --git a/js/src/modals/DeployContract/DetailsStep/detailsStep.js b/js/src/modals/DeployContract/DetailsStep/detailsStep.js
index c04a505bf..67c5586f0 100644
--- a/js/src/modals/DeployContract/DetailsStep/detailsStep.js
+++ b/js/src/modals/DeployContract/DetailsStep/detailsStep.js
@@ -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,37 +47,65 @@ 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 onChange = (inputValue) => {
- const newValues = [].concat(this.props.value);
- newValues[index] = inputValue;
- this.props.onChange(newValues);
- };
+ const fixedLength = !!length;
- return (
-
- );
- });
+ const inputs = range(length || value.length).map((_, index) => {
+ const onChange = (inputValue) => {
+ const newValues = [].concat(this.props.value);
+ newValues[index] = inputValue;
+ this.props.onChange(newValues);
+ };
return (
-
-
- { inputs }
-
+
);
- }
+ });
+
+ return (
+
+
+ { fixedLength ? null : this.renderLength() }
+ { inputs }
+
+ );
}
return this.renderType(type);
}
+ renderLength () {
+ const style = {
+ width: 16,
+ height: 16
+ };
+
+ return (
+
+ );
+ }
+
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 {
diff --git a/js/src/modals/DeployContract/deployContract.css b/js/src/modals/DeployContract/deployContract.css
index b8ce35b8a..ef92b24af 100644
--- a/js/src/modals/DeployContract/deployContract.css
+++ b/js/src/modals/DeployContract/deployContract.css
@@ -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;
}
}
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.css b/js/src/ui/Form/AddressSelect/addressSelect.css
index 98dab4355..30671db73 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.css
+++ b/js/src/ui/Form/AddressSelect/addressSelect.css
@@ -39,6 +39,10 @@
position: absolute;
left: 0;
top: 35px;
+
+ &.noLabel {
+ top: 11px;
+ }
}
.paddedInput input {
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index ac7f2da51..97195efe7 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -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 (
);