Queries display IdentityIcons (#3453)

This commit is contained in:
Jaco Greeff 2016-11-15 19:08:16 +01:00 committed by GitHub
parent 039bd3c9f9
commit 6efdc08044
5 changed files with 58 additions and 29 deletions

View File

@ -30,6 +30,10 @@
.iconDisabled {
position: absolute;
top: 35px;
&.noLabel {
top: 10px;
}
}
.icon {

View File

@ -69,14 +69,19 @@ class InputAddress extends Component {
}
renderIcon () {
const { value, disabled } = this.props;
const { value, disabled, label } = this.props;
if (!value || !value.length || !util.isAddressValid(value)) {
return null;
}
const classes = [disabled ? styles.iconDisabled : styles.icon];
if (!label) {
classes.push(styles.noLabel);
}
return (
<div className={ disabled ? styles.iconDisabled : styles.icon }>
<div className={ classes.join(' ') }>
<IdentityIcon
inline center
address={ value } />

View File

@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
import LinearProgress from 'material-ui/LinearProgress';
import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
import { Button, Input, InputAddressSelect } from '../../../ui';
import { Button, Input, InputAddress, InputAddressSelect } from '../../../ui';
import styles from './queries.css';
@ -96,32 +96,48 @@ export default class InputQuery extends Component {
}
if (!results || results.length < 1) return null;
return outputs
.map((out, index) => ({
name: out.name,
type: out.type,
value: results[index],
display: this.renderValue(results[index])
}))
.sort((outA, outB) => outA.display.length - outB.display.length)
.map((out, index) => (
<div key={ index }>
<div className={ styles.queryResultName }>
{ out.name }
</div>
.map((out, index) => {
let input = null;
if (out.type === 'address') {
input = (
<InputAddress
className={ styles.queryValue }
disabled
value={ out.display }
/>
);
} else {
input = (
<Input
className={ styles.queryValue }
readOnly
allowCopy
value={ out.display }
/>
<br />
);
}
return (
<div key={ index }>
<div className={ styles.queryResultName }>
{ out.name }
</div>
));
{ input }
</div>
);
});
}
renderInput (input) {
const { values } = this.state;
const { name, type } = input;
const label = `${name ? `${name}: ` : ''}${type}`;
@ -143,6 +159,7 @@ export default class InputQuery extends Component {
<InputAddressSelect
hint={ type }
label={ label }
value={ values[name] }
required
onChange={ onChange }
/>
@ -155,6 +172,7 @@ export default class InputQuery extends Component {
<Input
hint={ type }
label={ label }
value={ values[name] }
required
onChange={ onChange }
/>

View File

@ -56,18 +56,10 @@
}
.methodResults {
display: flex;
flex-wrap: wrap;
max-width: 24rem;
justify-content: space-around;
}
.methodResults > div {
padding: 0.25rem 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 50%;
box-sizing: border-box;
& > div {

View File

@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
import { Card, CardTitle, CardText } from 'material-ui/Card';
import InputQuery from './inputQuery';
import { Container, ContainerTitle, Input } from '../../../ui';
import { Container, ContainerTitle, Input, InputAddress } from '../../../ui';
import styles from './queries.css';
@ -100,14 +100,14 @@ export default class Queries extends Component {
<CardText
className={ styles.methodContent }
>
{ this.renderValue(values[fn.name]) }
{ this.renderValue(values[fn.name], fn.outputs[0].kind.type) }
</CardText>
</Card>
</div>
);
}
renderValue (value) {
renderValue (value, type) {
if (typeof value === 'undefined') {
return null;
}
@ -125,6 +125,16 @@ export default class Queries extends Component {
valueToDisplay = value.toString();
}
if (type === 'address') {
return (
<InputAddress
className={ styles.queryValue }
value={ valueToDisplay }
disabled
/>
);
}
return (
<Input
className={ styles.queryValue }