2016-06-01 14:24:21 +03:00
|
|
|
import React from 'react';
|
2016-06-17 02:28:09 +03:00
|
|
|
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
2016-06-01 14:24:21 +03:00
|
|
|
|
|
|
|
import {getCompletions} from '../../../autocomplete/Autocompleter';
|
|
|
|
|
|
|
|
export default class Autocomplete extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
completions: []
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(props, state) {
|
2016-06-17 02:28:09 +03:00
|
|
|
if(props.query == this.props.query) return;
|
|
|
|
|
2016-06-12 14:32:46 +03:00
|
|
|
getCompletions(props.query).map(completionResult => {
|
|
|
|
try {
|
2016-06-20 11:22:55 +03:00
|
|
|
// console.log(`${completionResult.provider.getName()}: ${JSON.stringify(completionResult.completions)}`);
|
2016-06-12 14:32:46 +03:00
|
|
|
completionResult.completions.then(completions => {
|
|
|
|
let i = this.state.completions.findIndex(
|
|
|
|
completion => completion.provider === completionResult.provider
|
|
|
|
);
|
|
|
|
|
|
|
|
i = i == -1 ? this.state.completions.length : i;
|
2016-06-20 11:22:55 +03:00
|
|
|
// console.log(completionResult);
|
2016-06-12 14:32:46 +03:00
|
|
|
let newCompletions = Object.assign([], this.state.completions);
|
|
|
|
completionResult.completions = completions;
|
|
|
|
newCompletions[i] = completionResult;
|
2016-06-17 02:28:09 +03:00
|
|
|
// console.log(newCompletions);
|
2016-06-12 14:32:46 +03:00
|
|
|
this.setState({
|
|
|
|
completions: newCompletions
|
|
|
|
});
|
|
|
|
}, err => {
|
2016-06-17 02:28:09 +03:00
|
|
|
console.error(err);
|
2016-06-12 14:32:46 +03:00
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
// An error in one provider shouldn't mess up the rest.
|
2016-06-17 02:28:09 +03:00
|
|
|
console.error(e);
|
2016-06-12 14:32:46 +03:00
|
|
|
}
|
2016-06-01 14:24:21 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2016-06-12 14:32:46 +03:00
|
|
|
const renderedCompletions = this.state.completions.map((completionResult, i) => {
|
2016-06-17 02:28:09 +03:00
|
|
|
// console.log(completionResult);
|
2016-06-12 14:32:46 +03:00
|
|
|
let completions = completionResult.completions.map((completion, i) => {
|
2016-06-17 02:28:09 +03:00
|
|
|
let Component = completion.component;
|
|
|
|
if(Component) {
|
|
|
|
return Component;
|
|
|
|
}
|
|
|
|
|
2016-06-12 14:32:46 +03:00
|
|
|
return (
|
2016-06-20 11:22:55 +03:00
|
|
|
<div key={i} className="mx_Autocomplete_Completion" tabIndex={0}>
|
|
|
|
<span style={{fontWeight: 600}}>{completion.title}</span>
|
|
|
|
<span>{completion.subtitle}</span>
|
|
|
|
<span style={{flex: 1}} />
|
|
|
|
<span style={{color: 'gray'}}>{completion.description}</span>
|
2016-06-12 14:32:46 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
return completions.length > 0 ? (
|
2016-06-17 02:28:09 +03:00
|
|
|
<div key={i} className="mx_Autocomplete_ProviderSection">
|
|
|
|
<span className="mx_Autocomplete_provider_name">{completionResult.provider.getName()}</span>
|
2016-06-20 11:22:55 +03:00
|
|
|
<ReactCSSTransitionGroup component="div" transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
|
2016-06-17 02:28:09 +03:00
|
|
|
{completions}
|
|
|
|
</ReactCSSTransitionGroup>
|
2016-06-01 14:24:21 +03:00
|
|
|
</div>
|
2016-06-12 14:32:46 +03:00
|
|
|
) : null;
|
2016-06-01 14:24:21 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
2016-06-17 02:28:09 +03:00
|
|
|
<div className="mx_Autocomplete">
|
2016-06-20 11:22:55 +03:00
|
|
|
<ReactCSSTransitionGroup component="div" transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
|
2016-06-17 02:28:09 +03:00
|
|
|
{renderedCompletions}
|
|
|
|
</ReactCSSTransitionGroup>
|
2016-06-01 14:24:21 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Autocomplete.propTypes = {
|
|
|
|
// the query string for which to show autocomplete suggestions
|
2016-06-20 11:22:55 +03:00
|
|
|
query: React.PropTypes.string.isRequired
|
2016-06-01 14:24:21 +03:00
|
|
|
};
|