simplify & focus

packages/map-gl-native/src/components/HighlightPopup.js

@@ -0,0 +1,3 @@
+export default function FIXME() {
+    return null;
+}

packages/map-gl-native/src/components/index.js

@@ -1,15 +1,15 @@
-import Map from "./Map.js";
 import MapProvider from "./MapProvider.js";
+import Map from "./Map.js";
 import MapInteraction from "./MapInteraction.js";
 import MapAutoZoom from "./MapAutoZoom.js";
 import MapIdentify from "./MapIdentify.js";
-import MapLayers from "./MapLayers.js";
+import HighlightPopup from "./HighlightPopup.js";
 
 export {
-    Map,
     MapProvider,
+    Map,
     MapInteraction,
     MapAutoZoom,
     MapIdentify,
-    MapLayers,
+    HighlightPopup,
 };

packages/map-gl-native/src/index.js

@@ -4,7 +4,7 @@ import {
     MapInteraction,
     MapAutoZoom,
     MapIdentify,
-    MapLayers,
+    HighlightPopup,
 } from "./components/index.js";
 import { Geojson, Highlight, VectorTile, Tile } from "./overlays/index.js";
 import {
@@ -20,11 +20,11 @@ export {
     MapInteraction,
     MapAutoZoom,
     MapIdentify,
-    MapLayers,
-    VectorTile,
-    Tile,
+    HighlightPopup,
     Geojson,
     Highlight,
+    VectorTile,
+    Tile,
     createMapInstance,
     useMapInstance,
     useGeolocation,

packages/map-gl-web/package.json

@@ -31,18 +31,10 @@
     },
     "homepage": "https://wq.io/@wq/map-gl",
     "dependencies": {
-        "@mapbox/mapbox-gl-draw": "^1.4.1",
-        "@turf/circle": "^6.5.0",
-        "@turf/union": "^6.5.0",
-        "@wq/map": "^2.1.0",
-        "@wq/material": "^2.1.0",
-        "mapbox-gl": "npm:empty-npm-package@^1.0.0",
-        "react-map-gl": "^7.0.25"
-    },
-    "devDependencies": {
-        "@wq/material-web": "^2.1.0",
-        "@wq/model": "^2.1.0",
-        "@wq/react": "^2.1.0",
-        "@wq/store": "^2.0.0"
+        "@turf/bbox": "^7.2.0",
+        "@turf/centroid": "^7.2.0",
+        "@turf/union": "^7.2.0",
+        "@wq/react": "^3.0.0-a1-dev1.g760eb56",
+        "react-map-gl": "^8.0.1"
     }
 }

packages/map-gl-web/src/__tests__/index.js

@@ -1,8 +1,8 @@
 /**
  * @jest-environment jsdom
  */
-import mapgl from "../index.js";
+import { MapProvider } from "../index.js";
 
 test("it loads", () => {
-    expect(mapgl.name).toBe("map-gl");
+    expect(MapProvider.displayName).toBe("MapProvider:wq");
 });

packages/map-gl-web/src/components/HighlightPopup.js

@@ -1,44 +1,55 @@
 import React, { useMemo } from "react";
-import { Popup } from "react-map-gl";
-import {
-    HighlightPopup as ModalPopup,
-    HighlightContent,
-    computeBounds,
-} from "@wq/map";
-import { usePluginReducer } from "@wq/react";
-import { useMinWidth } from "@wq/material";
-
-export default function HighlightPopup({ inMap }) {
-    const showInMap = useMinWidth(600);
+import { Popup } from "react-map-gl/maplibre";
+import { useComponents, withWQ, createFallbackComponents } from "@wq/react";
+import centroid from "@turf/centroid";
+import PropTypes from "prop-types";
+
+const HighlightPopupFallback = {
+    components: {
+        useMinWidth(width) {
+            return window.screen.width >= width;
+        },
+    },
+};
+
+function HighlightPopup({ data, inMap, onClose }) {
+    const { useMinWidth } = useComponents(),
+        showInMap = useMinWidth(600);
     if (inMap && !showInMap) {
         return null;
     } else if (!inMap && showInMap) {
         return null;
     } else if (inMap) {
-        return <InMapPopup />;
+        return <InMapPopup data={data} onClose={onClose} />;
     } else {
-        return <ModalPopup />;
+        return <ModalPopupWQ data={data} onClose={onClose} />;
     }
 }
 
-export function InMapPopup() {
-    const [{ highlight }, { clearHighlight }] = usePluginReducer("map"),
-        [longitude, latitude] = useMemo(
-            () => findPoint(highlight),
-            [highlight]
-        );
-    if (!highlight || latitude === null || longitude === null) {
+export default withWQ(HighlightPopup, { fallback: HighlightPopupFallback });
+
+export function InMapPopup({ data, onClose }) {
+    const dataIsEmpty = !data || !data.features || data.features.length === 0,
+        [longitude, latitude] = useMemo(() => {
+            if (dataIsEmpty) {
+                return [null, null];
+            }
+            return centroid(data).geometry.coordinates;
+        }, [data]);
+
+    if (dataIsEmpty) {
         return null;
     }
+
     return (
         <Popup
             latitude={latitude}
             longitude={longitude}
-            onClose={clearHighlight}
+            onClose={onClose}
             maxWidth="80vw"
         >
             <div style={{ maxHeight: "40vh", overflowY: "auto" }}>
-                {highlight.features.map((feature) => (
+                {data.features.map((feature) => (
                     <HighlightContent
                         key={feature.id}
                         feature={feature}
@@ -50,23 +61,85 @@ export function InMapPopup() {
     );
 }
 
-function findPoint(highlight) {
-    if (!highlight || !highlight.features || !highlight.features.length) {
-        return [null, null];
-    }
-    const point = highlight.features.find(
-        (feature) => feature.geometry && feature.geometry.type === "Point"
+const ModalPopupFallback = {
+    components: createFallbackComponents(
+        ["Popup", "View", "ScrollView", "IconButton"],
+        "@wq/material"
+    ),
+};
+
+function ModalPopup({ data, onClose }) {
+    const { Popup, View, ScrollView, IconButton } = useComponents(),
+        features = (data && data.features) || [];
+    return (
+        <View style={{ position: "absolute", bottom: 0 }}>
+            <Popup
+                open={features.length > 0}
+                onClose={onClose}
+                variant="persistent"
+            >
+                <IconButton
+                    icon="close"
+                    onClick={onClose}
+                    style={{
+                        position: "absolute",
+                        right: 0,
+                        top: 0,
+                        zIndex: 1,
+                    }}
+                />
+                <ScrollView style={{ maxHeight: "33vh" }}>
+                    {features.map((feature) => (
+                        <HighlightContentWQ
+                            key={feature.id}
+                            feature={feature}
+                        />
+                    ))}
+                </ScrollView>
+            </Popup>
+        </View>
     );
+}
 
-    if (point) {
-        return point.geometry.coordinates;
-    } else {
-        const bounds = computeBounds(highlight.features);
-        if (bounds) {
-            const [[minx, miny], [maxx, maxy]] = bounds;
-            return [(minx + maxx) / 2, (miny + maxy) / 2];
-        } else {
-            return [0, 0];
-        }
+const ModalPopupWQ = withWQ(ModalPopup, { fallback: ModalPopupFallback });
+
+export { ModalPopupWQ as ModalPopup };
+
+const HighlightContentFallback = {
+    components: {
+        Text({ children }) {
+            return <div>{children}</div>;
+        },
+        DefaultPopup({ feature: { id, properties = {} } }) {
+            const { Text } = useComponents();
+            const label = properties.label || properties.name || id;
+            return <Text>{label}</Text>;
+        },
+    },
+};
+
+function HighlightContent({ feature, inMap }) {
+    const popupName = feature.popup
+            ? `${feature.popup}-popup`
+            : "default-popup",
+        components = useComponents();
+
+    let View = components[popupName];
+    if (!View) {
+        console.warn(`No component named ${popupName}, using default.`);
+        View = components["default-popup"];
     }
+
+    return <View feature={feature} inMap={inMap} />;
 }
+
+HighlightContent.propTypes = {
+    feature: PropTypes.object,
+    inMap: PropTypes.bool,
+};
+
+const HighlightContentWQ = withWQ(HighlightContent, {
+    fallback: HighlightContentFallback,
+});
+
+export { HighlightContentWQ as HighlightContent };