lbry-desktop/ui/js/component/header.js

189 lines
5.7 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import lbryuri from '../lbryuri.js';
2016-11-22 21:19:08 +01:00
import {Link} from './link.js';
import {Icon, CreditAmount} from './common.js';
2016-11-22 21:19:08 +01:00
var Header = React.createClass({
_balanceSubscribeId: null,
2017-04-27 15:17:18 +02:00
_isMounted: false,
propTypes: {
onSearch: React.PropTypes.func.isRequired,
onSubmit: React.PropTypes.func.isRequired
},
getInitialState: function() {
return {
balance: 0
};
},
componentDidMount: function() {
2017-04-27 15:17:18 +02:00
this._isMounted = true;
this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
2017-04-27 15:17:18 +02:00
if (this._isMounted) {
this.setState({balance: balance});
}
});
},
componentWillUnmount: function() {
2017-04-27 15:17:18 +02:00
this._isMounted = false;
if (this._balanceSubscribeId) {
lbry.balanceUnsubscribe(this._balanceSubscribeId)
}
},
render: function() {
2017-04-27 15:17:18 +02:00
return <header id="header">
<div className="header__item">
<Link onClick={() => { lbry.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} onSubmit={this.props.onSubmit} viewingPage={this.props.viewingPage} />
</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,
_resetOnNextBlur: true,
propTypes: {
onSearch: React.PropTypes.func.isRequired,
onSubmit: React.PropTypes.func.isRequired
},
getInitialState: function() {
return {
address: this.props.address,
icon: this.props.icon
};
},
componentWillUnmount: function() {
if (this.userTypingTimer) {
clearTimeout(this._userTypingTimer);
}
},
onChange: function(event) {
2016-08-08 02:57:12 +02:00
if (this._userTypingTimer)
2016-08-08 02:57:12 +02:00
{
clearTimeout(this._userTypingTimer);
2016-08-08 02:57:12 +02:00
}
this.setState({ address: event.target.value })
let searchTerm = event.target.value;
this._userTypingTimer = setTimeout(() => {
this._resetOnNextBlur = false;
this.props.onSearch(searchTerm);
}, 800); // 800ms delay, tweak for faster/slower
2016-08-08 02:57:12 +02:00
},
componentWillReceiveProps(nextProps) {
if (nextProps.viewingPage !== this.props.viewingPage || nextProps.address != this.props.address) {
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
}
// this._input.value = ""; //trigger placeholder
this._focusPending = true;
//below is hacking, improved when we have proper routing
if (!this.state.address.startsWith('lbry://') && this.state.icon !== "icon-search") //onFocus, if they are not on an exact URL or a search page, clear the bar
{
2017-04-30 10:06:50 +02:00
newState.address = '';
}
this.setState(newState);
},
onBlur: function() {
let commonState = {isActive: false};
if (this._resetOnNextBlur) {
this.setState(Object.assign({}, this._stateBeforeSearch, commonState));
this._input.value = this.state.address;
} else {
this._resetOnNextBlur = true;
this._stateBeforeSearch = this.state;
this.setState(commonState);
}
},
componentDidUpdate: function() {
this._input.value = this.state.address;
if (this._input && this._focusPending) {
this._input.select();
this._focusPending = false;
}
},
onKeyPress: function(event) {
if (event.charCode == 13 && this._input.value) {
2017-05-01 21:59:40 +02:00
let uri = lbryuri.normalize(this._input.value);
clearTimeout(this._userTypingTimer);
2017-05-01 21:59:40 +02:00
this.props.onSubmit(uri);
this.setState({ value: uri })
this._resetOnNextBlur = false;
this._input.blur();
}
},
onReceiveRef: function(ref) {
this._input = ref;
},
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}
onKeyPress={this.onKeyPress}
2017-04-30 10:06:50 +02:00
value={this.state.address}
placeholder="Find movies, music, games, and more" />
</div>
2017-04-30 10:06:50 +02:00
);
}
})
2017-04-27 15:17:18 +02:00
export let SubHeader = React.createClass({
render: function() {
2017-04-27 15:17:18 +02:00
let 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 (
2017-04-27 15:17:18 +02:00
<nav className={'sub-header' + (this.props.modifier ? ' sub-header--' + this.props.modifier : '')}>
{links}
</nav>
);
}
2016-11-22 21:19:08 +01:00
});
export default Header;