diff options
author | Joram Wilander <jwawilander@gmail.com> | 2017-05-31 16:51:42 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-05-31 16:51:42 -0400 |
commit | 5aaedb9663b987caf1fb11ea6062bcc44e6bafca (patch) | |
tree | bd77c10168f9fb1b0f998b08a3b2a3761512a451 /webapp/components/suggestion/suggestion_box.jsx | |
parent | 8ce72aedc3a5b4f783fb6ebab38aac8bf5f413ae (diff) | |
download | chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.tar.gz chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.tar.bz2 chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.zip |
PLT-5699 Improvements to channel switcher (#6486)
* Refactor channel switcher to not wait on server results
* Change channel switcher to quick switcher and include team switching
* Add sections, update ordering and add discoverability button
* Fix styling error
* Use CMD in text if on mac
* Clean yarn cache on every install
* Various UX updates per feedback
* Add shortcut help text for team switcher
* Couple more updates per feedback
* Some minor fixes for GM and autocomplete race
* Updating UI for channel switcher (#6504)
* Updating channel switcher button (#6506)
* Updating switcher modal on mobile (#6507)
* Removed jQuery usage
* Rename function to toggleQuickSwitchModal
Diffstat (limited to 'webapp/components/suggestion/suggestion_box.jsx')
-rw-r--r-- | webapp/components/suggestion/suggestion_box.jsx | 95 |
1 files changed, 74 insertions, 21 deletions
diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx index 1915b22b7..e1de927b9 100644 --- a/webapp/components/suggestion/suggestion_box.jsx +++ b/webapp/components/suggestion/suggestion_box.jsx @@ -15,6 +15,71 @@ import PropTypes from 'prop-types'; import React from 'react'; export default class SuggestionBox extends React.Component { + static propTypes = { + + /** + * The list component to render, usually SuggestionList + */ + listComponent: PropTypes.func.isRequired, + + /** + * The HTML input box type + */ + type: PropTypes.oneOf(['input', 'textarea', 'search']).isRequired, + + /** + * The value of in the input + */ + value: PropTypes.string.isRequired, + + /** + * Array of suggestion providers + */ + providers: PropTypes.arrayOf(PropTypes.object), + + /** + * Where the list will be displayed relative to the input box, defaults to 'top' + */ + listStyle: PropTypes.string, + + /** + * Set to true to draw dividers between types of list items, defaults to false + */ + renderDividers: PropTypes.bool, + + /** + * Set to allow TAB to select an item in the list, defaults to true + */ + completeOnTab: PropTypes.bool, + + /** + * Function called when input box loses focus + */ + onBlur: PropTypes.func, + + /** + * Function called when input box value changes + */ + onChange: PropTypes.func, + + /** + * Function called when a key is pressed and the input box is in focus + */ + onKeyDown: PropTypes.func, + + /** + * Function called when an item is selected + */ + onItemSelected: PropTypes.func + } + + static defaultProps = { + type: 'input', + listStyle: 'top', + renderDividers: false, + completeOnTab: true + } + constructor(props) { super(props); @@ -46,6 +111,14 @@ export default class SuggestionBox extends React.Component { SuggestionStore.unregisterSuggestionBox(this.suggestionId); } + componentDidUpdate(prevProps) { + if (this.props.providers !== prevProps.providers) { + const textbox = this.getTextbox(); + const pretext = textbox.value.substring(0, textbox.selectionEnd); + GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext); + } + } + getTextbox() { if (this.props.type === 'textarea') { return this.refs.textbox.getDOMNode(); @@ -171,7 +244,7 @@ export default class SuggestionBox extends React.Component { } else if (e.which === KeyCodes.DOWN) { GlobalActions.emitSelectNextSuggestion(this.suggestionId); e.preventDefault(); - } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB) { + } else if (e.which === KeyCodes.ENTER || (this.props.completeOnTab && e.which === KeyCodes.TAB)) { this.handleCompleteWord(SuggestionStore.getSelection(this.suggestionId), SuggestionStore.getSelectedMatchedPretext(this.suggestionId)); this.props.onKeyDown(e); e.preventDefault(); @@ -281,23 +354,3 @@ export default class SuggestionBox extends React.Component { return ''; } } - -SuggestionBox.defaultProps = { - type: 'input', - listStyle: 'top' -}; - -SuggestionBox.propTypes = { - listComponent: PropTypes.func.isRequired, - type: PropTypes.oneOf(['input', 'textarea', 'search']).isRequired, - value: PropTypes.string.isRequired, - providers: PropTypes.arrayOf(PropTypes.object), - listStyle: PropTypes.string, - renderDividers: PropTypes.bool, - - // explicitly name any input event handlers we override and need to manually call - onBlur: PropTypes.func, - onChange: PropTypes.func, - onKeyDown: PropTypes.func, - onItemSelected: PropTypes.func -}; |