lbry-desktop/ui/js/component/drawer/view.jsx

69 lines
2.1 KiB
React
Raw Normal View History

2017-04-07 07:15:22 +02:00
import lbry from 'lbry.js';
import React from 'react';
import Link from 'component/link';
const DrawerItem = (props) => {
const {
currentPage,
href,
subPages,
badge,
2017-04-07 07:15:22 +02:00
label,
linkClick,
icon,
} = props
const isSelected = (
currentPage == href.substr(0) ||
2017-04-07 07:15:22 +02:00
(subPages && subPages.indexOf(currentPage) != -1)
)
return <Link icon={icon} badge={badge} label={label} onClick={() => linkClick(href)} className={ 'drawer-item ' + (isSelected ? 'drawer-item-selected' : '') } />
2017-04-07 07:15:22 +02:00
}
var drawerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled
height: '36px'
};
class Drawer extends React.Component {
constructor(props) {
super(props)
this._balanceSubscribeId = null
}
componentDidMount() {
const { updateBalance } = this.props
this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
2017-04-07 07:15:22 +02:00
updateBalance(balance)
});
2017-04-07 07:15:22 +02:00
}
componentWillUnmount() {
if (this._balanceSubscribeId) {
lbry.balanceUnsubscribe(this._balanceSubscribeId)
}
}
render() {
const {
closeDrawerClick,
logoClick,
balance,
} = this.props
return(<nav id="drawer">
<div id="drawer-handle">
<Link title="Close" onClick={closeDrawerClick} icon="icon-bars" className="close-drawer-link"/>
<a href="discover" onMouseUp={logoClick}><img src={lbry.imagePath("lbry-dark-1600x528.png")} style={drawerImageStyle}/></a>
</div>
<DrawerItem {...this.props} href='discover' label="Discover" icon="icon-search" />
<DrawerItem {...this.props} href='publish' label="Publish" icon="icon-upload" />
<DrawerItem {...this.props} href='downloaded' subPages={['published']} label="My Files" icon='icon-cloud-download' />
<DrawerItem {...this.props} href="wallet" subPages={['send', 'receive', 'claim']} label="My Wallet" badge={lbry.formatCredits(balance) } icon="icon-bank" />
2017-04-07 07:15:22 +02:00
<DrawerItem {...this.props} href='settings' label="Settings" icon='icon-gear' />
<DrawerItem {...this.props} href='help' label="Help" icon='icon-question-circle' />
</nav>)
}
}
export default Drawer;