Account Header: use CopyToClipboard

This commit is contained in:
Jannis R 2016-11-10 18:09:54 +01:00
parent 87c39f066c
commit e9b69bceab
No known key found for this signature in database
GPG Key ID: 0FE83946296A88A5
2 changed files with 6 additions and 56 deletions

View File

@ -43,6 +43,6 @@
}
.address {
white-space: nowrap;
font-family: monospace;
display: inline-block;
margin-left: .5em;
}

View File

@ -15,13 +15,9 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import IconButton from 'material-ui/IconButton';
import Snackbar from 'material-ui/Snackbar';
import CopyIcon from 'material-ui/svg-icons/content/content-copy';
import { lightWhite, fullWhite, darkBlack } from 'material-ui/styles/colors';
import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '../../../ui';
import CopyToClipboard from '../../../ui/CopyToClipboard';
import styles from './header.css';
@ -37,8 +33,7 @@ export default class Header extends Component {
}
state = {
name: null,
addressCopied: false
name: null
}
componentWillMount () {
@ -51,7 +46,6 @@ export default class Header extends Component {
render () {
const { account, balance } = this.props;
const { addressCopied } = this.state;
const { address, meta, uuid } = account;
if (!account) {
@ -64,50 +58,14 @@ export default class Header extends Component {
return (
<div>
<Snackbar
open={ addressCopied }
message={
<span>
Address
<span className={ styles.address }> { address } </span>
copied to clipboard
</span>
}
autoHideDuration={ 4000 }
onRequestClose={ this.handleCopyAddressClose }
bodyStyle={ {
backgroundColor: darkBlack
} }
/>
<Container>
<IdentityIcon
address={ address } />
<div className={ styles.floatleft }>
<ContainerTitle title={ <IdentityName address={ address } unknown /> } />
<div className={ styles.addressline }>
<CopyToClipboard
onCopy={ this.handleCopyAddress }
text={ address } >
<IconButton
tooltip='Copy address to clipboard'
tooltipPosition='top-center'
style={ {
width: 32,
height: 16,
padding: 0
} }
iconStyle={ {
width: 16,
height: 16
} }>
<CopyIcon
color={ addressCopied ? lightWhite : fullWhite }
/>
</IconButton>
</CopyToClipboard>
<span>{ address } </span>
<CopyToClipboard data={ address } />
<div className={ styles.address }>{ address }</div>
</div>
{ uuidText }
<div className={ styles.infoline }>
@ -157,14 +115,6 @@ export default class Header extends Component {
});
}
handleCopyAddress = () => {
this.setState({ addressCopied: true });
}
handleCopyAddressClose = () => {
this.setState({ addressCopied: false });
}
setName () {
const { account } = this.props;