Untitled

import React from 'react';

import { Root, View, Panel, PanelHeader } from '@vkontakte/vkui/';

import '@vkontakte/vkui/dist/vkui.css';

import './App.css';

​

const view1 = 'view1';

const view2 = 'view2';

const view3 = 'view3';

const view4 = 'view4';

const view5 = 'view5';

​

const panel1 = 'panel1';

​

const panel2 = 'panel2';

const panel3 = 'panel3';

​

const panel4 = 'panel4';

const panel5 = 'panel5'

const panel6 = 'panel6';

​

const panel7 = 'panel7';

const panel8 = 'panel8';

​

const panel9 = 'panel9';

const panel10 = 'panel10';

const panel11 = 'panel11';

​

class App extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            activeView: view1,

            activePanel_view1: panel1,

            activePanel_view2: panel2,

            activePanel_view3: panel4,

            activePanel_view4: panel7,

            activePanel_view5: panel9

        }

    }

​

    setActiveView = (view) => {

        this.setState ({

            activeView: view,

        });

        switch (view) {

            case view1:

                this.statusUser = null;

            break;

            case view2:

                this.statusUser = view2;

            break ;

            case view3:

                this.statusUser = view3;

            break;

        default:

            break;

        }

    }

​

    setActivePanel_organizer = (panel) => {

        this.setState ({

            activePanel_view2: panel

        })

    }

​

    setActivePanel_participant = (panel) => {

        this.setState ({

            activePanel_view3: panel

        })

    }

​

    setActivePanel_contest = (panel) => {

        this.setState ({

            activePanel_view4: panel

        })

    }

​

    setActivePanel_settings = (panel) => {

        this.setState ({

            activePanel_view5: panel

        })

    }

​

    render () {

        return (

            <Root activeView={this.state.activeView}>

                <View id={view1} activePanel={this.state.activePanel_view1}>

                    <Panel id={panel1}>

                        <PanelHeader>view1-panel1</PanelHeader>

                        <div className='button_test' onClick={() => {this.setActiveView(view2)}}>view2-panel2</div>

                        <div className='button_test' onClick={() => {this.setActiveView(view3)}}>view3-panel4</div>

                    </Panel>

                </View>

​

                <View id={view2} activePanel={this.state.activePanel_view2}>

                    <Panel id={panel2}>

                        <PanelHeader onClick={ () => {this.setActiveView(view1) }}>view2-panel2</PanelHeader>

                        <div className='button_test' onClick={ () => { this.setActivePanel_organizer(panel3) }}>view2-panel3</div> 

                    </Panel>

                    <Panel id={panel3}>

                        <PanelHeader onClick={ () => {this.setActivePanel_organizer(panel2) }}>view2-panel3</PanelHeader>

                        <div className='button_test' onClick={() => {this.setActiveView(view4)}}>view4-panel7</div>

                        <div className='button_test' onClick={() => {this.setActiveView(view5)}}>view5-panel9</div>

                    </Panel>

                </View>

​

                <View id={view3} activePanel={this.state.activePanel_view3}>

                    <Panel id={panel4}>

                        <PanelHeader onClick={ () => {this.setActiveView(view1) }}>view3-panel4</PanelHeader>

                        <div className='button_test' onClick={() => {this.setActivePanel_participant(panel6)}}>view3-panel6</div>

                        <div className='button_test' onClick={ () => {this.setActiveView(view4) }}>view4-panel7</div>

                        <div className='button_test' onClick={ () => {this.setActivePanel_participant(panel5) }}>view3-panel5</div>

                    </Panel>

                    <Panel id={panel5}>

                        <PanelHeader onClick={ () => {this.setActivePanel_participant(panel4) }}>view3-panel5</PanelHeader>

                        <div className='button_test' onClick={ () => {this.setActiveView(view4) }}>view4-panel7</div>

                    </Panel>

                    <Panel id={panel6}>

                        <PanelHeader onClick={ () => {this.setActivePanel_participant(panel4) }}>view3-panel6</PanelHeader>

                        <div className='button_test' onClick={ () => {this.setActiveView(view4) }}>view4-panel7</div>

                    </Panel>

                </View>

​

                <View id={view4} activePanel={this.state.activePanel_view4}>

                    <Panel id={panel7}>

                        <PanelHeader onClick={ () => {this.setActiveView(this.statusUser)}}>view4-panel7</PanelHeader>

                        <div className='button_test' onClick={ () => {this.setActivePanel_contest(panel8)}}>view4-panel8</div>

                    </Panel>

                    <Panel id={panel8}>

                        <PanelHeader onClick={ () => {this.setActivePanel_contest(panel7)}}>view4-panel7</PanelHeader>

                    </Panel>

                </View>

​

                <View id={view5} activePanel={this.state.activePanel_view5}>

                    <Panel id={panel9}>

                        <PanelHeader onClick={ () => {this.setActiveView(view2) }}>view5-panel9</PanelHeader>

                        <div className='button_test' onClick={ () => {this.setActivePanel_settings(panel10)}}>view5-panel10</div>

                        <div className='button_test' onClick={ () => {this.setActivePanel_settings(panel11)}}>view5-panel11</div>

                    </Panel>

                    <Panel id={panel10}>

                        <PanelHeader onClick={ () => {this.setActivePanel_settings(panel9) }}>view5-panel10</PanelHeader>

                    </Panel>

                    <Panel id={panel11}>

                        <PanelHeader onClick={ () => {this.setActivePanel_settings(panel9) }}>view5-panel11</PanelHeader>

                    </Panel>

                </View>

            </Root>

​

        );

    }

}

​

export default App;