diff --git a/src/renderer/components/shared/bsm-dropdown-button.component.tsx b/src/renderer/components/shared/bsm-dropdown-button.component.tsx index a2141c03..0bf0c5db 100644 --- a/src/renderer/components/shared/bsm-dropdown-button.component.tsx +++ b/src/renderer/components/shared/bsm-dropdown-button.component.tsx @@ -1,4 +1,4 @@ -import { forwardRef, LegacyRef, useImperativeHandle, useRef, useState } from "react"; +import { forwardRef, LegacyRef, useEffect, useImperativeHandle, useRef, useState } from "react"; import { BsmIconType, BsmIcon } from "../svgs/bsm-icon.component"; import { BsmButton, BsmButtonType } from "./bsm-button.component"; import { useTranslation } from "renderer/hooks/use-translation.hook"; @@ -32,14 +32,25 @@ type Props = { children?: JSX.Element; text?: string; textClassName?: string; + maxVisibleItems?: number; }; -export const BsmDropdownButton = forwardRef(({ className, classNames, buttonColor, items, align, withBar = true, icon = "settings", buttonClassName, menuTranslationY, children, text, textClassName }: Props, fowardRed) => { +export const BsmDropdownButton = forwardRef(({ className, classNames, buttonColor, items, align, withBar = true, icon = "settings", buttonClassName, menuTranslationY, children, text, textClassName, maxVisibleItems }: Props, fowardRed) => { const [expanded, setExpanded] = useState(false); const t = useTranslation(); const ref = useRef(fowardRed); useClickOutside(ref, () => setExpanded(false)); + const itemRef = useRef(null); + + const [itemHeight, setItemHeight] = useState(); + const maxHeight = itemHeight && maxVisibleItems ? itemHeight * maxVisibleItems + 8 : undefined; + useEffect(() => { + if (itemRef.current) { + setItemHeight(itemRef.current.offsetHeight); + } + }, [items]); + useImperativeHandle( fowardRed, () => ({ @@ -73,13 +84,13 @@ export const BsmDropdownButton = forwardRef(({ className, classNames, buttonColo })(); return ( -
} className={cn(className, classNames?.mainContainer)}> +
} className={cn(className, classNames?.mainContainer)} > setExpanded(!expanded)} className={cn(buttonClassName ?? defaultButtonClassName, classNames?.button)} icon={icon} active={expanded} textClassName={textClassName} onClickOutside={handleClickOutside} withBar={withBar} text={text} typeColor={buttonColor} iconClassName={classNames?.iconClassName}/> -
+
{items?.map( - i => + (i, index) => i && ( -
{ setExpanded(() => false); i.onClick?.()}} className="flex w-full px-3 py-2 hover:backdrop-brightness-150"> +
{ setExpanded(() => false); i.onClick?.()}} className="flex w-full px-3 py-2 hover:backdrop-brightness-150"> {i.icon && } {t(i.text)}