tronair-gui/src/ReviewScreen.js

Web application/GUI for performing airdrops on the TRON blockchain

import React, { Component } from 'react';
import './App.css';
import img_elImage from './images/SubmitScreen_state0_elImage282629_282629.jpg';
import Summary from './Summary';
import Cnbanner from './Cnbanner';
import Sidebar from './Sidebar';
import Progressbar from './Progressbar';
import { Row, Button, Icon } from 'antd';
import "antd/dist/antd.css";


export default class ReviewScreen extends Component {
  
  render() {
    // eslint-disable-next-line no-unused-vars
    let baseStyle = {};
    // eslint-disable-next-line no-unused-vars
    let layoutFlowStyle = {};
    if (this.props.transitionId && this.props.transitionId.length > 0 && this.props.atTopOfScreenStack && this.props.transitionForward) {
      baseStyle.animation = '0.25s ease-in-out '+this.props.transitionId;
    }
    if ( !this.props.atTopOfScreenStack) {
      layoutFlowStyle.height = '100vh';
      layoutFlowStyle.overflow = 'hidden';
    }
    
    const style_elBackground = {
        width: '100%',
        height: '100%',
     };
    const style_elBackground_outer = {
        backgroundColor: '#f6f6f6',
     };
    const style_elImage = {
        backgroundImage: 'url('+img_elImage+')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: '50% 50%',
        backgroundSize: 'cover',
     };
    const style_elSummary_outer = {
        boxShadow: '0.0px 6.8px 48px rgba(0, 0, 0, 0.4500)',
        borderRadius: '5px',
     };

    const is_disabled = !this.props.ds_summary_confirm;
    // const fntsz = this.props.appActions.dataSlots.ds_win_width*0.017 + 'px';
    
    return (
      <div className="AppScreen ReviewScreen" style={baseStyle}>
        <div className="background">
          <div className='appBg containerMinHeight elBackground' style={style_elBackground_outer}>
            <div style={style_elBackground} />
          
          </div>
          
          <div className='containerMinHeight elImage' style={style_elImage} />
        </div>
        <div className="layoutFlow" style={layoutFlowStyle}>
          <div className='hasNestedComps elSummary' style={style_elSummary_outer}>
            <div>
              <Summary ref={(el)=> this._elSummary = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
            </div>
          </div>

          <div>
            <Row 
              style={{
                height: '50px',
                marginTop: '5px',
                marginBottom: '5px', 
                marginLeft: '20%', 
                marginRight: '20%',
                textAlign: 'center',
            }}>
              <Button 
                style={{ 
                  cursor:'pointer',
                  pointerEvents:'auto',
                  width: '20%',
                  height: '45px',
                }}
                size='large'
                onClick={() => { this.props.appActions.goToScreen('settings', { transitionId: 'fadeIn' }) }}>
                <Icon type="caret-left" />
                Go Back
              </Button>
              <Button 
                style={{ 
                  cursor:'pointer',
                  pointerEvents:'auto',
                  width: '20%',
                  height: '45px',
                  marginLeft: '60%',
                }}
                size='large'
                type="primary" 
                disabled={is_disabled}
                onClick={() => { 
                  this.props.appActions.updateDataSlot('ds_summary_confirm', "1")
                  this.props.appActions.goToScreen('submit', { transitionId: 'fadeIn' })
                }}>
                {this.props.locStrings.review_button_457223}
                <Icon type="caret-right" />
              </Button>
            </Row>
          </div>

        </div>
        <div className="screenFgContainer">
          <div className="foreground">
            <div className='hasNestedComps elCNBanner'>
              <Cnbanner visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._elCNBanner = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
            </div>
            <div className='hasNestedComps elProgressbar'>
              <Progressbar visualStateIndex={2} ref={(el)=> this._elProgressbar = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
            </div>
            <div>
              <Sidebar {...this.props} visualStateIndex={this.props.ds_isLoggedIn} ref={(el)=> this._elNavBar2 = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
            </div>
          </div>
        </div>
      </div>
    )
  }
  

}