84 lines
2.7 KiB
JavaScript
84 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {Link} from 'react-router';
|
|
import { Modal, Input, Alert, Select } from 'antd';
|
|
import './style.scss';
|
|
import { Route } from 'react-router-dom'
|
|
import {LINKS} from "../../../routes";
|
|
|
|
const Option = Select.Option;
|
|
@inject('appstate')
|
|
@observer
|
|
export default class ModalTopupComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
selectedOption: '0 Points',
|
|
inputCode1: '',
|
|
inputCode2: '',
|
|
inputCode3: '',
|
|
inputCode4: '',
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
}
|
|
|
|
componentDidMount() {}
|
|
|
|
render() {
|
|
const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Redeem your code'} = this.props;
|
|
|
|
return (
|
|
<Modal
|
|
title={title}
|
|
visible={isVisible}
|
|
onOk={onOk}
|
|
onCancel={onCancel}
|
|
bodyStyle={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<div className={'modalContainer'}>
|
|
<Input value={this.state.inputCode1} maxLength={4} ref={e => this.inputCode1 = e} onChange={(e) => {
|
|
this.setState({inputCode1: e.target.value})
|
|
if(e.target.value.length === 4){
|
|
this.inputCode2.focus();
|
|
}
|
|
}} className={'inputCode'} placeholder="XXXX" />
|
|
<p className={'stripeText'}>-</p>
|
|
<Input value={this.state.inputCode2} maxLength={4} ref={e => this.inputCode2 = e} onChange={(e) => {
|
|
this.setState({inputCode2: e.target.value})
|
|
if(e.target.value.length === 4){
|
|
this.inputCode3.focus();
|
|
}
|
|
|
|
if(e.target.value.length === 0){
|
|
this.inputCode1.focus();
|
|
}
|
|
}} className={'inputCode'} placeholder="XXXX" />
|
|
<p className={'stripeText'}>-</p>
|
|
<Input value={this.state.inputCode3} maxLength={4} ref={e => this.inputCode3 = e} onChange={(e) => {
|
|
this.setState({inputCode3: e.target.value})
|
|
if(e.target.value.length === 4){
|
|
this.inputCode4.focus();
|
|
}
|
|
|
|
if(e.target.value.length === 0){
|
|
this.inputCode2.focus();
|
|
}
|
|
}} className={'inputCode'} placeholder="XXXX" />
|
|
<p className={'stripeText'}>-</p>
|
|
<Input value={this.state.inputCode4} maxLength={4} ref={e => this.inputCode4 = e} onChange={(e) => {
|
|
this.setState({inputCode4: e.target.value})
|
|
if(e.target.value.length === 0){
|
|
this.inputCode3.focus();
|
|
}
|
|
}} className={'inputCode'} placeholder="XXXX" />
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|