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

package/src/components/FileUploader/FileUploader.tsx

@@ -0,0 +1,767 @@
+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 = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      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,
+    },
+    ref,
+  ) => {
+    const DEFAULT_COLOR = '%23CBCBCB';
+    const ERROR_COLOR = '%23e20e28';
+    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
+        ref={ref}
+        data-testid="ds-uploader-document"
+        sx={{
+          pb: 3,
+        }}
+      >
+        <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+          <Text variant="body2Medium" color={titleColor} pl={1}>
+            {title}
+          </Text>
+          {titleTooltip && (
+            <Box sx={{ ml: 1 }}>
+              <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}
+          data-testid="ds-drag-drop-area"
+        >
+          <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="ds-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'
+              }
+              data-testid="ds-sub-title"
+            >
+              {subTitle}
+            </Text>
+            <Box sx={{ maxWidth: '240px' }}>
+              <Text
+                variant="caption"
+                sx={{
+                  color: 'greyDark',
+                  mt: 0.5,
+                }}
+                data-testid="ds-accept-text"
+              >
+                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'
+              }
+              data-testid="ds-or-text"
+            >
+              {orText}
+            </Text>
+          </Box>
+          <Box>
+            {(enableGoogleDrive && (
+              <>
+                <Button
+                  variant="secondary"
+                  onClick={handleClick}
+                  disabled={!!(!isMulti && filesData?.[0]?.name) || disabled}
+                  startIcon={
+                    <IconProvider
+                      ml={1}
+                      color="inherit"
+                      icon={faUpload}
+                      size="md"
+                    />
+                  }
+                  endIcon={
+                    <IconProvider
+                      color="inherit"
+                      icon={faCaretDown}
+                      size="md"
+                    />
+                  }
+                  data-testid="ds-add-button"
+                >
+                  {titleAddButton}
+                </Button>
+                <Menu
+                  data-testid="ds-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
+                    onClick={() => handleFileChange(null, null, null, [], true)}
+                    data-testid="ds-menu-item-local"
+                  >
+                    <Box gap={1} display="inline-flex" alignItems="center">
+                      <IconProvider
+                        size="sm"
+                        icon={faFolderOpen}
+                        color="inherit"
+                      />
+                      <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
+                      onClick={handleClose}
+                      data-testid="ds-menu-item-google-drive"
+                    >
+                      <Box
+                        gap={1}
+                        display="inline-flex"
+                        alignItems="center"
+                        color="inherit"
+                      >
+                        <IconProvider size="sm" icon={faGoogleDrive} />
+                        <Text variant="body2">{fromGoogleDriveText}</Text>
+                      </Box>
+                    </MenuItem>
+                  </GooglePickerWrapper>
+                </Menu>
+              </>
+            )) || (
+              <Button
+                variant="secondary"
+                onClick={() => handleFileChange(null, null, null, [], true)}
+                disabled={!!(!isMulti && filesData?.[0]?.name) || disabled}
+                startIcon={
+                  <IconProvider
+                    icon={faUpload}
+                    size="md"
+                    ml={1}
+                    color="inherit"
+                  />
+                }
+                data-testid="ds-add-button"
+              >
+                {titleAddButton}
+              </Button>
+            )}
+          </Box>
+        </Box>
+        {(error || helperText || uploadFileError !== false) && (
+          <Box pl={1} pt={1}>
+            <Text
+              variant="caption"
+              color={
+                ((error || uploadFileError !== false) && 'error.main') ||
+                'greyDark'
+              }
+              data-testid="ds-helper-text"
+            >
+              {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 ? 'error.main' : 'greyLightDefaultBorder',
+                borderRadius: '0',
+                justifyContent: 'space-between',
+                maxHeight: '50px',
+                p: 4,
+                mb: 2,
+              }}
+              data-testid={`ds-file-item-${index}`}
+            >
+              <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,
+                  }}
+                  data-testid={`ds-file-name-${index}`}
+                >
+                  {fileData?.name}
+                </Text>
+                {fileData?.size && fileData.size !== 0 ? (
+                  <Text
+                    component="span"
+                    variant="body2"
+                    color="greyDark"
+                    sx={{ minWidth: '41px', marginLeft: '8px' }}
+                    data-testid={`ds-file-size-${index}`}
+                  >
+                    ({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={`ds-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={`ds-delete-btn-${index}`}
+                  onClick={() => handleDelete(index)}
+                >
+                  <IconProvider
+                    icon={faTrash}
+                    color="grey"
+                    size="md"
+                    height="16px"
+                    width="16px"
+                  />
+                </IconButton>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    );
+  },
+);
+
+FileUploader.displayName = 'FileUploader';
+
+export default FileUploader;