- fixed styles for fileupload;
- fixed funcionality of form fields; - added 'submit question' functionality;
This commit is contained in:
Vitalii Kiiko
166
src/components/FormField/components/Fileupload/index.js
Normal file
166
src/components/FormField/components/Fileupload/index.js
Normal file
@@ -0,0 +1,166 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { classNames } from 'primereact/utils';
|
||||
|
||||
import FileUploadService from '../../../../service/file-upload-service';
|
||||
|
||||
import { FileUpload } from 'primereact/fileupload';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const Fileupload = ({
|
||||
fieldName,
|
||||
setDataFn,
|
||||
label,
|
||||
errors,
|
||||
register,
|
||||
defaultValue = [],
|
||||
config = {},
|
||||
infoText = null,
|
||||
accept = 'image/*',
|
||||
doctype = 'images',
|
||||
maxSize = 1000000,
|
||||
emptyText = __('Trascina qui il tuo file', 'gepafin'),
|
||||
chooseLabel = __('Aggiungi file', 'gepafin'),
|
||||
multiple = false,
|
||||
sourceId = 0,
|
||||
source = 'application'
|
||||
}) => {
|
||||
const [stateFieldData, setStateFieldData] = useState([]);
|
||||
const [acceptFormats, setAcceptFormats] = useState('');
|
||||
const inputRef = useRef();
|
||||
|
||||
const customBase64Uploader = (event) => {
|
||||
const formData = new FormData()
|
||||
for (const file of event.files) {
|
||||
formData.append('file', file)
|
||||
}
|
||||
FileUploadService.uploadFile(sourceId, formData, callback, errorCallback, [
|
||||
['documentType', doctype.toUpperCase()],
|
||||
['source', source]
|
||||
]);
|
||||
};
|
||||
|
||||
const callback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
setStateFieldData(data.data);
|
||||
const files = inputRef.current.getFiles();
|
||||
inputRef.current.setUploadedFiles(files);
|
||||
inputRef.current.setFiles([]);
|
||||
}
|
||||
}
|
||||
|
||||
const errorCallback = (err) => {
|
||||
console.log('err', err);
|
||||
}
|
||||
|
||||
const itemTemplate = (file) => {
|
||||
return (
|
||||
<div className="appForm__fileUploadItem">
|
||||
<div>
|
||||
<span className="appForm__fileUploadItemName">
|
||||
{file.name}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
|
||||
{!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
|
||||
</div>
|
||||
<div>
|
||||
<Button icon="pi pi-times" severity="danger"
|
||||
aria-label={__('Anulla', 'gepafin')}
|
||||
onClick={() => onTemplateRemove(file)}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const onTemplateRemove = (file) => {
|
||||
if (file.id) {
|
||||
FileUploadService.deleteFile(
|
||||
{},
|
||||
(data) => dCallback(data, file.id),
|
||||
dErrorCallback,
|
||||
[['id', file.id]]
|
||||
);
|
||||
} else {
|
||||
const files = inputRef.current.getFiles()
|
||||
const newFiles = files.filter(o => o.lastModified !== file.lastModified && o.name !== file.name);
|
||||
inputRef.current.setFiles(newFiles);
|
||||
}
|
||||
}
|
||||
|
||||
const dCallback = (data, id) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
setStateFieldData(prevState => {
|
||||
const newFiles = prevState.filter(o => o.id !== id);
|
||||
inputRef.current.setUploadedFiles(newFiles);
|
||||
return newFiles;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const dErrorCallback = (err) => {
|
||||
console.log('err', err);
|
||||
}
|
||||
|
||||
const onBeforeDrop = (e) => {
|
||||
return validateFileInputType(e.dataTransfer.files);
|
||||
}
|
||||
|
||||
const validateFileInputType = (files) => {
|
||||
const MIMEtype = new RegExp(acceptFormats);
|
||||
|
||||
return Array.prototype.every.call(files, function passesAcceptedFormat(file) {
|
||||
return MIMEtype.test(file.type);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setStateFieldData(defaultValue);
|
||||
register(fieldName, config)
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
setAcceptFormats(accept.replace(/\*/g, '.\*').replace(/,/g, '|'));
|
||||
}, [accept]);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.setUploadedFiles(stateFieldData);
|
||||
}
|
||||
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
|
||||
}, [stateFieldData])
|
||||
|
||||
return (
|
||||
sourceId && sourceId !== 0
|
||||
? <>
|
||||
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
|
||||
{label}{config.required || config.isRequired ? '*' : null}
|
||||
{acceptFormats ? ' (' + acceptFormats.split('|').join(', ') + ')' : null}
|
||||
</label>
|
||||
<FileUpload
|
||||
ref={inputRef}
|
||||
id={fieldName}
|
||||
name={fieldName}
|
||||
url={'/document/uploadFile'}
|
||||
multiple={multiple}
|
||||
accept={accept}
|
||||
maxFileSize={maxSize}
|
||||
emptyTemplate={<p>{emptyText}</p>}
|
||||
chooseLabel={chooseLabel}
|
||||
cancelLabel={__('Cancella', 'gepafin')}
|
||||
uploadLabel={__('Carica', 'gepafin')}
|
||||
className={classNames({ 'p-invalid': errors[fieldName] })}
|
||||
itemTemplate={itemTemplate}
|
||||
customUpload
|
||||
onBeforeDrop={onBeforeDrop}
|
||||
uploadHandler={customBase64Uploader}/>
|
||||
{infoText ? <small>{infoText}</small> : null}
|
||||
</>
|
||||
: null
|
||||
)
|
||||
}
|
||||
|
||||
export default Fileupload;
|
||||
@@ -9,21 +9,21 @@ import { Tag } from 'primereact/tag';
|
||||
import { Button } from 'primereact/button';
|
||||
|
||||
const FileuploadAsync = ({
|
||||
fieldName,
|
||||
setDataFn,
|
||||
label,
|
||||
errors,
|
||||
register,
|
||||
defaultValue = [],
|
||||
config = {},
|
||||
infoText = null,
|
||||
accept = 'image/*',
|
||||
doctype = 'images',
|
||||
emptyText = __('Trascina qui il tuo file', 'gepafin'),
|
||||
chooseLabel = __('Aggiungi immagine', 'gepafin'),
|
||||
multiple = false,
|
||||
callId = 0
|
||||
}) => {
|
||||
fieldName,
|
||||
setDataFn,
|
||||
label,
|
||||
errors,
|
||||
register,
|
||||
defaultValue = [],
|
||||
config = {},
|
||||
infoText = null,
|
||||
accept = 'image/*',
|
||||
doctype = 'images',
|
||||
emptyText = __('Trascina qui il tuo file', 'gepafin'),
|
||||
chooseLabel = __('Aggiungi immagine', 'gepafin'),
|
||||
multiple = false,
|
||||
callId = 0
|
||||
}) => {
|
||||
const [stateFieldData, setStateFieldData] = useState([]);
|
||||
const [acceptFormats, setAcceptFormats] = useState('');
|
||||
const inputRef = useRef();
|
||||
@@ -52,14 +52,20 @@ const FileuploadAsync = ({
|
||||
const itemTemplate = (file) => {
|
||||
return (
|
||||
<div className="appForm__fileUploadItem">
|
||||
<span className="appForm__fileUploadItemName">
|
||||
{file.name}
|
||||
</span>
|
||||
{file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
|
||||
{!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
|
||||
<Button icon="pi pi-times" severity="danger"
|
||||
aria-label={__('Anulla', 'gepafin')}
|
||||
onClick={() => onTemplateRemove(file)}/>
|
||||
<div>
|
||||
<span className="appForm__fileUploadItemName">
|
||||
{file.name}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
{file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
|
||||
{!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
|
||||
</div>
|
||||
<div>
|
||||
<Button icon="pi pi-times" severity="danger"
|
||||
aria-label={__('Anulla', 'gepafin')}
|
||||
onClick={() => onTemplateRemove(file)}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -97,12 +103,12 @@ const FileuploadAsync = ({
|
||||
return validateFileInputType(e.dataTransfer.files);
|
||||
}
|
||||
|
||||
const validateFileInputType = ( files ) => {
|
||||
const MIMEtype = new RegExp( acceptFormats );
|
||||
const validateFileInputType = (files) => {
|
||||
const MIMEtype = new RegExp(acceptFormats);
|
||||
|
||||
return Array.prototype.every.call( files, function passesAcceptedFormat( file ){
|
||||
return MIMEtype.test( file.type );
|
||||
} );
|
||||
return Array.prototype.every.call(files, function passesAcceptedFormat(file) {
|
||||
return MIMEtype.test(file.type);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@@ -112,7 +118,7 @@ const FileuploadAsync = ({
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
setAcceptFormats(accept.replace( /\*/g, '.\*' ).replace( /,/g, '|' ));
|
||||
setAcceptFormats(accept.replace(/\*/g, '.\*').replace(/,/g, '|'));
|
||||
}, [accept]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -14,6 +14,7 @@ import Select from './components/Select';
|
||||
import Radio from './components/Radio';
|
||||
import Wysiwyg from './components/Wysiwyg';
|
||||
import Checkboxes from './components/Checkboxes';
|
||||
import Fileupload from './components/Fileupload';
|
||||
|
||||
const FormField = (props) => {
|
||||
const fields = {
|
||||
@@ -22,6 +23,7 @@ const FormField = (props) => {
|
||||
datepicker: Datepicker,
|
||||
datepickerrange: DatepickerRange,
|
||||
fileuploadasync: FileuploadAsync,
|
||||
fileupload: Fileupload,
|
||||
numberinput: NumberInput,
|
||||
switch: Switch,
|
||||
select: Select,
|
||||
|
||||
Reference in New Issue
Block a user