77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { IoIosCloseCircle } from 'react-icons/io';
|
|
import { useLanguage } from '../../../../providers/language/LanguageContext';
|
|
import styles from '../ActionButton.module.css';
|
|
|
|
export interface RemoveActionButtonProps<T = any> {
|
|
row: T;
|
|
onRemove: (row: T) => Promise<void> | void;
|
|
disabled?: boolean | { disabled: boolean; message?: string };
|
|
loading?: boolean;
|
|
className?: string;
|
|
title?: string;
|
|
idField?: string; // Field name for the unique identifier
|
|
loadingStateName?: string; // Name of the loading state in hookData
|
|
hookData?: any; // Optional hook data for loading state
|
|
}
|
|
|
|
export function RemoveActionButton<T = any>({
|
|
row,
|
|
onRemove,
|
|
disabled = false,
|
|
loading = false,
|
|
className = '',
|
|
title,
|
|
idField = 'id',
|
|
loadingStateName = 'removingItems',
|
|
hookData
|
|
}: RemoveActionButtonProps<T>) {
|
|
const { t } = useLanguage();
|
|
const [internalLoading, setInternalLoading] = useState(false);
|
|
|
|
// Extract disabled state and tooltip message
|
|
const isDisabled = typeof disabled === 'boolean' ? disabled : disabled?.disabled || false;
|
|
const disabledMessage = typeof disabled === 'object' ? disabled?.message : undefined;
|
|
|
|
const handleClick = async (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (!isDisabled && !loading && !internalLoading) {
|
|
setInternalLoading(true);
|
|
try {
|
|
await onRemove(row);
|
|
} finally {
|
|
setInternalLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
const buttonTitle = title || t('files.action.remove', 'Remove from workflow');
|
|
|
|
// Use hookData removing state if available, otherwise use passed loading
|
|
const loadingState = hookData?.[loadingStateName];
|
|
const itemId = (row as any)[idField];
|
|
const actualIsRemoving = loadingState?.has?.(itemId) || false;
|
|
const isLoading = loading || actualIsRemoving || internalLoading;
|
|
|
|
// Determine the final button title (tooltip)
|
|
const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;
|
|
|
|
return (
|
|
<button
|
|
onClick={handleClick}
|
|
className={`${styles.actionButton} ${styles.remove} ${isLoading ? styles.loading : ''} ${isDisabled ? styles.disabled : ''} ${className}`}
|
|
title={finalTitle}
|
|
disabled={isDisabled || isLoading}
|
|
>
|
|
<span className={styles.actionIcon}>
|
|
{isLoading ? '⏳' : <IoIosCloseCircle />}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default RemoveActionButton;
|
|
|
|
|
|
|
|
|