Files
old-ribica/front-ui/app/components/cart/cartIcon.js

96 lines
3.5 KiB
JavaScript

var React = require('react');
var CartStore = require('../../stores/cartStore.js');
var CartActions = require('../../actions/cartActions.js');
var NavigationActions = require('../../actions/navigationActions.js');
// var LoginStatus = require('../shared/loginStatus');
CartTotal = require('./cartTotal');
var cartStyle = {
fontSize: '50px'
};
var normalizeCount = function(count) {
if (count >= 0 && count < 10) {
return "\u00a0" + count;
} else {
return count;
}
}
var CartIcon = React.createClass({
render: function() {
var textNotificationStyle = (this.state.count > 0) ? { display: 'inline-block'} : { display: 'none'} ;
var large = (
<div>
<ul className="nav navbar-nav navbar-right hidden-md hidden-sm hidden-xs">
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px', backgroundColor: 'transparent' }}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}>
<a style={{marginBottom: 10, marginRight: 10}} className="mybutton" href="#">Završi narudžbu</a></li>
</ul>
<ul className="nav navbar-nav navbar-right hidden-lg">
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
<li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px',borderRight: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px', backgroundColor: 'transparent'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
</ul>
</div>
);
var small = (
<span>
<ul className="nav navbar-nav hidden-lg">
<li onClick={this._onClick} style={{paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
</ul>
</span>
);
if (this.props.small === 'true') {
return small;
}
else {
return large;
}
},
// Add change listeners to stores
componentDidMount: function() {
CartStore.addChangeListener(this._onChange);
if(!CartStore.dataStartedLoading()) {
CartActions.load();
};
},
getInitialState: function() {
var cartState = CartStore.getWholeCartState();
return cartState;
},
_onChange: function () {
if (this.isMounted()) {
this.setState(CartStore.getWholeCartState());
}
},
componentWillUnmount: function () {
CartStore.removeChangeListener(this._onChange);
},
_onClick: function(e) {
NavigationActions.goToCart();
e.preventDefault();
}
});
module.exports = CartIcon;