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

fix: make component centered

Browse Source
This commit is contained in:
tsabit ghazwan 2019-01-29 19:26:07 +07:00
parent fbb2cc0a9b
commit 7a5f61029a
1 changed files with 130 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
src/common/pages/Wallet/index.js
View File

@ -158,145 +158,149 @@ export default class WalletComponent extends React.Component {
}]; }];
return ( return (
<div className="wallet containerMiddle"> <div className="wallet">
<div className="row"> <div className="row">
<div className="col s12"> <div className={"col s10 offset-s1"}>
<div style={{marginBottom: '16px'}}> <div className={"row"}>
<h3 className="headerMenu">Wallet</h3> <div className="col s12">
</div> <div style={{marginBottom: '16px'}}>
</div> <h3 className="headerMenu">Wallet</h3>
<div> </div>
<div className="col s6 m6"> </div>
<Card className="cardLite row"> <div className="col s6 m6">
<CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/> <Card className="cardLite row">
</Card> <CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
</div> </Card>
<div className="col s6 m6"> </div>
<Card className="cardLite row"> <div className="col s6 m6">
<CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/> <Card className="cardLite row">
</Card> <CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
</div> </Card>
</div> </div>
<div className="col s12"> <div className="col s12">
<Card className="cardLite" style={{paddingBottom: 5}}> <Card className="cardLite" style={{paddingBottom: 5}}>
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}> <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
<ToolbarGroup> <ToolbarGroup>
<SearchIcon style={{marginRight: 8, color: "#999"}}/> <SearchIcon style={{marginRight: 8, color: "#999"}}/>
<TextField <TextField
hintText="Search Redeem History" hintText="Search Redeem History"
style={{fontSize: 14}} style={{fontSize: 14}}
hintStyle={{fontSize: 14}} hintStyle={{fontSize: 14}}
fullWidth={true} fullWidth={true}
underlineShow={false} underlineShow={false}
/> />
</ToolbarGroup> </ToolbarGroup>
<ToolbarGroup className="ToolbarGroupLast"> <ToolbarGroup className="ToolbarGroupLast">
<ToolbarSeparator/> <ToolbarSeparator/>
{(window.innerWidth < 600) ? {(window.innerWidth < 600) ?
<div className="flexSpaceBetween"> <div className="flexSpaceBetween">
<IconMenu <IconMenu
iconButtonElement={<IconButton><MoreIcon/></IconButton>} iconButtonElement={<IconButton><MoreIcon/></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}} anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}} targetOrigin={{horizontal: 'left', vertical: 'top'}}
> >
<MenuItem primaryText="Deposit" <MenuItem primaryText="Deposit"
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/> onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
<MenuItem primaryText="Withdrawal" <MenuItem primaryText="Withdrawal"
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/> onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
</IconMenu> </IconMenu>
</div> </div>
: :
<div>
{/*<RaisedButton*/}
{/*className=""*/}
{/*icon={<UnarchiveIcon/>}*/}
{/*label="Deposit"*/}
{/*style={{marginRight: 20}}*/}
{/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
{/*primary={true}/>*/}
<RaisedButton
className="ToolbarGroupLastButton"
icon={<UnarchiveIcon/>}
label="Top Up"
onClick={() => this.setModalTopup(true)}
primary={true}/>
</div>
}
</ToolbarGroup>
</Toolbar>
<Divider/>
<div> <div>
{/*<RaisedButton*/} <Loader show={false} message={<LoadingDialog/>}
{/*className=""*/} messageStyle={{textAlign: 'center'}}
{/*icon={<UnarchiveIcon/>}*/} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
{/*label="Deposit"*/} <TableAntd
{/*style={{marginRight: 20}}*/} pagination={true}
{/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/} className='table-padded tableWallet'
{/*primary={true}/>*/} dataSource={data}
<RaisedButton // onChange={this.handleChangeSorter}
className="ToolbarGroupLastButton" columns={columns}
icon={<UnarchiveIcon/>} // onRow={(record) => {`
label="Top Up" // return {
onClick={() => this.setModalTopup(true)} // onClick: () => {
primary={true}/> // this.props.history.push(`${LINKS.ORDER}/${record.id}`);
</div> // }, // click row
} // };
// }}
</ToolbarGroup> />
</Toolbar> {/*<Table selectable={false}>*/}
<Divider/> {/*<TableHeader displaySelectAll={false}*/}
<div> {/*adjustForCheckbox={false}*/}
<Loader show={false} message={<LoadingDialog/>} {/*enableSelectAll={false}>*/}
messageStyle={{textAlign: 'center'}} {/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
<TableAntd
pagination={true}
className='table-padded tableWallet'
dataSource={data}
// onChange={this.handleChangeSorter}
columns={columns}
// onRow={(record) => {`
// return {
// onClick: () => {
// this.props.history.push(`${LINKS.ORDER}/${record.id}`);
// }, // click row
// };
// }}
/>
{/*<Table selectable={false}>*/}
{/*<TableHeader displaySelectAll={false}*/}
{/*adjustForCheckbox={false}*/}
{/*enableSelectAll={false}>*/}
{/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/} {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
{/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/} {/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/} {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
{/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/} {/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/} {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
{/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/} {/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/} {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
{/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/} {/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/} {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
{/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/} {/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
{/*</TableRow>*/} {/*</TableRow>*/}
{/*</TableHeader>*/} {/*</TableHeader>*/}
{/*<TableBody displayRowCheckbox={false}>*/} {/*<TableBody displayRowCheckbox={false}>*/}
{/*{*/} {/*{*/}
{/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/} {/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/}
{/*return (*/} {/*return (*/}
{/*<TableRow key={index}>*/} {/*<TableRow key={index}>*/}
{/*<TableRowColumn style={{width:'13%'}}>*/} {/*<TableRowColumn style={{width:'13%'}}>*/}
{/*{item.id.split('-')[0]}*/} {/*{item.id.split('-')[0]}*/}
{/*</TableRowColumn>*/} {/*</TableRowColumn>*/}
{/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/} {/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
{/*<TableRowColumn>{item.type.name}</TableRowColumn>*/} {/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
{/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/} {/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
{/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/} {/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
{/*thousandSeparator={true}*/} {/*thousandSeparator={true}*/}
{/*prefix={'IDR '}/></TableRowColumn>*/} {/*prefix={'IDR '}/></TableRowColumn>*/}
{/*</TableRow>*/} {/*</TableRow>*/}
{/*);*/} {/*);*/}
{/*})*/} {/*})*/}
{/*}*/} {/*}*/}
{/*{*/} {/*{*/}
{/*(this.transactionStore.list.length === 0) ?*/} {/*(this.transactionStore.list.length === 0) ?*/}
{/*<TableRow>*/} {/*<TableRow>*/}
{/*<TableRowColumn>*/} {/*<TableRowColumn>*/}
{/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/} {/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
{/*</TableRowColumn>*/} {/*</TableRowColumn>*/}
{/*</TableRow> : ""*/} {/*</TableRow> : ""*/}
{/*}*/} {/*}*/}
{/*</TableBody>*/} {/*</TableBody>*/}
{/*</Table>*/} {/*</Table>*/}
</Loader> </Loader>
</div>
</Card></div>
</div> </div>
</Card></div> </div>
</div>
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
</div> </div>
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
</div>
) )
} }
} }