@groupeactual/ui-kit 1.7.9 → 2.0.0-beta.0

package/src/components/UploadDocument/FileUploader.tsx

@@ -1,728 +0,0 @@
-import React, {
-  ChangeEvent,
-  DragEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-
-import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
-import {
-  faEye,
-  faFolderOpen,
-  faTrash,
-  faUpload,
-} from '@fortawesome/pro-regular-svg-icons';
-import {
-  faCaretDown,
-  faFile,
-  faInfoCircle,
-} from '@fortawesome/pro-solid-svg-icons';
-import { Box, IconButton } from '@mui/material';
-import Menu from '@mui/material/Menu';
-
-import Button from '@/components/Button';
-import IconProvider from '@/components/IconProvider';
-import MenuItem from '@/components/MenuItem';
-import Text from '@/components/Text';
-import Tooltip from '@/components/Tooltip';
-import GooglePickerWrapper from '@/helpers/GooglePickerWrapper';
-
-import {
-  AcceptTextType,
-  FileDataType,
-  GoogleDriveFile,
-} from './fileuploader.interface';
-
-interface Props {
-  title?: string;
-  subTitle?: string;
-  titleAddButton?: string;
-  helperText?: string;
-  titleTooltip?: string;
-  files?: FileDataType[];
-  isMulti?: boolean;
-  accept?: string[];
-  acceptText?: AcceptTextType;
-  orText?: string;
-  fromLocalText?: string;
-  fromGoogleDriveText?: string;
-  disabled?: boolean;
-  error?: string;
-  enableGoogleDrive?: boolean;
-  googleAuthClientId?: string;
-  googleApiKey?: string;
-  _isDroppingFile?: boolean; // * Only used for storybook
-  validateFile?: (
-    _size: number,
-    _type: string,
-    _accept: string[],
-    _setUploadFileError: React.Dispatch<React.SetStateAction<boolean | string>>,
-  ) => boolean;
-  onTouched?: () => void;
-  onFilesDataChange?: (_fileData: FileDataType[] | undefined) => void;
-}
-
-const FileUploader = ({
-  title = '',
-  subTitle = 'Déposer un fichier ici',
-  titleAddButton = 'Ajouter un fichier',
-  helperText = '',
-  titleTooltip,
-  files = [],
-  isMulti = false,
-  accept = [],
-  acceptText = { fileFormat: '', maxSize: '', subText: '' },
-  orText = 'ou',
-  fromLocalText = 'Depuis votre PC',
-  fromGoogleDriveText = 'Depuis Google Drive',
-  disabled = false,
-  error,
-  enableGoogleDrive = false,
-  googleAuthClientId,
-  googleApiKey,
-  _isDroppingFile = false,
-  validateFile,
-  onTouched,
-  onFilesDataChange,
-}: Props) => {
-  const DEFAULT_COLOR = '%23CBCBCB';
-  const ERROR_COLOR = '%23b80025';
-  const DROPPING_COLOR = '%23004F88';
-
-  // * States
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  // * filesData is used to display the files in the component
-  const [filesData, setFilesData] = useState<FileDataType[] | undefined>(
-    undefined,
-  );
-  const [isDroppingFile, setIsDroppingFile] =
-    useState<boolean>(_isDroppingFile);
-  // * uploadFileError is used to display the error message when the file is not valid from the validateFile function
-  const [uploadFileError, setUploadFileError] = useState<string | boolean>(
-    false,
-  );
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  // * Refs
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-
-  // * Colors
-  const dashedColor = useMemo(() => {
-    if ((!isMulti && filesData?.[0]?.name) || disabled) return DEFAULT_COLOR;
-    if (isDroppingFile) return DROPPING_COLOR;
-    if (error || uploadFileError !== false) return ERROR_COLOR;
-    return DEFAULT_COLOR;
-  }, [isDroppingFile, error, uploadFileError]);
-
-  const bgColor = useMemo(() => {
-    if ((!isMulti && filesData?.[0]?.name) || disabled) return 'greyXLight';
-    if (isDroppingFile) return 'blueHoverEquivalence';
-    return 'white';
-  }, [filesData?.length, disabled, isDroppingFile]);
-
-  const titleColor = useMemo(() => {
-    if (!isMulti && filesData?.[0]?.name) return 'greyDark';
-    if (error || uploadFileError !== false) return 'redError';
-    return 'greyXDark';
-  }, [filesData?.length, error, uploadFileError]);
-
-  // * Styles
-  const inputCss = useMemo(
-    () => ({
-      height: '87px',
-      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='${dashedColor}' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`,
-      borderRadius: '4px',
-      py: '24px',
-      px: '22px',
-      display: 'flex',
-      justifyContent: 'space-between',
-      position: 'relative',
-      alignItems: 'center',
-      overflow: 'hidden',
-      backgroundColor: bgColor,
-    }),
-    [dashedColor, bgColor],
-  );
-
-  // * Events handlers
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if ((!isMulti && filesData?.[0]?.name) || disabled) return;
-
-    setIsDroppingFile(true);
-  };
-
-  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if ((!isMulti && filesData?.[0]?.name) || disabled) return;
-
-    setIsDroppingFile(false);
-  };
-
-  // * Handle file change and file deletion
-  const handleFileChange = useCallback(
-    async (
-      _event: ChangeEvent<HTMLInputElement> | null,
-      data?: {
-        docs: GoogleDriveFile[];
-      } | null,
-      token: string | null = null,
-      accept: string[] = [],
-      fakeClick?: boolean,
-    ) => {
-      if (fakeClick) {
-        fileInputRef?.current?.click();
-        return;
-      }
-
-      handleClose();
-      onTouched?.();
-
-      if (token && data && data.docs && data.docs.length > 0) {
-        // * Google Drive
-        const validDocs = data.docs.filter((doc) =>
-          validateFile
-            ? validateFile(
-                doc.sizeBytes,
-                doc.mimeType,
-                accept,
-                setUploadFileError,
-              )
-            : true,
-        );
-
-        const googleFileData = await Promise.all(
-          validDocs.map(async (doc) => {
-            const baseUrl = `https://www.googleapis.com/drive/v3/files/${doc.id}`;
-            const params = new URLSearchParams({
-              alt: 'media',
-              supportsAllDrives: 'true',
-            });
-
-            const url = `${baseUrl}?${params}`;
-
-            const response = await fetch(url, {
-              method: 'GET',
-              headers: {
-                Authorization: `Bearer ${token}`,
-              },
-            });
-
-            const blob = await response.blob();
-
-            let file: File | undefined = undefined;
-
-            if (response.status === 200) {
-              file = new File([blob], doc.name, {
-                type: doc.mimeType,
-              });
-            }
-
-            return {
-              name: doc.name,
-              size: Math.round(doc.sizeBytes / 1024), // * Convert size to KB
-              type: doc.mimeType,
-              url: `https://drive.google.com/file/d/${doc.id}/view?usp=drive_we`,
-              file: file,
-              driveFileId: doc.id,
-              driveAccessToken: token,
-            };
-          }),
-        );
-
-        setFilesData([...(filesData || []), ...googleFileData]);
-      } else if (
-        fileInputRef.current?.files &&
-        fileInputRef.current?.files?.length > 0
-      ) {
-        // * Local Files
-        const fileList = Array.from(fileInputRef.current?.files);
-
-        const newFileData: FileDataType[] = fileList
-          .map((file) => {
-            if (
-              validateFile &&
-              !validateFile(file.size, file.type, accept, setUploadFileError)
-            ) {
-              setIsDroppingFile(false);
-              return null;
-            }
-
-            return {
-              name: file?.name ?? '',
-              size: Math.round(file.size / 1024),
-              type: file.type,
-              url: URL.createObjectURL(file),
-              file: file,
-            };
-          })
-          .filter((file) => file !== null);
-
-        if (newFileData && newFileData?.length > 0) {
-          setFilesData([...(filesData || []), ...newFileData]);
-        }
-      }
-
-      setIsDroppingFile(false);
-    },
-    [
-      fileInputRef,
-      filesData,
-      setIsDroppingFile,
-      setFilesData,
-      validateFile,
-      onTouched,
-      handleClose,
-    ],
-  );
-
-  const handleDelete = useCallback(
-    (fileIndex: number) => {
-      //* Remove the file from the currentFiles array
-      if (filesData && filesData.length > 0) {
-        const fileToDelete = filesData[fileIndex]?.file;
-        if (fileToDelete) {
-          // * Revoke the object URL to free up memory, use try and catch to avoid errors on the other files not imported with the file input
-          try {
-            const fileURL = URL.createObjectURL(fileToDelete);
-            URL.revokeObjectURL(fileURL);
-          } catch {
-            // * Do nothing
-          }
-        }
-      }
-
-      //* Remove the file from the filesData array
-      if (filesData && filesData.length === 1) {
-        setFilesData([]);
-      } else {
-        setFilesData(
-          Object.values(filesData || []).filter(
-            (_, index) => index !== fileIndex,
-          ),
-        );
-      }
-
-      setIsDroppingFile(false);
-    },
-    [filesData, setIsDroppingFile, setFilesData],
-  );
-
-  // * Utils
-  const extractExtensions = (types: string[]): string[] => {
-    return types.map((type) => {
-      const extension = type.split('/')[1].toUpperCase();
-      return extension;
-    });
-  };
-
-  const initializeFiles = async () => {
-    const initialFiles = await Promise.all(
-      files.map(async (file) => {
-        let fileTmp: File | undefined = undefined;
-
-        if (isMulti) {
-          const response = await fetch(file.url);
-          const blob = await response.blob();
-          fileTmp = new File([blob], file.name, {
-            type: file.type,
-          });
-        }
-
-        return {
-          name: file.name,
-          size: Math.round(file.size / 1024), // Convert size to KB
-          type: file.type,
-          url: file.url,
-          file: fileTmp,
-        };
-      }),
-    );
-
-    setFilesData(initialFiles);
-  };
-
-  // * UseEffects
-
-  // * Manage isInitialized state
-  useEffect(() => {
-    if (!isInitialized && filesData && filesData.length >= 0) {
-      setIsInitialized(true);
-    }
-  }, [isInitialized, filesData]);
-
-  // * Manage filesData state
-  useEffect(() => {
-    if (isInitialized && typeof filesData !== 'undefined') {
-      onFilesDataChange?.(filesData);
-    } else if (!isInitialized && typeof filesData === 'undefined') {
-      initializeFiles();
-    }
-  }, [filesData]);
-
-  // * Revoke the object URL to free up memory
-  useEffect(() => {
-    return () => {
-      if (!filesData?.length) return;
-
-      try {
-        // * Only for file imported with the file input, use try and catch to avoid errors on the other files
-        filesData.forEach((_fileData) => {
-          if (_fileData?.file) {
-            const fileURL = URL.createObjectURL(_fileData?.file);
-            URL.revokeObjectURL(fileURL);
-          }
-        });
-      } catch {
-        // * Do nothing
-      }
-    };
-  }, [filesData]);
-
-  return (
-    <Box
-      data-testid="Uploader-document"
-      sx={{
-        pb: 3,
-      }}
-    >
-      <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
-        <Text variant="body2Medium" color={titleColor} pl={1}>
-          {title}
-        </Text>
-        {titleTooltip && (
-          <Box sx={{ marginLeft: '4px' }}>
-            <Tooltip
-              title={titleTooltip}
-              sx={{
-                display: 'flex',
-              }}
-            >
-              <IconProvider icon={faInfoCircle} size="sm" color="blueInfo" />
-            </Tooltip>
-          </Box>
-        )}
-      </Box>
-
-      <Box
-        mt={1}
-        p={2}
-        sx={inputCss}
-        onDragOver={handleDragOver}
-        onDragEnter={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDragEnd={handleDragLeave}
-      >
-        <Box
-          sx={{
-            opacity: 0,
-            position: 'absolute',
-            top: '0px',
-            right: '0px',
-            width: '100%',
-            height: '100%',
-            'input[type="file"]': {
-              cursor:
-                disabled || (filesData?.[0]?.name && !isMulti)
-                  ? 'not-allowed'
-                  : 'pointer',
-              color: 'transparent',
-              width: '100%',
-              height: '100%',
-            },
-          }}
-        >
-          <input
-            title=""
-            data-testid="document-input"
-            disabled={!!(!isMulti && filesData?.[0]?.name) || disabled}
-            type="file"
-            ref={fileInputRef}
-            onChange={(event) => handleFileChange(event, null, null, accept)}
-            onBlur={onTouched}
-            multiple={isMulti}
-            accept={accept.join(',')}
-          />
-        </Box>
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          <Text
-            variant="body2Medium"
-            color={
-              (!isMulti && filesData?.[0]?.name && 'greyDark') || 'greyXDark'
-            }
-          >
-            {subTitle}
-          </Text>
-          <Box sx={{ maxWidth: '240px' }}>
-            <Text
-              variant="caption"
-              sx={{
-                color: 'greyDark',
-                marginTop: '2px',
-              }}
-            >
-              Format{' '}
-              {(acceptText?.fileFormat && acceptText?.fileFormat?.trim() !== ''
-                ? acceptText.fileFormat
-                : extractExtensions(accept).join(', ')) + ' - '}
-              {(acceptText.maxSize && acceptText.maxSize) || 'Max. 10 Mo'}
-              {acceptText.subText && (
-                <>
-                  <br />
-                  {acceptText.subText}
-                </>
-              )}
-            </Text>
-          </Box>
-        </Box>
-        <Box>
-          <Text
-            variant="body2Medium"
-            color={
-              (!isMulti && filesData?.[0]?.name && 'greyDark') || 'greyXDark'
-            }
-          >
-            {orText}
-          </Text>
-        </Box>
-        <Box>
-          {(enableGoogleDrive && (
-            <>
-              <Button
-                variant="secondary"
-                sx={{
-                  display: 'flex',
-                  '&.MuiButton-secondaryPrimary.Mui-disabled': {
-                    backgroundColor: '#FFFFFF !important',
-                  },
-                }}
-                onClick={handleClick}
-                disabled={!!(!isMulti && filesData?.[0]?.name)}
-                endIcon={<IconProvider icon={faCaretDown} />}
-              >
-                <IconProvider icon={faUpload} size="md" mr={1} />
-                {titleAddButton}
-              </Button>
-              <Menu
-                data-testid="seizure-card-menu"
-                anchorEl={anchorEl}
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'right',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}
-                slotProps={{
-                  paper: {
-                    style: {
-                      marginTop: '8px',
-                      marginLeft: '0',
-                    },
-                  },
-                }}
-              >
-                <MenuItem
-                  testId="pc-add"
-                  onClick={() => handleFileChange(null, null, null, [], true)}
-                >
-                  <Box gap={1} display="inline-flex" alignItems="center">
-                    <IconProvider size="sm" icon={faFolderOpen} />
-                    <Text variant="body2">{fromLocalText}</Text>
-                  </Box>
-                </MenuItem>
-                <GooglePickerWrapper
-                  callback={(data, token) =>
-                    handleFileChange(null, data, token, accept)
-                  }
-                  multiselect={true}
-                  navHidden={false}
-                  googleAuthClientId={googleAuthClientId ?? ''}
-                  googleApiKey={googleApiKey ?? ''}
-                  scopes="https://www.googleapis.com/auth/drive.file"
-                  viewId="FOLDERS"
-                >
-                  <MenuItem testId="drive-add" onClick={handleClose}>
-                    <Box gap={1} display="inline-flex" alignItems="center">
-                      <IconProvider size="sm" icon={faGoogleDrive} />
-                      <Text variant="body2">{fromGoogleDriveText}</Text>
-                    </Box>
-                  </MenuItem>
-                </GooglePickerWrapper>
-              </Menu>
-            </>
-          )) || (
-            <Button
-              variant="secondary"
-              sx={{
-                display: 'flex',
-                '&.MuiButton-secondaryPrimary.Mui-disabled': {
-                  backgroundColor: '#FFFFFF !important',
-                },
-              }}
-              onClick={() => handleFileChange(null, null, null, [], true)}
-              disabled={!!(!isMulti && filesData?.[0]?.name)}
-            >
-              <IconProvider icon={faUpload} size="md" mr={1} />
-              {titleAddButton}
-            </Button>
-          )}
-        </Box>
-      </Box>
-      {(error || helperText || uploadFileError !== false) && (
-        <Box pl={1} pt={1}>
-          <Text
-            variant="caption"
-            color={
-              ((error || uploadFileError !== false) && 'redError') || 'greyDark'
-            }
-            data-testid="helperText"
-          >
-            {uploadFileError !== false
-              ? uploadFileError
-              : (error ?? helperText)}
-          </Text>
-        </Box>
-      )}
-      <Box sx={{ mt: '16px' }}>
-        {(isMulti
-          ? Object.values(filesData ?? [])
-          : Object.values(filesData ?? [])?.slice(0, 1)
-        )?.map((fileData, index) => (
-          <Box
-            key={index}
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              border: '0.5px solid',
-              borderColor: error ? 'redError' : 'greyLightDefaultBorder',
-              borderRadius: '0',
-              justifyContent: 'space-between',
-              maxHeight: '50px',
-              p: '16px',
-              mb: '8px',
-            }}
-          >
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                flexShrink: 1,
-                minWidth: 0,
-              }}
-            >
-              <IconProvider
-                icon={faFile}
-                color="greyMediumInactive"
-                size="sm"
-                mr={1}
-              />
-              <Text
-                variant="body2Medium"
-                color="greyXDark"
-                sx={{
-                  overflow: 'hidden',
-                  whiteSpace: 'nowrap',
-                  textAlign: 'left',
-                  textOverflow: 'ellipsis',
-                  flexShrink: 1,
-                }}
-              >
-                {fileData?.name}
-              </Text>
-              {fileData?.size && fileData.size !== 0 ? (
-                <Text
-                  component="span"
-                  variant="body2Regular"
-                  color="greyDark"
-                  sx={{ minWidth: '41px', marginLeft: '8px' }}
-                >
-                  ({fileData?.size} ko)
-                </Text>
-              ) : null}
-            </Box>
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                flexShrink: 0,
-              }}
-            >
-              <IconButton
-                size="medium"
-                color="primary"
-                sx={{
-                  height: '42px',
-                  width: '42px',
-                  mx: 1 / 2,
-                  outline: 'none !important',
-                  borderRadius: '4px',
-                  '&:hover': {
-                    backgroundColor: 'blueHoverOpacity12',
-                  },
-                }}
-                data-testid={`view-btn-${index}`}
-                onClick={() => {
-                  if (fileData?.url) {
-                    window.open(fileData.url, '_blank');
-                  }
-                }}
-              >
-                <IconProvider
-                  icon={faEye}
-                  color="grey"
-                  size="md"
-                  height="16px"
-                  width="16px"
-                />
-              </IconButton>
-              <IconButton
-                size="medium"
-                color="primary"
-                sx={{
-                  mx: 1 / 2,
-                  height: '42px',
-                  width: '42px',
-                  outline: 'none !important',
-                  borderRadius: '4px',
-                  '&:hover': {
-                    backgroundColor: 'blueHoverOpacity12',
-                  },
-                }}
-                data-testid={`delete-btn-${index}`}
-                onClick={() => handleDelete(index)}
-              >
-                <IconProvider
-                  icon={faTrash}
-                  color="grey"
-                  size="md"
-                  height="16px"
-                  width="16px"
-                />
-              </IconButton>
-            </Box>
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-};
-
-export default FileUploader;