90 lines
2.8 KiB
JavaScript
Executable file
90 lines
2.8 KiB
JavaScript
Executable file
import React from 'react';
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
import Flux from '../lib/flux';
|
|
import i18n from '../i18n';
|
|
import {HeaderToolbarButton} from './HeaderToolbar';
|
|
import ChannelStore from '../stores/ChannelStore';
|
|
import SelectedChannelStore from '../stores/SelectedChannelStore';
|
|
import GuildNSFWAgreeStore from '../stores/GuildNSFWAgreeStore';
|
|
import Popout from './common/Popout';
|
|
import ChannelPins from './ChannelPins';
|
|
import PopoutStore from '../stores/PopoutStore';
|
|
import PopoutActionCreators from '../actions/PopoutActionCreators';
|
|
import ReadStateStore from '../stores/ReadStateStore';
|
|
import {ComponentActions} from '../Constants';
|
|
import '../styles/channel_mute_button.styl';
|
|
|
|
const CHANNEL_PINS = 'CHANNEL_PINS_POPOUT';
|
|
|
|
const ChannelPinsButtons = React.createClass({
|
|
mixins: [
|
|
PureRenderMixin,
|
|
Flux.StoreListenerMixin(PopoutStore, ChannelStore, ReadStateStore, SelectedChannelStore, GuildNSFWAgreeStore),
|
|
],
|
|
|
|
getStateFromStores() {
|
|
const channelId = SelectedChannelStore.getChannelId();
|
|
const channel = ChannelStore.getChannel(channelId);
|
|
return {
|
|
disabled: channel == null || (channel.isNSFW() && !GuildNSFWAgreeStore.didAgree(channel.getGuildId())),
|
|
open: PopoutStore.isOpen(CHANNEL_PINS),
|
|
hasUnread: ReadStateStore.hasUnreadPins(channelId),
|
|
channelId,
|
|
};
|
|
},
|
|
|
|
componentWillUpdate(nextProps, nextState) {
|
|
// citron note: this is important because the channel can be changed by the popout without it requiring the
|
|
// user to click in a way that closes the popout. I.e., right click -> message on a user avatar
|
|
if (nextState.channelId !== this.state.channelId) {
|
|
PopoutActionCreators.close(CHANNEL_PINS);
|
|
}
|
|
},
|
|
|
|
onJump(e) {
|
|
if (!e.shiftKey) {
|
|
PopoutActionCreators.close(CHANNEL_PINS);
|
|
}
|
|
},
|
|
|
|
renderChannelPinsPopout(props) {
|
|
return <ChannelPins {...props} onJump={this.onJump} channel={ChannelStore.getChannel(this.state.channelId)} />;
|
|
},
|
|
|
|
render() {
|
|
const {disabled} = this.state;
|
|
const button = (
|
|
<HeaderToolbarButton
|
|
disabled={disabled}
|
|
id={this.props.id}
|
|
tooltip={i18n.Messages.PINNED_MESSAGES}
|
|
iconLight={require('../images/header_icons/ic_pins_grey_24px.svg')}
|
|
iconDark={require('../images/icon-header-pin-dark.svg')}
|
|
showBadge={this.state.hasUnread}
|
|
/>
|
|
);
|
|
|
|
if (disabled) {
|
|
return button;
|
|
}
|
|
|
|
return (
|
|
<Popout
|
|
animationType="none"
|
|
uniqueId={CHANNEL_PINS}
|
|
position={Popout.BOTTOM_RIGHT}
|
|
render={this.renderChannelPinsPopout}
|
|
subscribeTo={ComponentActions.TOGGLE_CHANNEL_PINS}
|
|
closeOnScroll={false}>
|
|
{button}
|
|
</Popout>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default ChannelPinsButtons;
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/ChannelPinsButton.js
|