diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js index 31e4d2207..ca4e1f524 100644 --- a/js/src/ui/Form/AddressSelect/addressSelect.js +++ b/js/src/ui/Form/AddressSelect/addressSelect.js @@ -58,11 +58,13 @@ class AddressSelect extends Component { tokens: PropTypes.object, // Optional props + allowCopy: PropTypes.bool, allowInput: PropTypes.bool, disabled: PropTypes.bool, error: nodeOrStringProptype(), hint: nodeOrStringProptype(), label: nodeOrStringProptype(), + readOnly: PropTypes.bool, value: nodeOrStringProptype() }; @@ -121,12 +123,12 @@ class AddressSelect extends Component { renderInput () { const { focused } = this.state; - const { accountsInfo, disabled, error, hint, label, value } = this.props; + const { accountsInfo, allowCopy, disabled, error, hint, label, readOnly, value } = this.props; const input = ( ); - if (disabled) { + if (disabled || readOnly) { return input; } @@ -152,10 +154,10 @@ class AddressSelect extends Component { renderContent () { const { muiTheme } = this.context; - const { hint, disabled, label } = this.props; + const { hint, disabled, label, readOnly } = this.props; const { expanded, inputFocused } = this.state; - if (disabled) { + if (disabled || readOnly) { return null; } @@ -507,6 +509,10 @@ class AddressSelect extends Component { } handleMainBlur = () => { + if (this.props.readOnly) { + return; + } + if (window.document.hasFocus() && !this.state.expanded) { this.closing = false; this.setState({ focused: false }); @@ -514,7 +520,7 @@ class AddressSelect extends Component { } handleMainFocus = () => { - if (this.state.focused) { + if (this.state.focused || this.props.readOnly) { return; } @@ -529,6 +535,12 @@ class AddressSelect extends Component { } handleFocus = () => { + const { disabled, readOnly } = this.props; + + if (disabled || readOnly) { + return; + } + this.setState({ expanded: true, focusedItem: null, focusedCat: null }, () => { window.setTimeout(() => { this.handleDOMAction(this.inputRef, 'focus'); diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js index d82ed8cf4..a24dd13cb 100644 --- a/js/src/ui/Form/Input/input.js +++ b/js/src/ui/Form/Input/input.js @@ -185,7 +185,7 @@ export default class Input extends Component { const text = typeof allowCopy === 'string' ? allowCopy - : value; + : value.toString(); const style = hideUnderline ? {} diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js index ec70502c0..0e49317a1 100644 --- a/js/src/ui/Form/InputAddress/inputAddress.js +++ b/js/src/ui/Form/InputAddress/inputAddress.js @@ -78,7 +78,7 @@ class InputAddress extends Component { return (
+ /> ); } } diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js index b0a8be98d..096be7b60 100644 --- a/js/src/ui/Form/TypedInput/typedInput.js +++ b/js/src/ui/Form/TypedInput/typedInput.js @@ -17,6 +17,7 @@ import React, { Component, PropTypes } from 'react'; import { MenuItem, Toggle } from 'material-ui'; import { range } from 'lodash'; +import BigNumber from 'bignumber.js'; import IconButton from 'material-ui/IconButton'; import AddIcon from 'material-ui/svg-icons/content/add'; @@ -33,26 +34,31 @@ import styles from './typedInput.css'; export default class TypedInput extends Component { static propTypes = { - onChange: PropTypes.func.isRequired, + param: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]).isRequired, accounts: PropTypes.object, + allowCopy: PropTypes.bool, error: PropTypes.any, hint: PropTypes.string, isEth: PropTypes.bool, label: PropTypes.string, max: PropTypes.number, min: PropTypes.number, - param: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]).isRequired, + onChange: PropTypes.func, + readOnly: PropTypes.bool, value: PropTypes.any }; static defaultProps = { + allowCopy: false, + isEth: null, min: null, max: null, - isEth: null + onChange: () => {}, + readOnly: false }; state = { @@ -61,8 +67,11 @@ export default class TypedInput extends Component { }; componentWillMount () { - if (this.props.isEth && this.props.value) { - this.setState({ isEth: true, ethValue: fromWei(this.props.value) }); + const { isEth, value } = this.props; + + if (typeof isEth === 'boolean' && value) { + const ethValue = isEth ? fromWei(value) : value; + this.setState({ isEth, ethValue }); } } @@ -78,7 +87,7 @@ export default class TypedInput extends Component { } renderParam (param) { - const { isEth } = this.props; + const { allowCopy, isEth, readOnly } = this.props; const { type } = param; if (type === ABI_TYPES.ARRAY) { @@ -96,10 +105,12 @@ export default class TypedInput extends Component { return ( ); @@ -226,21 +237,23 @@ export default class TypedInput extends Component { } renderInteger (value = this.props.value, onChange = this.onChange) { - const { label, error, hint, min, max } = this.props; + const { allowCopy, label, error, hint, min, max, readOnly } = this.props; const param = this.getParam(); - const realValue = value && typeof value.toNumber === 'function' - ? value.toNumber() + const realValue = value + ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']() : value; return ( ); } renderAddress () { - const { accounts, label, value, error, hint } = this.props; + const { accounts, allowCopy, label, value, error, hint, readOnly } = this.props; return ( ); } renderBoolean () { - const { label, value, error, hint } = this.props; + const { allowCopy, label, value, error, hint, readOnly } = this.props; + + if (readOnly) { + return this.renderDefault(); + } const boolitems = ['false', 'true'].map((bool) => { return ( @@ -323,6 +345,7 @@ export default class TypedInput extends Component { return ( - ); - } + const input = ( + + ); return (
@@ -144,8 +137,7 @@ export default class InputQuery extends Component { const { name, type } = input; const label = `${name ? `${name}: ` : ''}${type}`; - const onChange = (event, input) => { - const value = event && event.target.value || input; + const onChange = (value) => { const { values } = this.state; this.setState({ @@ -156,28 +148,15 @@ export default class InputQuery extends Component { }); }; - if (type === 'address') { - return ( -
- -
- ); - } - return (
-
); @@ -192,7 +171,9 @@ export default class InputQuery extends Component { if (api.util.isInstanceOf(value, BigNumber)) { return value.toFormat(0); - } else if (api.util.isArray(value)) { + } + + if (api.util.isArray(value)) { return api.util.bytesToHex(value); } diff --git a/js/src/views/Contract/Queries/queries.js b/js/src/views/Contract/Queries/queries.js index fff7adb6b..f4746ae89 100644 --- a/js/src/views/Contract/Queries/queries.js +++ b/js/src/views/Contract/Queries/queries.js @@ -14,12 +14,11 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import BigNumber from 'bignumber.js'; import React, { Component, PropTypes } from 'react'; import { Card, CardTitle, CardText } from 'material-ui/Card'; import InputQuery from './inputQuery'; -import { Container, Input, InputAddress } from '~/ui'; +import { Container, TypedInput } from '~/ui'; import styles from './queries.css'; @@ -29,6 +28,7 @@ export default class Queries extends Component { } static propTypes = { + accountsInfo: PropTypes.object.isRequired, contract: PropTypes.object, values: PropTypes.object } @@ -74,11 +74,12 @@ export default class Queries extends Component { renderInputQuery (fn) { const { abi, name, signature } = fn; - const { contract } = this.props; + const { accountsInfo, contract } = this.props; return (
- ); - } - return ( - ); } diff --git a/js/src/views/Contract/contract.js b/js/src/views/Contract/contract.js index b7ab705bb..d06c22b92 100644 --- a/js/src/views/Contract/contract.js +++ b/js/src/views/Contract/contract.js @@ -46,6 +46,7 @@ class Contract extends Component { setVisibleAccounts: PropTypes.func.isRequired, accounts: PropTypes.object, + accountsInfo: PropTypes.object, balances: PropTypes.object, contracts: PropTypes.object, isTest: PropTypes.bool, @@ -115,7 +116,7 @@ class Contract extends Component { } render () { - const { balances, contracts, params, isTest } = this.props; + const { accountsInfo, balances, contracts, params, isTest } = this.props; const { allEvents, contract, queryValues, loadingEvents } = this.state; const account = contracts[params.address]; const balance = balances[params.address]; @@ -138,6 +139,7 @@ class Contract extends Component { /> @@ -447,13 +449,14 @@ class Contract extends Component { } function mapStateToProps (state) { - const { accounts, contracts } = state.personal; + const { accounts, accountsInfo, contracts } = state.personal; const { balances } = state.balances; const { isTest } = state.nodeStatus; return { isTest, accounts, + accountsInfo, contracts, balances };