"use client"; import { cn } from "@/lib/utils"; import React, { forwardRef, useEffect, useImperativeHandle, useRef, } from "react"; import { GradientBlur } from "../GradientBlur/GradientBlur"; import { ActionButton } from "@/components/ui/ActionButton/ActionButton"; export interface BottomActionButtonProps extends React.ComponentProps<"div"> { actionButtonProps?: React.ComponentProps; /** Контент над кнопкой (например подсказка) */ childrenAboveButton?: React.ReactNode; /** Контент под кнопкой (например дисклеймер) */ childrenUnderButton?: React.ReactNode; /** Управление блюром подложки */ showGradientBlur?: boolean; /** Синхронизировать CSS-переменную --bottom-action-button-height на */ syncCssVar?: boolean; gradientBlurProps?: React.ComponentProps; } const BottomActionButton = forwardRef( function BottomActionButton( { actionButtonProps, childrenAboveButton, childrenUnderButton, showGradientBlur = true, className, syncCssVar = true, gradientBlurProps, ...props }, ref ) { const innerRef = useRef(null); useImperativeHandle(ref, () => innerRef.current as HTMLDivElement, []); const hasButton = Boolean(actionButtonProps); const hasExtra = Boolean(childrenAboveButton) || Boolean(childrenUnderButton); const hasContent = hasButton || hasExtra; const shouldRender = hasContent || showGradientBlur; useEffect(() => { if (!syncCssVar || typeof window === "undefined" || !hasContent) return; const el = innerRef.current; if (!el) return; const setVar = () => { document.documentElement.style.setProperty( "--bottom-action-button-height", `${el.offsetHeight}px` ); }; setVar(); if ("ResizeObserver" in window) { const ro = new ResizeObserver(setVar); ro.observe(el); return () => ro.disconnect(); } else { const onResize = () => setVar(); globalThis.addEventListener("resize", onResize); return () => globalThis.removeEventListener("resize", onResize); } }, [syncCssVar, hasContent]); // Ничего не рендерим, если нет контента И не нужен blur if (!shouldRender) return null; return (
{childrenAboveButton && (
{childrenAboveButton}
)} {hasButton ? : null} {childrenUnderButton}
); } ); export { BottomActionButton };