feat: enhance internationalization with new translation keys, improve action handling in data tables, and add responsive view support for row actions
This commit is contained in:
@@ -40,10 +40,12 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
|
||||
}
|
||||
|
||||
const isPremiumGlow = action.intent === 'primary' && action.variant === 'filled';
|
||||
const showLabel = action.showLabel !== false;
|
||||
const tooltipContent = action.tooltipLabel || (!showLabel ? action.label : undefined);
|
||||
|
||||
// 1. Button with Dropdown (Menu.Target)
|
||||
if (action.children && action.children.length > 0) {
|
||||
const ButtonWithDropdown = (
|
||||
const ButtonWithDropdown = showLabel ? (
|
||||
<Button
|
||||
variant={action.variant || 'transparent'}
|
||||
color={action?.color ? action.color : getIntentColor(action.intent)}
|
||||
@@ -55,14 +57,23 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
) : (
|
||||
<ActionIcon
|
||||
variant={action.variant || 'transparent'}
|
||||
color={action?.color ? action.color : getIntentColor(action.intent)}
|
||||
disabled={action.disabled}
|
||||
size="lg"
|
||||
style={isPremiumGlow ? defaultButtonStyle(true).style : undefined}
|
||||
>
|
||||
{action.icon}
|
||||
</ActionIcon>
|
||||
);
|
||||
|
||||
return (
|
||||
<Menu key={action.key} position="bottom-start" withArrow withinPortal trigger="hover">
|
||||
<Menu.Target>
|
||||
{/* Shortcuts on the main button remain hidden in the Tooltip */}
|
||||
{action.tooltipLabel ? (
|
||||
<Tooltip position="bottom" label={`${action.tooltipLabel}`} withArrow openDelay={500}>
|
||||
{tooltipContent ? (
|
||||
<Tooltip position="bottom" label={tooltipContent} withArrow openDelay={500}>
|
||||
{ButtonWithDropdown}
|
||||
</Tooltip>
|
||||
) : (
|
||||
@@ -92,7 +103,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
|
||||
}
|
||||
|
||||
// 2. Regular Button (Standalone)
|
||||
const StandaloneButton = (
|
||||
const StandaloneButton = showLabel ? (
|
||||
<Button
|
||||
variant={action.variant || 'transparent'}
|
||||
color={action?.color ? action.color : getIntentColor(action.intent)}
|
||||
@@ -104,10 +115,21 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
) : (
|
||||
<ActionIcon
|
||||
variant={action.variant || 'transparent'}
|
||||
color={action?.color ? action.color : getIntentColor(action.intent)}
|
||||
disabled={action.disabled}
|
||||
onClick={() => action.onClick?.(action.key || '')}
|
||||
size="lg"
|
||||
style={isPremiumGlow ? defaultButtonStyle(true).style : undefined}
|
||||
>
|
||||
{action.icon}
|
||||
</ActionIcon>
|
||||
);
|
||||
|
||||
return action.tooltipLabel ? (
|
||||
<Tooltip position="bottom" key={action.key} label={`${action.tooltipLabel}`} withArrow openDelay={500}>
|
||||
return tooltipContent ? (
|
||||
<Tooltip position="bottom" key={action.key} label={tooltipContent} withArrow openDelay={500}>
|
||||
{StandaloneButton}
|
||||
</Tooltip>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user