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:
Firman Ramdhani
2026-07-22 15:35:39 +07:00
parent 9a1422ef28
commit 0243b6aa96
10 changed files with 623 additions and 181 deletions
@@ -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>
) : (