pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
31 lines (30 loc) • 2.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useState } from 'react';
import ImageComponent from '../../../../components/ui/ImageComponent';
import UploadField from '../../../../components/ui/UploadField';
const UploadFieldForm = forwardRef(({ field, error, ...props }, ref) => {
const [uploadedFileSrc, setUploadedFileSrc] = useState(null);
useEffect(() => {
console.log(props.value);
if (props.value && typeof props.value === 'string' && props.value.length > 0) {
setUploadedFileSrc(props.value);
}
}, [props.value]);
const handleFileChange = (file) => {
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setUploadedFileSrc(reader.result);
};
reader.readAsDataURL(file);
props.onChange(file);
}
else {
setUploadedFileSrc(null);
props.onChange('');
}
};
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: "Uploaded Image:" }), _jsx("div", { className: "mt-2 flex justify-center items-center p-4 border border-gray-300 rounded-md", children: uploadedFileSrc ? (_jsx(ImageComponent, { src: uploadedFileSrc, alt: field.name, className: "w-24 h-24 object-cover rounded-md" }, `${field.name}-image`)) : (_jsx("span", { className: "text-gray-500", children: "No image uploaded." })) })] }))] }));
});
UploadFieldForm.displayName = 'UploadFieldForm';
export default UploadFieldForm;