{"size": 1134, "ext": "js", "max_stars_repo_path": "components/area-select/select/option.js", "max_stars_repo_name": "dwqs/react-area-linkage", "max_stars_repo_stars_event_min_datetime": "2017-08-11T13:38:05.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-15T02:05:20.000Z", "max_issues_repo_path": "components/area-select/select/option.js", "max_issues_repo_name": "dwqs/react-area-linkage", "max_issues_repo_issues_event_min_datetime": "2018-03-09T14:09:25.000Z", "max_issues_repo_issues_event_max_datetime": "2020-12-18T02:22:29.000Z", "max_forks_repo_path": "components/area-select/select/option.js", "max_forks_repo_name": "dwqs/react-area-linkage", "max_forks_repo_forks_event_min_datetime": "2017-12-14T08:36:51.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-26T01:23:27.000Z"}
{"max_stars_count": 63, "max_issues_count": 8, "max_forks_count": 13, "avg_line_length": 23.1428571429, "max_line_length": 74, "alphanum_fraction": 0.5061728395}
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

export default class Option extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hover: false
        };
    }
    
    static propTypes = {
        value: PropTypes.any.isRequired,
        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    }

    static displayName = 'Option'

    leaveItem = () => {
        this.setState({
            hover: false
        });
    }

    enterItem = () => {
        this.setState({
            hover: true
        });
    }

    render () {
        const { value, label, selected, className, ...rest } = this.props;
        const { hover } = this.state;

        const classes = classNames('area-select-option', className, {
            'hover': hover
        });

        return (
            <li {...rest} className={classes} 
                value={value} 
                onMouseLeave={this.leaveItem} 
                onMouseEnter={this.enterItem}>
                {label || value}
            </li>
        );
    }
}