68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
|
import React from 'react';
|
||
|
|
|
||
|
|
import {getCompletions} from '../../../autocomplete/Autocompleter';
|
||
|
|
|
||
|
|
export default class Autocomplete extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
completions: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(props, state) {
|
||
|
|
getCompletions(props.query)[0].then(completions => {
|
||
|
|
console.log(completions);
|
||
|
|
this.setState({
|
||
|
|
completions
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const pinElement = document.querySelector(this.props.pinSelector);
|
||
|
|
if(!pinElement) return null;
|
||
|
|
|
||
|
|
const position = pinElement.getBoundingClientRect();
|
||
|
|
|
||
|
|
const style = {
|
||
|
|
position: 'fixed',
|
||
|
|
border: '1px solid gray',
|
||
|
|
background: 'white',
|
||
|
|
borderRadius: '4px'
|
||
|
|
};
|
||
|
|
|
||
|
|
this.props.pinTo.forEach(direction => {
|
||
|
|
console.log(`${direction} = ${position[direction]}`);
|
||
|
|
style[direction] = position[direction];
|
||
|
|
});
|
||
|
|
|
||
|
|
const renderedCompletions = this.state.completions.map((completion, i) => {
|
||
|
|
return (
|
||
|
|
<div key={i} class="mx_Autocomplete_Completion">
|
||
|
|
<strong>{completion.title}</strong>
|
||
|
|
<em>{completion.subtitle}</em>
|
||
|
|
<span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="mx_Autocomplete" style={style}>
|
||
|
|
{renderedCompletions}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Autocomplete.propTypes = {
|
||
|
|
// the query string for which to show autocomplete suggestions
|
||
|
|
query: React.PropTypes.string.isRequired,
|
||
|
|
|
||
|
|
// CSS selector indicating which element to pin the autocomplete to
|
||
|
|
pinSelector: React.PropTypes.string.isRequired,
|
||
|
|
|
||
|
|
// attributes on which the autocomplete should match the pinElement
|
||
|
|
pinTo: React.PropTypes.array.isRequired
|
||
|
|
};
|