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 { /> -
+
{suggestions.map(this.renderSuggestion)} + {this.renderMenu()}
); diff --git a/app/soapbox/features/compose/components/search.js b/app/soapbox/features/compose/components/search.js index 73a7c035f..063e3f939 100644 --- a/app/soapbox/features/compose/components/search.js +++ b/app/soapbox/features/compose/components/search.js @@ -7,6 +7,7 @@ import classNames from 'classnames'; const messages = defineMessages({ placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, + action: { id: 'search.action', defaultMessage: 'Search for “{query}”' }, }); export default @injectIntl @@ -51,15 +52,18 @@ class Search extends React.PureComponent { } } + handleSubmit = () => { + this.props.onSubmit(); + + if (this.props.openInRoute) { + this.context.router.history.push('/search'); + } + } + handleKeyDown = (e) => { if (e.key === 'Enter') { e.preventDefault(); - - this.props.onSubmit(); - - if (this.props.openInRoute) { - this.context.router.history.push('/search'); - } + this.handleSubmit(); } else if (e.key === 'Escape') { document.querySelector('.ui').parentElement.focus(); } @@ -82,6 +86,14 @@ class Search extends React.PureComponent { } } + makeMenu = () => { + const { intl, value } = this.props; + + return [ + { text: intl.formatMessage(messages.action, { query: value }), action: this.handleSubmit }, + ]; + } + render() { const { intl, value, autoFocus, autosuggest, submitted } = this.props; const hasValue = value.length > 0 || submitted; @@ -104,6 +116,7 @@ class Search extends React.PureComponent { onSelected={this.handleSelected} autoFocus={autoFocus} autoSelect={false} + menu={this.makeMenu()} />
diff --git a/app/styles/autosuggest.scss b/app/styles/autosuggest.scss index ea322e233..8bf4b39dd 100644 --- a/app/styles/autosuggest.scss +++ b/app/styles/autosuggest.scss @@ -102,3 +102,17 @@ .autosuggest-account .display-name__account { color: var(--primary-text-color--faint); } + +.autosuggest-input__action { + display: block; + padding: 10px; + border-radius: 4px; + font-weight: bold; + text-decoration: none; + color: var(--primary-text-color--faint); + + &:hover, + &.selected { + background-color: var(--brand-color--med); + } +}