@211la/search-react 0.3.6 → 0.4.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { connectRefinementList, connectHits } from 'react-instantsearch-dom';
 import { createConnector } from 'react-instantsearch-core';
-import { GoogleApiWrapper, InfoWindow, Marker, Map as Map$1 } from 'google-maps-react';
+import { GoogleApiWrapper, Map as Map$1, Marker, InfoWindow } from 'google-maps-react';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
 
 var trim = function (prefix, suffix, text) {
@@ -197,78 +197,6 @@ var connectSearchBoxFields = createConnector({
     },
 });
 
-var groupBy = function (list, fn) {
-    // @ts-ignore
-    var buckets = {};
-    list.forEach(function (resource) {
-        var key = fn(resource);
-        if (!buckets[key]) {
-            buckets[key] = [];
-        }
-        buckets[key].push(resource);
-    });
-    return Object.keys(buckets).map(function (key) { return buckets[key]; });
-};
-var Map = function (props) {
-    var grouped = groupBy(props.hits, function (resource) { return resource.lat + "_" + resource.lng; }).map(function (resources) {
-        var hits = resources.map(function (resource) { return resource.hit; });
-        var _a = resources[0], lat = _a.lat, lng = _a.lng;
-        return { hits: hits, lat: lat, lng: lng, key: lat + "_" + lng };
-    });
-    var _a = useState(null), infoWindowContent = _a[0], setInfoWindowContent = _a[1];
-    // @ts-ignore
-    var makeInfoWindowSetter = function (hitGroup) {
-        return function (props, marker) {
-            if (!marker) {
-                return;
-            }
-            setInfoWindowContent({
-                marker: marker,
-                hitGroup: hitGroup,
-            });
-        };
-    };
-    var closeInfoWindow = function () { return setInfoWindowContent(null); };
-    var UserInfoWindow = props.infoWindow;
-    var infoWindow = infoWindowContent && UserInfoWindow && (
-    // @ts-ignore
-    React.createElement(InfoWindow, { visible: true, google: props.google, 
-        // @ts-ignore
-        onClose: closeInfoWindow, marker: infoWindowContent.marker },
-        React.createElement(UserInfoWindow, { hitGroup: infoWindowContent.hitGroup })));
-    var markers = grouped.map(function (resources) {
-        var key = resources.key, lat = resources.lat, lng = resources.lng;
-        return (
-        // @ts-ignore
-        React.createElement(Marker, { key: key, position: { lat: lat, lng: lng }, onClick: makeInfoWindowSetter(resources) }, ' '));
-    });
-    var mapRef = useRef(null);
-    var groupKey = grouped
-        .map(function (item) { return item.key; })
-        .sort(function (a, b) { return a.localeCompare(b); })
-        .join(';');
-    useEffect(function () {
-        if (mapRef.current === null) {
-            return;
-        }
-        // data has changed. closing the window.
-        setInfoWindowContent(null);
-        // @ts-ignore
-        var bounds = new google.maps.LatLngBounds();
-        grouped.forEach(function (group) {
-            // @ts-ignore
-            bounds.extend(new google.maps.LatLng(group.lat, group.lng));
-        });
-        // @ts-ignore
-        mapRef.current.map.fitBounds(bounds);
-    }, [mapRef, groupKey]);
-    return (React.createElement(Map$1, { ref: mapRef, google: props.google, disableDefaultUI: props.disableDefaultUI },
-        markers,
-        infoWindow));
-};
-Map.defaultProps = {
-    disableDefaultUI: false,
-};
 var ifStringToInt = function (v) {
     switch (typeof v) {
         case 'string':
@@ -279,34 +207,78 @@ var ifStringToInt = function (v) {
             return null;
     }
 };
-var transformHits = function (hits, mapFunc) {
+function transform(hits, transformer) {
     return hits
-        .flatMap(mapFunc)
-        .map(function (entry) {
-        return __assign(__assign({}, entry), { lat: ifStringToInt(entry.lat), lng: ifStringToInt(entry.lng) });
-    })
-        .filter(function (entry) { return entry.lat !== null && entry.lng !== null; });
-};
-var defaultMapFunc = function (hit) {
-    return (hit.site.addresses || []).map(function (address) {
-        return {
-            lat: address.latitude,
-            lng: address.longitude,
-            hit: __assign(__assign({}, hit), { site: __assign(__assign({}, hit.site), { addresses: [address] }) }),
-        };
+        .map(transformer)
+        .filter(function (entry) {
+        return entry !== null &&
+            entry !== undefined &&
+            entry.lat !== null &&
+            entry.lng !== null;
     });
+}
+var defaultTransformer = function (hit) {
+    if (!hit.addresses || hit.addresses.length === 0) {
+        return null;
+    }
+    var address = hit.addresses[0];
+    return {
+        lat: ifStringToInt(address.latitude),
+        lng: ifStringToInt(address.longitude),
+        hit: hit,
+    };
+};
+var Map = function (props) {
+    var mapRef = useRef(null);
+    var markers = useMemo(function () { return transform(props.hits, props.transformMarkers || defaultTransformer); }, [props.hits, props.transformMarkers]);
+    var _a = useState(null), selectedMarker = _a[0], setSelectedMarker = _a[1];
+    var handleMarkerClick = useCallback(function (marker, hit) {
+        if (props.onMarkerClick) {
+            props.onMarkerClick(hit);
+        }
+        setSelectedMarker({
+            marker: marker,
+            hit: hit,
+        });
+    }, [props.onMarkerClick, setSelectedMarker]);
+    var UserInfoWindow = props.infoWindow;
+    useEffect(function () {
+        if (mapRef.current === null) {
+            return;
+        }
+        // Markers updated. Close the current window.
+        setSelectedMarker(null);
+        // Update bounds of the map
+        var bounds = markers.reduce(
+        //
+        function (bounds, marker) {
+            bounds.extend(new google.maps.LatLng(marker.lat, marker.lng));
+            return bounds;
+        }, new google.maps.LatLngBounds());
+        mapRef.current.map.fitBounds(bounds);
+    }, [mapRef, markers]);
+    return (React__default.createElement(Map$1, { ref: mapRef, google: props.google, disableDefaultUI: props.disableDefaultUI },
+        markers.map(function (data) { return (React__default.createElement(Marker, { key: data.hit.id, position: { lat: data.lat, lng: data.lng }, onClick: function (_, marker) {
+                if (marker) {
+                    handleMarkerClick(marker, data.hit);
+                }
+            } })); }),
+        !!selectedMarker && !!UserInfoWindow && (React__default.createElement(InfoWindow, { map: mapRef.current.map, visible: true, google: props.google, marker: selectedMarker.marker },
+            React__default.createElement(UserInfoWindow, { hit: selectedMarker.hit })))));
 };
-// makeMap creates a react component class for the google maps algolia widget.
-var makeMap = function (apiKey, options) {
-    var _a = options || {}, mapFunc = _a.mapFunc, infoWindow = _a.infoWindow, disableDefaultUI = _a.disableDefaultUI;
-    var Elem = GoogleApiWrapper({
+/**
+ * Creates a map component to display search results on a map.
+ *
+ * @param apiKey Google Maps API key
+ * @param options Options to customize the map
+ */
+var connectMap = function (apiKey) {
+    var Renderer = GoogleApiWrapper({
         apiKey: apiKey,
     })(function (props) {
-        var hits = transformHits(props.hits, mapFunc || defaultMapFunc);
-        return React.createElement(Map, { google: props.google, hits: hits, infoWindow: infoWindow, disableDefaultUI: disableDefaultUI || false });
+        return (React__default.createElement(Map, { google: props.google, hits: props.hits, infoWindow: props === null || props === void 0 ? void 0 : props.infoWindow, disableDefaultUI: (props === null || props === void 0 ? void 0 : props.disableDefaultUI) || true, transformMarkers: props === null || props === void 0 ? void 0 : props.transformMarkers, onMarkerClick: props === null || props === void 0 ? void 0 : props.onMarkerClick }));
     });
-    // @ts-ignore
-    return connectHits(Elem);
+    return connectHits(Renderer);
 };
 
 /**
@@ -477,7 +449,7 @@ var connectTaxonomyRefinementList = createConnector({
 var TaxonomyRefinementList = connectTaxonomyRefinementList(function (_a) {
     var items = _a.items, refine = _a.refine;
     return (React__default.createElement("div", { className: "ais-RefinementList" },
-        React__default.createElement("ul", { className: "ais-RefinementList-list" }, items.map(function (item) { return (React__default.createElement("li", { className: "ais-RefinementList-item" },
+        React__default.createElement("ul", { className: "ais-RefinementList-list" }, items.map(function (item) { return (React__default.createElement("li", { key: item.value, className: "ais-RefinementList-item" },
             React__default.createElement("label", { className: "ais-RefinementList-label" },
                 React__default.createElement("input", { className: "ais-RefinementList-checkbox", type: "checkbox", value: item.value, onChange: function () {
                         refine(item.value);
@@ -485,4 +457,4 @@ var TaxonomyRefinementList = connectTaxonomyRefinementList(function (_a) {
             React__default.createElement("span", { className: "ais-RefinementList-labelText" }, item.label))); }))));
 });
 
-export { ExactNumberFieldSearch, ExactStringFieldSearch, LocationDistanceFilter, PlaceAutocomplete, SearchBoxFields, StringFieldSearch, TaxonomyRefinementList, connectExactNumberFieldSearch, connectExactStringFieldSearch, connectGeolocation, connectResources, connectSearchBoxFields, connectStringFieldSearch, connectTaxonomyRefinementList, makeConnectFieldSearch, makeMap };
+export { ExactNumberFieldSearch, ExactStringFieldSearch, LocationDistanceFilter, PlaceAutocomplete, SearchBoxFields, StringFieldSearch, TaxonomyRefinementList, connectExactNumberFieldSearch, connectExactStringFieldSearch, connectGeolocation, connectMap, connectResources, connectSearchBoxFields, connectStringFieldSearch, connectTaxonomyRefinementList, makeConnectFieldSearch };

package/dist/types/Map.d.ts

@@ -1,21 +1,24 @@
-import * as React from 'react';
-export declare type HitGroup = {
-    key: string;
+import React from 'react';
+import { IndexedResource } from '@211la/search-client';
+import type { Hit, HitsProvided } from 'react-instantsearch-core';
+export declare type MarkerData = {
     lat: number;
     lng: number;
-    hits: any[];
+} & {
+    hit: Hit<IndexedResource>;
 };
-declare type InfoWindowProps = {
-    hitGroup: HitGroup;
-};
-declare type LatLng = {
-    lat: number;
-    lng: number;
-};
-export declare type MakeMapOptions = {
-    mapFunc?: <T>(hit: any) => T[];
-    infoWindow?: React.ComponentType<InfoWindowProps>;
+interface ConnectedMapProps extends HitsProvided<IndexedResource> {
+    google: any;
+    infoWindow?: any;
     disableDefaultUI?: boolean;
-};
-export declare const makeMap: <T extends LatLng>(apiKey: string, options?: MakeMapOptions | undefined) => React.ComponentClass<{}, any>;
+    transformMarkers?: any;
+    onMarkerClick?: any;
+}
+/**
+ * Creates a map component to display search results on a map.
+ *
+ * @param apiKey Google Maps API key
+ * @param options Options to customize the map
+ */
+export declare const connectMap: (apiKey: string) => React.ComponentClass<Omit<ConnectedMapProps, 'google' | 'hits'>>;
 export {};

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ export { makeConnectFieldSearch, connectExactStringFieldSearch, connectExactNumb
 export { connectGeolocation } from './connectGeolocation';
 export { connectResources } from './connectResources';
 export { connectSearchBoxFields } from './connectSearchBoxFields';
-export { makeMap, HitGroup } from './Map';
+export { connectMap, MarkerData } from './Map';
 export { LocationDistanceFilter } from './LocationDistanceFilter';
 export { PlaceAutocomplete } from './PlaceAutocomplete';
 export { SearchBoxFields } from './SearchBoxFields';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@211la/search-react",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "files": [
@@ -33,7 +33,7 @@
     "typescript": "^4.0.5"
   },
   "peerDependencies": {
-    "@211la/search-client": "^0.3.6",
+    "@211la/search-client": "^0.3.8",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "react-instantsearch-core": ">=6.11.1",