136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { Button } from 'primereact/button';
|
|
|
|
interface ActionButtonProps {
|
|
icon: string;
|
|
tooltip: string;
|
|
onClick: () => void;
|
|
color?: 'default' | 'green' | 'blue' | 'orange' | 'red' | 'purple' | 'teal';
|
|
disabled?: boolean;
|
|
size?: 'small' | 'normal' | 'large';
|
|
}
|
|
|
|
/**
|
|
* Composant de bouton d'action standardisé pour toute l'application
|
|
* Utilise le style p-button-text avec des couleurs personnalisées
|
|
*/
|
|
export const ActionButton: React.FC<ActionButtonProps> = ({
|
|
icon,
|
|
tooltip,
|
|
onClick,
|
|
color = 'default',
|
|
disabled = false,
|
|
size = 'small'
|
|
}) => {
|
|
// Classes de couleur pour les icônes
|
|
const colorClasses = {
|
|
default: '',
|
|
green: 'text-green-500',
|
|
blue: 'text-blue-500',
|
|
orange: 'text-orange-500',
|
|
red: 'text-red-500',
|
|
purple: 'text-purple-500',
|
|
teal: 'text-teal-500'
|
|
};
|
|
|
|
// Classes de taille
|
|
const sizeClasses = {
|
|
small: 'p-button-sm',
|
|
normal: '',
|
|
large: 'p-button-lg'
|
|
};
|
|
|
|
const buttonClasses = [
|
|
'p-button-rounded',
|
|
'p-button-text',
|
|
sizeClasses[size],
|
|
colorClasses[color]
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Button
|
|
icon={icon}
|
|
className={buttonClasses}
|
|
tooltip={tooltip}
|
|
tooltipOptions={{ position: 'top' }}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// Boutons d'actions prédéfinis pour les cas d'usage courants
|
|
export const ViewButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-eye" color="default" {...props} />
|
|
);
|
|
|
|
export const EditButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-pencil" color="orange" {...props} />
|
|
);
|
|
|
|
export const DeleteButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-trash" color="red" {...props} />
|
|
);
|
|
|
|
export const StartButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-play" color="green" {...props} />
|
|
);
|
|
|
|
export const CompleteButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-check" color="green" {...props} />
|
|
);
|
|
|
|
export const ProgressButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-percentage" color="blue" {...props} />
|
|
);
|
|
|
|
export const PauseButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-pause" color="orange" {...props} />
|
|
);
|
|
|
|
export const ResumeButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-play" color="teal" {...props} />
|
|
);
|
|
|
|
export const DownloadButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-download" color="blue" {...props} />
|
|
);
|
|
|
|
export const PrintButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-print" color="purple" {...props} />
|
|
);
|
|
|
|
export const BudgetPlanButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-calculator" color="purple" {...props} />
|
|
);
|
|
|
|
export const BudgetTrackButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
|
|
<ActionButton icon="pi pi-chart-line" color="teal" {...props} />
|
|
);
|
|
|
|
/**
|
|
* Container pour grouper les boutons d'actions
|
|
*/
|
|
interface ActionButtonGroupProps {
|
|
children: React.ReactNode;
|
|
align?: 'left' | 'center' | 'right';
|
|
gap?: '1' | '2' | '3';
|
|
}
|
|
|
|
export const ActionButtonGroup: React.FC<ActionButtonGroupProps> = ({
|
|
children,
|
|
align = 'center',
|
|
gap = '1'
|
|
}) => {
|
|
const alignClasses = {
|
|
left: 'justify-content-start',
|
|
center: 'justify-content-center',
|
|
right: 'justify-content-end'
|
|
};
|
|
|
|
return (
|
|
<div className={`flex ${alignClasses[align]} gap-${gap}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}; |