Skip to content

Instantly share code, notes, and snippets.

@LuizMoreira

LuizMoreira/MenuServicos.jsx

Last active December 10, 2015 17:08
Show Gist options
  • Save LuizMoreira/cd064398e5deda14c183 to your computer and use it in GitHub Desktop.
Save LuizMoreira/cd064398e5deda14c183 to your computer and use it in GitHub Desktop.
Download ZIP
[Rubix] - Menu item - I can't load menu item dynamically.
Raw
header.jsx
import { State, Navigation } from 'react-router';
import docCookies from './cookies';
import classNames from 'classnames';
import Helpers from 'util/Helpers';
import MenuServicos from '../routes/components/MenuServicos';
import { Link } from 'react-router';
import { SidebarBtn } from 'global/jsx/sidebar_component';
class Brand extends React.Component {
render() {
return (
<NavHeader {...this.props}>
<NavBrand tabIndex='-1'>
<img src='/imgs/logo.png' alt='Pixma' width='80' height='39' />
</NavBrand>
</NavHeader>
);
}
}
var DirectNavItem = React.createClass({
mixins: [State, Navigation],
render() {
var active = false;
var currentLocation = this.context.router.state.location.pathname;
if(!active && this.props.path) {
active = this.isActive(this.props.path) && (currentLocation == this.props.path);
}
var classes = classNames({
'pressed': active
});
return (
<NavItem className={classes} {...this.props}>
<Link to={this.props.path}>
<Icon bundle={this.props.bundle || 'fontello'} glyph={this.props.glyph} />
</Link>
</NavItem>
);
}
});
var Skins = React.createClass({
switchSkin(skin, e) {
e.preventDefault();
e.stopPropagation();
for(var i=0; i < Skins.skins.length; i++) {
$('html').removeClass(Skins.skins[i]);
}
$('html').addClass(skin);
vex.close(this.props.id);
},
render() {
return (
<Grid style={{margin: '-2em'}}>
<Row>
<Col xs={12} className='text-center bg-darkgrayishblue75' style={{marginBottom: 25}}>
<div className='fg-white' style={{fontSize: 24, lineHeight: 1, padding: '25px 10px'}}>
Choose a theme:
</div>
</Col>
</Row>
<Row>
<Col xs={4} className='text-center'>
<a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'default')}>
<Icon glyph='icon-fontello-stop icon-4x' style={{color: '#E76049'}} />
</a>
</Col>
<Col xs={4} className='text-center'>
<a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'green')}>
<Icon glyph='icon-fontello-stop icon-4x' className='fg-darkgreen45' />
</a>
</Col>
<Col xs={4} className='text-center'>
<a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'blue')}>
<Icon glyph='icon-fontello-stop icon-4x' className='fg-blue' />
</a>
</Col>
</Row>
<Row>
<Col xs={4} className='text-center'>
<a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'purple')}>
<Icon glyph='icon-fontello-stop icon-4x' className='fg-purple' />
</a>
</Col>
<Col xs={4} className='text-center'>
<a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'brown')}>
<Icon glyph='icon-fontello-stop icon-4x' className='fg-brown' />
</a>
</Col>
<Col xs={4} className='text-center'>
<a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'cyan')}>
<Icon glyph='icon-fontello-stop icon-4x' className='fg-darkcyan' />
</a>
</Col>
</Row>
</Grid>
);
}
});
Skins.skins = ['default', 'green', 'blue', 'purple', 'brown', 'cyan'];
var HeaderNavigation = React.createClass({
handleSkinSwitch(e) {
e.preventDefault();
e.stopPropagation();
var vexContent;
vex.dialog.open({
afterOpen: ($vexContent) => {
vexContent = $vexContent;
return React.render(<Skins id={$vexContent.data().vex.id} />, $vexContent.get(0));
},
afterClose: () => {
React.unmountComponentAtNode(vexContent.get(0));
}
});
},
getInitialState: function(){
console.log('header - getInitialState ');
return {
ose:null,
oseList:null,
returnStatus:[],
qtdServicos: 0
};
},
//retorno de sucesso do Helpers
success: function (result) {
//console.log('++++++ OSE carregada !!! ++++' , result.dataObject)
//console.log('++++++ servicos ose oseList !!! ++++' , result.dataObject.oseList)
if(this.isMounted()){
this.setState({
ose: result.dataObject,
oseList: result.dataObject.oseList,
resultStatus: result.resultStatus
});
//console.log('++++++ servicos ose oseList !!! ++++' , this.state.ose.oseList.length);
}
},
limparTela: function(){
},
//retorno de erro do Helpers
error: function (xhr, textStatus, errorThrown) {
vex.dialog.alert(xhr.returnStatus.description);
// só pra teste, apagar depois e deixar o alerta
Helpers.ShowMessageError(xhr.returnStatus.message);
},
componentDidMount: function() {
Helpers.Get('/Cliente//951009/OSE/Situacao/201', this.success, this.error);
},
render: function() {
//console.log('this.state.ose' , this.state.ose);
if(this.state.ose === null || this.state.oseList === null || this.state.oseList[0].length === 0 ){
//console.log('this.state.ose.oseList.length === 0' , this.state.ose );
return <div />
}
return (
<NavContent className='pull-right' {...this.props}>
<Nav className='hidden-xs'>
<NavItem className='hidden-sm'>
<a href='#' onClick={this.handleSkinSwitch}>
<Icon glyph='icon-fontello-circle' className='fg-theme' style={{lineHeight: 1, fontSize: 24 }} />
</a>
</NavItem>
<NavItem dropdown toggleOnHover className='collapse-left'>
<DropdownButton nav>
<Icon bundle='fontello' glyph='basket-alt' />
<Badge className='fg-black bg-red notification-badge'>0</Badge>
</DropdownButton>
<MenuServicos servicosCarrinho={this.state.ose.oseList[0].OSEItens}/>
</NavItem>
</Nav>
<Nav>
<NavItem className='logout' href='#' >
<Icon bundle='fontello' glyph='off-1' />
</NavItem>
</Nav>
</NavContent>
);
}
});
export default class Header extends React.Component {
render() {
return (
<Grid id='navbar' {...this.props}>
<Row>
<Col xs={12}>
<NavBar fixedTop id='rubix-nav-header'>
<Container fluid>
<Row>
<Col xs={3} visible='xs'>
<SidebarBtn />
</Col>
<Col xs={6} sm={4}>
<Brand />
</Col>
<Col xs={3} sm={8}>
<HeaderNavigation pressed={this.props.pressed} />
</Col>
</Row>
</Container>
</NavBar>
</Col>
</Row>
</Grid>
);
}
}
Raw
index.html
<!DOCTYPE html>
<html class='default' dir='{dir}'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1' />
<title>Pixma: administração web </title>
<meta name='author' content='Quasares tecnologia, [email protected]'>
<meta name='description' content='Pixma administração'>
<meta name='keywords' content='Pintura, parece, muro, metro, metro quadrado, apartamento, casa'>
<meta name='robots' content='index, follow'>
<meta name='viewport' content='width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<link rel='apple-touch-icon' sizes='57x57' href='/favicons/apple-touch-icon-57x57.png'>
<link rel='apple-touch-icon' sizes='114x114' href='/favicons/apple-touch-icon-114x114.png'>
<link rel='apple-touch-icon' sizes='72x72' href='/favicons/apple-touch-icon-72x72.png'>
<link rel='apple-touch-icon' sizes='144x144' href='/favicons/apple-touch-icon-144x144.png'>
<link rel='apple-touch-icon' sizes='60x60' href='/favicons/apple-touch-icon-60x60.png'>
<link rel='apple-touch-icon' sizes='120x120' href='/favicons/apple-touch-icon-120x120.png'>
<link rel='apple-touch-icon' sizes='76x76' href='/favicons/apple-touch-icon-76x76.png'>
<link rel='apple-touch-icon' sizes='152x152' href='/favicons/apple-touch-icon-152x152.png'>
<meta name='apple-mobile-web-app-title' content='Pixma'>
<link rel='icon' type='image/png' href='/favicons/favicon-196x196.png' sizes='196x196'>
<link rel='icon' type='image/png' href='/favicons/favicon-160x160.png' sizes='160x160'>
<link rel='icon' type='image/png' href='/favicons/favicon-96x96.png' sizes='96x96'>
<link rel='icon' type='image/png' href='/favicons/favicon-16x16.png' sizes='16x16'>
<link rel='icon' type='image/png' href='/favicons/favicon-32x32.png' sizes='32x32'>
<meta name='msapplication-TileColor' content='#E76049'>
<meta name='msapplication-TileImage' content='/mstile-144x144.png'>
<meta name='application-name' content='Pixma'>
<link media='screen' rel='stylesheet' type='text/css' href='/css/vendor/pace/pace.css' />
<link media='screen' rel='stylesheet' type='text/css' href='/css/vendor/perfect-scrollbar/perfect-scrollbar.css'>
<link media='screen' rel='stylesheet' type='text/css' href='/css/vendor/morris/morris.css'>
<link media='screen' rel='stylesheet' type='text/css' href='/bower_components/codemirror/lib/codemirror.css'>
<link media='screen' rel='stylesheet' type='text/css' href='/bower_components/codemirror/theme/ambiance.css'>
<style>
.modal-backdrop.in {
opacity: 0.5;
position: fixed;
top: 0; left: 0;
right: 0; bottom: 0;
}
</style>
{stylesheets} <link media='screen' rel='stylesheet' type='text/css' href='/css/fonts/{app}/fonts.css'>
</head>
<body class='fade-out' data-version='{version}'>
<div id='pace-loader' class='pace-big'></div>
<div id='app-preloader'></div>
<div id='app-container'>{container}</div>
<div id='blueimp-gallery' class='blueimp-gallery blueimp-gallery-controls'>
<div class='slides'></div>
<h3 class='title'></h3>
<p class="description"></p>
<a class='prev'>‹</a>
<a class='next'>›</a>
<a class='close'>×</a>
<a class='play-pause'></a>
<ol class='indicator'></ol>
</div>
<script type='text/javascript' src='/js/common/pace/pace.js'></script>
<script type='text/javascript' src='/js/common/uuid/uuid.js'></script>
<!--incluido após versão 3.2-->
<script type='text/javascript' src='/bower_components/react/react-dom.js'></script>
<script type='text/javascript' src='/bower_components/modernizr/modernizr.js'></script>
<script type='text/javascript' src='/bower_components/codemirror/lib/codemirror.js'></script>
<script type='text/javascript' src='/bower_components/codemirror/mode/javascript/javascript.js'></script>
<script type='text/javascript' src='/bower_components/jquery/dist/jquery.js'></script>
<script type='text/javascript' src='/bower_components/jquery-ui/jquery-ui.min.js'></script>
<script type='text/javascript' src='/bower_components/moment/moment.js'></script>
<script type='text/javascript' src='/bower_components/eventemitter2/lib/eventemitter2.js'></script>
<script type='text/javascript' src='/bower_components/vex/js/vex.combined.min.js'></script>
<script type='text/javascript' src='/bower_components/chartjs/Chart.js'></script>
<script type='text/javascript' src='/bower_components/trumbowyg/dist/trumbowyg.js'></script>
<script type='text/javascript' src='/bower_components/blueimp-gallery/js/blueimp-gallery.js'></script>
<script type='text/javascript' src='/js/vendor/p-scrollbar/min/perfect-scrollbar.min.js'></script>
<script type='text/javascript' src='/bower_components/react/react-with-addons.js'></script>
<script type='text/javascript' src='/js/vendor/datatables/datatables.js'></script>
<script type='text/javascript' src='/js/common/react-l20n/react-l20n.js'></script>
<script type='text/javascript' src='/js/common/rubix-bootstrap/rubix-bootstrap.js'></script>
<!--<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
<script type='text/javascript' src='/js/vendor/gmaps/gmaps.js'></script>
-->
<script type='text/javascript' src='/js/vendor/bootstrap/bootstrap.js'></script>
<script type='text/javascript' src='/js/vendor/bootstrap-slider/bootstrap-slider.js'></script>
<script type='text/javascript' src='/js/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.js'></script>
<!--<script type='text/javascript' src='/js/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.pt-BR.js'></script>-->
<script type='text/javascript' src='/js/vendor/ion.tabs/ion.tabs.min.js'></script>
<script type='text/javascript' src='/js/vendor/ion.rangeSlider/ion.rangeSlider.min.js'></script>
<script type='text/javascript' src='/js/vendor/d3/d3.js'></script>
<script type='text/javascript' src='/js/vendor/jquery.knob/jquery.knob.js'></script>
<script type='text/javascript' src='/js/vendor/leaflet/leaflet.js'></script>
<script type='text/javascript' src='/js/vendor/sparklines/sparklines.js'></script>
<script type='text/javascript' src='/js/vendor/switchery/switchery.js'></script>
<script type='text/javascript' src='/js/vendor/raphael/raphael.js'></script>
<script type='text/javascript' src='/js/vendor/messenger/messenger.min.js'></script>
<script type='text/javascript' src='/js/vendor/select2/select2.js'></script>
<script type='text/javascript' src='/js/vendor/xeditable/xeditable.js'></script>
<script type='text/javascript' src='/js/vendor/typeahead/typeahead.js'></script>
<script type='text/javascript' src='/js/vendor/jquery-steps/jquery-steps.js'></script>
<script type='text/javascript' src='/js/vendor/jquery-validate/jquery-validate.js'></script>
<script type='text/javascript' src='/js/vendor/jquery-maskedinput/jquery.maskedinput.min.js'></script>
<script type='text/javascript' src='/js/vendor/tablesaw/tablesaw.js'></script>
<script type='text/javascript' src='/js/vendor/fullcalendar/fullcalendar.js'></script>
<script type='text/javascript' src='/js/vendor/nestable/nestable.js'></script>
<script type='text/javascript' src='/js/vendor/dropzone/dropzone.js'></script>
<script type='text/javascript' src='/js/vendor/jcrop/color.js'></script>
<script type='text/javascript' src='/js/vendor/jcrop/jcrop.js'></script>
<script type='text/javascript' src='/js/vendor/prism/prism.js'></script>
<script type='text/javascript' src='/js/vendor/morris/morris.js'></script>
<script type='text/javascript' src='/js/vendor/timeline/timeline.js'></script>
<script type='text/javascript' src='/js/vendor/holder/holder.js'></script>
<script type='text/javascript' src='/bower_components/c3/c3.js'></script>
<script type='text/javascript' src='/js/common/rubix/rubix.js'></script>
<script type='text/javascript' src='/js/common/globals.js'></script>
<script type='text/javascript' src='{appscript}'></script>
</body>
</html>
Raw
MenuServicos.jsx
var ReactIntl = require('react-intl');
var IntlMixin = ReactIntl.IntlMixin;
var FormattedNumber = ReactIntl.FormattedNumber;
var MenuServicos = React.createClass({
mixins: [IntlMixin],
render: function() {
var menu = (
<Menu alignRight id='rss-menu' className='double-width' alwaysInactive>
<MenuItem header>Header</MenuItem>
{
this.props.servicosCarrinho.map(function(ose, index){
return (
<MenuItem key={index} href='#'>
<Grid>
<Row>
<Col xs={2}>
<Icon className='fg-text' bundle='fontello' glyph='star' />
</Col>
<Col xs={10} collapseLeft className='notification-container' style={{width: 265}}>
<div className='time'>
<strong className='fg-darkgray50'><em>Nome do serviço </em></strong>
</div>
<div className='message-header fg-darkgray50'>
<strong className='fg-darkgreen45'>{ose.area}</strong><strong> m²</strong><strong className='fg-darkblue'>será realizado em {ose.qtdDiarias}</strong>
</div>
<div className='message-details fg-text'>
Valor total: <FormattedNumber value={ose.valorTotal} style="currency" currency="BRL" locales='pt-BR' />
</div>
</Col>
</Row>
</Grid>
</MenuItem>
);
})
}
</Menu>
);
return (<div>{menu} </div>);
}
});
module.exports = MenuServicos;
@LuizMoreira
Copy link
Author

screenshot 2015-12-09 08 44 09
Warning: Only functions or strings can be mounted as React components.
react-with-addons.js:9729 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment