+
@@ -155,9 +154,8 @@ export default class ChannelNotifications extends React.Component {
type='radio'
checked={notifyActive[1]}
onChange={this.handleUpdateNotifyLevel.bind(this, 'all')}
- >
+ />
{'For all activity'}
-
@@ -167,9 +165,8 @@ export default class ChannelNotifications extends React.Component {
type='radio'
checked={notifyActive[2]}
onChange={this.handleUpdateNotifyLevel.bind(this, 'mention')}
- >
+ />
{'Only for mentions'}
-
@@ -179,9 +176,8 @@ export default class ChannelNotifications extends React.Component {
type='radio'
checked={notifyActive[3]}
onChange={this.handleUpdateNotifyLevel.bind(this, 'none')}
- >
+ />
{'Never'}
-
@@ -274,16 +270,15 @@ export default class ChannelNotifications extends React.Component {
if (this.state.activeSection === 'markUnreadLevel') {
const inputs = [(
-
+
@@ -293,9 +288,8 @@ export default class ChannelNotifications extends React.Component {
type='radio'
checked={this.state.markUnreadLevel === 'mention'}
onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'mention')}
- >
+ />
{'Only for mentions'}
-
@@ -370,7 +364,7 @@ export default class ChannelNotifications extends React.Component {
data-dismiss='modal'
>
- Close
+ {'Close'}
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index 4986f88b6f..86a4b04cfb 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -260,6 +260,12 @@ export default class InviteMemberModal extends React.Component {
var content = null;
var sendButton = null;
+
+ var sendButtonLabel = 'Send Invitation';
+ if (this.state.inviteIds.length > 1) {
+ sendButtonLabel = 'Send Invitations';
+ }
+
if (this.state.emailEnabled) {
content = (
Notification Preferences for {this.state.title}
@@ -281,7 +287,7 @@ export default class InviteMemberModal extends React.Component {
onClick={this.handleSubmit}
type='button'
className='btn btn-primary'
- >Send Invitations
+ >{sendButtonLabel}
);
} else {
var teamInviteLink = null;
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 743e308542..41746d1d7c 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -169,7 +169,7 @@ export default class MoreDirectChannels extends React.Component {
}
return (
-
+
0)) {
+ this.setState({
+ show: false
+ });
+ }
+ }
+
+ handleInputChange(textbox, text) {
+ const caret = Utils.getCaretPosition(textbox);
+ const preText = text.substring(0, caret);
+
+ let mode = '';
+ let filter = '';
+ for (const [modeForPattern, pattern] of patterns) {
+ const result = pattern.exec(preText);
+
+ if (result) {
+ mode = modeForPattern;
+ filter = result[1];
+ break;
+ }
+ }
+
+ if (mode !== this.state.mode || filter !== this.state.filter) {
+ this.updateSuggestions(mode, filter);
+ }
+
+ this.setState({
+ mode,
+ filter,
+ show: mode || filter
+ });
+ }
+
+ handleKeyDown(e) {
+ if (!this.state.show || this.state.suggestions.length === 0) {
+ return;
+ }
+
+ if (e.which === KeyCodes.UP || e.which === KeyCodes.DOWN) {
+ e.preventDefault();
+
+ let selection = this.state.selection;
+
+ if (e.which === KeyCodes.UP) {
+ selection -= 1;
+ } else {
+ selection += 1;
+ }
+
+ if (selection >= 0 && selection < this.state.suggestions.length) {
+ this.setState({
+ selection
+ });
+ }
+ } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.SPACE) {
+ e.preventDefault();
+
+ this.completeSelectedWord();
+ }
+ }
+
+ completeSelectedWord() {
+ if (this.state.mode === 'channels') {
+ this.completeWord(this.state.suggestions[this.state.selection].name);
+ } else if (this.state.mode === 'users') {
+ this.completeWord(this.state.suggestions[this.state.selection].username);
+ }
+ }
+
+ completeWord(value) {
+ // add a space so that anything else typed doesn't interfere with the search flag
+ this.props.completeWord(this.state.filter, value + ' ');
+
+ this.setState({
+ show: false,
+ mode: '',
+ filter: '',
+ selection: 0
+ });
+ }
+
+ updateSuggestions(mode, filter) {
+ let suggestions = [];
+
+ if (mode === 'channels') {
+ let channels = ChannelStore.getAll();
+
+ if (filter) {
+ channels = channels.filter((channel) => channel.name.startsWith(filter));
+ }
+
+ channels.sort((a, b) => a.name.localeCompare(b.name));
+
+ suggestions = channels;
+ } else if (mode === 'users') {
+ let users = UserStore.getActiveOnlyProfileList();
+
+ if (filter) {
+ users = users.filter((user) => user.username.startsWith(filter));
+ }
+
+ users.sort((a, b) => a.username.localeCompare(b.username));
+
+ suggestions = users;
+ }
+
+ let selection = this.state.selection;
+
+ // keep the same user/channel selected if it's still visible as a suggestion
+ if (selection > 0 && this.state.suggestions.length > 0) {
+ // we can't just use indexOf to find if the selection is still in the list since they are different javascript objects
+ const currentSelectionId = this.state.suggestions[selection].id;
+ let found = false;
+
+ for (let i = 0; i < suggestions.length; i++) {
+ if (suggestions[i].id === currentSelectionId) {
+ selection = i;
+ found = true;
+
+ break;
+ }
+ }
+
+ if (!found) {
+ selection = 0;
+ }
+ } else {
+ selection = 0;
+ }
+
+ this.setState({
+ suggestions,
+ selection
+ });
+ }
+
+ render() {
+ if (!this.state.show || this.state.suggestions.length === 0) {
+ return null;
+ }
+
+ let suggestions = [];
+
+ if (this.state.mode === 'channels') {
+ suggestions = this.state.suggestions.map((channel, index) => {
+ let className = 'search-autocomplete__channel';
+ if (this.state.selection === index) {
+ className += ' selected';
+ }
+
+ return (
+
+ {channel.name}
+
+ );
+ });
+ } else if (this.state.mode === 'users') {
+ suggestions = this.state.suggestions.map((user, index) => {
+ let className = 'search-autocomplete__user';
+ if (this.state.selection === index) {
+ className += ' selected';
+ }
+
+ return (
+
+ 
+ {suggestions}
+
+ );
+ }
+}
+
+SearchAutocomplete.propTypes = {
+ completeWord: React.PropTypes.func.isRequired
+};
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index 7540b41a47..e1d36ad7dd 100644
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -9,6 +9,7 @@ var utils = require('../utils/utils.jsx');
var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
var Popover = ReactBootstrap.Popover;
+var SearchAutocomplete = require('./search_autocomplete.jsx');
export default class SearchBar extends React.Component {
constructor() {
@@ -16,11 +17,13 @@ export default class SearchBar extends React.Component {
this.mounted = false;
this.onListenerChange = this.onListenerChange.bind(this);
+ this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleUserInput = this.handleUserInput.bind(this);
this.handleUserFocus = this.handleUserFocus.bind(this);
this.handleUserBlur = this.handleUserBlur.bind(this);
this.performSearch = this.performSearch.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
+ this.completeWord = this.completeWord.bind(this);
const state = this.getSearchTermStateFromStores();
state.focused = false;
@@ -74,11 +77,18 @@ export default class SearchBar extends React.Component {
results: null
});
}
+ handleKeyDown(e) {
+ if (this.refs.autocomplete) {
+ this.refs.autocomplete.handleKeyDown(e);
+ }
+ }
handleUserInput(e) {
var term = e.target.value;
PostStore.storeSearchTerm(term);
PostStore.emitSearchTermChange(false);
this.setState({searchTerm: term});
+
+ this.refs.autocomplete.handleInputChange(e.target, term);
}
handleMouseInput(e) {
e.preventDefault();
@@ -97,7 +107,7 @@ export default class SearchBar extends React.Component {
this.setState({isSearching: true});
client.search(
terms,
- function success(data) {
+ (data) => {
this.setState({isSearching: false});
if (utils.isMobile()) {
ReactDOM.findDOMNode(this.refs.search).value = '';
@@ -108,11 +118,11 @@ export default class SearchBar extends React.Component {
results: data,
is_mention_search: isMentionSearch
});
- }.bind(this),
- function error(err) {
+ },
+ (err) => {
this.setState({isSearching: false});
AsyncClient.dispatchError(err, 'search');
- }.bind(this)
+ }
);
}
}
@@ -120,6 +130,24 @@ export default class SearchBar extends React.Component {
e.preventDefault();
this.performSearch(this.state.searchTerm.trim());
}
+
+ completeWord(partialWord, word) {
+ const textbox = ReactDOM.findDOMNode(this.refs.search);
+ let text = textbox.value;
+
+ const caret = utils.getCaretPosition(textbox);
+ const preText = text.substring(0, caret - partialWord.length);
+ const postText = text.substring(caret);
+ text = preText + word + postText;
+
+ textbox.value = text;
+ utils.setCaretPosition(textbox, preText.length + word.length);
+
+ PostStore.storeSearchTerm(text);
+ PostStore.emitSearchTermChange(false);
+ this.setState({searchTerm: text});
+ }
+
render() {
var isSearching = null;
if (this.state.isSearching) {
@@ -143,12 +171,13 @@ export default class SearchBar extends React.Component {
className='search__clear'
onClick={this.clearFocus}
>
- Cancel
+ {'Cancel'}