Convert channel_members and channel_invite modals to react boostrap to fix performance issues

Этот коммит содержится в:
JoramWilander
2015-11-04 12:17:12 -05:00
родитель ebce34190a
Коммит 22b4e5c4c0
7 изменённых файлов: 325 добавлений и 343 удалений

Просмотреть файл

@@ -1,20 +1,23 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const NavbarSearchBox = require('./search_bar.jsx');
const MessageWrapper = require('./message_wrapper.jsx');
const PopoverListMembers = require('./popover_list_members.jsx');
const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
const ChannelInviteModal = require('./channel_invite_modal.jsx');
const ChannelMembersModal = require('./channel_members_modal.jsx');
const ChannelStore = require('../stores/channel_store.jsx');
const UserStore = require('../stores/user_store.jsx');
const SearchStore = require('../stores/search_store.jsx');
const PreferenceStore = require('../stores/preference_store.jsx');
const NavbarSearchBox = require('./search_bar.jsx');
const AsyncClient = require('../utils/async_client.jsx');
const Client = require('../utils/client.jsx');
const TextFormatting = require('../utils/text_formatting.jsx');
const Utils = require('../utils/utils.jsx');
const MessageWrapper = require('./message_wrapper.jsx');
const PopoverListMembers = require('./popover_list_members.jsx');
const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
const AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
const Utils = require('../utils/utils.jsx');
const TextFormatting = require('../utils/text_formatting.jsx');
const AsyncClient = require('../utils/async_client.jsx');
const Client = require('../utils/client.jsx');
const Constants = require('../utils/constants.jsx');
const ActionTypes = Constants.ActionTypes;
@@ -31,6 +34,8 @@ export default class ChannelHeader extends React.Component {
const state = this.getStateFromStores();
state.showEditChannelPurposeModal = false;
state.showInviteModal = false;
state.showMembersModal = false;
this.state = state;
}
getStateFromStores() {
@@ -86,7 +91,7 @@ export default class ChannelHeader extends React.Component {
let terms = '';
if (user.notify_props && user.notify_props.mention_keys) {
let termKeys = UserStore.getCurrentMentionKeys();
const termKeys = UserStore.getCurrentMentionKeys();
if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) {
termKeys.splice(termKeys.indexOf('@all'), 1);
}
@@ -146,7 +151,7 @@ export default class ChannelHeader extends React.Component {
channelTerm = 'Group';
}
let dropdownContents = [];
const dropdownContents = [];
if (isDirect) {
dropdownContents.push(
<li
@@ -162,7 +167,7 @@ export default class ChannelHeader extends React.Component {
data-title={channel.display_name}
data-channelid={channel.id}
>
Set Channel Header...
{'Set Channel Header...'}
</a>
</li>
);
@@ -179,7 +184,7 @@ export default class ChannelHeader extends React.Component {
data-channelid={channel.id}
href='#'
>
View Info
{'View Info'}
</a>
</li>
);
@@ -192,11 +197,10 @@ export default class ChannelHeader extends React.Component {
>
<a
role='menuitem'
data-toggle='modal'
data-target='#channel_invite'
href='#'
onClick={() => this.setState({showInviteModal: true})}
>
Add Members
{'Add Members'}
</a>
</li>
);
@@ -209,11 +213,10 @@ export default class ChannelHeader extends React.Component {
>
<a
role='menuitem'
data-toggle='modal'
data-target='#channel_members'
href='#'
onClick={() => this.setState({showMembersModal: true})}
>
Manage Members
{'Manage Members'}
</a>
</li>
);
@@ -234,7 +237,7 @@ export default class ChannelHeader extends React.Component {
data-title={channel.display_name}
data-channelid={channel.id}
>
Set {channelTerm} Header...
{'Set '}{channelTerm}{' Header...'}
</a>
</li>
);
@@ -248,7 +251,7 @@ export default class ChannelHeader extends React.Component {
href='#'
onClick={() => this.setState({showEditChannelPurposeModal: true})}
>
Set {channelTerm} Purpose...
{'Set '}{channelTerm}{' Purpose...'}
</a>
</li>
);
@@ -265,7 +268,7 @@ export default class ChannelHeader extends React.Component {
data-title={channel.display_name}
data-channelid={channel.id}
>
Notification Preferences
{'Notification Preferences'}
</a>
</li>
);
@@ -286,7 +289,7 @@ export default class ChannelHeader extends React.Component {
data-name={channel.name}
data-channelid={channel.id}
>
Rename {channelTerm}...
{'Rename '}{channelTerm}{'...'}
</a>
</li>
);
@@ -303,7 +306,7 @@ export default class ChannelHeader extends React.Component {
data-title={channel.display_name}
data-channelid={channel.id}
>
Delete {channelTerm}...
{'Delete '}{channelTerm}{'...'}
</a>
</li>
);
@@ -319,7 +322,7 @@ export default class ChannelHeader extends React.Component {
href='#'
onClick={this.handleLeave}
>
Leave {channelTerm}
{'Leave '}{channelTerm}
</a>
</li>
);
@@ -397,7 +400,7 @@ export default class ChannelHeader extends React.Component {
href='#'
onClick={this.searchMentions}
>
Recent Mentions
{'Recent Mentions'}
</a>
</li>
</ul>
@@ -411,6 +414,14 @@ export default class ChannelHeader extends React.Component {
onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})}
channel={channel}
/>
<ChannelInviteModal
show={this.state.showInviteModal}
onModalDismissed={() => this.setState({showInviteModal: false})}
/>
<ChannelMembersModal
show={this.state.showMembersModal}
onModalDismissed={() => this.setState({showMembersModal: false})}
/>
</div>
);
}