211 lines
6.4 KiB
JavaScript
Executable File
211 lines
6.4 KiB
JavaScript
Executable File
import React from 'react';
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
import Select from 'react-select';
|
|
import classNames from 'classnames';
|
|
import Flux from '../lib/flux';
|
|
import AnalyticsUtils from '../utils/AnalyticsUtils';
|
|
import InstantInviteUtils from '../utils/InstantInviteUtils';
|
|
import InstantInviteStore from '../stores/InstantInviteStore';
|
|
import StreamerModeStore from '../stores/StreamerModeStore';
|
|
import InstantInviteActionCreators from '../actions/InstantInviteActionCreators';
|
|
import InstantInvite from './InstantInvite';
|
|
import Spinner from './common/Spinner';
|
|
import Checkbox from './common/Checkbox';
|
|
import SaveButton from './common/SaveButton';
|
|
import HelpButton from './common/HelpButton';
|
|
import Countdown from './common/Countdown';
|
|
import i18n from '../i18n';
|
|
import '../styles/instant_invite_popout.styl';
|
|
import '../styles/popout.styl';
|
|
|
|
const LOCATION = 'Instant Invite Popout';
|
|
const MAX_AGE_REF = 'max_age';
|
|
const MAX_USES_REF = 'max_uses';
|
|
const TEMPORARY_REF = 'temporary';
|
|
|
|
const MAX_AGE_OPTIONS = InstantInviteUtils.getMaxAgeOptions;
|
|
const MAX_USES_OPTIONS = InstantInviteUtils.getMaxUsesOptions;
|
|
|
|
const InstantInvitePopout = React.createClass({
|
|
mixins: [Flux.StoreListenerMixin(InstantInviteStore, StreamerModeStore), PureRenderMixin],
|
|
|
|
propTypes: {
|
|
channel: React.PropTypes.object.isRequired,
|
|
source: React.PropTypes.string,
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
source: null,
|
|
};
|
|
},
|
|
|
|
getInitialState() {
|
|
return {
|
|
advanced: false,
|
|
[MAX_AGE_REF]: MAX_AGE_OPTIONS[1].value,
|
|
[MAX_USES_REF]: MAX_USES_OPTIONS[0].value,
|
|
[TEMPORARY_REF]: false,
|
|
};
|
|
},
|
|
|
|
getStateFromStores() {
|
|
return {
|
|
invite: InstantInviteStore.getInvite(this.props.channel.id),
|
|
hide: StreamerModeStore.hideInstantInvites,
|
|
};
|
|
},
|
|
|
|
componentDidMount() {
|
|
const validate = this.state.invite ? this.state.invite.code : null;
|
|
InstantInviteActionCreators.createInvite(this.props.channel.id, {validate}, 'InstantInvitePopout Mount');
|
|
|
|
let {source} = this.props;
|
|
if (source != null) {
|
|
if (window.inviteButtonSource) {
|
|
source = window.inviteButtonSource;
|
|
window.inviteButtonSource = undefined;
|
|
}
|
|
|
|
AnalyticsUtils.track('open_popout', {
|
|
Type: 'Instant Invite',
|
|
Source: source,
|
|
});
|
|
}
|
|
},
|
|
|
|
handleRegenerate() {
|
|
const regenerate = this.state.invite ? this.state.invite.code : null;
|
|
InstantInviteActionCreators.createInvite(this.props.channel.id, {regenerate}, 'InstantInvitePopout Regenerate');
|
|
},
|
|
|
|
handleShowAdvanced(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.setState({advanced: true});
|
|
},
|
|
|
|
handleHideAdvanced(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.setState({advanced: false});
|
|
},
|
|
|
|
handleSubmit(e) {
|
|
e.preventDefault();
|
|
InstantInviteActionCreators.createInvite(
|
|
this.props.channel.id,
|
|
{
|
|
[MAX_AGE_REF]: parseInt(this.state[MAX_AGE_REF], 10),
|
|
[MAX_USES_REF]: parseInt(this.state[MAX_USES_REF], 10),
|
|
[TEMPORARY_REF]: this.state[TEMPORARY_REF],
|
|
},
|
|
'InstantInvitePopout'
|
|
);
|
|
this.setState({advanced: false});
|
|
},
|
|
|
|
handleMaxAgeChange(maxAge) {
|
|
this.setState({[MAX_AGE_REF]: maxAge});
|
|
},
|
|
|
|
handleMaxUsesChange(maxUses) {
|
|
this.setState({[MAX_USES_REF]: maxUses});
|
|
},
|
|
|
|
handleTemporaryChange(e) {
|
|
this.setState({[TEMPORARY_REF]: e.currentTarget.checked});
|
|
},
|
|
|
|
renderBasic() {
|
|
const {invite, hide} = this.state;
|
|
let instantInvite;
|
|
let countdown;
|
|
if (invite == null) {
|
|
instantInvite = <Spinner />;
|
|
} else {
|
|
instantInvite = <InstantInvite hidden={hide} code={invite.code} location={LOCATION} />;
|
|
countdown = <Countdown deadline={invite.getExpiresAt()} />;
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<p>{i18n.Messages.INSTANT_INVITE_POPOUT}</p>
|
|
<div className="instant-invite">
|
|
{instantInvite}
|
|
</div>
|
|
<div className="actions">
|
|
{countdown}
|
|
<a onClick={this.handleRegenerate}>{i18n.Messages.INSTANT_INVITE_REGENERATE}</a>
|
|
</div>
|
|
<hr />
|
|
<a onClick={this.handleShowAdvanced}>{i18n.Messages.ADVANCED_SETTINGS}</a>
|
|
</section>
|
|
);
|
|
},
|
|
|
|
renderAdvanced() {
|
|
return (
|
|
<section>
|
|
<form className="form" onSubmit={this.handleSubmit}>
|
|
<div className="control-groups">
|
|
<div className={classNames({'control-group': true, error: false})}>
|
|
<label htmlFor="settings-email">{i18n.Messages.FORM_LABEL_MAX_AGE}</label>
|
|
<Select
|
|
value={this.state[MAX_AGE_REF]}
|
|
ref={MAX_AGE_REF}
|
|
clearable={false}
|
|
searchable={false}
|
|
options={MAX_AGE_OPTIONS}
|
|
onChange={this.handleMaxAgeChange}
|
|
/>
|
|
</div>
|
|
<div className={classNames({'control-group': true, error: false})}>
|
|
<label htmlFor="settings-email">{i18n.Messages.FORM_LABEL_MAX_USES}</label>
|
|
<Select
|
|
value={this.state[MAX_USES_REF]}
|
|
ref={MAX_USES_REF}
|
|
clearable={false}
|
|
searchable={false}
|
|
onChange={this.handleMaxUsesChange}
|
|
options={MAX_USES_OPTIONS}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={classNames({'control-group': true, error: false})}>
|
|
<ul className="checkbox-group">
|
|
<li>
|
|
<Checkbox
|
|
defaultChecked={this.state[TEMPORARY_REF]}
|
|
ref={TEMPORARY_REF}
|
|
onChange={this.handleTemporaryChange}>
|
|
{i18n.Messages.FORM_LABEL_TEMPORARY}
|
|
<HelpButton text={i18n.Messages.FORM_HELP_TEMPORARY} />
|
|
</Checkbox>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<SaveButton className="btn btn-primary">{i18n.Messages.INSTANT_INVITE_GENERATE}</SaveButton>
|
|
</form>
|
|
<hr />
|
|
<a onClick={this.handleHideAdvanced}>{i18n.Messages.CANCEL}</a>
|
|
</section>
|
|
);
|
|
},
|
|
|
|
render() {
|
|
return (
|
|
<div className="instant-invite-popout" {...this.props}>
|
|
<header>{i18n.Messages.INSTANT_INVITE}</header>
|
|
{this.state.advanced ? this.renderAdvanced() : this.renderBasic()}
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default InstantInvitePopout;
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/InstantInvitePopout.js
|