Update IconButtonWithMenu to support label prop

This commit is contained in:
Mo Tarbin 2025-01-15 01:54:07 -05:00
parent 1b7751c5d1
commit da85caf684

View file

@ -1,9 +1,10 @@
import { Chip, Menu, MenuItem, Typography } from '@mui/joy' import { Button, Chip, Menu, MenuItem, Typography } from '@mui/joy'
import IconButton from '@mui/joy/IconButton' import IconButton from '@mui/joy/IconButton'
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx' import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
const IconButtonWithMenu = ({ const IconButtonWithMenu = ({
label,
key, key,
icon, icon,
options, options,
@ -39,18 +40,36 @@ const IconButtonWithMenu = ({
return ( return (
<> <>
<IconButton {!label && (
onClick={handleMenuOpen} <IconButton
variant='outlined' onClick={handleMenuOpen}
color={isActive ? 'primary' : 'neutral'} variant='outlined'
size='sm' color={isActive ? 'primary' : 'neutral'}
sx={{ size='sm'
height: 24, sx={{
borderRadius: 24, height: 24,
}} borderRadius: 24,
> }}
{icon} >
</IconButton> {icon}
{label ? label : null}
</IconButton>
)}
{label && (
<Button
onClick={handleMenuOpen}
variant='outlined'
color={isActive ? 'primary' : 'neutral'}
size='sm'
startDecorator={icon}
sx={{
height: 24,
borderRadius: 24,
}}
>
{label}
</Button>
)}
<Menu <Menu
key={key} key={key}