import React,{Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class Viewer extends Component {

    constructor(props){
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className="component-viewer">
                <pre className="viewer pretty -active"></pre>
                <textarea className="viewer raw" readOnly></textarea>
                <div className="viewer preview">
                    <iframe className="iframe" src=""/>
                </div>
                <pre className="viewer headers"></pre>
                <img className="preload" src="assets/images/preload.svg"/>
            </div>
        );
    }
}

function mapStateToProps({tabs}){
    return {tabs};
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({},dispatch);
}

export default connect (mapStateToProps,mapDispatchToProps)(Viewer);

@@ -218,159 +218,1397 @@
  = %7B
-%7D;%0A    %7D%0A%0A    render() %7B%0A        return (%0A            %3Cdiv className=%22component-viewer%22%3E%0A                %3Cpre className=%22viewer pretty -active%22
+%0A            activeViewer: %22pretty%22,%0A            activeClass: %22-active%22%0A        %7D;%0A%0A        this.onClickTab = this.onClickTab.bind(this);%0A        this.isSelected = this.isSelected.bind(this);%0A    %7D%0A%0A    onClickTab(e)%7B%0A        this.setState(%7B%0A            activeViewer: e.target.getAttribute(%22data-name%22)%0A        %7D)%0A    %7D%0A%0A    isSelected(name)%7B%0A        return ((this.state.activeViewer === name)? %22 %22 + this.state.activeClass : %22%22)%0A    %7D%0A%0A    render() %7B%0A        console.log(%22editor tabs selected: %22,this.state.activeViewer);%0A        return (%0A            %3Cdiv className=%22component-viewer%22%3E%0A                %3Crequesto-editor-tabs%3E%0A                    %3Cul className=%22list%22%3E%0A                        %3Cli className=%7B%22item%22 + this.isSelected(%22pretty%22)%7D data-name=%22pretty%22 onClick=%7Bthis.onClickTab%7D%3EPretty%3C/li%3E%0A                        %3Cli className=%7B%22item%22 + this.isSelected(%22raw%22)%7D data-name=%22raw%22 onClick=%7Bthis.onClickTab%7D%3ERaw%3C/li%3E%0A                        %3Cli className=%7B%22item%22 + this.isSelected(%22preview%22)%7D data-name=%22preview%22 onClick=%7Bthis.onClickTab%7D%3EPreview%3C/li%3E%0A                        %3Cli className=%7B%22item%22 + this.isSelected(%22headers%22)%7D data-name=%22headers%22 onClick=%7Bthis.onClickTab%7D%3EHeaders%3C/li%3E%0A                    %3C/ul%3E%0A                %3C/requesto-editor-tabs%3E%0A                %3Cdiv className=%22viewers%22%3E%0A                    %3Cpre className=%7B%22viewer pretty%22 + this.isSelected(%22pretty%22)%7D
 %3E%3C/pre%3E%0A
     
@@ -1595,32 +1595,36 @@
 retty%22)%7D%3E%3C/pre%3E%0A
+    
                 
@@ -1635,32 +1635,33 @@
 tarea className=
+%7B
 %22viewer raw%22 rea
@@ -1656,16 +1656,42 @@
 wer raw%22
+ + this.isSelected(%22raw%22)%7D
  readOnl
@@ -1704,16 +1704,20 @@
 xtarea%3E%0A
+    
         
@@ -1731,32 +1731,33 @@
  %3Cdiv className=
+%7B
 %22viewer preview%22
@@ -1756,18 +1756,52 @@
 preview%22
-%3E%0A
+ + this.isSelected(%22preview%22)%7D%3E%0A    
         
@@ -1856,39 +1856,47 @@
                 
+  
+  
 %3C/div%3E%0A
+    
                 
@@ -1906,24 +1906,25 @@
 e className=
+%7B
 %22viewer head
@@ -1927,24 +1927,54 @@
 headers%22
+ + this.isSelected(%22headers%22)%7D
 %3E%3C/pre%3E%0A
         
@@ -1957,32 +1957,36 @@
 aders%22)%7D%3E%3C/pre%3E%0A
+    
                 
@@ -2040,24 +2040,47 @@
 load.svg%22/%3E%0A
+                %3C/div%3E%0A
             

refactor viewer tabs area