diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js index 8bf5e86fa..54ad6d264 100644 --- a/app/soapbox/components/autosuggest_input.js +++ b/app/soapbox/components/autosuggest_input.js @@ -52,6 +52,7 @@ export default class AutosuggestInput extends ImmutablePureComponent { id: PropTypes.string, searchTokens: PropTypes.arrayOf(PropTypes.string), maxLength: PropTypes.number, + menu: PropTypes.arrayOf(PropTypes.object), }; static defaultProps = { @@ -87,9 +88,10 @@ export default class AutosuggestInput extends ImmutablePureComponent { } onKeyDown = (e) => { - const { suggestions, disabled } = this.props; + const { suggestions, menu, disabled } = this.props; const { selectedSuggestion, suggestionsHidden } = this.state; const firstIndex = this.getFirstIndex(); + const lastIndex = suggestions.size + (menu || []).length - 1; if (disabled) { e.preventDefault(); @@ -113,14 +115,14 @@ export default class AutosuggestInput extends ImmutablePureComponent { break; case 'ArrowDown': - if (suggestions.size > 0 && !suggestionsHidden) { + if (!suggestionsHidden && (suggestions.size > 0 || menu)) { e.preventDefault(); - this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) }); + this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, lastIndex) }); } break; case 'ArrowUp': - if (suggestions.size > 0 && !suggestionsHidden) { + if (!suggestionsHidden && (suggestions.size > 0 || menu)) { e.preventDefault(); this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) }); } @@ -129,11 +131,17 @@ export default class AutosuggestInput extends ImmutablePureComponent { case 'Enter': case 'Tab': // Select suggestion - if (suggestions.size > 0 && !suggestionsHidden && selectedSuggestion > -1) { + if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.size > 0 || menu)) { e.preventDefault(); e.stopPropagation(); this.setState({ selectedSuggestion: firstIndex }); - this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion)); + + if (selectedSuggestion < suggestions.size) { + this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion)); + } else { + const item = menu[selectedSuggestion - suggestions.size]; + this.handleMenuItemAction(item); + } } break; @@ -194,11 +202,47 @@ export default class AutosuggestInput extends ImmutablePureComponent { ); } + handleMenuItemAction = item => { + this.onBlur(); + item.action(); + } + + handleMenuItemClick = item => { + return e => { + e.preventDefault(); + this.handleMenuItemAction(item); + }; + } + + renderMenu = () => { + const { menu, suggestions } = this.props; + const { selectedSuggestion } = this.state; + + if (!menu) { + return null; + } + + return menu.map((item, i) => ( + + {item.text} + + )); + }; + render() { - const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength } = this.props; + const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props; const { suggestionsHidden } = this.state; const style = { direction: 'ltr' }; + const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value)); + if (isRtl(value)) { style.direction = 'rtl'; } @@ -228,8 +272,9 @@ export default class AutosuggestInput extends ImmutablePureComponent { /> -