zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

bug fix

Browse Source
This commit is contained in:
MathieuG-P
2022-07-19 20:57:13 +02:00
parent a81784e44f
commit d56e78d9d0
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/bsm-dropdown-button.component.tsx
+5 -5
View File
@@ -4,9 +4,9 @@ import { BsmButton } from "./bsm-button.component"
import { BsmIcon } from "../svgs/bsm-icon.component"
import { useTranslation } from "renderer/hooks/use-translation.hook"
export interface DropDownItem {id: number, text: string, icon?: BsmIconType}
export interface DropDownItem {text: string, icon?: BsmIconType, onClick?: () => void}
export function BsmDropdownButton({className, items, align, onItemClick}: {className?: string, items?: DropDownItem[], align?: "left"|"right", onItemClick?: (id: number) => void}) {
export function BsmDropdownButton({className, items, align}: {className?: string, items?: DropDownItem[], align?: "left"|"right"}) {
const [expanded, setExpanded] = useState(false)
const t = useTranslation()
@@ -15,12 +15,12 @@ export function BsmDropdownButton({className, items, align, onItemClick}: {class
<div className={`${className}`}>
<BsmButton onClick={() => setExpanded(!expanded)} className='relative bg-light-main-color-2 dark:bg-main-color-2 z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
<div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-light-main-color-2 dark:bg-main-color-2 text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
{ items?.map(i =>
<div key={i.id} onClick={() => onItemClick(i.id)} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
{ items?.map((i, index) => !!i &&(
<div key={index} onClick={!!i.onClick ? i.onClick : undefined} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
{i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-gray-800 dark:text-white"></BsmIcon>}
<span className="w-max">{t(i.text)}</span>
</div>
)}
))}
</div>
</div>
)