Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 3x 3x 3x 3x 3x 3x 3x 3x | import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import css from './typeahead.css';
export default class TypeaheadOption extends React.Component {
/**
* Setup
*/
constructor(props) {
super(props);
// Binding
this.handleMouseDown = this.handleMouseDown.bind(this);
}
/**
* Option clicked. Must be on mouse down so we can intercept the focus
*/
handleMouseDown(event) {
// Prevent the blur event from happening and let the text edit keep its focus
event.preventDefault();
// Call parent
if (typeof this.props.onClick === 'function') {
this.props.onClick(event);
}
}
/**
* Render
* @return {React}
*/
render() {
var classes = classNames('typeahead--item', css.item, {
'typeahead--selected': this.props.selected,
[css.selected]: this.props.selected
});
Iif (this.props.empty) {
return (
<li className={classes}>
{typeof this.props.empty === 'string' ? this.props.empty : 'No Results...'}
</li>
);
}
return (
<li
className={classes}
onMouseDown={this.handleMouseDown}
/* eslint-disable */
dangerouslySetInnerHTML={{ __html: this.props.option.string }}
/* eslint-enable */
/>
);
}
}
// Type checking
const {bool, object} = PropTypes;
TypeaheadOption.propTypes = {
selected: bool,
empty: bool,
option: object
}
TypeaheadOption.defaultProps = {
empty: false,
option: {
original: '',
string: ''
}
};
|