zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: WalletAddress component refactoring based on feedback 

chore: removing second click for UI on address and QRCode"
This commit is contained in:
Andre Neves 2019-02-10 11:49:24 -05:00
parent 9eba0b5503
commit 45658e2ef9
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/components/wallet-address.js
View File

@ -1,14 +1,11 @@
// @flow // @flow
import React, { Component } from 'react'; import React, { PureComponent } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { ColumnComponent } from './column'; import { ColumnComponent } from './column';
import { Button } from './button';
import { QRCode } from './qrcode'; import { QRCode } from './qrcode';
import { truncateAddress } from '../utils/truncate-address';
import eyeIcon from '../assets/images/eye.png'; import eyeIcon from '../assets/images/eye.png';
const AddressWrapper = styled.div` const AddressWrapper = styled.div`
@ -45,44 +42,60 @@ const QRCodeWrapper = styled.div`
width: 100%; width: 100%;
`; `;
const IconButton = styled.button`
background: transparent;
cursor: pointer;
outline: none;
`;
const IconImage = styled.img`
max-width: 15px;
`;
type Props = { type Props = {
address: string, address: string,
}; };
type State = { type State = {
isVisible: boolean, showQRCode: boolean,
}; };
export class WalletAddress extends Component<Props, State> { export class WalletAddress extends PureComponent<Props, State> {
state = { state = {
isVisible: false, showQRCode: false,
}; };
show = () => this.setState(() => ({ isVisible: true })); show = () => this.setState(() => ({ showQRCode: true }));
hide = () => this.setState(() => ({ isVisible: false })); hide = () => this.setState(() => ({ showQRCode: false }));
render() { render() {
const { address } = this.props; const { address } = this.props;
const { isVisible } = this.state; const { showQRCode } = this.state;
const toggleVisibility = isVisible ? this.hide : this.show; const toggleVisibility = showQRCode ? this.hide : this.show;
return ( return (
<ColumnComponent width='100%'> <ColumnComponent width='100%'>
<AddressWrapper> <AddressWrapper>
<Input <Input
value={isVisible ? address : truncateAddress(address)} value={address}
onChange={() => {}} onChange={() => {}}
onFocus={event => event.currentTarget.select()} onFocus={event => event.currentTarget.select()}
/> />
<Button <IconButton onClick={toggleVisibility}>
icon={eyeIcon} <IconImage
label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`} src={eyeIcon}
onClick={toggleVisibility} alt='See QRCode'
variant='secondary'
/> />
</IconButton>
<IconButton onClick={() => {}}>
<IconImage
src={eyeIcon}
alt='Copy Address'
/>
</IconButton>
</AddressWrapper> </AddressWrapper>
{!isVisible ? null : ( {!showQRCode ? null : (
<QRCodeWrapper> <QRCodeWrapper>
<QRCode value={address} /> <QRCode value={address} />
</QRCodeWrapper> </QRCodeWrapper>