@geoinsight/react-components 1.0.5 → 1.0.6

package/dist/esm/index.js

@@ -2,15 +2,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, Children, isValidElement, cloneElement, createContext, useState, useContext, useRef, useEffect, useReducer } from 'react';
 import clsx from 'clsx';
 import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
-import { BsCheckCircleFill, BsXCircleFill, BsFillMoonFill, BsFillSunFill } from 'react-icons/bs';
+import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import { TbArrowsDiagonal2 } from 'react-icons/tb';
 import { IoClose } from 'react-icons/io5';
-import DeckGL from '@deck.gl/react/typed';
-import * as Layers from '@deck.gl/layers';
-import { Popup, Map, Source, Layer } from 'react-map-gl';
-import maplibregl from 'maplibre-gl';
-import { FiSun, FiMoon } from 'react-icons/fi';
 
 const ALLOWED_CHILD_COMPONENT$1 = ["MenuItem"];
 function MenuWrapper({ children }) {
@@ -295,189 +290,6 @@ function Modal({ className, modalref, children, title, subtitle, footer, hasOver
     return (jsxs(Fragment, { children: [hasOverlay && jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: clsx("modal", className), ...rest, children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
 }
 
-const ThemeContext = createContext(undefined);
-function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
-    const [dataTheme, setDataTheme] = useState();
-    const [dataPalette, setDataPalette] = useState();
-    useEffect(() => {
-        if (dataPaletteProp) {
-            switchDataPalette(dataPaletteProp);
-        }
-    }, [dataPaletteProp]);
-    useEffect(() => {
-        if (dataThemeProp) {
-            switchDataTheme(dataThemeProp);
-        }
-    }, [dataThemeProp]);
-    useEffect(() => {
-        if (window.matchMedia) {
-            if (localStorage.getItem("data-theme")) {
-                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
-                setDataTheme(localStorage.getItem("data-theme"));
-            }
-            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-                document.documentElement.setAttribute("data-theme", "dark");
-                setDataTheme("dark");
-            }
-        }
-    }, []);
-    const switchDataTheme = (mode) => {
-        document.documentElement.setAttribute("data-theme", mode);
-        setDataTheme(mode);
-        localStorage.setItem("data-theme", mode);
-    };
-    const switchDataPalette = (mode) => {
-        document.documentElement.setAttribute("data-palette", mode);
-        setDataPalette(mode);
-        localStorage.setItem("palette-theme", mode);
-    };
-    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
-}
-function useTheme() {
-    const context = useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-}
-
-function MapControl({ children, position = "top-right", ...rest }) {
-    return (jsx("div", { className: `control control--${position}`, ...rest, children: children }));
-}
-
-function MapToc({ items, selected, setSelected }) {
-    return (jsx(Menu.Root, { children: Object.entries(items).map(([parentId, parent], index) => (jsxs(Menu.Item, { children: [jsx(Menu.Button, { dropdown: true, children: parent.title }), jsx(Menu.Content, { children: Object.entries(parent.children).map(([childId, child], index) => (jsx(Menu.Item, { children: jsx(Menu.Button, { isSelected: childId === selected.id, nested: true, handleCallbackClick: () => setSelected({ id: childId, ...child }), children: child.label }) }))) })] }, `first-level-${index}`))) }));
-}
-
-/** Context */
-const MapContext = createContext(undefined);
-function MapProvider({ children }) {
-    const [currentLayer, setCurrentLayer] = useState(undefined);
-    return (jsx(MapContext.Provider, { value: { state: { currentLayer }, setCurrentLayer }, children: children }));
-}
-function useMap({ defaultLayer }) {
-    const context = useContext(MapContext);
-    useEffect(() => {
-        if (context) {
-            context.setCurrentLayer(defaultLayer);
-        }
-    }, []);
-    if (context === undefined) {
-        throw new Error("useMap must be used within a MapProvider");
-    }
-    return context;
-}
-
-const DefaultPopup = ({ popup }) => {
-    const { isDefault, data, render } = popup.model;
-    return isDefault || true ? (jsxs("div", { className: "map__popup-content", children: [jsx("div", { className: "map__popup-list", children: data.fields.map((field) => (jsxs("h5", { children: [field, ":"] }))) }), jsx("div", { className: "map__popup-list", children: data.values.map((value) => (jsx("span", { children: typeof value === "string"
-                        ? new Function("v", `return (${value})(${JSON.stringify(popup.info)})`)()
-                        : value(popup.info) }))) })] })) : (render);
-};
-const MapPopup = ({ popup, framework = "deck.gl", setPopupData, longitude, latitude, }) => {
-    return framework === "deck.gl" ? (jsx("div", { className: "map__popup", style: { left: longitude, top: latitude }, children: jsx(DefaultPopup, { popup: popup }) })) : (jsx(Popup, { anchor: "top", longitude: Number(longitude), latitude: Number(latitude), onClose: () => setPopupData && setPopupData(undefined), children: jsx(DefaultPopup, { popup: popup }) }));
-};
-
-const INITIAL_VIEW_STATE = {
-    longitude: -122.41669,
-    latitude: 37.7853,
-    zoom: 13,
-    pitch: 0,
-    bearing: 0,
-};
-function MapDeckgl({ attribution, basemap, basemapToken, initialViewState, hasSwitchBasemap = true, layers, mapProps, renderControls = {}, toc, }) {
-    // @ts-ignore
-    const { onClick, ...restMapProps } = mapProps;
-    const theme = useTheme();
-    const [lngLat, setLngLat] = useState();
-    const [popupData, setPopupData] = useState();
-    const _layers = layers &&
-        useMemo(() => layers.map(({ type, layer }) => new Layers[type](layer)), []);
-    const { "bottom-left": bottomLeft, "center-left": centerLeft, ..._controls } = renderControls;
-    const mapContext = toc &&
-        useMap({
-            defaultLayer: {
-                id: toc.defaultIds[1],
-                ...toc?.parents[toc.defaultIds[0]].children[toc.defaultIds[1]],
-            },
-        });
-    const handleToggle = () => {
-        theme.switchDataTheme(theme.dataTheme === "dark" ? "light" : "dark");
-    };
-    const handeSelectedLayer = (layer) => {
-        mapContext.setCurrentLayer(layer);
-    };
-    const handleClick = (event) => {
-        if (event.object) {
-            if (event.layer?.props?.popup) {
-                setPopupData({ model: event.layer?.props.popup, info: event.object });
-            }
-            setLngLat([event.pixel[0], event.pixel[1]]);
-        }
-        else {
-            setLngLat(undefined);
-        }
-        if (onClick) {
-            onClick(event);
-        }
-    };
-    return (jsxs("div", { className: "map", children: [jsxs(DeckGL, { initialViewState: initialViewState || INITIAL_VIEW_STATE, controller: true, layers: _layers, onClick: handleClick, ...restMapProps, children: [jsx(Map, { attributionControl: false, mapLib: maplibregl, mapStyle: basemap || theme.dataTheme === "dark"
-                            ? `https://api.maptiler.com/maps/darkmatter/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}`
-                            : `https://api.maptiler.com/maps/positron/style.json?key=${basemapToken || process.env.STORYBOOK_OPEN_TILES_TOKEN}` }), Object.keys(_controls).map((key) => {
-                        // @ts-ignore
-                        return jsx(MapControl, { position: key, children: _controls[key] });
-                    }), jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsx(MapControl, { position: "bottom-left", children: hasSwitchBasemap ? (jsxs(Fragment, { children: [bottomLeft, jsx(Button, { mode: "icon", size: "small", onClick: handleToggle, children: theme.dataTheme === "dark" ? (jsx(FiSun, { size: "1.25rem" })) : (jsx(FiMoon, { size: "1.25rem", color: "var(--color-black)" })) })] })) : (bottomLeft) }), jsx("div", { className: "map__attribution", children: attribution || (jsxs(Fragment, { children: [jsx(Button, { as: "link", href: "https://www.maptiler.com/copyright/", target: "_blank", children: "\u00A9 MapTiler" }), jsx(Button, { as: "link", href: "https://www.openstreetmap.org/copyright", target: "_blank", children: "\u00A9 OpenStreetMap contributors" })] })) })] }), popupData && lngLat && (jsx(MapPopup, { longitude: lngLat[0], latitude: lngLat[1], 
-                // framework="deck.gl"
-                popup: popupData }))] }));
-}
-
-function MapMapbox({ basemap, mapProps, hasSwitchBasemap, hasSwitchProjection, renderControls, sources, toc, }) {
-    // @ts-ignore
-    const { onClick, ...restMapProps } = mapProps;
-    const { dataTheme, switchDataTheme } = useTheme();
-    const [projection, setProjection] = useState("globe");
-    const { "bottom-left": bottomLeft, "center-left": centerLeft, ..._controls } = renderControls;
-    const [popupData, setPopupData] = useState();
-    const [lngLat, setLngLat] = useState();
-    const mapContext = toc &&
-        useMap({
-            defaultLayer: {
-                id: toc.defaultIds[1],
-                ...toc?.parents[toc.defaultIds[0]].children[toc.defaultIds[1]],
-            },
-        });
-    const handeSelectedLayer = (layer) => {
-        mapContext.setCurrentLayer(layer);
-    };
-    const handleClick = (event) => {
-        const { features, point: { x, y }, lngLat: { lng, lat }, } = event;
-        const hoveredFeature = features && features[0];
-        if (hoveredFeature) {
-            setPopupData({
-                model: hoveredFeature.layer.metadata["mapbox:popup"],
-                info: hoveredFeature,
-            });
-            setLngLat([lng, lat]);
-        }
-        if (onClick) {
-            onClick(event);
-        }
-    };
-    return mapProps?.mapboxAccessToken ? (jsx(Fragment, { children: jsxs(Map, { mapboxAccessToken: mapProps.mapboxAccessToken, projection: projection, mapStyle: basemap ||
-                `mapbox://styles/mapbox/${dataTheme === "dark" ? "light" : "dark"}-v11`, ...((mapProps.interactiveLayerIds && { onClick: handleClick }) ||
-                (onClick && { onClick })), ...restMapProps, children: [sources &&
-                    sources.map(({ id, layers, ...restSource }) => (
-                    // @ts-ignore
-                    jsx(Source, { id: id, ...restSource, children: layers && layers.map((layer) => jsx(Layer, { ...layer })) }))), Object.keys(_controls).map((key) => {
-                    // @ts-ignore
-                    return jsx(MapControl, { position: key, children: _controls[key] });
-                }), jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsxs(MapControl, { position: "bottom-left", children: [bottomLeft, hasSwitchBasemap && (jsx(Button, { className: "map__button", mode: "icon", onClick: () => switchDataTheme(dataTheme === "dark" ? "light" : "dark"), children: dataTheme === "dark" ? jsx(BsFillMoonFill, {}) : jsx(BsFillSunFill, {}) })), hasSwitchProjection && (jsx(Button, { className: "map__button", mode: "icon", onClick: () => setProjection((prev) => prev === "globe" ? "mercator" : "globe"), children: projection === "globe" ? "2D" : "3D" }))] }), popupData && lngLat && (jsx(MapPopup, { longitude: lngLat[0], latitude: lngLat[1], framework: "mapboxgl", setPopupData: setPopupData, popup: popupData }))] }) })) : (jsx(Modal, { hasCloseButton: false, children: jsx("p", { className: "map__mapbox-error", children: "You need to add the mapbox token to the prop mapboxAccessToken." }) }));
-}
-
-function MapComponent({ attribution, basemap, basemapToken, framework = "deck.gl", mapProps, hasSwitchBasemap = true, hasSwitchProjection = true, layers, renderControls = {}, sources, toc, }) {
-    return framework === "deck.gl" ? (jsx(MapDeckgl, { attribution: attribution, basemap: basemap, basemapToken: basemapToken, hasSwitchBasemap: hasSwitchBasemap, layers: layers, mapProps: mapProps, renderControls: renderControls, toc: toc })) : framework === "mapboxgl" ? (jsx(MapMapbox, { basemap: basemap, hasSwitchBasemap: hasSwitchBasemap, hasSwitchProjection: hasSwitchProjection, mapProps: mapProps, renderControls: renderControls, sources: sources, toc: toc })) : (jsx("div", { children: "The component needs a framework" }));
-}
-
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -609,5 +421,51 @@ function useModal({} = {}) {
     return context;
 }
 
-export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, MapComponent, MapControl, MapProvider, Menu, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useMap, useModal, useTheme };
+const ThemeContext = createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = useState();
+    const [dataPalette, setDataPalette] = useState();
+    useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchDataPalette = (mode) => {
+        document.documentElement.setAttribute("data-palette", mode);
+        setDataPalette(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
+}
+function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
+export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
 //# sourceMappingURL=index.js.map