Skip to content
This repository has been archived by the owner on May 21, 2019. It is now read-only.

Add clickable suggestions for AutocompleteComponent #189

Merged
merged 5 commits into from
Dec 17, 2015
Merged

Add clickable suggestions for AutocompleteComponent #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e017bf5
wrap method to set selected suggestion
j-em Dec 14, 2015
422283f
wire selectSuggestion method with onMouseHover event
j-em Dec 15, 2015
99df707
wire click event on suggestion with selectAutocomplete
j-em Dec 15, 2015
8e1da2d
change cursor style for suggestionComponent
j-em Dec 15, 2015
d84955c
rename event handler to be more consistent
j-em Dec 15, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/views/4_PromptComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
});
Expand Down Expand Up @@ -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)) {
Expand All @@ -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 {
Expand Down
12 changes: 10 additions & 2 deletions src/views/AutocompleteComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand All @@ -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', {
Expand Down