@geoinsight/react-components 1.0.7 → 1.1.0

package/dist/cjs/index.js

@@ -8,39 +8,53 @@ var bs = require('react-icons/bs');
 var reactHookForm = require('react-hook-form');
 var tb = require('react-icons/tb');
 var io5 = require('react-icons/io5');
-var DeckGL = require('@deck.gl/react/typed');
-var Layers = require('@deck.gl/layers');
-var reactMapGl = require('react-map-gl');
-var maplibregl = require('maplibre-gl');
-var fi = require('react-icons/fi');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
+const generateId = () => {
+    return `id-${Math.random().toString(36).slice(2, 11)}`;
+};
+
+function MenuContent({ children, ...props }) {
+    const { items } = react.useContext(useMenu());
+    const menuId = react.useMemo(() => props["data-menu-id"], [props]);
+    const isExpanded = react.useMemo(() => {
+        return items[menuId]?.isExpanded;
+    }, [items, menuId]);
+    if (!isExpanded)
+        return;
+    return jsxRuntime.jsx("div", { ...props, children: children });
 }
 
-var Layers__namespace = /*#__PURE__*/_interopNamespaceDefault(Layers);
+const ALLOWED_CHILD_COMPONENT$1 = [MenuButton.name, MenuContent.name];
+function MenuItem({ children, ...props }) {
+    const { addItem } = react.useContext(useMenu());
+    const menuId = react.useRef("");
+    react.useEffect(() => {
+        menuId.current = generateId();
+        addItem({
+            id: menuId.current,
+            isExpanded: true,
+        });
+    }, []);
+    return (jsxRuntime.jsx("div", { "data-menu-id": menuId.current, ...props, children: react.Children.map(children, (child) => {
+            if (!react.isValidElement(child))
+                return;
+            const childComponent = child.type;
+            if (!ALLOWED_CHILD_COMPONENT$1.includes(childComponent.name))
+                return;
+            return react.cloneElement(child, {
+                "data-menu-id": menuId.current,
+            });
+        }) }));
+}
 
-const ALLOWED_CHILD_COMPONENT$1 = ["MenuItem", "Item"];
+const ALLOWED_CHILD_COMPONENT = [MenuItem.name];
 function MenuWrapper({ children }) {
     const menuItemComponents = react.useMemo(() => {
         return react.Children.map(children, (child) => {
             if (!react.isValidElement(child))
                 return;
             const childComponent = child.type;
-            if (!ALLOWED_CHILD_COMPONENT$1.includes(childComponent.name))
+            if (!ALLOWED_CHILD_COMPONENT.includes(childComponent.name))
                 return;
             return react.cloneElement(child);
         });
@@ -110,44 +124,6 @@ function MenuButton({ anchor, children, buttonClassName, nested, subnested, drop
         }, buttonClassName), onClick: handleClick, ...props, children: [children, dropdown ? (isToggled ? (jsxRuntime.jsx(tfi.TfiAngleDown, { size: "1rem" })) : (jsxRuntime.jsx(tfi.TfiAngleUp, { size: "1rem" }))) : null] }));
 }
 
-function MenuContent({ children, ...props }) {
-    const { items } = react.useContext(useMenu());
-    const menuId = react.useMemo(() => props["data-menu-id"], [props]);
-    const isExpanded = react.useMemo(() => {
-        return items[menuId]?.isExpanded;
-    }, [items, menuId]);
-    if (!isExpanded)
-        return;
-    return jsxRuntime.jsx("div", { ...props, children: children });
-}
-
-const generateId = () => {
-    return `id-${Math.random().toString(36).slice(2, 11)}`;
-};
-
-const ALLOWED_CHILD_COMPONENT = ["MenuButton", "MenuContent", "Button", "Content"];
-function MenuItem({ children, ...props }) {
-    const { addItem } = react.useContext(useMenu());
-    const menuId = react.useRef("");
-    react.useEffect(() => {
-        menuId.current = generateId();
-        addItem({
-            id: menuId.current,
-            isExpanded: true,
-        });
-    }, []);
-    return (jsxRuntime.jsx("div", { "data-menu-id": menuId.current, ...props, children: react.Children.map(children, (child) => {
-            if (!react.isValidElement(child))
-                return;
-            const childComponent = child.type;
-            if (!ALLOWED_CHILD_COMPONENT.includes(childComponent.name))
-                return;
-            return react.cloneElement(child, {
-                "data-menu-id": menuId.current,
-            });
-        }) }));
-}
-
 const Menu = {
     Root: MenuRoot,
     Item: MenuItem,
@@ -316,189 +292,6 @@ function Modal({ className, modalref, children, title, subtitle, footer, hasOver
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasOverlay && jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: clsx("modal", className), ...rest, children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
 }
 
-const ThemeContext = react.createContext(undefined);
-function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
-    const [dataTheme, setDataTheme] = react.useState();
-    const [dataPalette, setDataPalette] = react.useState();
-    react.useEffect(() => {
-        if (dataPaletteProp) {
-            switchDataPalette(dataPaletteProp);
-        }
-    }, [dataPaletteProp]);
-    react.useEffect(() => {
-        if (dataThemeProp) {
-            switchDataTheme(dataThemeProp);
-        }
-    }, [dataThemeProp]);
-    react.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 (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
-}
-function useTheme() {
-    const context = react.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 (jsxRuntime.jsx("div", { className: `control control--${position}`, ...rest, children: children }));
-}
-
-function MapToc({ items, selected, setSelected }) {
-    return (jsxRuntime.jsx(Menu.Root, { children: Object.entries(items).map(([parentId, parent], index) => (jsxRuntime.jsxs(Menu.Item, { children: [jsxRuntime.jsx(Menu.Button, { dropdown: true, children: parent.title }), jsxRuntime.jsx(Menu.Content, { children: Object.entries(parent.children).map(([childId, child], index) => (jsxRuntime.jsx(Menu.Item, { children: jsxRuntime.jsx(Menu.Button, { isSelected: childId === selected.id, nested: true, handleCallbackClick: () => setSelected({ id: childId, ...child }), children: child.label }) }))) })] }, `first-level-${index}`))) }));
-}
-
-/** Context */
-const MapContext = react.createContext(undefined);
-function MapProvider({ children }) {
-    const [currentLayer, setCurrentLayer] = react.useState(undefined);
-    return (jsxRuntime.jsx(MapContext.Provider, { value: { state: { currentLayer }, setCurrentLayer }, children: children }));
-}
-function useMap({ defaultLayer }) {
-    const context = react.useContext(MapContext);
-    react.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 ? (jsxRuntime.jsxs("div", { className: "map__popup-content", children: [jsxRuntime.jsx("div", { className: "map__popup-list", children: data.fields.map((field) => (jsxRuntime.jsxs("h5", { children: [field, ":"] }))) }), jsxRuntime.jsx("div", { className: "map__popup-list", children: data.values.map((value) => (jsxRuntime.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" ? (jsxRuntime.jsx("div", { className: "map__popup", style: { left: longitude, top: latitude }, children: jsxRuntime.jsx(DefaultPopup, { popup: popup }) })) : (jsxRuntime.jsx(reactMapGl.Popup, { anchor: "top", longitude: Number(longitude), latitude: Number(latitude), onClose: () => setPopupData && setPopupData(undefined), children: jsxRuntime.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] = react.useState();
-    const [popupData, setPopupData] = react.useState();
-    const _layers = layers &&
-        react.useMemo(() => layers.map(({ type, layer }) => new Layers__namespace[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 (jsxRuntime.jsxs("div", { className: "map", children: [jsxRuntime.jsxs(DeckGL, { initialViewState: initialViewState || INITIAL_VIEW_STATE, controller: true, layers: _layers, onClick: handleClick, ...restMapProps, children: [jsxRuntime.jsx(reactMapGl.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 jsxRuntime.jsx(MapControl, { position: key, children: _controls[key] });
-                    }), jsxRuntime.jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsxRuntime.jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsxRuntime.jsx(MapControl, { position: "bottom-left", children: hasSwitchBasemap ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [bottomLeft, jsxRuntime.jsx(Button, { mode: "icon", size: "small", onClick: handleToggle, children: theme.dataTheme === "dark" ? (jsxRuntime.jsx(fi.FiSun, { size: "1.25rem" })) : (jsxRuntime.jsx(fi.FiMoon, { size: "1.25rem", color: "var(--color-black)" })) })] })) : (bottomLeft) }), jsxRuntime.jsx("div", { className: "map__attribution", children: attribution || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { as: "link", href: "https://www.maptiler.com/copyright/", target: "_blank", children: "\u00A9 MapTiler" }), jsxRuntime.jsx(Button, { as: "link", href: "https://www.openstreetmap.org/copyright", target: "_blank", children: "\u00A9 OpenStreetMap contributors" })] })) })] }), popupData && lngLat && (jsxRuntime.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] = react.useState("globe");
-    const { "bottom-left": bottomLeft, "center-left": centerLeft, ..._controls } = renderControls;
-    const [popupData, setPopupData] = react.useState();
-    const [lngLat, setLngLat] = react.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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(reactMapGl.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
-                    jsxRuntime.jsx(reactMapGl.Source, { id: id, ...restSource, children: layers && layers.map((layer) => jsxRuntime.jsx(reactMapGl.Layer, { ...layer })) }))), Object.keys(_controls).map((key) => {
-                    // @ts-ignore
-                    return jsxRuntime.jsx(MapControl, { position: key, children: _controls[key] });
-                }), jsxRuntime.jsxs(MapControl, { position: "center-left", children: [centerLeft, mapContext?.state.currentLayer && (jsxRuntime.jsx(MapToc, { items: toc.parents, selected: mapContext.state.currentLayer, setSelected: handeSelectedLayer }))] }), jsxRuntime.jsxs(MapControl, { position: "bottom-left", children: [bottomLeft, hasSwitchBasemap && (jsxRuntime.jsx(Button, { className: "map__button", mode: "icon", onClick: () => switchDataTheme(dataTheme === "dark" ? "light" : "dark"), children: dataTheme === "dark" ? jsxRuntime.jsx(bs.BsFillMoonFill, {}) : jsxRuntime.jsx(bs.BsFillSunFill, {}) })), hasSwitchProjection && (jsxRuntime.jsx(Button, { className: "map__button", mode: "icon", onClick: () => setProjection((prev) => prev === "globe" ? "mercator" : "globe"), children: projection === "globe" ? "2D" : "3D" }))] }), popupData && lngLat && (jsxRuntime.jsx(MapPopup, { longitude: lngLat[0], latitude: lngLat[1], framework: "mapboxgl", setPopupData: setPopupData, popup: popupData }))] }) })) : (jsxRuntime.jsx(Modal, { hasCloseButton: false, children: jsxRuntime.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" ? (jsxRuntime.jsx(MapDeckgl, { attribution: attribution, basemap: basemap, basemapToken: basemapToken, hasSwitchBasemap: hasSwitchBasemap, layers: layers, mapProps: mapProps, renderControls: renderControls, toc: toc })) : framework === "mapboxgl" ? (jsxRuntime.jsx(MapMapbox, { basemap: basemap, hasSwitchBasemap: hasSwitchBasemap, hasSwitchProjection: hasSwitchProjection, mapProps: mapProps, renderControls: renderControls, sources: sources, toc: toc })) : (jsxRuntime.jsx("div", { children: "The component needs a framework" }));
-}
-
 const LoadingContext = react.createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -630,6 +423,52 @@ function useModal({} = {}) {
     return context;
 }
 
+const ThemeContext = react.createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = react.useState();
+    const [dataPalette, setDataPalette] = react.useState();
+    react.useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    react.useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    react.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 (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
+}
+function useTheme() {
+    const context = react.useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
 exports.Button = Button;
 exports.Form = Form;
 exports.FormInput = FormInput;
@@ -639,9 +478,6 @@ exports.Input = Input;
 exports.Loading = Loading;
 exports.LoadingContext = LoadingContext;
 exports.LoadingProvider = LoadingProvider;
-exports.MapComponent = MapComponent;
-exports.MapControl = MapControl;
-exports.MapProvider = MapProvider;
 exports.Menu = Menu;
 exports.Modal = Modal;
 exports.ModalContext = ModalContext;
@@ -651,7 +487,6 @@ exports.TextArea = TextArea;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.useLoading = useLoading;
-exports.useMap = useMap;
 exports.useModal = useModal;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map