2016-11-22 21:19:08 +01:00
|
|
|
import React from 'react';
|
|
|
|
import {Link} from './link.js';
|
2017-04-27 05:54:53 +02:00
|
|
|
import {Icon, CreditAmount} from './common.js';
|
2016-11-22 21:19:08 +01:00
|
|
|
|
2016-08-07 22:10:44 +02:00
|
|
|
var Header = React.createClass({
|
2017-04-27 05:54:53 +02:00
|
|
|
_balanceSubscribeId: null,
|
2017-04-27 15:17:18 +02:00
|
|
|
_isMounted: false,
|
2017-04-27 05:54:53 +02:00
|
|
|
|
2016-08-08 00:13:17 +02:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-04-27 05:54:53 +02:00
|
|
|
balance: 0
|
2016-08-08 00:13:17 +02:00
|
|
|
};
|
|
|
|
},
|
2016-08-08 04:48:45 +02:00
|
|
|
componentDidMount: function() {
|
2017-04-27 15:17:18 +02:00
|
|
|
this._isMounted = true;
|
2017-04-27 05:54:53 +02:00
|
|
|
this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
|
2017-04-27 15:17:18 +02:00
|
|
|
if (this._isMounted) {
|
|
|
|
this.setState({balance: balance});
|
|
|
|
}
|
2017-04-27 05:54:53 +02:00
|
|
|
});
|
2016-08-08 02:20:14 +02:00
|
|
|
},
|
2016-08-08 04:48:45 +02:00
|
|
|
componentWillUnmount: function() {
|
2017-04-27 15:17:18 +02:00
|
|
|
this._isMounted = false;
|
2017-04-27 05:54:53 +02:00
|
|
|
if (this._balanceSubscribeId) {
|
|
|
|
lbry.balanceUnsubscribe(this._balanceSubscribeId)
|
2016-08-08 04:48:45 +02:00
|
|
|
}
|
2016-08-08 02:20:14 +02:00
|
|
|
},
|
2017-04-27 05:54:53 +02:00
|
|
|
render: function() {
|
2017-04-27 15:17:18 +02:00
|
|
|
return <header id="header">
|
2017-04-27 05:54:53 +02:00
|
|
|
<div className="header__item">
|
|
|
|
<Link onClick={() => { history.back() }} button="alt button--flat" icon="icon-arrow-left" />
|
|
|
|
</div>
|
|
|
|
<div className="header__item">
|
|
|
|
<Link href="?discover" button="alt button--flat" icon="icon-home" />
|
|
|
|
</div>
|
|
|
|
<div className="header__item header__item--wunderbar">
|
|
|
|
<WunderBar address={this.props.address} icon={this.props.wunderBarIcon} onSearch={this.props.onSearch} />
|
|
|
|
</div>
|
|
|
|
<div className="header__item">
|
|
|
|
<Link href="?wallet" button="text" icon="icon-bank" label={lbry.formatCredits(this.state.balance, 1)} ></Link>
|
|
|
|
</div>
|
|
|
|
<div className="header__item">
|
|
|
|
<Link button="primary button--flat" href="?publish" icon="icon-upload" label="Publish" />
|
|
|
|
</div>
|
|
|
|
<div className="header__item">
|
|
|
|
<Link button="alt button--flat" href="?downloaded" icon="icon-folder" />
|
|
|
|
</div>
|
|
|
|
<div className="header__item">
|
|
|
|
<Link button="alt button--flat" href="?settings" icon="icon-gear" />
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
let WunderBar = React.createClass({
|
|
|
|
_userTypingTimer: null,
|
|
|
|
_input: null,
|
|
|
|
_stateBeforeSearch: null,
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
address: this.props.address,
|
|
|
|
icon: this.props.icon
|
|
|
|
};
|
|
|
|
},
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
if (this.userTypingTimer) {
|
|
|
|
clearTimeout(this._userTypingTimer);
|
|
|
|
}
|
2016-08-08 02:20:14 +02:00
|
|
|
},
|
2017-04-27 05:54:53 +02:00
|
|
|
onChange: function(event) {
|
2016-08-08 02:57:12 +02:00
|
|
|
|
2017-04-27 05:54:53 +02:00
|
|
|
if (this._userTypingTimer)
|
2016-08-08 02:57:12 +02:00
|
|
|
{
|
2017-04-27 05:54:53 +02:00
|
|
|
clearTimeout(this._userTypingTimer);
|
2016-08-08 02:57:12 +02:00
|
|
|
}
|
|
|
|
|
2017-04-27 05:54:53 +02:00
|
|
|
this.setState({ address: event.target.value })
|
|
|
|
|
2016-08-08 02:57:12 +02:00
|
|
|
//@TODO: Switch to React.js timing
|
2016-08-08 04:48:45 +02:00
|
|
|
var searchTerm = event.target.value;
|
2017-04-27 05:54:53 +02:00
|
|
|
|
|
|
|
this._userTypingTimer = setTimeout(() => {
|
2016-08-08 04:48:45 +02:00
|
|
|
this.props.onSearch(searchTerm);
|
|
|
|
}, 800); // 800ms delay, tweak for faster/slower
|
2016-08-08 02:57:12 +02:00
|
|
|
|
|
|
|
},
|
2017-04-27 05:54:53 +02:00
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
if (nextProps.address !== this.state.address || nextProps.icon !== this.state.icon) {
|
|
|
|
this.setState({ address: nextProps.address, icon: nextProps.icon });
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onFocus: function() {
|
|
|
|
this._stateBeforeSearch = this.state;
|
|
|
|
let newState = {
|
2017-04-27 15:17:18 +02:00
|
|
|
icon: "icon-search",
|
|
|
|
isActive: true
|
2017-04-27 05:54:53 +02:00
|
|
|
}
|
|
|
|
// this._input.value = ""; //trigger placeholder
|
|
|
|
this._focusPending = true;
|
2017-04-30 10:06:50 +02:00
|
|
|
if (!this.state.address.startsWith('lbry://')) //onFocus, if they are not on an exact URL, clear the bar
|
2017-04-27 05:54:53 +02:00
|
|
|
{
|
2017-04-30 10:06:50 +02:00
|
|
|
newState.address = '';
|
2017-04-27 05:54:53 +02:00
|
|
|
}
|
|
|
|
this.setState(newState);
|
|
|
|
},
|
|
|
|
onBlur: function() {
|
2017-04-27 15:17:18 +02:00
|
|
|
this.setState(Object.assign({}, this._stateBeforeSearch, { isActive: false }));
|
2017-04-27 05:54:53 +02:00
|
|
|
this._input.value = this.state.address;
|
|
|
|
},
|
|
|
|
componentDidUpdate: function() {
|
|
|
|
this._input.value = this.state.address;
|
|
|
|
if (this._input && this._focusPending) {
|
|
|
|
this._input.select();
|
|
|
|
this._focusPending = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onReceiveRef: function(ref) {
|
|
|
|
this._input = ref;
|
|
|
|
},
|
2016-08-07 22:10:44 +02:00
|
|
|
render: function() {
|
2017-04-30 10:06:50 +02:00
|
|
|
return (
|
|
|
|
<div className={'wunderbar' + (this.state.isActive ? ' wunderbar--active' : '')}>
|
|
|
|
{this.state.icon ? <Icon fixed icon={this.state.icon} /> : '' }
|
|
|
|
<input className="wunderbar__input" type="search" placeholder="Type a LBRY address or search term"
|
|
|
|
ref={this.onReceiveRef}
|
|
|
|
onFocus={this.onFocus}
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
onChange={this.onChange}
|
|
|
|
value={this.state.address}
|
|
|
|
placeholder="Find movies, music, games, and more" />
|
2017-04-27 05:54:53 +02:00
|
|
|
</div>
|
2017-04-30 10:06:50 +02:00
|
|
|
);
|
2016-08-07 22:10:44 +02:00
|
|
|
}
|
2017-04-27 05:54:53 +02:00
|
|
|
})
|
2016-08-27 16:12:56 +02:00
|
|
|
|
2017-04-27 15:17:18 +02:00
|
|
|
export let SubHeader = React.createClass({
|
2016-08-27 16:12:56 +02:00
|
|
|
render: function() {
|
2017-04-27 15:17:18 +02:00
|
|
|
let links = [],
|
2016-08-27 16:12:56 +02:00
|
|
|
viewingUrl = '?' + this.props.viewingPage;
|
2017-01-13 04:36:03 +01:00
|
|
|
|
2016-08-27 16:12:56 +02:00
|
|
|
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 (
|
2017-04-27 15:17:18 +02:00
|
|
|
<nav className={'sub-header' + (this.props.modifier ? ' sub-header--' + this.props.modifier : '')}>
|
2016-08-27 16:12:56 +02:00
|
|
|
{links}
|
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
}
|
2016-11-22 21:19:08 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
export default Header;
|