grassrootseconomics/openethereum
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use TypedInputs in Contracts view (#4015)

Browse Source 
* Use TypedInput in Contracts

* Add right readOnly Bool TypedInput

* PR Grumbles
This commit is contained in:
Nicolas Gotchac
2017-01-03 17:41:46 +01:00
committed by Jaco Greeff
parent 0f41c5b847
commit e8ef7b357d
8 changed files with 127 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
js/src/ui/Form/AddressSelect/addressSelect.js
View File

@@ -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 = (
<InputAddress
accountsInfo={ accountsInfo }
allowCopy={ false }
allowCopy={ allowCopy }
disabled={ disabled }
error={ error }
hint={ hint }
@@ -139,7 +141,7 @@ class AddressSelect extends Component {
/>
);
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');

2
js/src/ui/Form/Input/input.js
View File

@@ -185,7 +185,7 @@ export default class Input extends Component {
const text = typeof allowCopy === 'string'
? allowCopy
: value;
: value.toString();
const style = hideUnderline
? {}

6
js/src/ui/Form/InputAddress/inputAddress.js
View File

@@ -78,7 +78,7 @@ class InputAddress extends Component {
return (
<div className={ containerClasses.join(' ') }>
<Input
allowCopy={ allowCopy && (disabled ? value : false) }
allowCopy={ allowCopy && ((disabled || readOnly) ? value : false) }
className={ classes.join(' ') }
disabled={ disabled }
error={ error }
@@ -103,13 +103,13 @@ class InputAddress extends Component {
}
renderIcon () {
const { value, disabled, label, allowCopy, hideUnderline } = this.props;
const { value, disabled, label, allowCopy, hideUnderline, readOnly } = this.props;
if (!value || !value.length || !util.isAddressValid(value)) {
return null;
}
const classes = [disabled ? styles.iconDisabled : styles.icon];
const classes = [(disabled || readOnly) ? styles.iconDisabled : styles.icon];
if (!label) {
classes.push(styles.noLabel);

18
js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
View File

@@ -25,27 +25,33 @@ class InputAddressSelect extends Component {
accounts: PropTypes.object.isRequired,
contacts: PropTypes.object.isRequired,
contracts: PropTypes.object.isRequired,
allowCopy: PropTypes.bool,
error: PropTypes.string,
label: PropTypes.string,
hint: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func
label: PropTypes.string,
onChange: PropTypes.func,
readOnly: PropTypes.bool,
value: PropTypes.string
};
render () {
const { accounts, contacts, contracts, label, hint, error, value, onChange } = this.props;
const { accounts, allowCopy, contacts, contracts, label, hint, error, value, onChange, readOnly } = this.props;
return (
<AddressSelect
allowCopy={ allowCopy }
allowInput
accounts={ accounts }
contacts={ contacts }
contracts={ contracts }
error={ error }
label={ label }
hint={ hint }
label={ label }
onChange={ onChange }
readOnly={ readOnly }
value={ value }
onChange={ onChange } />
/>
);
}
}

71
js/src/ui/Form/TypedInput/typedInput.js
View File

@@ -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 (
<TypedInput
accounts={ accounts }
allowCopy={ allowCopy }
key={ `${subtype.type}_${index}` }
onChange={ onChange }
accounts={ accounts }
param={ subtype }
readOnly={ readOnly }
value={ value[index] }
/>
);
@@ -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 (
<Input
allowCopy={ allowCopy }
label={ label }
hint={ hint }
value={ realValue }
error={ error }
onChange={ onChange }
type='number'
readOnly={ readOnly }
type={ readOnly ? 'text' : 'number' }
step={ 1 }
min={ min !== null ? min : (param.signed ? null : 0) }
max={ max !== null ? max : null }
@@ -256,20 +269,22 @@ export default class TypedInput extends Component {
* @see https://github.com/facebook/react/issues/1549
*/
renderFloat (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 (
<Input
allowCopy={ allowCopy }
label={ label }
hint={ hint }
value={ realValue }
error={ error }
onChange={ onChange }
readOnly={ readOnly }
type='text'
min={ min !== null ? min : (param.signed ? null : 0) }
max={ max !== null ? max : null }
@@ -278,37 +293,44 @@ export default class TypedInput extends Component {
}
renderDefault () {
const { label, value, error, hint } = this.props;
const { allowCopy, label, value, error, hint, readOnly } = this.props;
return (
<Input
allowCopy={ allowCopy }
label={ label }
hint={ hint }
value={ value }
error={ error }
onSubmit={ this.onSubmit }
readOnly={ readOnly }
/>
);
}
renderAddress () {
const { accounts, label, value, error, hint } = this.props;
const { accounts, allowCopy, label, value, error, hint, readOnly } = this.props;
return (
<InputAddressSelect
allowCopy={ allowCopy }
accounts={ accounts }
label={ label }
hint={ hint }
value={ value }
error={ error }
hint={ hint }
label={ label }
onChange={ this.onChange }
editing
readOnly={ readOnly }
value={ value }
/>
);
}
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 (
<Select
allowCopy={ allowCopy }
error={ error }
hint={ hint }
label={ label }