React With Childrens

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="menu">asd</div>
<div id="container" class="main">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

html, body 
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background:#555;
    font-family:Arial;
}

/** RENDERS **/
.login{
    background:gray;
    height:80%;
     width:40%;
    margin:auto;
    text-align: center;
}

.fullsize{
    box-sizing: border-box;
    height:100%;
    width:100%;
    padding:4px;
}

.contenedor{
    box-sizing: border-box;
    padding:4px;
    float:left;
    height: 100px;
 }

.pagina{
    box-sizing: border-box;
    width:100%;
    height:100%;
    padding:4px;
}

/* donde introducimos las paginas cargadas */
.main{
    position: fixed;
    width:100%;
    top:60px;
    bottom:0px;
}


/*** MENU ***/
#menu{
    position: fixed;
    height:60px;
    width:100%;
    top:0px;
}

#menu ul{
    list-style:none;
    display: inline-block;
    float:left;
}

#menu ul li{
    display: inline-block;
    padding: 10px 20px;
    cursor:pointer;
    background-color:#eee;
    color:#7B8585;
    
    transition:0.3s;
}

#menu ul li:hover{
    background-color:#beecea;
}

#menu ul li.focused{
    color:#fff;
    background-color:#41c7c2;
}

#menu p{
    padding-top:2px;
    font-size:12px;
    color:white;
    float:left;
    margin-left:20px;
    font-size:20px;
    font-family:Verdana, Geneva, sans-serif;
}

/* http://davidwalsh.name/css-flip */
.flipContainer {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display:block;
}

.flipContainer > div.flipped {
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  background: #463;
  transition: 1.6s ease-in-out;
}

.flipContainer > div.lower {
  background: #642;
  backface-visibility: hidden;
  transform: perspective(800px) rotateY(180deg);
}

.flipContainer > div.upper {
  backface-visibility: hidden;
  transform: perspective(800px) rotateY(0deg);
}
/*
.flipContainer:hover div.lower {
  transform: perspective(800px) rotateY(0);
}

.flipContainer:hover div.upper {
  transform: perspective(800px)...

JavaScript 1.7

var Login=React.createClass({
    render: function() {
        return <div className="login"  style={{background: this.props.color}}> LOGIN</div>;
    }
});

var Mapa=React.createClass({
    render: function() {
        return <div className="fullsize"  style={{background: this.props.color}}>  {this.props.titulo}</div>;
    }
});

var Grafico=React.createClass({
    render:function(){
        return <div className="fullsize"  style={{background: this.props.color}}>  {this.props.titulo}</div>;
    }
});

var Tabla=React.createClass({
    render:function(){
        return <div className="fullsize"  style={{background: this.props.color}}>  {this.props.titulo}</div>;
    }
});


var Contenedor = React.createClass({
    render: function() {
        return <div className="contenedor" 
        style={{width: this.props.width, height: this.props.height}}>{this.props.children}</div>;
    }
});

var Pagina = React.createClass({
  render: function() {
    return <div className="pagina">{this.props.children}</div>;
  }
});

//////////// FLIP

/// FLIP /////////////////////

function getFirstParentOfClass(target, clase)
{
    var max_levels = 12;
    while (target && max_levels > 0)
    {
		//console.log("target:"+target+" max_level:"+ max_levels);
        max_levels--;
        if ($(target).hasClass(clase))
            return target;
        target = target.parentElement;
    }
    return target;
}

function flip(obj){
	$(obj).toggleClass("flip");
}

var FlipContainer=React.createClass({
    handleClick: function(event) {
       flip(this.getDOMNode());
       console.log(this.getDOMNode());
    },
    render: function() {
    return <div className="flipContainer" style={{background: this.props.color}} >
             <div className="flipIcon" onClick={this.handleClick}>FL</div>
                 <div className="flipped upper">
                  {this.props.children}
                 </div>
                 <div className="flipped lower">BACK</div>
           </div>;
 ...