#73 Using Modal for wrapping Send and Receive Tokens components

This commit is contained in:
apanizo 2018-10-24 10:17:13 +02:00
parent 659215bb7e
commit de8031a246
1 changed files with 43 additions and 5 deletions

View File

@ -17,6 +17,8 @@ import Table from '~/components/Table'
import { sm, xs } from '~/theme/variables'
import { getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero } from './dataFetcher'
import Tokens from './Tokens'
import Send from './Send'
import Receive from './Receive'
type State = {
hideZero: boolean,
@ -79,7 +81,9 @@ type Props = {
class Balances extends React.Component<Props, State> {
state = {
hideZero: false,
showToken: true,
showToken: false,
showSend: false,
showReceive: false,
}
onShowToken = () => {
@ -90,6 +94,22 @@ class Balances extends React.Component<Props, State> {
this.setState(() => ({ showToken: false }))
}
onShowSend = () => {
this.setState(() => ({ showSend: true }))
}
onHideSend = () => {
this.setState(() => ({ showSend: false }))
}
onShowReceive = () => {
this.setState(() => ({ showReceive: true }))
}
onHideReceive = () => {
this.setState(() => ({ showReceive: false }))
}
handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
const { checked } = e.target
@ -97,7 +117,9 @@ class Balances extends React.Component<Props, State> {
}
render() {
const { hideZero, showToken } = this.state
const {
hideZero, showToken, showReceive, showSend,
} = this.state
const { classes } = this.props
const columns = generateColumns()
@ -131,7 +153,7 @@ class Balances extends React.Component<Props, State> {
handleClose={this.onHideToken}
open={showToken}
>
<Tokens />
<Tokens onClose={this.onHideToken} />
</Modal>
</Col>
</Row>
@ -150,11 +172,11 @@ class Balances extends React.Component<Props, State> {
)) }
<TableCell component="th" scope="row">
<Row align="end" className={classes.actions}>
<Button variant="contained" size="small" color="secondary" className={classes.send}>
<Button variant="contained" size="small" color="secondary" className={classes.send} onClick={this.onShowSend}>
<CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
Send
</Button>
<Button variant="contained" size="small" color="secondary" className={classes.receive}>
<Button variant="contained" size="small" color="secondary" className={classes.receive} onClick={this.onShowReceive}>
<CallReceived className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive
</Button>
@ -163,6 +185,22 @@ class Balances extends React.Component<Props, State> {
</TableRow>
))}
</Table>
<Modal
title="Send Tokens"
description="Send Tokens Form"
handleClose={this.onHideSend}
open={showSend}
>
<Send onClose={this.onHideSend} />
</Modal>
<Modal
title="Receive Tokens"
description="Receive Tokens Form"
handleClose={this.onHideReceive}
open={showReceive}
>
<Receive onClose={this.onHideReceive} />
</Modal>
</React.Fragment>
)
}