diff --git a/src/views/4_PromptComponent.ts b/src/views/4_PromptComponent.ts index 622f682ac..95f454e3e 100644 --- a/src/views/4_PromptComponent.ts +++ b/src/views/4_PromptComponent.ts @@ -180,6 +180,8 @@ export default class PromptComponent extends React.Component imple var autocomplete = React.createElement(AutocompleteComponent, { suggestions: this.state.suggestions, caretOffset: this.state.caretOffset, + onHoverSuggestion: this.selectSuggestion.bind(this), + onClickSuggestion: this.selectAutocomplete.bind(this), highlightedIndex: this.state.highlightedSuggestionIndex, ref: 'autocomplete' }); @@ -271,6 +273,10 @@ export default class PromptComponent extends React.Component imple this.replaceText(History.getNext()); } } + + private selectSuggestion(i: number): void { + this.setState({highlightedSuggestionIndex: i}); + } private navigateAutocomplete(event: KeyboardEvent): void { if (keys.goUp(event)) { @@ -279,7 +285,7 @@ export default class PromptComponent extends React.Component imple index = Math.min(this.state.suggestions.length - 1, this.state.highlightedSuggestionIndex + 1) } - this.setState({ highlightedSuggestionIndex: index }); + this.selectSuggestion(index) } private selectAutocomplete(): void { diff --git a/src/views/AutocompleteComponent.ts b/src/views/AutocompleteComponent.ts index c7a1e91ff..3f9547456 100644 --- a/src/views/AutocompleteComponent.ts +++ b/src/views/AutocompleteComponent.ts @@ -6,14 +6,18 @@ type Offset = {top: number, left: number, bottom: number}; interface AutocompleteProps { caretOffset: Offset; suggestions: Suggestion[]; + onHoverSuggestion: Function; + onClickSuggestion: Function; highlightedIndex: number; } -export default class AutocompleteComponent extends React.Component { +export default class AutocompleteComponent extends React.Component { render() { const suggestionViews = this.props.suggestions.map((suggestion, index) => { return React.createElement(SuggestionCompoonent, { suggestion: suggestion, + onHoverSuggestion: this.props.onHoverSuggestion.bind(this, index), + onClickSuggestion: this.props.onClickSuggestion, key: index, isHighlighted: index === this.props.highlightedIndex }); @@ -39,19 +43,23 @@ export default class AutocompleteComponent extends React.Component { render() { const scoreStyle = window.DEBUG ? {} : { display: 'none' }; + const suggestionStyle = { cursor: "pointer" } + let classes = [this.props.suggestion.type]; if (this.props.isHighlighted) { classes.push('highlighted'); } - return React.createElement('li', { className: classes.join(' ') }, + return React.createElement('li', { className: classes.join(' '), style: suggestionStyle, onMouseOver: this.props.onHoverSuggestion, onClick: this.props.onClickSuggestion}, React.createElement('i', { className: 'icon' }), React.createElement('span', { className: 'value' }, this.props.suggestion.value), React.createElement('span', {