Working add/remove fields for var. length #3314

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 fixedLength = !!length;
-        const inputs = range(length).map((_, index) => {
-          const onChange = (inputValue) => {
-            const newValues = [].concat(this.props.value);
-            newValues[index] = inputValue;
-            this.props.onChange(newValues);
-          };
 
-          return (
+      const inputs = range(length || value.length).map((_, index) => {
-            <TypedInput
+        const onChange = (inputValue) => {
-              key={ `${subtype.type}_${index}` }
+          const newValues = [].concat(this.props.value);
-              onChange={ onChange }
+          newValues[index] = inputValue;
-              accounts={ accounts }
+          this.props.onChange(newValues);
-              param={ subtype }
+        };
-              value={ value[index] }
-            />
-          );
-        });
 
         return (
-          <div className={ styles.inputs }>
+          <TypedInput
-            <label>{ label }</label>
+            key={ `${subtype.type}_${index}` }
-            { inputs }
+            onChange={ onChange }
-          </div>
+            accounts={ accounts }
+            param={ subtype }
+            value={ value[index] }
+          />
         );
-      }
+      });
+
+      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 {

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;
   }
 }

js/src/ui/Form/AddressSelect/addressSelect.css

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

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 (
       <IdentityIcon
-        className={ styles.icon }
+        className={ classes.join(' ') }
         inline center
         address={ value } />
     );