feat(geo): add Marker & HTMLMarker interactions [PART-8]

[samouss]

Summary

This is the eighth part of the GeoSearch widget. The PR introduces the ability to attach event handlers on both markers (<Marker> & <HTMLMarker>). We also moved the options to be top level for <GeoSearch>, <Marker>, <HTMLMarker>. There is no more the mapOptions & options props. You can pass the option directly to the component.

This PR includes:

• utils: create some utility functions to register the listeners, filter props, etc...
• createHTMLMarker: update the addListener signature to match the one from Google Maps. It means that we can register & remove events in the same way for both implementations.
• <GeoSearch>: remove the mapOptions prop, now you can pass the options directly to the component. They will be forward to <GoogleMaps>.
• <Marker>: we can now attach event listener to the marker like any other React element. But only a subset of events are available. The ones available are the ones implemented by Google Maps. We also remove the options prop, now you can pass the options directly to the component.
• <HTMLMarker>: we can now attach event listener to the marker like any other React element. All the regular mouse events are available (except drag). We also remove the options prop, now you can pass the options directly to the component.

Usage

import { GoogleMapsLoader, GeoSearch, Marker } from "react-instantsearch-dom-geo"; // name will change

<GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY">
  {google => (
    <GeoSearch google={google}>
      {({ hits }) => (
        <Fragment>
          {hits.map(hit => (
            <Marker
              key={hit.objectID}
              hit={hit}
              label={hit.name}
              onClick={onClickHandler}
            />
          ))}
        </Fragment>
      )}
    </GeoSearch>
  )}
</GoogleMapsLoader>

Result

You can use the widget in Storybook.

[algobot]

Deploy preview for react-instantsearch ready!

Built with commit a330dee

https://deploy-preview-1227--react-instantsearch.netlify.com