140 lines
3.6 KiB
TypeScript
140 lines
3.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { CreateButtonProps } from '../ButtonTypes';
|
|
import Button from '../Button';
|
|
import { Popup, EditForm } from '../../Popup';
|
|
import { useLanguage } from '../../../../contexts/LanguageContext';
|
|
|
|
const CreateButton: React.FC<CreateButtonProps> = ({
|
|
onCreate,
|
|
fields,
|
|
popupTitle = 'Create New Item',
|
|
popupSize = 'medium',
|
|
disabled = false,
|
|
loading = false,
|
|
className = '',
|
|
children,
|
|
icon,
|
|
iconPosition = 'left',
|
|
variant = 'primary',
|
|
size = 'md',
|
|
onSuccess,
|
|
onError,
|
|
...props
|
|
}) => {
|
|
const { t } = useLanguage();
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
|
const [formData, setFormData] = useState<any>({});
|
|
|
|
// Initialize form data with default values
|
|
React.useEffect(() => {
|
|
const initialData: any = {};
|
|
fields.forEach(field => {
|
|
initialData[field.key] = field.defaultValue || '';
|
|
});
|
|
setFormData(initialData);
|
|
}, [fields]);
|
|
|
|
const handleButtonClick = () => {
|
|
if (!disabled && !loading && !isCreating) {
|
|
// Reset form data
|
|
const initialData: any = {};
|
|
fields.forEach(field => {
|
|
initialData[field.key] = field.defaultValue || '';
|
|
});
|
|
setFormData(initialData);
|
|
setIsPopupOpen(true);
|
|
}
|
|
};
|
|
|
|
const handleSave = async (updatedData: any) => {
|
|
setIsCreating(true);
|
|
|
|
try {
|
|
const result = await onCreate(updatedData);
|
|
|
|
if (result?.success !== false) {
|
|
// Success
|
|
setIsPopupOpen(false);
|
|
if (onSuccess) {
|
|
onSuccess(result);
|
|
}
|
|
} else {
|
|
// Handle error
|
|
if (onError) {
|
|
onError(result?.error || 'Creation failed');
|
|
}
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Creation failed:', error);
|
|
if (onError) {
|
|
onError(error.message || 'Creation failed');
|
|
}
|
|
} finally {
|
|
setIsCreating(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setIsPopupOpen(false);
|
|
};
|
|
|
|
const isDisabled = disabled || loading || isCreating;
|
|
|
|
// Resolve language text for popup title
|
|
const resolvedPopupTitle = typeof popupTitle === 'string'
|
|
? t(popupTitle, popupTitle)
|
|
: popupTitle;
|
|
|
|
// Resolve language text for fields
|
|
const resolvedFields = fields.map(field => ({
|
|
...field,
|
|
label: typeof field.label === 'string' ? t(field.label, field.label) : field.label,
|
|
placeholder: field.placeholder
|
|
? (typeof field.placeholder === 'string' ? t(field.placeholder, field.placeholder) : field.placeholder)
|
|
: undefined,
|
|
editable: true
|
|
}));
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
{...props}
|
|
variant={variant}
|
|
size={size}
|
|
disabled={isDisabled}
|
|
loading={false}
|
|
className={`createButton ${className}`}
|
|
onClick={handleButtonClick}
|
|
icon={isCreating ? undefined : icon}
|
|
iconPosition={iconPosition}
|
|
>
|
|
{isCreating && (
|
|
<div className="spinnerIcon" style={{ marginRight: '8px' }} />
|
|
)}
|
|
{children || (isCreating ? t('common.creating', 'Creating...') : t('common.create', 'Create'))}
|
|
</Button>
|
|
|
|
{/* Create Popup */}
|
|
<Popup
|
|
isOpen={isPopupOpen}
|
|
title={resolvedPopupTitle}
|
|
onClose={handleCancel}
|
|
size={popupSize}
|
|
closable={!isCreating}
|
|
>
|
|
<EditForm
|
|
data={formData}
|
|
fields={resolvedFields}
|
|
onSave={handleSave}
|
|
onCancel={handleCancel}
|
|
saveButtonText={t('common.create', 'Create')}
|
|
cancelButtonText={t('common.cancel', 'Cancel')}
|
|
/>
|
|
</Popup>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CreateButton;
|
|
|