rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-30 19:52:20 +01:00
Code Issues Releases Activity

(quality) refactored upload components

Browse Source
This commit is contained in:
Sylvain 2022-10-28 14:59:52 +02:00
parent 74f826eef7
commit a97e08b43b
4 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/frontend/src/javascript/components/form/form-file-upload.tsx
View File

@ -4,17 +4,13 @@ import { Path } from 'react-hook-form';
import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
import { FieldPathValue } from 'react-hook-form/dist/types/path';
import { FieldValues } from 'react-hook-form/dist/types/fields';
import { FormInput } from '../form/form-input';
import { FormInput } from './form-input';
import { FormComponent } from '../../models/form-component';
import { AbstractFormItemProps } from './abstract-form-item';
import { FabButton } from '../base/fab-button';
import { FilePdf, Trash } from 'phosphor-react';
export interface FileType {
id?: number,
attachment_name?: string,
attachment_url?: string
}
import { FileType } from '../../models/file';
import FileUploadLib from '../../lib/file-upload';
interface FormFileUploadProps<TFieldValues> extends FormComponent<TFieldValues>, AbstractFormItemProps<TFieldValues> {
setValue: UseFormSetValue<TFieldValues>,
@ -36,7 +32,7 @@ export const FormFileUpload = <TFieldValues extends FieldValues>({ id, register,
* Check if file is selected
*/
const hasFile = (): boolean => {
return !!file?.attachment_name;
return FileUploadLib.hasFile(file);
};
/**
@ -62,20 +58,7 @@ export const FormFileUpload = <TFieldValues extends FieldValues>({ id, register,
* Callback triggered when the user clicks on the delete button.
*/
function onRemoveFile () {
if (file?.id) {
setValue(
`${id}[_destroy]` as Path<TFieldValues>,
true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
);
}
setValue(
`${id}[attachment_files]` as Path<TFieldValues>,
null as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
);
setFile(null);
if (typeof onFileRemove === 'function') {
onFileRemove();
}
FileUploadLib.onRemoveFile(file, id, setFile, setValue, onFileRemove);
}
// Compose classnames from props

28
app/frontend/src/javascript/components/form/form-image-upload.tsx
View File

@ -4,19 +4,14 @@ import { Path } from 'react-hook-form';
import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
import { FieldPathValue } from 'react-hook-form/dist/types/path';
import { FieldValues } from 'react-hook-form/dist/types/fields';
import { FormInput } from '../form/form-input';
import { FormInput } from './form-input';
import { FormComponent } from '../../models/form-component';
import { AbstractFormItemProps } from './abstract-form-item';
import { FabButton } from '../base/fab-button';
import noImage from '../../../../images/no_image.png';
import { Trash } from 'phosphor-react';
export interface ImageType {
id?: number,
attachment_name?: string,
attachment_url?: string,
is_main?: boolean
}
import { ImageType } from '../../models/file';
import FileUploadLib from '../../lib/file-upload';
interface FormImageUploadProps<TFieldValues> extends FormComponent<TFieldValues>, AbstractFormItemProps<TFieldValues> {
setValue: UseFormSetValue<TFieldValues>,
@ -46,7 +41,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues>({ id, register
* Check if image is selected
*/
const hasImage = (): boolean => {
return !!file?.attachment_name;
return FileUploadLib.hasFile(file);
};
/**
@ -82,20 +77,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues>({ id, register
* Callback triggered when the user clicks on the delete button.
*/
function onRemoveFile () {
if (file?.id) {
setValue(
`${id}[_destroy]` as Path<TFieldValues>,
true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
);
}
setValue(
`${id}[attachment_files]` as Path<TFieldValues>,
null as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
);
setFile(null);
if (typeof onFileRemove === 'function') {
onFileRemove();
}
FileUploadLib.onRemoveFile(file, id, setFile, setValue, onFileRemove);
}
/**

29
app/frontend/src/javascript/lib/file-upload.ts Normal file
View File

@ -0,0 +1,29 @@
import { Path } from 'react-hook-form';
import { UnpackNestedValue, UseFormSetValue } from 'react-hook-form/dist/types/form';
import { FieldPathValue } from 'react-hook-form/dist/types/path';
import { FieldValues } from 'react-hook-form/dist/types/fields';
import { FileType } from '../models/file';
import { Dispatch, SetStateAction } from 'react';
export default class FileUploadLib {
public static onRemoveFile<TFieldValues extends FieldValues> (file: FileType, id: string, setFile: Dispatch<SetStateAction<FileType>>, setValue: UseFormSetValue<TFieldValues>, onFileRemove: () => void) {
if (file?.id) {
setValue(
`${id}[_destroy]` as Path<TFieldValues>,
true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
);
}
setValue(
`${id}[attachment_files]` as Path<TFieldValues>,
null as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
);
setFile(null);
if (typeof onFileRemove === 'function') {
onFileRemove();
}
}
public static hasFile (file: FileType): boolean {
return !!file?.attachment_name;
}
}

9
app/frontend/src/javascript/models/file.ts Normal file
View File

@ -0,0 +1,9 @@
export interface FileType {
id?: number,
attachment_name?: string,
attachment_url?: string
}
export interface ImageType extends FileType {
is_main?: boolean
}