react-predictive-text/react-predictive-text-item.jsx

A React component that finishes users' words.

import React from "react";

class PTextItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      styles: this.props.style
    }
  }

  handleMouseEnter() {
    let selectedStyles = {
      backgroundColor: this.props.color
    }
    this.setState({styles: Object.assign({}, this.state.styles, selectedStyles)})
  }

  handleMouseLeave() {
    let unselectedStyles = {
      backgroundColor: 'white'
    }
    this.setState({styles: Object.assign({}, this.state.styles, unselectedStyles)})
  }

  handleClick(e) {
    this.props.onSelect(this.props.value);
  }

  render() {
    return (
      <div 
        style={this.state.styles} 
        onMouseDown={this.handleClick.bind(this)} 
        onMouseEnter={this.handleMouseEnter.bind(this)} 
        onMouseLeave={this.handleMouseLeave.bind(this)} 
      >
        {this.props.value}
      </div>
    );
  }
}

PTextItem.propTypes = {}

PTextItem.defaultProps = {
  color: "#E6E6FA"
}

// props:
// onSelect -- callback to be invoked when an item is clicked.
// color -- the color which a hovered item will turn.
// style -- the style for an unhovered item.
// value -- the text of the item.

export default PTextItem