[OLD] GGBlih react-based

ggblih.md

GGBlih

A Pen by Vanadium on CodePen.

License.

index.html

<div id="root">
</div>

script.jsx

//--- Welcome.jsx
function MainTitle({ title }) {
  return (
    <div className="col col-md-8 text-center">
      <h1>{title}</h1>
    </div>
    )
}

//--- LangSelect.jsx
function LangSelect() {
  return (
    <div className="col col-md-2">
      <div className="btn-group">
        <button type="button" className="btn btn-primary">English</button>
        <button type="button" className="btn btn-primary">Français</button>
      </div>
    </div>
  )
}

//--- NavBox.jsx
function NavBox({ login }) {
  return (
    <div className="col col-md-2">
      <label className="row">{login}</label>
      <div className="row btn-group-vertical">
        <span className="btn btn-info"><a href="#">route1</a></span>
        <span className="btn btn-info"><a href="#">route2</a></span>
      </div>
    </div>
  )
}

//--- Repository.jsx
function Repository({ repo }) {
  return (
    <div className="row">
      <span id="content">Lorem iupsum dolor si amet</span>
      <p>
        <label>UUID: {repo.UUID || 'N/A'}</label><br />
        <label>public: {repo.public || 'N/A'}</label><br />
        <label>Creation Date: {repo.creationDate || 'N/A'}</label><br />
        <label>Description: {repo.description || 'N/A'}</label>
      </p>
    </div>
  )
}

class RepositoryList extends React.Component {
  constructor({ repos }) {
    super({ repos })
    this.repoDesc = repos
      ? repos.map(repo => (
        <div className="row">
          <label >{repo.name || 'N/A'}</label>
          <input type="radio" id="show" name="group" />
          <input type="radio" id="hide" name="group" checked />
          <label for="hide" className="hide">{repo.name || 'N/A'}</label>
          <label for="show" className="show">{repo.name || 'N/A'}</label>
        </div>
      ))
      : <div>Loading...</div>
  }
  render() {
    return (
      <div className="row">
        {this.repoDesc}
      </div>
    )
  }
}

//--- Repositories.jsx
// import Repository from './Repository'
// import RepositoryList from './RepositoryList'
class Repositories extends React.Component {
  constructor() {
    super()
    this.repos = [
      {UUID : '4b584d85-cd54-f45a-455d-ddb5ad422d42',
       name: 'my_repo_1',
       public: false,
       creationDate: 'Lundi 9 Mai 2016 18:26:31',
       description: 'my_description_1'},
      {UUID : 'abcdef01-cd54-f45a-455d-ddb5ad422d42',
       name: 'my_repo_2',
       public: false,
       creationDate: 'Lundi 9 Mai 2016 18:26:31',
       description: 'my_description_2'}
    ]
  }
  render() {
    return (
      <div className="row">
        <label>Repositories</label>
        <RepositoryList repos={this.repos}/>
       { this.repos
      ? this.repos.map(repo => (
        <Repository repo={repo} />
      ))
      : <div>Loading...</div>}
      </div>
    )
  }
}

//--- App.jsx
// import LangSelect from './LangSelect'
// import NavBox from './NavBox'
// import Welcome from './MainTitle'
// import Repositories from './Repositories'
function App() {
  return (
    <div id="app" className="container">
      <div className="row">
        <NavBox login="login_x"/>
        <MainTitle title="Gestion Graphique de BLIH" />
        <LangSelect className="lang-select" />
      </div>
      <div className="row">
        <Repositories />
      </div>
    </div>
  )
}

//--- index.jsx
// import App from './App'
ReactDOM.render(
  <App />,
  document.getElementById('root')
)
  

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

body {
  background-color: lightgrey;
  padding: 10px;
}

/*label { position: absolute; top:0; left:0}*/

input#show, input#hide {
    display:none;
}
/*
span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}

input#show:checked ~ .show:before {
    content: ""
}
input#show:checked ~ .hide:before {
    content: "Hide"
}

input#hide:checked ~ .hide:before {
    content: ""
}
input#hide:checked ~ .show:before {
    content: "Show"
}
input#show:checked ~ span#content {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
input#hide:checked ~ span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
} */

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />