Merge branch 'release/v1.0.80'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hisptz/react-ui",
   "homepage": "https://hisptz.github.io/react-ui",
-  "version": "1.0.79",
+  "version": "1.0.80",
   "description": "A collection of reusable complex DHIS2 react ui components.",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -107,7 +107,8 @@
     "react-leaflet": "^4.0.1",
     "react-leaflet-custom-control": "^1.3.1",
     "react-spring": "^9.5.2",
-    "screenfull": "^6.0.2"
+    "screenfull": "^6.0.2",
+    "usehooks-ts": "^2.9.1"
   },
   "main": "./build/cjs/index.js",
   "module": "./build/es/index.js",

src/components/Map/Map.stories.tsx

@@ -262,8 +262,8 @@ GoogleEarthEngineLayers.args = {
       enabled: false,
       params: {
         min: 0,
-        max: 50,
-        palette: "#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15",
+        max: 10,
+        palette: "#f7fbff,#deebf7,#c6dbef,#9ecae1,#6baed6,#4292c6,#2171b5,#08519c,#08306b",
       },
       aggregations: ["sum", "mean"],
       filters: {

src/components/Map/components/EarthEngineLayerConfiguration/index.tsx

@@ -30,6 +30,7 @@ import { defaultClasses, defaultColorScaleName, getColorClasses, getColorPalette
 export interface EarthEngineLayerConfigurationProps {
   form: UseFormReturn<EarthEngineLayerConfig>;
   excluded?: string[];
+  [key: string]: any;
 }
 
 function useType() {
@@ -382,8 +383,8 @@ export function EarthEngineLayerConfigModal({ open, exclude, config, onClose, on
     defaultValues: config ?? {},
   });
   const onSubmitClick = (values: EarthEngineLayerConfig) => {
-    onChange(values);
     onClose();
+    onChange(values);
   };
 
   return (

src/components/Map/components/MapArea/index.tsx

@@ -10,8 +10,8 @@ import LegendArea from "../MapLayer/components/LegendArea";
 import { CustomThematicLayer } from "../MapLayer/interfaces";
 import { MapLayersProvider } from "../MapProvider/components/MapLayerProvider";
 import { useMapLayers } from "../MapProvider/hooks";
-import MapUpdater from "../MapUpdater";
 import { MapAreaProps, MapControls, MapLegendConfig } from "./interfaces";
+import MapUpdater from "../MapUpdater";
 
 function MapLayerArea({
   id,
@@ -57,6 +57,7 @@ function MapLayerArea({
 const MapArea = ({ base, controls, mapOptions, key, legends, layers }: MapAreaProps, ref: React.Ref<LeafletMap> | undefined) => {
   const { center, bounds } = useMapBounds();
   const { current: id } = useRef<string>(uid());
+
   return (
     <div id="map-container" style={{ height: "100%", width: "100%" }}>
       <MapContainer
@@ -68,6 +69,7 @@ const MapArea = ({ base, controls, mapOptions, key, legends, layers }: MapAreaPr
         bounds={bounds}
         style={{ height: "100%", width: "100%", minHeight: 500 }}
         key={key}
+        trackResize
         {...mapOptions}>
         <MapUpdater bounds={bounds} />
         <MapLayersProvider layers={layers}>

src/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.tsx

@@ -18,17 +18,18 @@ function getLegendsFromParams(params?: { min: number; max: number; palette: stri
   if (!params) return [];
 
   const { palette, min, max } = params;
+  console.log(params);
   const sanitizedPalette = Array.isArray(palette) ? palette : palette.split(",");
   const classes = sanitizedPalette.length;
   const difference = max - min;
-  const interval = Math.ceil(difference / classes);
+  const interval = Math.round(difference / classes);
   const legends = [];
-
+  console.log(10 / 9);
   for (let i = 0; i < classes; i++) {
     const min = i * interval;
     const max = min + interval;
 
-    const name = i === classes - 1 ? `>${min}` : undefined;
+    const name = i === classes - 1 ? `> ${min}` : undefined;
 
     legends.push({
       id: sanitizedPalette[i],

src/components/Map/components/MapLayer/components/LegendArea/index.tsx

@@ -10,6 +10,7 @@ import BubbleLegend from "../ThematicLayer/components/Bubble/components/BubbleLe
 import ChoroplethLegend from "../ThematicLayer/components/Choropleth/components/ChoroplethLegend";
 import EarthEngineLegend from "../GoogleEngineLayer/components/EarthEngineLegend";
 import classes from "./LegendArea.module.css";
+import { usePrintMedia } from "../../../../hooks/map";
 
 const TOOLTIP_OFFSET = 4;
 
@@ -113,7 +114,7 @@ function CollapsedLegendIcon({ onCollapse, name }: { name: string; onCollapse: (
 
 function Legend({ children, collapsible }: { children: React.ReactElement; collapsible: boolean }) {
   const [collapsed, setCollapsed] = useState(collapsible);
-
+  const inPrintMode = usePrintMedia();
   const onCollapse = () => {
     if (collapsible) {
       setCollapsed((prevState) => !prevState);
@@ -122,9 +123,12 @@ function Legend({ children, collapsible }: { children: React.ReactElement; colla
 
   const name = head(React.Children.toArray(children) as React.ReactElement[])?.props.name;
 
+  const shouldCollapse = collapsed && !inPrintMode;
+  console.log(inPrintMode);
+
   return (
     <div className="w-100">
-      {collapsed ? (
+      {shouldCollapse ? (
         <CollapsedLegendIcon name={name} onCollapse={onCollapse} />
       ) : (
         React.Children.map(children, (child) => React.cloneElement(child, { collapsible, onCollapse }))

src/components/Map/components/MapUpdater/index.tsx

@@ -1,15 +1,8 @@
-import type { LatLngTuple } from "leaflet";
-import { isEmpty } from "lodash";
-import { useEffect } from "react";
-import { useMap } from "react-leaflet";
+import { useCenterMap } from "../../hooks/map";
+import React from "react";
+import { LatLngTuple } from "leaflet";
 
 export default function MapUpdater({ bounds }: { bounds: LatLngTuple[] }) {
-  const map = useMap();
-
-  useEffect(() => {
-    if (!isEmpty(bounds)) {
-      map.fitBounds(bounds);
-    }
-  }, [bounds]);
-  return null;
+  const ref = useCenterMap({ bounds });
+  return <div style={{ width: "100%", height: "100%" }} ref={ref}></div>;
 }

src/components/Map/components/ThematicLayerConfiguration/index.tsx

@@ -12,6 +12,7 @@ import { CustomLegend } from "./components/CustomLegend";
 export interface ThematicLayerConfigurationProps {
   exclude?: string[];
   form: UseFormReturn<ThematicLayerConfig>;
+  [key: string]: any;
 }
 
 export function RadiusField() {

src/components/Map/hooks/map.ts

@@ -1,10 +1,12 @@
-import { geoJSON } from "leaflet";
-import { useEffect, useMemo, useState } from "react";
+import { geoJSON, LatLngTuple } from "leaflet";
+import { useEffect, useMemo } from "react";
 import { useMapOrganisationUnit } from "../components/MapProvider/hooks";
+import { useElementSize, useMediaQuery } from "usehooks-ts";
+import { isEmpty } from "lodash";
+import { useMap } from "react-leaflet";
 
 export function useMapBounds() {
   const { orgUnits } = useMapOrganisationUnit();
-  const sizeChanged = useMediaQuery();
   const geoJSONObject = useMemo(
     () =>
       geoJSON({
@@ -16,25 +18,30 @@ export function useMapBounds() {
 
   const center = useMemo(() => {
     return geoJSONObject.getBounds().getCenter();
-  }, [orgUnits, sizeChanged]);
+  }, [orgUnits]);
   const bounds: any = useMemo(() => {
     return geoJSONObject.getBounds();
-  }, [orgUnits, sizeChanged]);
+  }, [orgUnits]);
 
   return {
     center,
     bounds,
   };
 }
 
-export function useMediaQuery() {
-  const [sizeChanges, setSizeChanges] = useState(false);
-  const toggleState = () => setSizeChanges((prevState) => !prevState);
+export function useCenterMap({ bounds }: { bounds: LatLngTuple[] }) {
+  const map = useMap();
+  const [ref, { width, height }] = useElementSize();
+
   useEffect(() => {
-    window.addEventListener("resize", toggleState);
-    return () => {
-      window.removeEventListener("resize", toggleState);
-    };
-  }, []);
-  return sizeChanges;
+    if (!isEmpty(bounds)) {
+      map.fitBounds(bounds);
+    }
+  }, [width, height]);
+
+  return ref;
+}
+
+export function usePrintMedia() {
+  return useMediaQuery("@media print");
 }

yarn.lock

@@ -21774,6 +21774,11 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
+usehooks-ts@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.9.1.tgz#953d3284851ffd097432379e271ce046a8180b37"
+  integrity sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==
+
 util-arity@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/util-arity/-/util-arity-1.1.0.tgz#59d01af1fdb3fede0ac4e632b0ab5f6ce97c9330"