From 9e2214c513f24e4064321375a1d01c9b1dc766c1 Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Mon, 14 Nov 2016 17:00:36 +0100
Subject: [PATCH] Working add/remove fields for var. length #3314

---
 .../DeployContract/DetailsStep/detailsStep.js | 90 ++++++++++++++-----
 .../modals/DeployContract/deployContract.css  |  4 +-
 .../ui/Form/AddressSelect/addressSelect.css   |  4 +
 js/src/ui/Form/AddressSelect/addressSelect.js | 10 ++-
 4 files changed, 82 insertions(+), 26 deletions(-)

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 (
-            <TypedInput
-              key={ `${subtype.type}_${index}` }
-              onChange={ onChange }
-              accounts={ accounts }
-              param={ subtype }
-              value={ value[index] }
-            />
-          );
-        });
+      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 (
-          <div className={ styles.inputs }>
-            <label>{ label }</label>
-            { inputs }
-          </div>
+          <TypedInput
+            key={ `${subtype.type}_${index}` }
+            onChange={ onChange }
+            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 {
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 (
       <IdentityIcon
-        className={ styles.icon }
+        className={ classes.join(' ') }
         inline center
         address={ value } />
     );