datastake-daf 0.6.148 → 0.6.150

package/src/@daf/core/components/Dashboard/Widget/ExpandableMapWidget/hook.js

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from "react";
+
+export const useMapOnExpandableWidget = ({isExpanded, data}) => {
+    const timeoutRef = useRef(null);
+    const [shouldRenderMap, setShouldRenderMap] = useState(false);
+    const [key, setKey] = useState(0);
+
+    useEffect(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        if (isExpanded) {
+            setShouldRenderMap(true);
+        } else {
+            timeoutRef.current = setTimeout(() => {
+                setShouldRenderMap(false);
+            }, 500); 
+        }
+
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [isExpanded]);
+
+    useEffect(() => {
+        if (data?.length > 0 && shouldRenderMap) {
+            setKey(prevKey => prevKey + 1);
+        }
+    }, [data]);
+
+    useEffect(() => {
+        if (data?.length > 0 && !shouldRenderMap && !isExpanded) {
+            setShouldRenderMap(true);
+        }
+    }, [data]);
+
+    return {
+        shouldRenderMap,
+        key,
+    };
+}

package/src/@daf/core/components/Dashboard/Widget/ExpandableMapWidget/index.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import Widget from '../index.jsx'
+import Map from '../../Map'
+import Details from '../Details'
+import { useMapOnExpandableWidget } from './hook'
+
+
+/*
+    This is only as an example to render the map correctly when it is inside an expandable widget
+*/
+
+function ExpandableMapWidget({loading, title, mapData, ...rest}) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const onExpanded = (isExpanded) => {
+        setIsExpanded(isExpanded);
+    }
+
+    // This hook does all the rendering job
+    const { shouldRenderMap, key } = useMapOnExpandableWidget({ isExpanded, data: mapData });
+
+    return (
+        <Widget
+            className="with-border-header h-w-btn-header"
+            loading={loading}
+            title={title}
+            expandable={true}
+            onExpandChange={onExpanded}
+            {...rest}
+        >
+            <Details />
+            <Widget title="MAP" className="no-p-body no-padding with-border-header">
+            <div style={{ 
+                    width: '100%', 
+                    maxHeight: isExpanded ? '1000px' : '0px',
+                    transition: 'max-height 0.5s ease-in-out',
+                    overflow: 'hidden'
+                    }}>
+                    {shouldRenderMap && (
+                        <Map 
+                            app="sbg"
+                            isSatellite={true}
+                            data={mapData}
+                            key={key}
+                            user={null}
+                            mapConfig={{ zoom: 2 }}
+                        />
+                    )}
+                </div>
+            </Widget>
+        </Widget>
+    )
+}
+
+export default ExpandableMapWidget;

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/index.jsx

@@ -1,9 +1,11 @@
-import { Card, Tooltip } from "antd";
+import React from "react";
+import { Card, Tooltip, theme } from "antd";
 import { ImageContainer, ProjectWidgetItems, SDGList, Label } from "./style.js";
 import CustomIcon from "../../../Icon/CustomIcon.jsx";
 import { SDG_IMAGES } from "../../../../../../constants/SDGs.js";
 
 const { Meta } = Card;
+const { useToken } = theme;
 
 export default function ProjectWidget({
   title,
@@ -16,14 +18,18 @@ export default function ProjectWidget({
   hideSDGList = false,
   t = (x) => x,
 }) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const { token } = useToken();
   return (
     <Card
       style={{
         flex: 1,
       }}
+      hoverable
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       cover={
         <ImageContainer>
-          {/* <img src={image} alt="ProjectWidget" /> */}
           <div
             className="image"
             style={{
@@ -36,7 +42,7 @@ export default function ProjectWidget({
                 name={linkIcon}
                 width={16}
                 height={16}
-                color="black"
+                color={isHovered ? token.colorPrimary7 : "black"}
               />
             </div>
           )}

package/src/@daf/core/components/Dashboard/Widget/index.jsx

@@ -111,7 +111,8 @@ export default function Widget({
 							<div className="flex justify-content-end">
 								<Button
 									size="small"
-									className="flex-1 no-min-width"
+									className="squareIconButton no-min-width"
+									style={{height: '25px', width: '25px'}}
 									onClick={handleCollapseToggle}
 									icon={
 										isCollapsed ? (

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-	"cSpell.words": ["cukura"],
-	"files.autoSave": "afterDelay",
-	"editor.wordWrap": "on",
-	"editor.autoClosingBrackets": "always",
-	"editor.autoClosingComments": "always",
-	"editor.autoClosingQuotes": "always",
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.formatOnPaste": true,
-	"editor.formatOnSave": true,
-	"notebook.defaultFormatter": "esbenp.prettier-vscode",
-	"javascript.format.semicolons": "insert"
-}