107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
/**
|
|
* Bouton d'action distinctif avec couleurs et animations personnalisées
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Button } from 'primereact/button';
|
|
import { Tooltip } from 'primereact/tooltip';
|
|
import {
|
|
ACTION_BUTTON_THEMES,
|
|
BUTTON_SIZES,
|
|
BUTTON_VARIANTS,
|
|
ActionButtonType
|
|
} from './ActionButtonStyles';
|
|
import ChantierMenuActions from './ChantierMenuActions';
|
|
import { ChantierActif } from '../../hooks/useDashboard';
|
|
|
|
interface ActionButtonProps {
|
|
type: ActionButtonType;
|
|
onClick?: () => void;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
showLabel?: boolean;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
|
|
// Propriétés pour le menu
|
|
chantier?: ChantierActif;
|
|
onMenuAction?: (action: string, chantier: ChantierActif) => void;
|
|
}
|
|
|
|
const ActionButton: React.FC<ActionButtonProps> = ({
|
|
type,
|
|
onClick,
|
|
disabled = false,
|
|
loading = false,
|
|
size = 'md',
|
|
showLabel = false,
|
|
className = '',
|
|
style = {},
|
|
tooltipPosition = 'top',
|
|
chantier,
|
|
onMenuAction
|
|
}) => {
|
|
const theme = ACTION_BUTTON_THEMES[type];
|
|
|
|
// ID unique pour le tooltip
|
|
const buttonId = `action-btn-${type.toLowerCase()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
|
|
// Style minimal Atlantis Rounded Text - pas de styles custom
|
|
const getButtonStyles = () => {
|
|
return {
|
|
...style // Seulement les styles passés en props
|
|
};
|
|
};
|
|
|
|
// Classes CSS strictes Atlantis Rounded Text
|
|
const buttonClasses = [
|
|
'p-button-text p-button-rounded p-button-sm', // Strict Atlantis + taille compacte
|
|
disabled ? 'p-disabled' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
// Rendu minimal Atlantis
|
|
const buttonContent = (
|
|
<>
|
|
<i className={theme.icon} style={{ color: theme.colors.primary }} />
|
|
{showLabel && <span className="ml-1">{theme.name}</span>}
|
|
</>
|
|
);
|
|
|
|
// Si c'est le bouton MENU et qu'on a un chantier, utiliser le composant menu
|
|
if (type === 'MENU' && chantier && onMenuAction) {
|
|
return (
|
|
<ChantierMenuActions
|
|
chantier={chantier}
|
|
onAction={onMenuAction}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
id={buttonId}
|
|
className={buttonClasses}
|
|
style={getButtonStyles()}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
loading={loading}
|
|
aria-label={theme.name}
|
|
>
|
|
{buttonContent}
|
|
</Button>
|
|
|
|
<Tooltip
|
|
target={`#${buttonId}`}
|
|
content={theme.name}
|
|
position={tooltipPosition}
|
|
showDelay={300}
|
|
hideDelay={100}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ActionButton; |