import * as React from 'react'; import { get, includes } from 'lodash'; import { Popup } from 'semantic-ui-react'; import { FacetProps, } from './FacetTypes'; interface CountryFacetState { hover: string | null } class CountryFacet extends React.Component { static contextTypes = { searchState: React.PropTypes.object, transition: React.PropTypes.func }; constructor() { super(); this.state = { hover: null }; this.onClick = this.onClick.bind(this); this.onMouseOver = this.onMouseOver.bind(this); } onClick(e: any) { const country = e.target.id; const selections = this.props.values.filter( // e.g. for "Paris, France" (prop) => prop.value.indexOf(country) >= 0 ).map( ({value}) => value ); const thisFacet = {}; thisFacet[this.props.facet] = selections; this.context.transition( { start: 0, facets: thisFacet } ); } onMouseOver(e: any) { this.setState({ hover: e.target.id }); e.preventDefault(); } render() { const self = this; const title = this.props.title; const help = this.props.help; const selections: string[] = get(this.context.searchState.facets, this.props.facet, []); function pickStyle(country: string) { const countryStyle = { fill: 'rgb(204, 204, 204)', stroke: 'rgb(17, 17, 17)', pointerEvents: 'all' }; const countryHoverStyle = { fill: 'rgb(104, 104, 104)', stroke: 'rgb(17, 17, 17)', pointerEvents: 'all' }; const countrySelectedStyle = { fill: 'steelblue', stroke: 'rgb(17, 17, 17)', pointerEvents: 'all' }; if (self.state.hover === country) { return countryHoverStyle; } if (includes(selections, country)) { return countrySelectedStyle; } return countryStyle; } const mainStyle = { fill: 'rgb(255, 255, 255)' }; const selection = !!this.state.hover ? ( ' (' + this.state.hover + ')' ) : ''; return (

{title ? ( help ? ( {title + selection}} content={help} />) :

{title + selection}

) : null}

); } } export { CountryFacetState, CountryFacet };