@homefile/components-v2 2.40.16 → 2.40.18

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -1,33 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
 import { keyframes } from '@emotion/react';
-import { getIconAltText } from '../../utils';
 import { IconMenu, MoreHorizontal } from '../../components';
-import { homeAssistantProxy } from '../../proxies';
-const COLLAPSE_AFTER_MS = 2000;
-const INITIAL_BOTTOM = 0;
-const COLLAPSED_BOTTOM = -60;
+import { useHomeMonitorButton } from '../../hooks';
 export const HomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, status = 'ok', step, menuItems = [], index, }) => {
-    const [bottomOffset, setBottomOffset] = useState(INITIAL_BOTTOM);
-    const [isHovered, setIsHovered] = useState(false);
-    const buttonId = `homeMonitorButton-${currentStep}`;
-    const iconAltText = useMemo(() => getIconAltText(step.icon), [step.icon]);
-    const alert = status === 'alert';
-    const isDisabled = menuItems.length === 0;
-    const { setSelectedId } = homeAssistantProxy;
-    const isCollapsed = bottomOffset < 0 && !isHovered;
-    useEffect(() => {
-        const timeout = window.setTimeout(() => {
-            setBottomOffset(COLLAPSED_BOTTOM);
-        }, COLLAPSE_AFTER_MS);
-        return () => window.clearTimeout(timeout);
-    }, []);
-    const handleStepClick = () => {
-        setIsHovered(false);
-        onStepClick(currentStep);
-    };
-    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, boxShadow: "lg", bottom: `${bottomOffset}px`, minH: "106px", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false) }, getContainerStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "10px", left: "8px" }), _jsx(Box, { position: "absolute", top: "2px", right: "6px", zIndex: "1400", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`), placement: "top" }) }), !isCollapsed && (_jsxs(Stack, { position: "relative", as: "button", spacing: "7px", border: "1px solid transparent", align: "center", justify: "center", w: "100%", p: "base", pt: "20px", onClick: handleStepClick, children: [!alert && (_jsx(Box, { boxSize: "36px", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "100%", h: "100%", fit: "contain" }) })), alert && (_jsx(Center, { boxSize: "36px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: alertCount })), _jsx(Center, { h: "28px", children: _jsx(Text, { fontSize: "14px", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", fontFamily: "secondary", children: step.title }) })] }))] }) })));
+    const { alert, alertCount: displayAlertCount, bottomOffset, buttonId, handleEnter, handleLeave, handleMenuClick, handleStepClick, iconAltText, isCollapsed, isDisabled, wrappedMenuItems, } = useHomeMonitorButton({
+        alertCount,
+        currentStep,
+        onStepClick,
+        status,
+        step,
+        menuItems,
+        index,
+    });
+    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, boxShadow: "lg", bottom: `${bottomOffset}px`, minH: "106px", onMouseEnter: handleEnter, onMouseLeave: handleLeave, onPointerEnter: handleEnter, onPointerLeave: handleLeave }, getContainerStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "14px", borderRadius: "full", position: "absolute", top: "13px", left: "13px" }), _jsx(Box, { position: "absolute", top: "2px", right: "7px", zIndex: "1400", children: _jsx(IconMenu, { width: "fit-content", icon: _jsx(MoreHorizontal, { size: 32 }), itemForm: index + 1, menuItems: wrappedMenuItems, disabled: isDisabled, onClick: handleMenuClick, placement: "top" }) }), !isCollapsed && (_jsxs(Stack, { position: "relative", as: "button", spacing: "7px", border: "1px solid transparent", align: "center", justify: "center", w: "100%", p: "base", pt: "20px", onClick: handleStepClick, children: [!alert && (_jsx(Box, { boxSize: "36px", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "100%", h: "100%", fit: "contain" }) })), alert && (_jsx(Center, { boxSize: "36px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: displayAlertCount })), _jsx(Center, { h: "28px", children: _jsx(Text, { fontSize: "14px", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", fontFamily: "secondary", children: step.title }) })] }))] }) })));
 };
 const alertGradient = keyframes `
   0% { background-position: 0% 50%; }
@@ -40,9 +26,6 @@ const getContainerStyles = (status) => {
         borderRadius: 'lg',
         border: '2px solid transparent',
         boxSizing: 'border-box',
-        _hover: {
-            bottom: 0,
-        },
     };
     if (status === 'alert') {
         return Object.assign(Object.assign({}, base), { background: `linear-gradient(#FFFFFF, #FFFFFF) padding-box, ` +

package/dist/hooks/homeAssistant/useHomeMonitorButton.d.ts

@@ -0,0 +1,18 @@
+import { HomeMonitorButtonI } from '../../interfaces';
+export declare const useHomeMonitorButton: ({ alertCount, currentStep, onStepClick, status, step, menuItems, index, }: HomeMonitorButtonI) => {
+    alert: boolean;
+    alertCount: number;
+    bottomOffset: number;
+    buttonId: string;
+    handleEnter: () => void;
+    handleLeave: () => void;
+    handleMenuClick: () => void;
+    handleStepClick: () => void;
+    iconAltText: string;
+    isCollapsed: boolean;
+    isDisabled: boolean;
+    wrappedMenuItems: {
+        handleClick: (form: any) => void;
+        label: string;
+    }[];
+};

package/dist/hooks/homeAssistant/useHomeMonitorButton.js

@@ -0,0 +1,85 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getIconAltText } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
+const COLLAPSE_AFTER_MS = 2000;
+const HOLD_ON_TOP_MS = 2000;
+const INITIAL_BOTTOM = 0;
+const COLLAPSED_BOTTOM = -76;
+export const useHomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, status = 'ok', step, menuItems = [], index, }) => {
+    const [bottomOffset, setBottomOffset] = useState(INITIAL_BOTTOM);
+    const [isHovered, setIsHovered] = useState(false);
+    const initialCollapseTimeoutRef = useRef(null);
+    const collapseTimeoutRef = useRef(null);
+    const buttonId = `homeMonitorButton-${currentStep}`;
+    const iconAltText = useMemo(() => getIconAltText(step.icon), [step.icon]);
+    const alert = status === 'alert';
+    const isDisabled = menuItems.length === 0;
+    const { setSelectedId } = homeAssistantProxy;
+    const isCollapsed = bottomOffset < 0 && !isHovered;
+    const clearInitialCollapseTimeout = () => {
+        if (initialCollapseTimeoutRef.current) {
+            window.clearTimeout(initialCollapseTimeoutRef.current);
+            initialCollapseTimeoutRef.current = null;
+        }
+    };
+    const clearCollapseTimeout = () => {
+        if (collapseTimeoutRef.current) {
+            window.clearTimeout(collapseTimeoutRef.current);
+            collapseTimeoutRef.current = null;
+        }
+    };
+    const scheduleCollapse = (delay = HOLD_ON_TOP_MS) => {
+        clearCollapseTimeout();
+        collapseTimeoutRef.current = window.setTimeout(() => {
+            setBottomOffset(COLLAPSED_BOTTOM);
+        }, delay);
+    };
+    useEffect(() => {
+        initialCollapseTimeoutRef.current = window.setTimeout(() => {
+            setBottomOffset(COLLAPSED_BOTTOM);
+        }, COLLAPSE_AFTER_MS);
+        return () => {
+            clearInitialCollapseTimeout();
+            clearCollapseTimeout();
+        };
+    }, []);
+    const handleEnter = () => {
+        clearInitialCollapseTimeout();
+        clearCollapseTimeout();
+        setIsHovered(true);
+        setBottomOffset(INITIAL_BOTTOM);
+    };
+    const handleLeave = () => {
+        setIsHovered(false);
+        scheduleCollapse(HOLD_ON_TOP_MS);
+    };
+    const handleStepClick = () => {
+        setIsHovered(false);
+        scheduleCollapse(HOLD_ON_TOP_MS);
+        onStepClick(currentStep);
+    };
+    const handleMenuClick = () => {
+        setSelectedId(`homeMonitorButton-${index + 1}`);
+    };
+    const wrappedMenuItems = useMemo(() => {
+        return menuItems.map((item) => (Object.assign(Object.assign({}, item), { handleClick: (form) => {
+                setIsHovered(false);
+                scheduleCollapse(HOLD_ON_TOP_MS);
+                item.handleClick(form);
+            } })));
+    }, [menuItems]);
+    return {
+        alert,
+        alertCount,
+        bottomOffset,
+        buttonId,
+        handleEnter,
+        handleLeave,
+        handleMenuClick,
+        handleStepClick,
+        iconAltText,
+        isCollapsed,
+        isDisabled,
+        wrappedMenuItems,
+    };
+};

package/dist/hooks/index.d.ts

@@ -8,6 +8,7 @@ export * from './feedback';
 export * from './folderPanel';
 export * from './forms';
 export * from './help';
+export * from './homeAssistant/useHomeMonitorButton';
 export * from './homeBoard';
 export * from './inbox';
 export * from './inputs';

package/dist/hooks/index.js

@@ -8,6 +8,7 @@ export * from './feedback';
 export * from './folderPanel';
 export * from './forms';
 export * from './help';
+export * from './homeAssistant/useHomeMonitorButton';
 export * from './homeBoard';
 export * from './inbox';
 export * from './inputs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.40.16",
+  "version": "2.40.18",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",