Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Ridwan Abadi 2019-01-29 00:34:38 +07:00
parent 226766f408
commit 826ebd37a9
1 changed files with 58 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/common/pages/Dashboard/index.js
View File

@ -1,6 +1,8 @@
import React from "react";
import {inject, observer} from "mobx-react";
import compose from 'recompose/compose';
import withStyles from "@material-ui/core/styles/withStyles";
import withWidth, {isWidthUp} from '@material-ui/core/withWidth';
import QueueAnim from 'rc-queue-anim';
import "./style.scss";
import NumberFormat from 'react-number-format';
@ -126,6 +128,21 @@ class DashboardComponent extends React.Component {
render() {
const {classes} = this.props;
const getGridListCols = () => {
if (isWidthUp('lg', this.props.width)) {
return 4;
}
if (isWidthUp('md', this.props.width)) {
return 3;
}
if (isWidthUp('sm', this.props.width)) {
return 2;
}
return 1;
}
const settings = {
arrows: true,
infinite: true,
@ -237,11 +254,11 @@ class DashboardComponent extends React.Component {
spacing={24}
style={{marginTop: 30}}>
<Grid item xs={9} sm={9} md={9} lg={9}>
<Grid item xs={10} sm={10} md={9} lg={9}>
<Typography variant="h6" gutterBottom>
Voucher & Gift Card
</Typography>
<MuiGridList spacing={10} cellHeight={180} cols={4} className={classes.gridList} style={{
<MuiGridList cellHeight={180} cols={getGridListCols()} className={classes.gridList} style={{
width: '100%',
height: undefined,
}}>
@ -253,83 +270,49 @@ class DashboardComponent extends React.Component {
image = this.http.appendImagePath(image);
}
return (
<MuiGridListTile key={index} className={classes.imgFullWidth} style={{
height: 'auto',
padding: 5,
// border: "1px solid #000"
}}>
<MuiCard className={classes.card}>
<MuiCardMedia
component="img"
alt={item.name}
className={classes.media}
height="130"
image={image}
title={item.name}
/>
<MuiDivider light/>
<MuiCardContent>
<Typography noWrap={true} variant="subtitle1">
{item.name}
</Typography>
<Typography className={classes.pos} color="textSecondary">
Ind
</Typography>
<Typography variant="subtitle2">
From: 100 Point
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiButton
fullWidth
variant="outlined"
color="primary"
onClick={() => this.setState({isOpened: true, data: item})}
size="small">
Redeem
</MuiButton>
</MuiCardActions>
</MuiCard>
</MuiGridListTile>
<MuiGridListTile key={index} className={classes.imgFullWidth} style={{
height: 'auto',
padding: 5,
// border: "1px solid #000"
}}>
<MuiCard className={classes.card}>
<MuiCardMedia
component="img"
alt={item.name}
className={classes.media}
height="130"
image={image}
title={item.name}
/>
<MuiDivider light/>
<MuiCardContent>
<Typography noWrap={true} variant="subtitle1">
{item.name}
</Typography>
<Typography className={classes.pos} color="textSecondary">
Ind
</Typography>
<Typography variant="subtitle2">
From: 100 Point
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiButton
fullWidth
variant="outlined"
color="primary"
onClick={() => this.setState({isOpened: true, data: item})}
size="small">
Redeem
</MuiButton>
</MuiCardActions>
</MuiCard>
</MuiGridListTile>
)
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
}
</MuiGridList>
</Grid>
{/*<Grid item xs={12}>*/}
{/*<div className={"voucher"} style={{marginTop: 0}}>*/}
{/*<div className="row">*/}
{/*<div className="col l12 m12 s12 padding">*/}
{/*<h3>*/}
{/*Voucher & Gift Card*/}
{/*</h3>*/}
{/*<Row gutter={10}>*/}
{/*{*/}
{/*(this.vouchersStore.list.length > 0) ?*/}
{/*this.vouchersStore.list.map((item, index) => {*/}
{/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/}
{/*<ItemCard data={item}/>*/}
{/*</Col>)*/}
{/*})*/}
{/*: (*/}
{/*<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>*/}
{/*)*/}
{/*}*/}
{/*</Row>*/}
{/*<ModalVouchersComponent*/}
{/*title={this.state.data.name + ' Vouchers'}*/}
{/*data={this.state.data}*/}
{/*isVisible={this.state.isOpened}*/}
{/*onOk={() => this.setState({isOpened: false})}*/}
{/*onCancel={() => this.setState({isOpened: false})}*/}
{/*/>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
{/*</Grid>*/}
</Grid>
</Grid>
<ModalVouchersComponent
@ -345,4 +328,4 @@ class DashboardComponent extends React.Component {
}
}
export default withStyles(styles)(DashboardComponent);
export default compose(withStyles(styles), withWidth(),)(DashboardComponent);