diff options
Diffstat (limited to 'web/react/components/search_autocomplete.jsx')
-rw-r--r-- | web/react/components/search_autocomplete.jsx | 157 |
1 files changed, 113 insertions, 44 deletions
diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx index 03e14ec49..736919697 100644 --- a/web/react/components/search_autocomplete.jsx +++ b/web/react/components/search_autocomplete.jsx @@ -3,14 +3,15 @@ const ChannelStore = require('../stores/channel_store.jsx'); const KeyCodes = require('../utils/constants.jsx').KeyCodes; +const Popover = ReactBootstrap.Popover; const UserStore = require('../stores/user_store.jsx'); const Utils = require('../utils/utils.jsx'); +const Constants = require('../utils/constants.jsx'); const patterns = new Map([ ['channels', /\b(?:in|channel):\s*(\S*)$/i], ['users', /\bfrom:\s*(\S*)$/i] ]); -const Popover = ReactBootstrap.Popover; export default class SearchAutocomplete extends React.Component { constructor(props) { @@ -22,8 +23,13 @@ export default class SearchAutocomplete extends React.Component { this.handleKeyDown = this.handleKeyDown.bind(this); this.completeWord = this.completeWord.bind(this); + this.getSelection = this.getSelection.bind(this); + this.scrollToItem = this.scrollToItem.bind(this); this.updateSuggestions = this.updateSuggestions.bind(this); + this.renderChannelSuggestion = this.renderChannelSuggestion.bind(this); + this.renderUserSuggestion = this.renderUserSuggestion.bind(this); + this.state = { show: false, mode: '', @@ -37,9 +43,18 @@ export default class SearchAutocomplete extends React.Component { $(document).on('click', this.handleDocumentClick); } - componentDidUpdate() { - $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content').perfectScrollbar(); - $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content').css('max-height', $(window).height() - 200); + componentDidUpdate(prevProps, prevState) { + const content = $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content'); + + if (this.state.show) { + if (!prevState.show) { + content.perfectScrollbar(); + content.css('max-height', $(window).height() - 200); + } + + // keep the keyboard selection visible when scrolling + this.scrollToItem(this.getSelection()); + } } componentWillUnmount() { @@ -51,7 +66,7 @@ export default class SearchAutocomplete extends React.Component { } handleDocumentClick(e) { - const container = $(ReactDOM.findDOMNode(this.refs.container)); + const container = $(ReactDOM.findDOMNode(this.refs.searchPopover)); if (!(container.is(e.target) || container.has(e.target).length > 0)) { this.setState({ @@ -111,15 +126,7 @@ export default class SearchAutocomplete extends React.Component { } 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); + this.completeWord(this.getSelection()); } } @@ -135,6 +142,40 @@ export default class SearchAutocomplete extends React.Component { }); } + getSelection() { + if (this.state.mode === 'channels') { + return this.state.suggestions[this.state.selection].name; + } else if (this.state.mode === 'users') { + return this.state.suggestions[this.state.selection].username; + } + + return ''; + } + + scrollToItem(itemName) { + const content = $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content'); + const visibleContentHeight = content[0].clientHeight; + const actualContentHeight = content[0].scrollHeight; + + if (this.state.suggestions.length > 0 && visibleContentHeight < actualContentHeight) { + const contentTop = content.scrollTop(); + const contentTopPadding = parseInt(content.css('padding-top'), 10); + const contentBottomPadding = parseInt(content.css('padding-top'), 10); + + const item = $(this.refs[itemName]); + const itemTop = item[0].offsetTop - parseInt(item.css('margin-top'), 10); + const itemBottom = item[0].offsetTop + item.height() + parseInt(item.css('margin-bottom'), 10); + + if (itemTop - contentTopPadding < contentTop) { + // the item is off the top of the visible space + content.scrollTop(itemTop - contentTopPadding); + } else if (itemBottom + contentTopPadding + contentBottomPadding > contentTop + visibleContentHeight) { + // the item has gone off the bottom of the visible space + content.scrollTop(itemBottom - visibleContentHeight + contentTopPadding + contentBottomPadding); + } + } + } + updateSuggestions(mode, filter) { let suggestions = []; @@ -193,6 +234,46 @@ export default class SearchAutocomplete extends React.Component { }); } + renderChannelSuggestion(channel) { + let className = 'search-autocomplete__item'; + if (channel.name === this.getSelection()) { + className += ' selected'; + } + + return ( + <div + key={channel.name} + ref={channel.name} + onClick={this.handleClick.bind(this, channel.name)} + className={className} + > + {channel.name} + </div> + ); + } + + renderUserSuggestion(user) { + let className = 'search-autocomplete__item'; + if (user.username === this.getSelection()) { + className += ' selected'; + } + + return ( + <div + key={user.username} + ref={user.username} + onClick={this.handleClick.bind(this, user.username)} + className={className} + > + <img + className='profile-img rounded' + src={'/api/v1/users/' + user.id + '/image?time=' + user.update_at} + /> + {user.username} + </div> + ); + } + render() { if (!this.state.show || this.state.suggestions.length === 0) { return null; @@ -201,45 +282,33 @@ export default class SearchAutocomplete extends React.Component { let suggestions = []; if (this.state.mode === 'channels') { - suggestions = this.state.suggestions.map((channel, index) => { - let className = 'search-autocomplete__item'; - if (this.state.selection === index) { - className += ' selected'; - } - - return ( + const publicChannels = this.state.suggestions.filter((channel) => channel.type === Constants.OPEN_CHANNEL); + if (publicChannels.length > 0) { + suggestions.push( <div - key={channel.name} - ref={channel.name} - onClick={this.handleClick.bind(this, channel.name)} - className={className} + key='public-channel-divider' + className='search-autocomplete__divider' > - {channel.name} + {'Public ' + Utils.getChannelTerm(Constants.OPEN_CHANNEL) + 's'} </div> ); - }); - } else if (this.state.mode === 'users') { - suggestions = this.state.suggestions.map((user, index) => { - let className = 'search-autocomplete__item'; - if (this.state.selection === index) { - className += ' selected'; - } + suggestions = suggestions.concat(publicChannels.map(this.renderChannelSuggestion)); + } - return ( + const privateChannels = this.state.suggestions.filter((channel) => channel.type === Constants.PRIVATE_CHANNEL); + if (privateChannels.length > 0) { + suggestions.push( <div - key={user.username} - ref={user.username} - onClick={this.handleClick.bind(this, user.username)} - className={className} + key='private-channel-divider' + className='search-autocomplete__divider' > - <img - className='profile-img rounded' - src={'/api/v1/users/' + user.id + '/image?time=' + user.update_at} - /> - {user.username} + {'Private ' + Utils.getChannelTerm(Constants.PRIVATE_CHANNEL) + 's'} </div> ); - }); + suggestions = suggestions.concat(privateChannels.map(this.renderChannelSuggestion)); + } + } else if (this.state.mode === 'users') { + suggestions = this.state.suggestions.map(this.renderUserSuggestion); } return ( |