tronair-gui/src/Progressbar.js

Web application/GUI for performing airdrops on the TRON blockchain

import React, { Component } from 'react';
import { Steps, Icon } from 'antd';
import './App.css';

const Step = Steps.Step;

export default class Progressbar extends Component {

  go2start = () => {
    this.props.appActions.goToScreen('start', { transitionId: 'fadeIn' });
  }

  go2set = () => {
    this.props.appActions.goToScreen('settings', { transitionId: 'fadeIn' });
  }

  go2rev = () => {
    this.props.appActions.goToScreen('review', { transitionId: 'fadeIn' });
  }
  
  render_pbar(screen_index) {

    const is_settings = (screen_index === 1) ? true:false;

    let baseStyle = {
      position: 'absolute',
      left: '25.0%',
      top: '10px',
      width: '50%',
      height: '32px',
    };

    const pointer_style = {cursor:'pointer',pointerEvents:'auto'};
    var set_style = {};
    var rev_style = {};
    if (screen_index > 1) {
      set_style = pointer_style;
    }
    if (screen_index > 2) {
      rev_style = pointer_style;
    }
    
    return (
      <div className="Progressbar" style={baseStyle}>
        <div className="background">
          <div className='containerMinHeight state3_elBackground814814' />
        </div>
        <div className="foreground">
          <Steps current={screen_index}>
            <Step 
              style={pointer_style}
              title="Login" 
              icon={<Icon type="user" onClick={this.go2start}/>} />
            <Step 
              style={set_style}
              title="Setup" 
              icon={
                <Icon 
                  type="setting" 
                  onClick={(screen_index > 1) ? this.go2set:null} 
                  spin={is_settings}/>
              }/>
            <Step 
              style={rev_style}
              title="Verify" 
              icon={<Icon type="check-circle" onClick={(screen_index > 2) ? this.go2rev:null}/>} />
            <Step 
              title="Submit" 
              icon={<Icon type="rocket" />} />
          </Steps>
        </div>
      </div>
    )
  }
  
  
  render() {
    switch (parseInt((this.state && this.state.visualStateIndexOverride !== undefined) ? this.state.visualStateIndexOverride : this.props.visualStateIndex, 10)) {
      default:
      case 0:
        return this.render_pbar(0);
      case 1:
        return this.render_pbar(1);
      case 2:
        return this.render_pbar(2);
      case 3:
        return this.render_pbar(3);
    }
  }
  

}