lbry-desktop/js/component/header.js

90 lines
2.5 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import {Link} from './link.js';
var Header = React.createClass({
getInitialState: function() {
return {
title: "LBRY",
isScrolled: false
};
},
componentWillMount: function() {
new MutationObserver(function(mutations) {
2016-08-09 22:33:01 +02:00
this.setState({ title: mutations[0].target.textContent });
}.bind(this)).observe(
document.querySelector('title'),
{ subtree: true, characterData: true, childList: true }
);
},
componentDidMount: function() {
document.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount: function() {
document.removeEventListener('scroll', this.handleScroll);
if (this.userTypingTimer)
{
clearTimeout(this.userTypingTimer);
}
},
handleScroll: function() {
this.setState({
2016-08-19 15:47:40 +02:00
isScrolled: document.body.scrollTop > 0
});
},
2016-08-08 02:57:12 +02:00
onQueryChange: function(event) {
if (this.userTypingTimer)
{
clearTimeout(this.userTypingTimer);
}
//@TODO: Switch to React.js timing
var searchTerm = event.target.value;
this.userTypingTimer = setTimeout(() => {
this.props.onSearch(searchTerm);
}, 800); // 800ms delay, tweak for faster/slower
2016-08-08 02:57:12 +02:00
},
render: function() {
return (
<header id="header" className={ (this.state.isScrolled ? 'header-scrolled' : 'header-unscrolled') + ' ' + (this.props.links ? 'header-with-subnav' : 'header-no-subnav') }>
<div className="header-top-bar">
<Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
<h1>{ this.state.title }</h1>
<div className="header-search">
<input type="search" onChange={this.onQueryChange} defaultValue={this.props.initialQuery}
placeholder="Find movies, music, games, and more"/>
</div>
</div>
{
this.props.links ?
<SubHeader links={this.props.links} viewingPage={this.props.viewingPage} /> :
''
}
</header>
);
}
});
var SubHeader = React.createClass({
render: function() {
var links = [],
viewingUrl = '?' + this.props.viewingPage;
for (let link of Object.keys(this.props.links)) {
links.push(
<a href={link} key={link} className={ viewingUrl == link ? 'sub-header-selected' : 'sub-header-unselected' }>
{this.props.links[link]}
</a>
);
}
return (
<nav className="sub-header">
{links}
</nav>
);
}
2016-11-22 21:19:08 +01:00
});
export default Header;