pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
60 lines (59 loc) • 3.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useMemo, useState } from 'react';
import ImageComponent from '../../../../components/ui/ImageComponent';
import UploadField from '../../../../components/ui/UploadField';
const UploadFieldForm = forwardRef(({ field, error, ...props }, ref) => {
const [preview, setPreview] = useState({
src: null,
type: null,
});
useEffect(() => {
if (props.value && typeof props.value === 'string' && props.value.length > 0) {
const lower = props.value.toLowerCase();
const isPdf = lower.endsWith('.pdf');
setPreview({
src: props.value,
type: isPdf ? 'pdf' : 'image',
});
}
}, [props.value]);
const handleFileChange = (file) => {
if (!file) {
setPreview({ src: null, type: null });
props.onChange('');
return;
}
const isPdf = file.type === 'application/pdf';
const isImage = file.type.startsWith('image/');
if (isPdf || isImage) {
const reader = new FileReader();
reader.onloadend = () => {
setPreview({
src: reader.result,
type: isPdf ? 'pdf' : 'image',
});
};
// Same action for both PDFs and images
reader.readAsDataURL(file);
}
else {
setPreview({ src: null, type: null });
}
props.onChange(file);
};
const previewElement = useMemo(() => {
if (!preview.src)
return _jsx("span", { className: "text-gray-500", children: "No file uploaded." });
if (preview.type === 'image') {
return (_jsx(ImageComponent, { src: preview.src, alt: field.name, className: "w-24 h-24 object-cover rounded-md" }, `${field.name}-image`));
}
if (preview.type === 'pdf') {
return (_jsx("iframe", { title: `${field.name}-pdf-preview`, src: preview.src, className: "w-full h-64 border-0 rounded-md" }));
}
return _jsx("span", { className: "text-gray-500", children: "File uploaded." });
}, [preview, field.name]);
const previewLabel = preview.type === 'pdf' ? 'Uploaded PDF:' : 'Uploaded Image:';
return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-gray-700", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-gray-300 rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, helperText: field.fileUploadHelperText }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-gray-700", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-gray-300 rounded-md", children: previewElement })] }))] }));
});
UploadFieldForm.displayName = 'UploadFieldForm';
export default UploadFieldForm;