Merge pull request #189 from j-allard/add-clickable-suggestion

Add clickable suggestions for AutocompleteComponent
railsware · Dec 17, 2015 · dc9325e · dc9325e
2 parents 9d14e2d + d84955c
commit dc9325e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/views/4_PromptComponent.ts b/src/views/4_PromptComponent.ts
@@ -180,6 +180,8 @@ export default class PromptComponent extends React.Component<Props, State> 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<Props, State> 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<Props, State> 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
@@ -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<AutocompleteProps, {}> {
+export default class AutocompleteComponent extends React.Component<AutocompleteProps, {}> { 
     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<AutocompleteP
 interface SuggestionProps {
     suggestion: Suggestion;
     key: number;
+    onHoverSuggestion: Function;
+    onClickSuggestion: Function
     isHighlighted: boolean;
 }
 
 class SuggestionCompoonent extends React.Component<SuggestionProps, {}> {
     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', {