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 ( );