Skip to content

Instantly share code, notes, and snippets.

@diaraujo13

diaraujo13/MKKPjb.markdown

Last active December 16, 2015 20:18
Show Gist options
  • Save diaraujo13/484b25abd01512ad4576 to your computer and use it in GitHub Desktop.
Save diaraujo13/484b25abd01512ad4576 to your computer and use it in GitHub Desktop.
Download ZIP
MKKPjb
Raw
index.html
<html>
<head>
</head>
<body>
<div id='containera'> </div>
</body>
</html
Raw
script.js
// TUTORIAL FOR REACT: http://g00glen00b.be/reactjs-jsx/
/*
Considerações iniciais
React.Component only provides the methods setState and forceUpdate. You only have to inherit from React.Component if you need them.
*/
/*
__ __ ______ ____ __
/ / / / /_ __/ / _/ / /
/ / / / / / / / / /
/ /_/ / / / _/ / / /___
\____/ /_/ /___/ /_____/
______ __
/ ____/ / / ____ _ _____ _____ ___ _____
/ / / / / __ `/ / ___/ / ___/ / _ \ / ___/
/ /___ / / / /_/ / (__ ) (__ ) / __/ (__ )
\____/ /_/ \__,_/ /____/ /____/ \___/ /____/
*/
class Icons extends React.Component{
// Ver getInitialState para copiar alguns parâmetros
render(){
return (
<i className={this.icon_class}> </i>
);
}
}
/*
Uma barra de botões contendo a opção de
ADICIONAR MAIS PIZZA
+ que irá abrir a classe responsável por escolher a pizza
+ adicionar a tela na stack e iniciar uma nova janela
ADICIONAR MAIS BEBIDAS
+ que irá abrir a classe responsável por escolher
*/
class AdicionalBar extends React.Component{
render(){
return (
<div className='button-bar'>
<a className='button button-royal icon-left ion-plus-circled' href='#'> Pizza </a>
<a className='button button-calm icon-right ion-plus-circled' href='#'> Refri</a>
</div>
);
}
}
/*
END AUXILIAR CLASSES
*/
class Screen extends React.Component {
/*
Toda <Screen> possui:
-> NavBar indicando a posição
-> Button-Bar indicando as opções
-> Uma tela de opções em seu interior <Screen></Screen>
*/
getInitialState(){
return {btn_back : "Voltar"}
}
render(){
var style_bottom_bar = {
position: 'relative',
bottom: '-80%'
}
return(
<div>
<div>
<Navbar conteudo={this.props.title} />
</div>
<div className='ion-content'>
{this.props.children}
</div>
<div className='button-bar' style={this.style_bottom_bar}>
<a className='button button-stable' href='#'> Voltar </a>
<a className='button button-balanced' href='#'> Próximo </a>
</div>
</div>
);
}
}
class Navbar extends React.Component {
alert(){
console.log("Click it\'s working!");
}
render(){
return (
<div className="bar bar-header bar-assertive" style={this.style_screen_bar}>
<h1 className="title"> { this.props.conteudo }</h1>
<a onClick={this.alert} href='#'> ? </a>
</div>
);
}
}
class EnderecoScreen extends React.Component{
render(){
return(
<div className="list">
<label className="item item-input item-stacked-label">
<span className="input-label">First Name</span>
<input type="text" placeholder="John"/>
</label>
<label className="item item-input item-stacked-label">
<span className="input-label">Last Name</span>
<input type="text" placeholder="Suhr"/>
</label>
<label className="item item-input item-stacked-label">
<span className="input-label">Email</span>
<input type="text" placeholder="john@suhr.com"/>
</label>
</div>
);
}
}
/*
_____ _ _
/ __ \ (_) | |
| / \/ __ _ _ __ _ __ _ _ __ | |__ ___
| | / _` | '__| '__| | '_ \| '_ \ / _ \
| \__/\ (_| | | | | | | | | | | | | (_) |
\____/\__,_|_| |_| |_|_| |_|_| |_|\___/
*/
class MeuCarrinhoScreen extends React.Component{
render(){
return(
<div>
<ProductList />
<div className='row'>
<div className='col col-75'>
<i> <h2> Total </h2> </i>
</div>
<div className='col col-25'>
<h4> R$ </h4> <h5> 87,00 </h5>
</div>
</div>
</div>
);
}
}
class ProductList extends React.Component{
style_pizza_icon = {
fontSize: '300%',
textAlign: 'center',
color: '#aa75b3',
padding: 2
}
render(){
return(
<div className='row'>
<div className='col col-center'>
<i className='icon ion-pie-graph' style={this.style_pizza_icon}> </i>
</div>
<div className='col col-90'>
<ProductItem products = {[ {"author": "Pete Hunt", "text": "10"}, {"author": "Jordan Walke", "text": "405"}]} />
<ProductItem2 products = {[ {"author": "Pete Hunt", "text": "10"}, {"author": "Jordan Walke", "text": "405"}]} />
</div>
</div>
);
}
}
class ProductItem extends React.Component {
style_table = {
width: "100%",
textAlign: 'left'
}
render(){
/*
.map calls a provided callback function ONCE FOR EACH ELEMENT in an array,
*/
return(
<div className='row'>
<div className='col'>
<table style={this.style_table}>
<tr className="table_header">
<td> Produto </td>
<td> Preço</td>
</tr>
{
this.props.products.map (function(data){
return (
<tr className='tr_nota_fiscal'>
<td>
<h4> {data.author}</h4>
</td>
<td >
<h3> {data.text} </h3>
</td>
</tr>
)})}
</table>
</div>
</div>
);
}
}
class ProductItem2 extends React.Component {
style_table = {
backgroundColor: "#33CD5F"
}
render(){
/*
.map calls a provided callback function ONCE FOR EACH ELEMENT in an array,
*/
return(
<div className='row'>
<div className='col'>
<div className='row' style={this.style_table}>
<div className='col col-80'>
<span> Produtos </span>
</div>
<div className='col col-20'>
<span> Preço </span>
</div>
</div>
{
this.props.products.map (function(data){
return (
<div className='row'>
<div className='col col-80'>
<h4> {data.author}</h4>
</div>
<div className='col col-20'>
<h3> {data.text} </h3>
</div>
</div>
)})}
</div>
</div>
);
}
}
/*
__ ___ ____
/ __ \___ ____ ____/ /__ _____ / | / / /
/ /_/ / _ \/ __ \/ __ / _ \/ ___/ / /| | / / /
/ _, _/ __/ / / / /_/ / __/ / / ___ |/ / /
/_/ |_|\___/_/ /_/\__,_/\___/_/ /_/ |_/_/_/
*/
ReactDOM.render(
<Screen title='Nota Fiscal - Compra'>
<MeuCarrinhoScreen />
<AdicionalBar />
</Screen>
, document.getElementById('containera'));
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
Raw
style.css
.bar {
position: static
}
table .table_header>td{
background-color:#DA6158;
padding: 10px;
color: #fff;
}
table .tr_nota_fiscal{
padding: 5px;
width: 100%;
}
table .tr_nota_fiscal:nth-child(even){
background-color: #f5f5f5
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.0/css/ionic.css" rel="stylesheet" />
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment