Basics of conversion to ES6 classes
This commit is contained in:
Alex Liebowitz
parent
3fa4d0dfe7
commit
3e35d44978
19 changed files with 684 additions and 522 deletions
|
|
@ -9,23 +9,28 @@ import {CreditAmount, Address} from "../component/common.js";
|
|||
import {getLocal, getSession, setSession, setLocal} from '../utils.js';
|
||||
|
||||
|
||||
const SubmitEmailStage = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
class SubmitEmailStage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
rewardType: null,
|
||||
email: '',
|
||||
submitting: false
|
||||
};
|
||||
},
|
||||
handleEmailChanged: function(event) {
|
||||
}
|
||||
|
||||
handleEmailChanged(event) {
|
||||
this.setState({
|
||||
email: event.target.value,
|
||||
});
|
||||
},
|
||||
onEmailSaved: function(email) {
|
||||
}
|
||||
|
||||
onEmailSaved(email) {
|
||||
this.props.setStage("confirm", { email: email })
|
||||
},
|
||||
handleSubmit: function(event) {
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.setState({
|
||||
|
|
@ -42,8 +47,9 @@ const SubmitEmailStage = React.createClass({
|
|||
}
|
||||
this.setState({ submitting: false });
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
|
|
@ -57,23 +63,27 @@ const SubmitEmailStage = React.createClass({
|
|||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const ConfirmEmailStage = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
class ConfirmEmailStage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
rewardType: null,
|
||||
code: '',
|
||||
submitting: false,
|
||||
errorMessage: null,
|
||||
};
|
||||
},
|
||||
handleCodeChanged: function(event) {
|
||||
}
|
||||
|
||||
handleCodeChanged(event) {
|
||||
this.setState({
|
||||
code: event.target.value,
|
||||
});
|
||||
},
|
||||
handleSubmit: function(event) {
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
this.setState({
|
||||
submitting: true,
|
||||
|
|
@ -93,8 +103,9 @@ const ConfirmEmailStage = React.createClass({
|
|||
onSubmitError(new Error("Your email is still not verified.")) //shouldn't happen?
|
||||
}
|
||||
}, onSubmitError);
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
|
|
@ -111,25 +122,26 @@ const ConfirmEmailStage = React.createClass({
|
|||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const WelcomeStage = React.createClass({
|
||||
propTypes: {
|
||||
endAuth: React.PropTypes.func,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
class WelcomeStage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
hasReward: false,
|
||||
rewardAmount: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
onRewardClaim: function(reward) {
|
||||
|
||||
onRewardClaim(reward) {
|
||||
this.setState({
|
||||
hasReward: true,
|
||||
rewardAmount: reward.amount
|
||||
})
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
!this.state.hasReward ?
|
||||
<Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY" {...this.props}>
|
||||
|
|
@ -156,11 +168,13 @@ const WelcomeStage = React.createClass({
|
|||
</Modal>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
WelcomeStage.propTypes = {
|
||||
endAuth: React.PropTypes.func,
|
||||
};
|
||||
|
||||
|
||||
const ErrorStage = React.createClass({
|
||||
render: function() {
|
||||
class ErrorStage extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<section>
|
||||
<p>An error was encountered that we cannot continue from.</p>
|
||||
|
|
@ -170,29 +184,32 @@ const ErrorStage = React.createClass({
|
|||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const PendingStage = React.createClass({
|
||||
render: function() {
|
||||
class PendingStage extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<section>
|
||||
<p>Preparing for first access <span className="busy-indicator"></span></p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const CodeRequiredStage = React.createClass({
|
||||
_balanceSubscribeId: null,
|
||||
getInitialState: function() {
|
||||
return {
|
||||
class CodeRequiredStage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._balanceSubscribeId = nullp
|
||||
|
||||
this.state = {
|
||||
balance: 0,
|
||||
address: getLocal('wallet_address')
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
componentWillMount() {
|
||||
this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
|
||||
this.setState({
|
||||
balance: balance
|
||||
|
|
@ -205,13 +222,15 @@ const CodeRequiredStage = React.createClass({
|
|||
this.setState({ address: address });
|
||||
});
|
||||
}
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this._balanceSubscribeId) {
|
||||
lbry.balanceUnsubscribe(this._balanceSubscribeId)
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
const disabled = this.state.balance < 1;
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -234,31 +253,36 @@ const CodeRequiredStage = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export const AuthOverlay = React.createClass({
|
||||
_stages: {
|
||||
export class AuthOverlay extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._stages = {
|
||||
pending: PendingStage,
|
||||
error: ErrorStage,
|
||||
nocode: CodeRequiredStage,
|
||||
email: SubmitEmailStage,
|
||||
confirm: ConfirmEmailStage,
|
||||
welcome: WelcomeStage
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
this.state = {
|
||||
stage: "pending",
|
||||
stageProps: {}
|
||||
};
|
||||
},
|
||||
setStage: function(stage, stageProps = {}) {
|
||||
}
|
||||
|
||||
setStage(stage, stageProps = {}) {
|
||||
this.setState({
|
||||
stage: stage,
|
||||
stageProps: stageProps
|
||||
})
|
||||
},
|
||||
componentWillMount: function() {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
lbryio.authenticate().then((user) => {
|
||||
if (!user.HasVerifiedEmail) {
|
||||
if (getLocal('auth_bypassed')) {
|
||||
|
|
@ -284,8 +308,9 @@ export const AuthOverlay = React.createClass({
|
|||
}
|
||||
}));
|
||||
})
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.stage) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -299,4 +324,4 @@ export const AuthOverlay = React.createClass({
|
|||
<StageContent setStage={this.setStage} {...this.state.stageProps} />
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -2,65 +2,69 @@ import React from 'react';
|
|||
import lbry from '../lbry.js';
|
||||
|
||||
//component/icon.js
|
||||
export let Icon = React.createClass({
|
||||
propTypes: {
|
||||
export class Icon extends React.Component {
|
||||
static propTypes = {
|
||||
icon: React.PropTypes.string.isRequired,
|
||||
className: React.PropTypes.string,
|
||||
fixed: React.PropTypes.bool,
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
lines: null
|
||||
}
|
||||
|
||||
render() {
|
||||
const {fixed, className, ...other} = this.props;
|
||||
const spanClassName = ('icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') +
|
||||
this.props.icon + ' ' + (this.props.className || ''));
|
||||
return <span className={spanClassName} {... other}></span>
|
||||
}
|
||||
});
|
||||
|
||||
export let TruncatedText = React.createClass({
|
||||
propTypes: {
|
||||
lines: React.PropTypes.number
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
lines: null,
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
|
||||
export class TruncatedText extends React.Component {
|
||||
static propTypes = {
|
||||
lines: React.PropTypes.number,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <span className="truncated-text" style={{ WebkitLineClamp: this.props.lines }}>{this.props.children}</span>;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export let BusyMessage = React.createClass({
|
||||
propTypes: {
|
||||
message: React.PropTypes.string
|
||||
},
|
||||
render: function() {
|
||||
export class BusyMessage extends React.Component {
|
||||
static propTypes = {
|
||||
message: React.PropTypes.string,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <span>{this.props.message} <span className="busy-indicator"></span></span>
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export let CurrencySymbol = React.createClass({
|
||||
render: function() { return <span>LBC</span>; }
|
||||
});
|
||||
export class CurrencySymbol extends React.Component {
|
||||
render() {
|
||||
return <span>LBC</span>;
|
||||
}
|
||||
}
|
||||
|
||||
export let CreditAmount = React.createClass({
|
||||
propTypes: {
|
||||
export class CreditAmount extends React.Component {
|
||||
static propTypes = {
|
||||
amount: React.PropTypes.number.isRequired,
|
||||
precision: React.PropTypes.number,
|
||||
isEstimate: React.PropTypes.bool,
|
||||
label: React.PropTypes.bool,
|
||||
showFree: React.PropTypes.bool,
|
||||
look: React.PropTypes.oneOf(['indicator', 'plain']),
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
precision: 1,
|
||||
label: true,
|
||||
showFree: false,
|
||||
look: 'indicator',
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
|
||||
render() {
|
||||
const formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision);
|
||||
let amountText;
|
||||
if (this.props.showFree && parseFloat(formattedAmount) == 0) {
|
||||
|
|
@ -80,45 +84,56 @@ export let CreditAmount = React.createClass({
|
|||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var addressStyle = {
|
||||
let addressStyle = {
|
||||
fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
|
||||
};
|
||||
export let Address = React.createClass({
|
||||
_inputElem: null,
|
||||
propTypes: {
|
||||
export class Address extends React.Component {
|
||||
static propTypes = {
|
||||
address: React.PropTypes.string,
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._inputElem = null;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<input className="input-copyable" type="text" ref={(input) => { this._inputElem = input; }}
|
||||
onFocus={() => { this._inputElem.select(); }} style={addressStyle} readOnly="readonly" value={this.props.address}></input>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export let Thumbnail = React.createClass({
|
||||
_defaultImageUri: lbry.imagePath('default-thumb.svg'),
|
||||
_maxLoadTime: 10000,
|
||||
_isMounted: false,
|
||||
|
||||
propTypes: {
|
||||
export class Thumbnail extends React.Component {
|
||||
static propTypes = {
|
||||
src: React.PropTypes.string,
|
||||
},
|
||||
handleError: function() {
|
||||
}
|
||||
|
||||
handleError() {
|
||||
if (this.state.imageUrl != this._defaultImageUri) {
|
||||
this.setState({
|
||||
imageUri: this._defaultImageUri,
|
||||
});
|
||||
}
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._defaultImageUri = lbry.imagePath('default-thumb.svg')
|
||||
this._maxLoadTime = 10000
|
||||
this._isMounted = false
|
||||
|
||||
this.state = {
|
||||
imageUri: this.props.src || this._defaultImageUri,
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
setTimeout(() => {
|
||||
if (this._isMounted && !this.refs.img.complete) {
|
||||
|
|
@ -127,14 +142,16 @@ export let Thumbnail = React.createClass({
|
|||
});
|
||||
}
|
||||
}, this._maxLoadTime);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._isMounted = false;
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = this.props.className ? this.props.className : '',
|
||||
otherProps = Object.assign({}, this.props)
|
||||
delete otherProps.className;
|
||||
return <img ref="img" onError={this.handleError} {...otherProps} className={className} src={this.state.imageUri} />
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,24 +8,28 @@ function formFieldId() {
|
|||
return "form-field-" + (++formFieldCounter);
|
||||
}
|
||||
|
||||
export let FormField = React.createClass({
|
||||
_fieldRequiredText: 'This field is required',
|
||||
_type: null,
|
||||
_element: null,
|
||||
|
||||
propTypes: {
|
||||
export class FormField extends React.Component {
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string.isRequired,
|
||||
prefix: React.PropTypes.string,
|
||||
postfix: React.PropTypes.string,
|
||||
hasError: React.PropTypes.bool
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._fieldRequiredText = 'This field is required';
|
||||
this._type = null;
|
||||
this._element = null;
|
||||
|
||||
this.state = {
|
||||
isError: null,
|
||||
errorMessage: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
componentWillMount: function() {
|
||||
|
||||
componentWillMount() {
|
||||
if (['text', 'number', 'radio', 'checkbox', 'file'].includes(this.props.type)) {
|
||||
this._element = 'input';
|
||||
this._type = this.props.type;
|
||||
|
|
@ -36,17 +40,20 @@ export let FormField = React.createClass({
|
|||
// Non <input> field, e.g. <select>, <textarea>
|
||||
this._element = this.props.type;
|
||||
}
|
||||
},
|
||||
showError: function(text) {
|
||||
}
|
||||
|
||||
showError(text) {
|
||||
this.setState({
|
||||
isError: true,
|
||||
errorMessage: text,
|
||||
});
|
||||
},
|
||||
focus: function() {
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.refs.field.focus();
|
||||
},
|
||||
getValue: function() {
|
||||
}
|
||||
|
||||
getValue() {
|
||||
if (this.props.type == 'checkbox') {
|
||||
return this.refs.field.checked;
|
||||
} else if (this.props.type == 'file') {
|
||||
|
|
@ -55,11 +62,13 @@ export let FormField = React.createClass({
|
|||
} else {
|
||||
return this.refs.field.value;
|
||||
}
|
||||
},
|
||||
getSelectedElement: function() {
|
||||
}
|
||||
|
||||
getSelectedElement() {
|
||||
return this.refs.field.options[this.refs.field.selectedIndex];
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
// Pass all unhandled props to the field element
|
||||
const otherProps = Object.assign({}, this.props),
|
||||
isError = this.state.isError !== null ? this.state.isError : this.props.hasError,
|
||||
|
|
@ -91,45 +100,56 @@ export let FormField = React.createClass({
|
|||
{ isError && this.state.errorMessage ? <div className="form-field__error">{this.state.errorMessage}</div> : '' }
|
||||
</div>
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export let FormRow = React.createClass({
|
||||
_fieldRequiredText: 'This field is required',
|
||||
propTypes: {
|
||||
label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element])
|
||||
export class FormRow extends React.Component {
|
||||
static propTypes = {
|
||||
label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
|
||||
// helper: React.PropTypes.html,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._fieldRequiredText = 'This field is required';
|
||||
|
||||
this.state = {
|
||||
isError: false,
|
||||
errorMessage: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
showError: function(text) {
|
||||
|
||||
showError(text) {
|
||||
this.setState({
|
||||
isError: true,
|
||||
errorMessage: text,
|
||||
});
|
||||
},
|
||||
showRequiredError: function() {
|
||||
}
|
||||
|
||||
showRequiredError() {
|
||||
this.showError(this._fieldRequiredText);
|
||||
},
|
||||
clearError: function(text) {
|
||||
}
|
||||
|
||||
clearError(text) {
|
||||
this.setState({
|
||||
isError: false,
|
||||
errorMessage: ''
|
||||
});
|
||||
},
|
||||
getValue: function() {
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return this.refs.field.getValue();
|
||||
},
|
||||
getSelectedElement: function() {
|
||||
}
|
||||
|
||||
getSelectedElement() {
|
||||
return this.refs.field.getSelectedElement();
|
||||
},
|
||||
focus: function() {
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.refs.field.focus();
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
const fieldProps = Object.assign({}, this.props),
|
||||
elementId = formFieldId(),
|
||||
renderLabelInFormField = formFieldNestedLabelTypes.includes(this.props.type);
|
||||
|
|
@ -151,4 +171,4 @@ export let FormRow = React.createClass({
|
|||
{ this.state.isError ? <div className="form-field__error">{this.state.errorMessage}</div> : '' }
|
||||
</div>
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,28 @@ import lbry from '../lbry.js';
|
|||
import {BusyMessage, Icon} from './common.js';
|
||||
import Link from 'component/link'
|
||||
|
||||
var LoadScreen = React.createClass({
|
||||
propTypes: {
|
||||
class LoadScreen extends React.Component {
|
||||
static propTypes = {
|
||||
message: React.PropTypes.string.isRequired,
|
||||
details: React.PropTypes.string,
|
||||
isWarning: React.PropTypes.bool,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
isWarning: false,
|
||||
}
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
message: null,
|
||||
details: null,
|
||||
isLagging: false,
|
||||
};
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
|
||||
static defaultProps = {
|
||||
isWarning: false,
|
||||
}
|
||||
|
||||
render() {
|
||||
const imgSrc = lbry.imagePath('lbry-white-485x160.png');
|
||||
return (
|
||||
<div className="load-screen">
|
||||
|
|
@ -35,7 +38,7 @@ var LoadScreen = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export default LoadScreen;
|
||||
|
|
|
|||
|
|
@ -2,19 +2,19 @@ import React from 'react';
|
|||
import {Icon} from './common.js';
|
||||
import Link from 'component/link';
|
||||
|
||||
export let DropDownMenuItem = React.createClass({
|
||||
propTypes: {
|
||||
export class DropDownMenuItem extends React.Component {
|
||||
static propTypes = {
|
||||
href: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
onClick: React.PropTypes.func,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
iconPosition: 'left',
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
|
||||
render() {
|
||||
var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
|
||||
|
||||
return (
|
||||
|
|
@ -26,23 +26,27 @@ export let DropDownMenuItem = React.createClass({
|
|||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export let DropDownMenu = React.createClass({
|
||||
_isWindowClickBound: false,
|
||||
_menuDiv: null,
|
||||
export class DropDownMenu extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
this._isWindowClickBound = false;
|
||||
this._menuDiv = null;
|
||||
|
||||
this.state = {
|
||||
menuOpen: false,
|
||||
};
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this._isWindowClickBound) {
|
||||
window.removeEventListener('click', this.handleWindowClick, false);
|
||||
}
|
||||
},
|
||||
handleMenuIconClick: function(e) {
|
||||
}
|
||||
|
||||
handleMenuIconClick(e) {
|
||||
this.setState({
|
||||
menuOpen: !this.state.menuOpen,
|
||||
});
|
||||
|
|
@ -52,22 +56,25 @@ export let DropDownMenu = React.createClass({
|
|||
e.stopPropagation();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
handleMenuClick: function(e) {
|
||||
}
|
||||
|
||||
handleMenuClick(e) {
|
||||
// Event bubbles up to the menu after a link is clicked
|
||||
this.setState({
|
||||
menuOpen: false,
|
||||
});
|
||||
},
|
||||
handleWindowClick: function(e) {
|
||||
}
|
||||
|
||||
handleWindowClick(e) {
|
||||
if (this.state.menuOpen &&
|
||||
(!this._menuDiv || !this._menuDiv.contains(e.target))) {
|
||||
this.setState({
|
||||
menuOpen: false
|
||||
});
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.menuOpen && this._isWindowClickBound) {
|
||||
this._isWindowClickBound = false;
|
||||
window.removeEventListener('click', this.handleWindowClick, false);
|
||||
|
|
@ -83,4 +90,4 @@ export let DropDownMenu = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import ReactModal from 'react-modal';
|
||||
|
||||
export const ModalPage = React.createClass({
|
||||
render: function() {
|
||||
export class ModalPage extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
|
||||
className={(this.props.className || '') + ' modal-page'}
|
||||
|
|
@ -13,6 +13,4 @@ export const ModalPage = React.createClass({
|
|||
</ReactModal>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default ModalPage;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import ReactModal from 'react-modal';
|
|||
import Link from 'component/link';
|
||||
|
||||
|
||||
export const Modal = React.createClass({
|
||||
propTypes: {
|
||||
export class Modal extends React.Component {
|
||||
static propTypes = {
|
||||
type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
|
||||
overlay: React.PropTypes.bool,
|
||||
onConfirmed: React.PropTypes.func,
|
||||
|
|
@ -13,18 +13,18 @@ export const Modal = React.createClass({
|
|||
abortButtonLabel: React.PropTypes.string,
|
||||
confirmButtonDisabled: React.PropTypes.bool,
|
||||
abortButtonDisabled: React.PropTypes.bool,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
type: 'alert',
|
||||
overlay: true,
|
||||
confirmButtonLabel: 'OK',
|
||||
abortButtonLabel: 'Cancel',
|
||||
confirmButtonDisabled: false,
|
||||
abortButtonDisabled: false,
|
||||
};
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
|
||||
className={(this.props.className || '') + ' modal'}
|
||||
|
|
@ -43,31 +43,35 @@ export const Modal = React.createClass({
|
|||
</ReactModal>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export const ExpandableModal = React.createClass({
|
||||
propTypes: {
|
||||
export class ExpandableModal extends React.Component {
|
||||
static propTypes = {
|
||||
expandButtonLabel: React.PropTypes.string,
|
||||
extraContent: React.PropTypes.element,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
confirmButtonLabel: 'OK',
|
||||
expandButtonLabel: 'Show More...',
|
||||
hideButtonLabel: 'Show Less',
|
||||
}
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
expanded: false,
|
||||
}
|
||||
},
|
||||
toggleExpanded: function() {
|
||||
}
|
||||
|
||||
toggleExpanded() {
|
||||
this.setState({
|
||||
expanded: !this.state.expanded,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal type="custom" {... this.props}>
|
||||
{this.props.children}
|
||||
|
|
@ -82,6 +86,6 @@ export const ExpandableModal = React.createClass({
|
|||
</Modal>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default Modal;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import React from 'react';
|
||||
|
||||
export const Notice = React.createClass({
|
||||
propTypes: {
|
||||
export class Notice extends React.Component {
|
||||
static propTypes = {
|
||||
isError: React.PropTypes.bool,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
isError: false,
|
||||
};
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section className={'notice ' + (this.props.isError ? 'notice--error ' : '') + (this.props.className || '')}>
|
||||
{this.props.children}
|
||||
</section>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Notice;
|
||||
|
|
@ -5,14 +5,25 @@ import Modal from 'component/modal';
|
|||
import rewards from 'rewards';
|
||||
import Link from 'component/link'
|
||||
|
||||
export let RewardLink = React.createClass({
|
||||
propTypes: {
|
||||
export class RewardLink extends React.Component {
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string.isRequired,
|
||||
claimed: React.PropTypes.bool,
|
||||
onRewardClaim: React.PropTypes.func,
|
||||
onRewardFailure: React.PropTypes.func
|
||||
},
|
||||
refreshClaimable: function() {
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
claimable: true,
|
||||
pending: false,
|
||||
errorMessage: null
|
||||
};
|
||||
}
|
||||
|
||||
refreshClaimable() {
|
||||
switch(this.props.type) {
|
||||
case 'new_user':
|
||||
this.setState({ claimable: true });
|
||||
|
|
@ -26,18 +37,13 @@ export let RewardLink = React.createClass({
|
|||
}.bind(this));
|
||||
return;
|
||||
}
|
||||
},
|
||||
componentWillMount: function() {
|
||||
this.refreshClaimable();
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
claimable: true,
|
||||
pending: false,
|
||||
errorMessage: null
|
||||
}
|
||||
},
|
||||
claimReward: function() {
|
||||
|
||||
componentWillMount() {
|
||||
this.refreshClaimable();
|
||||
}
|
||||
|
||||
claimReward() {
|
||||
this.setState({
|
||||
pending: true
|
||||
})
|
||||
|
|
@ -55,16 +61,18 @@ export let RewardLink = React.createClass({
|
|||
pending: false
|
||||
})
|
||||
})
|
||||
},
|
||||
clearError: function() {
|
||||
}
|
||||
|
||||
clearError() {
|
||||
if (this.props.onRewardFailure) {
|
||||
this.props.onRewardFailure()
|
||||
}
|
||||
this.setState({
|
||||
errorMessage: null
|
||||
})
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="reward-link">
|
||||
{this.props.claimed
|
||||
|
|
@ -79,4 +87,4 @@ export let RewardLink = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,18 +1,19 @@
|
|||
import React from 'react';
|
||||
import lbry from '../lbry.js';
|
||||
|
||||
export const SnackBar = React.createClass({
|
||||
export class SnackBar extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
_displayTime: 5, // in seconds
|
||||
this._displayTime = 5; // in seconds
|
||||
this._hideTimeout = null;
|
||||
|
||||
_hideTimeout: null,
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
this.state = {
|
||||
snacks: []
|
||||
};
|
||||
}
|
||||
},
|
||||
handleSnackReceived: function(event) {
|
||||
|
||||
handleSnackReceived(event) {
|
||||
// if (this._hideTimeout) {
|
||||
// clearTimeout(this._hideTimeout);
|
||||
// }
|
||||
|
|
@ -20,14 +21,17 @@ export const SnackBar = React.createClass({
|
|||
let snacks = this.state.snacks;
|
||||
snacks.push(event.detail);
|
||||
this.setState({ snacks: snacks});
|
||||
},
|
||||
componentWillMount: function() {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
document.addEventListener('globalNotice', this.handleSnackReceived);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('globalNotice', this.handleSnackReceived);
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.snacks.length) {
|
||||
this._hideTimeout = null; //should be unmounting anyway, but be safe?
|
||||
return null;
|
||||
|
|
@ -51,7 +55,7 @@ export const SnackBar = React.createClass({
|
|||
<a className="snack-bar__action" href={snack.linkTarget}>{snack.linkText}</a> : ''}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default SnackBar;
|
||||
|
|
@ -2,21 +2,26 @@ import React from 'react';
|
|||
import lbry from '../lbry.js';
|
||||
import LoadScreen from './load_screen.js';
|
||||
|
||||
var SplashScreen = React.createClass({
|
||||
propTypes: {
|
||||
export class SplashScreen extends React.Component {
|
||||
static propTypes = {
|
||||
message: React.PropTypes.string,
|
||||
onLoadDone: React.PropTypes.func,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
details: 'Starting daemon',
|
||||
isLagging: false,
|
||||
};
|
||||
}
|
||||
},
|
||||
updateStatus: function() {
|
||||
|
||||
updateStatus() {
|
||||
lbry.status().then(this._updateStatusCallback);
|
||||
},
|
||||
_updateStatusCallback: function(status) {
|
||||
}
|
||||
|
||||
_updateStatusCallback(status) {
|
||||
const startupStatus = status.startup_status
|
||||
if (startupStatus.code == 'started') {
|
||||
// Wait until we are able to resolve a name before declaring
|
||||
|
|
@ -40,8 +45,9 @@ var SplashScreen = React.createClass({
|
|||
setTimeout(() => {
|
||||
this.updateStatus();
|
||||
}, 500);
|
||||
},
|
||||
componentDidMount: function() {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
lbry.connect().then((isConnected) => {
|
||||
if (isConnected) {
|
||||
this.updateStatus();
|
||||
|
|
@ -53,10 +59,11 @@ var SplashScreen = React.createClass({
|
|||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return <LoadScreen message={this.props.message} details={this.state.details} isWarning={this.state.isLagging} />
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default SplashScreen;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,32 @@
|
|||
import React from 'react';
|
||||
|
||||
export let ToolTip = React.createClass({
|
||||
propTypes: {
|
||||
export class ToolTip extends React.Component {
|
||||
static propTypes = {
|
||||
body: React.PropTypes.string.isRequired,
|
||||
label: React.PropTypes.string.isRequired
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showTooltip: false,
|
||||
};
|
||||
},
|
||||
handleClick: function() {
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.setState({
|
||||
showTooltip: !this.state.showTooltip,
|
||||
});
|
||||
},
|
||||
handleTooltipMouseOut: function() {
|
||||
}
|
||||
|
||||
handleTooltipMouseOut() {
|
||||
this.setState({
|
||||
showTooltip: false,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span className={'tooltip ' + (this.props.className || '')}>
|
||||
<a className="tooltip__link" onClick={this.handleClick}>
|
||||
|
|
@ -33,6 +39,6 @@ export let ToolTip = React.createClass({
|
|||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default ToolTip
|
||||
|
|
@ -6,34 +6,40 @@ import Link from '../component/link';
|
|||
const fs = require('fs');
|
||||
const {ipcRenderer} = require('electron');
|
||||
|
||||
const DeveloperPage = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
class DeveloperPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showDeveloperMenu: lbry.getClientSetting('showDeveloperMenu'),
|
||||
useCustomLighthouseServers: lbry.getClientSetting('useCustomLighthouseServers'),
|
||||
customLighthouseServers: lbry.getClientSetting('customLighthouseServers').join('\n'),
|
||||
upgradePath: '',
|
||||
};
|
||||
},
|
||||
handleShowDeveloperMenuChange: function(event) {
|
||||
}
|
||||
|
||||
handleShowDeveloperMenuChange(event) {
|
||||
lbry.setClientSetting('showDeveloperMenu', event.target.checked);
|
||||
lbry.showMenuIfNeeded();
|
||||
this.setState({
|
||||
showDeveloperMenu: event.target.checked,
|
||||
});
|
||||
},
|
||||
handleUseCustomLighthouseServersChange: function(event) {
|
||||
}
|
||||
|
||||
handleUseCustomLighthouseServersChange(event) {
|
||||
lbry.setClientSetting('useCustomLighthouseServers', event.target.checked);
|
||||
this.setState({
|
||||
useCustomLighthouseServers: event.target.checked,
|
||||
});
|
||||
},
|
||||
handleUpgradeFileChange: function(event) {
|
||||
}
|
||||
|
||||
handleUpgradeFileChange(event) {
|
||||
this.setState({
|
||||
upgradePath: event.target.files[0].path,
|
||||
});
|
||||
},
|
||||
handleForceUpgradeClick: function() {
|
||||
}
|
||||
|
||||
handleForceUpgradeClick() {
|
||||
let upgradeSent = false;
|
||||
if (!this.state.upgradePath) {
|
||||
alert('Please select a file to upgrade from');
|
||||
|
|
@ -51,8 +57,9 @@ const DeveloperPage = React.createClass({
|
|||
alert('Failed to start upgrade. Is "' + this.state.upgradePath + '" a valid path to the upgrade?');
|
||||
}
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<main>
|
||||
<section className="card">
|
||||
|
|
@ -82,6 +89,6 @@ const DeveloperPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default DeveloperPage;
|
||||
|
|
|
|||
|
|
@ -5,14 +5,17 @@ import Link from 'component/link';
|
|||
import SubHeader from 'component/subHeader'
|
||||
import {version as uiVersion} from 'json!../../../package.json';
|
||||
|
||||
var HelpPage = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
class HelpPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
versionInfo: null,
|
||||
lbryId: null,
|
||||
};
|
||||
},
|
||||
componentWillMount: function() {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
lbry.getVersionInfo((info) => {
|
||||
this.setState({
|
||||
versionInfo: info,
|
||||
|
|
@ -23,11 +26,13 @@ var HelpPage = React.createClass({
|
|||
lbryId: info.lbry_id,
|
||||
});
|
||||
});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.title = "Help";
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
let ver, osName, platform, newVerLink;
|
||||
if (this.state.versionInfo) {
|
||||
ver = this.state.versionInfo;
|
||||
|
|
@ -119,6 +124,6 @@ var HelpPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default HelpPage;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,41 @@ import Link from 'component/link';
|
|||
import rewards from 'rewards';
|
||||
import Modal from 'component/modal';
|
||||
|
||||
var PublishPage = React.createClass({
|
||||
_requiredFields: ['meta_title', 'name', 'bid', 'tos_agree'],
|
||||
class PublishPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
_updateChannelList: function(channel) {
|
||||
this._requiredFields = ['meta_title', 'name', 'bid', 'tos_agree'];
|
||||
|
||||
this.state = {
|
||||
channels: null,
|
||||
rawName: '',
|
||||
name: '',
|
||||
bid: 10,
|
||||
hasFile: false,
|
||||
feeAmount: '',
|
||||
feeCurrency: 'USD',
|
||||
channel: 'anonymous',
|
||||
newChannelName: '@',
|
||||
newChannelBid: 10,
|
||||
nameResolved: null,
|
||||
myClaimExists: null,
|
||||
topClaimValue: 0.0,
|
||||
myClaimValue: 0.0,
|
||||
myClaimMetadata: null,
|
||||
copyrightNotice: '',
|
||||
otherLicenseDescription: '',
|
||||
otherLicenseUrl: '',
|
||||
uploadProgress: 0.0,
|
||||
uploaded: false,
|
||||
errorMessage: null,
|
||||
submitting: false,
|
||||
creatingChannel: false,
|
||||
modal: null,
|
||||
};
|
||||
}
|
||||
|
||||
_updateChannelList(channel) {
|
||||
// Calls API to update displayed list of channels. If a channel name is provided, will select
|
||||
// that channel at the same time (used immediately after creating a channel)
|
||||
lbry.channel_list_mine().then((channels) => {
|
||||
|
|
@ -18,8 +49,9 @@ var PublishPage = React.createClass({
|
|||
... channel ? {channel} : {}
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSubmit: function(event) {
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
if (typeof event !== 'undefined') {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
|
@ -112,51 +144,27 @@ var PublishPage = React.createClass({
|
|||
} else {
|
||||
doPublish();
|
||||
}
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
channels: null,
|
||||
rawName: '',
|
||||
name: '',
|
||||
bid: 10,
|
||||
hasFile: false,
|
||||
feeAmount: '',
|
||||
feeCurrency: 'USD',
|
||||
channel: 'anonymous',
|
||||
newChannelName: '@',
|
||||
newChannelBid: 10,
|
||||
nameResolved: null,
|
||||
myClaimExists: null,
|
||||
topClaimValue: 0.0,
|
||||
myClaimValue: 0.0,
|
||||
myClaimMetadata: null,
|
||||
copyrightNotice: '',
|
||||
otherLicenseDescription: '',
|
||||
otherLicenseUrl: '',
|
||||
uploadProgress: 0.0,
|
||||
uploaded: false,
|
||||
errorMessage: null,
|
||||
submitting: false,
|
||||
creatingChannel: false,
|
||||
modal: null,
|
||||
};
|
||||
},
|
||||
handlePublishStarted: function() {
|
||||
}
|
||||
|
||||
handlePublishStarted() {
|
||||
this.setState({
|
||||
modal: 'publishStarted',
|
||||
});
|
||||
},
|
||||
handlePublishStartedConfirmed: function() {
|
||||
}
|
||||
|
||||
handlePublishStartedConfirmed() {
|
||||
this.props.navigate('/published')
|
||||
},
|
||||
handlePublishError: function(error) {
|
||||
}
|
||||
|
||||
handlePublishError(error) {
|
||||
this.setState({
|
||||
submitting: false,
|
||||
modal: 'error',
|
||||
errorMessage: error.message,
|
||||
});
|
||||
},
|
||||
handleNameChange: function(event) {
|
||||
}
|
||||
|
||||
handleNameChange(event) {
|
||||
var rawName = event.target.value;
|
||||
|
||||
if (!rawName) {
|
||||
|
|
@ -228,28 +236,33 @@ var PublishPage = React.createClass({
|
|||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
handleBidChange: function(event) {
|
||||
}
|
||||
|
||||
handleBidChange(event) {
|
||||
this.setState({
|
||||
bid: event.target.value,
|
||||
});
|
||||
},
|
||||
handleFeeAmountChange: function(event) {
|
||||
}
|
||||
|
||||
handleFeeAmountChange(event) {
|
||||
this.setState({
|
||||
feeAmount: event.target.value,
|
||||
});
|
||||
},
|
||||
handleFeeCurrencyChange: function(event) {
|
||||
}
|
||||
|
||||
handleFeeCurrencyChange(event) {
|
||||
this.setState({
|
||||
feeCurrency: event.target.value,
|
||||
});
|
||||
},
|
||||
handleFeePrefChange: function(feeEnabled) {
|
||||
}
|
||||
|
||||
handleFeePrefChange(feeEnabled) {
|
||||
this.setState({
|
||||
isFee: feeEnabled
|
||||
});
|
||||
},
|
||||
handleLicenseChange: function(event) {
|
||||
}
|
||||
|
||||
handleLicenseChange(event) {
|
||||
var licenseType = event.target.options[event.target.selectedIndex].getAttribute('data-license-type');
|
||||
var newState = {
|
||||
copyrightChosen: licenseType == 'copyright',
|
||||
|
|
@ -261,30 +274,35 @@ var PublishPage = React.createClass({
|
|||
}
|
||||
|
||||
this.setState(newState);
|
||||
},
|
||||
handleCopyrightNoticeChange: function(event) {
|
||||
}
|
||||
|
||||
handleCopyrightNoticeChange(event) {
|
||||
this.setState({
|
||||
copyrightNotice: event.target.value,
|
||||
});
|
||||
},
|
||||
handleOtherLicenseDescriptionChange: function(event) {
|
||||
}
|
||||
|
||||
handleOtherLicenseDescriptionChange(event) {
|
||||
this.setState({
|
||||
otherLicenseDescription: event.target.value,
|
||||
});
|
||||
},
|
||||
handleOtherLicenseUrlChange: function(event) {
|
||||
}
|
||||
|
||||
handleOtherLicenseUrlChange(event) {
|
||||
this.setState({
|
||||
otherLicenseUrl: event.target.value,
|
||||
});
|
||||
},
|
||||
handleChannelChange: function (event) {
|
||||
}
|
||||
|
||||
handleChannelChange(event) {
|
||||
const channel = event.target.value;
|
||||
|
||||
this.setState({
|
||||
channel: channel,
|
||||
});
|
||||
},
|
||||
handleNewChannelNameChange: function (event) {
|
||||
}
|
||||
|
||||
handleNewChannelNameChange(event) {
|
||||
const newChannelName = (event.target.value.startsWith('@') ? event.target.value : '@' + event.target.value);
|
||||
|
||||
if (newChannelName.length > 1 && !lbry.nameIsValid(newChannelName.substr(1), false)) {
|
||||
|
|
@ -297,18 +315,21 @@ var PublishPage = React.createClass({
|
|||
this.setState({
|
||||
newChannelName: newChannelName,
|
||||
});
|
||||
},
|
||||
handleNewChannelBidChange: function (event) {
|
||||
}
|
||||
|
||||
handleNewChannelBidChange(event) {
|
||||
this.setState({
|
||||
newChannelBid: event.target.value,
|
||||
});
|
||||
},
|
||||
handleTOSChange: function(event) {
|
||||
}
|
||||
|
||||
handleTOSChange(event) {
|
||||
this.setState({
|
||||
TOSAgreed: event.target.checked,
|
||||
});
|
||||
},
|
||||
handleCreateChannelClick: function (event) {
|
||||
}
|
||||
|
||||
handleCreateChannelClick(event) {
|
||||
if (this.state.newChannelName.length < 5) {
|
||||
this.refs.newChannelName.showError('LBRY channel names must be at least 4 characters in length.');
|
||||
return;
|
||||
|
|
@ -334,8 +355,9 @@ var PublishPage = React.createClass({
|
|||
creatingChannel: false,
|
||||
});
|
||||
});
|
||||
},
|
||||
getLicenseUrl: function() {
|
||||
}
|
||||
|
||||
getLicenseUrl() {
|
||||
if (!this.refs.meta_license) {
|
||||
return '';
|
||||
} else if (this.state.otherLicenseChosen) {
|
||||
|
|
@ -343,20 +365,21 @@ var PublishPage = React.createClass({
|
|||
} else {
|
||||
return this.refs.meta_license.getSelectedElement().getAttribute('data-url') || '' ;
|
||||
}
|
||||
},
|
||||
componentWillMount: function() {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this._updateChannelList();
|
||||
},
|
||||
componentDidUpdate: function() {
|
||||
},
|
||||
onFileChange: function() {
|
||||
}
|
||||
|
||||
onFileChange() {
|
||||
if (this.refs.file.getValue()) {
|
||||
this.setState({ hasFile: true })
|
||||
} else {
|
||||
this.setState({ hasFile: false })
|
||||
}
|
||||
},
|
||||
getNameBidHelpText: function() {
|
||||
}
|
||||
|
||||
getNameBidHelpText() {
|
||||
if (!this.state.name) {
|
||||
return "Select a URL for this publish.";
|
||||
} else if (this.state.nameResolved === false) {
|
||||
|
|
@ -369,13 +392,15 @@ var PublishPage = React.createClass({
|
|||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
closeModal: function() {
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.setState({
|
||||
modal: null,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.channels === null) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -564,6 +589,6 @@ var PublishPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default PublishPage;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,17 @@ import Link from 'component/link';
|
|||
import Modal from '../component/modal.js';
|
||||
import lbry from '../lbry.js';
|
||||
|
||||
var ReportPage = React.createClass({
|
||||
submitMessage: function() {
|
||||
class ReportPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
submitting: false,
|
||||
modal: null,
|
||||
};
|
||||
}
|
||||
|
||||
submitMessage() {
|
||||
if (this._messageArea.value) {
|
||||
this.setState({
|
||||
submitting: true
|
||||
|
|
@ -17,19 +26,15 @@ var ReportPage = React.createClass({
|
|||
});
|
||||
this._messageArea.value = '';
|
||||
}
|
||||
},
|
||||
closeModal: function() {
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.setState({
|
||||
modal: null,
|
||||
})
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
submitting: false,
|
||||
modal: null,
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<main className="main--single-column">
|
||||
<section className="card">
|
||||
|
|
@ -53,6 +58,6 @@ var ReportPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default ReportPage;
|
||||
|
|
|
|||
|
|
@ -4,16 +4,17 @@ import {CreditAmount, Icon} from 'component/common.js';
|
|||
import SubHeader from 'component/subHeader'
|
||||
import {RewardLink} from 'component/reward-link';
|
||||
|
||||
const RewardTile = React.createClass({
|
||||
propTypes: {
|
||||
export class RewardTile extends React.Component {
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string.isRequired,
|
||||
title: React.PropTypes.string.isRequired,
|
||||
description: React.PropTypes.string.isRequired,
|
||||
claimed: React.PropTypes.bool.isRequired,
|
||||
value: React.PropTypes.number.isRequired,
|
||||
onRewardClaim: React.PropTypes.func
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<section className="card">
|
||||
<div className="card__inner">
|
||||
|
|
@ -31,19 +32,23 @@ const RewardTile = React.createClass({
|
|||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export let RewardsPage = React.createClass({
|
||||
componentWillMount: function() {
|
||||
this.loadRewards()
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
export class RewardsPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
userRewards: null,
|
||||
failed: null
|
||||
failed: null,
|
||||
};
|
||||
},
|
||||
loadRewards: function() {
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.loadRewards()
|
||||
}
|
||||
|
||||
loadRewards() {
|
||||
lbryio.call('reward', 'list', {}).then((userRewards) => {
|
||||
this.setState({
|
||||
userRewards: userRewards,
|
||||
|
|
@ -51,8 +56,9 @@ export let RewardsPage = React.createClass({
|
|||
}, () => {
|
||||
this.setState({failed: true })
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<main className="main--single-column">
|
||||
<SubHeader />
|
||||
|
|
@ -66,6 +72,6 @@ export let RewardsPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default RewardsPage;
|
||||
|
|
|
|||
|
|
@ -3,46 +3,10 @@ import {FormField, FormRow} from 'component/form.js';
|
|||
import SubHeader from 'component/subHeader'
|
||||
import lbry from 'lbry.js';
|
||||
|
||||
var SettingsPage = React.createClass({
|
||||
setDaemonSetting: function(name, value) {
|
||||
this.props.setDaemonSetting(name, value)
|
||||
},
|
||||
setClientSetting: function(name, value) {
|
||||
lbry.setClientSetting(name, value)
|
||||
this._onSettingSaveSuccess()
|
||||
},
|
||||
onRunOnStartChange: function (event) {
|
||||
this.setDaemonSetting('run_on_startup', event.target.checked);
|
||||
},
|
||||
onShareDataChange: function (event) {
|
||||
this.setDaemonSetting('share_usage_data', event.target.checked);
|
||||
},
|
||||
onDownloadDirChange: function(event) {
|
||||
this.setDaemonSetting('download_directory', event.target.value);
|
||||
},
|
||||
onMaxUploadPrefChange: function(isLimited) {
|
||||
if (!isLimited) {
|
||||
this.setDaemonSetting('max_upload', 0.0);
|
||||
}
|
||||
this.setState({
|
||||
isMaxUpload: isLimited
|
||||
});
|
||||
},
|
||||
onMaxUploadFieldChange: function(event) {
|
||||
this.setDaemonSetting('max_upload', Number(event.target.value));
|
||||
},
|
||||
onMaxDownloadPrefChange: function(isLimited) {
|
||||
if (!isLimited) {
|
||||
this.setDaemonSetting('max_download', 0.0);
|
||||
}
|
||||
this.setState({
|
||||
isMaxDownload: isLimited
|
||||
});
|
||||
},
|
||||
onMaxDownloadFieldChange: function(event) {
|
||||
this.setDaemonSetting('max_download', Number(event.target.value));
|
||||
},
|
||||
getInitialState: function() {
|
||||
class SettingsPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const daemonSettings = this.props.daemonSettings
|
||||
|
||||
return {
|
||||
|
|
@ -51,14 +15,64 @@ var SettingsPage = React.createClass({
|
|||
showNsfw: lbry.getClientSetting('showNsfw'),
|
||||
showUnavailable: lbry.getClientSetting('showUnavailable'),
|
||||
}
|
||||
},
|
||||
onShowNsfwChange: function(event) {
|
||||
lbry.setClientSetting('showNsfw', event.target.checked);
|
||||
},
|
||||
onShowUnavailableChange: function(event) {
|
||||
}
|
||||
|
||||
},
|
||||
render: function() {
|
||||
setDaemonSetting(name, value) {
|
||||
this.props.setDaemonSetting(name, value)
|
||||
}
|
||||
|
||||
setClientSetting(name, value) {
|
||||
lbry.setClientSetting(name, value)
|
||||
this._onSettingSaveSuccess()
|
||||
}
|
||||
|
||||
onRunOnStartChange(event) {
|
||||
this.setDaemonSetting('run_on_startup', event.target.checked);
|
||||
}
|
||||
|
||||
onShareDataChange(event) {
|
||||
this.setDaemonSetting('share_usage_data', event.target.checked);
|
||||
}
|
||||
|
||||
onDownloadDirChange(event) {
|
||||
this.setDaemonSetting('download_directory', event.target.value);
|
||||
}
|
||||
|
||||
onMaxUploadPrefChange(isLimited) {
|
||||
if (!isLimited) {
|
||||
this.setDaemonSetting('max_upload', 0.0);
|
||||
}
|
||||
this.setState({
|
||||
isMaxUpload: isLimited
|
||||
});
|
||||
}
|
||||
|
||||
onMaxUploadFieldChange(event) {
|
||||
this.setDaemonSetting('max_upload', Number(event.target.value));
|
||||
}
|
||||
|
||||
onMaxDownloadPrefChange(isLimited) {
|
||||
if (!isLimited) {
|
||||
this.setDaemonSetting('max_download', 0.0);
|
||||
}
|
||||
this.setState({
|
||||
isMaxDownload: isLimited
|
||||
});
|
||||
}
|
||||
|
||||
onMaxDownloadFieldChange(event) {
|
||||
this.setDaemonSetting('max_download', Number(event.target.value));
|
||||
}
|
||||
|
||||
onShowNsfwChange(event) {
|
||||
lbry.setClientSetting('showNsfw', event.target.checked);
|
||||
}
|
||||
|
||||
onShowUnavailableChange(event) {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
daemonSettings
|
||||
} = this.props
|
||||
|
|
@ -185,6 +199,6 @@ var SettingsPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default SettingsPage;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import React from 'react';
|
||||
import lbry from '../lbry.js';
|
||||
|
||||
var StartPage = React.createClass({
|
||||
componentWillMount: function() {
|
||||
class StartPage extends React.Component {
|
||||
componentWillMount() {
|
||||
lbry.stop();
|
||||
},
|
||||
render: function() {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<main className="main--single-column">
|
||||
<h3>LBRY is Closed</h3>
|
||||
|
|
@ -13,6 +14,6 @@ var StartPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default StartPage;
|
||||
|
|
|
|||
Loading…
Reference in a new issue