@astral/ui 4.55.1 → 4.55.3

package/components/fileUploading/hooks/usePreviewFileUploader/usePreviewFileUploader.js

@@ -1,151 +1,24 @@
-import { declensionOfWords } from '@astral/utils/declension/declensionOfWords';
-import { formatFileSizeToView } from '@astral/utils/file/formatFileSizeToView';
-import { useMemo, useState, } from 'react';
-import { useGenerateLocalId } from '../../../useGenerateLocalId';
-import { useId } from '../../../useId';
-import { DEFAULT_FILE_STATUS, previewFileUploaderClassnames, } from '../../constants';
-import { restrictFileMaxSize, restrictFileType } from '../../restrictions';
-import { compareFile } from '../../utils/compareFile';
-import { rulePipe } from '../../utils/rulePipe';
-import { toArray } from '../../utils/toArray';
-import { useDnD } from '../useDnD';
-import { useUploadFiles } from '../useUploadFiles';
-export const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions = [], maxFileSize, inputRef, notify, onChange, onUploadFile, onDeleteFile, label, isError, generateDownloadLink, onView, getErrorMessage, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }) => {
-    const inputId = useId();
-    const [deletingFileId, setDeletingFileId] = useState(null);
-    const { generateId } = useGenerateLocalId();
-    // Преобразуем value к массиву
-    const files = useMemo(() => toArray(value), [value]);
-    const isVisibleAddFile = !files.length;
-    const isVisibleFileList = Boolean(files.length);
-    const restrict = (file) => {
-        return rulePipe(restrictFileMaxSize(formatFileSizeToView, maxFileSize), ...(accept ? [restrictFileType(accept)] : []), ...restrictions)(file);
-    };
-    const declensionFile = declensionOfWords(['файл', 'файла', 'файлов']);
-    const declensionAdded = declensionOfWords([
-        'Добавлен',
-        'Добавлено',
-        'Добавлено',
-    ]);
-    const notifyWarning = (addedFilesLength, droppedFilesLength) => {
-        notify?.warning(`${declensionAdded(addedFilesLength)} ${addedFilesLength} ${declensionFile(addedFilesLength)} из ${droppedFilesLength}`, {
-            content: 'Вы превысили максимально допустимое количество файлов для загрузки',
-        });
-    };
-    const getInitialStatusUploadFile = (error) => {
-        if (error) {
-            return {
-                ...DEFAULT_FILE_STATUS,
-                isRestrictionError: Boolean(error),
-                errorMsg: error.message,
-            };
-        }
-        return DEFAULT_FILE_STATUS;
-    };
-    const { enqueueFiles, refetchFile, setErrorStatusFile, selfFiles } = useUploadFiles({
-        files,
-        onChange,
-        onUploadFile,
-        getErrorMessage,
-    });
-    const handleChange = (event) => {
-        // Преобразуем к массиву и удаляем дубликаты
-        const droppedFiles = Array.from(event.target.files || []).filter((droppedFile) => !files.find((file) => compareFile(droppedFile, file)));
-        const addedFiles = droppedFiles
-            .slice(0, 1 - files.length)
-            .reduce((acc, droppedFile) => {
-            const error = restrict(droppedFile);
-            return [
-                // biome-ignore lint/performance/noAccumulatingSpread: <>
-                ...acc,
-                {
-                    id: `${inputId}${generateId()}`,
-                    name: droppedFile.name,
-                    type: droppedFile.type,
-                    size: droppedFile.size,
-                    file: droppedFile,
-                    status: getInitialStatusUploadFile(error),
-                },
-            ];
-        }, []);
-        onChange(addedFiles[0]);
-        if (addedFiles.length < droppedFiles.length) {
-            notifyWarning(addedFiles.length, droppedFiles.length);
-        }
-        enqueueFiles(addedFiles);
-    };
-    const { isDragActive, ...dropZoneActions } = useDnD({
-        isDisabled,
-        onChange: (droppedFiles) => {
-            handleChange({
-                target: { files: droppedFiles },
-            });
-        },
+import { previewFileUploaderClassnames } from '../../constants';
+import { useFileUploader } from '../useFileUploader';
+export const usePreviewFileUploader = ({ placeholderImgSrc, isHidePersonalData, PdfViewer, accept = [], ...props }) => {
+    const { dropZoneProps, fileListProps } = useFileUploader({
+        ...props,
+        accept,
+        isMultiple: false,
     });
-    const handleDelete = (fileId) => {
-        const deleteFile = () => onChange(null);
-        if (!onDeleteFile) {
-            return deleteFile();
-        }
-        setDeletingFileId(fileId);
-        onDeleteFile(fileId)
-            .then(deleteFile)
-            .catch(() => notify.error('Ошибка удаления файла'))
-            .finally(() => setDeletingFileId(null));
-    };
-    const getHandlerOnRetry = () => {
-        if (onUploadFile) {
-            return (fileId, file) => refetchFile({ id: fileId, file });
-        }
-        return undefined;
-    };
     return {
         dropZoneProps: {
-            isActive: !isDisabled && isDragActive,
-            htmlFor: inputId,
+            ...dropZoneProps,
             className: previewFileUploaderClassnames.dropzone,
-            isDisabled,
-            isError,
-            ...dropZoneActions,
-            isVisibleAddFile,
-            isVisibleFileList,
-            fileInputProps: {
-                id: inputId,
-                accept: accept?.join() ?? '',
-                ref: inputRef,
-                value: '',
-                onChange: handleChange,
-                name,
-                isDisabled,
-            },
             hintPlaceholderProps: {
-                accept,
-                placeholder,
+                ...dropZoneProps.hintPlaceholderProps,
                 placeholderImgSrc,
-                maxFileSize,
-            },
-            uploadButtonProps: {
-                isDisabled,
-                htmlFor: inputId,
-            },
-            containerProps: {
-                className,
-                label,
-                isError,
-                helperText,
             },
         },
         fileListProps: {
-            onDelete: handleDelete,
-            onRetry: getHandlerOnRetry(),
-            setErrorStatusFile,
-            selfFiles,
-            generateDownloadLink,
-            onView,
-            files,
+            ...fileListProps,
             isHidePersonalData,
             PdfViewer,
-            deletingFileId,
         },
     };
 };

package/components/fileUploading/restrictions/restrictFileType/constants.d.ts

@@ -2,3 +2,7 @@ export declare const FILE_TYPE_ERROR_INFO: {
     code: string;
     message: string;
 };
+export declare const INCONSISTENCY_EXTENSION_AND_MIME_TYPE_ERROR_INFO: {
+    code: string;
+    message: string;
+};

package/components/fileUploading/restrictions/restrictFileType/constants.js

@@ -2,3 +2,7 @@ export const FILE_TYPE_ERROR_INFO = {
     code: 'file-type',
     message: 'Тип файла недопустим',
 };
+export const INCONSISTENCY_EXTENSION_AND_MIME_TYPE_ERROR_INFO = {
+    code: 'inconsistency-file-type',
+    message: 'Содержимое файла не соответствует его расширению',
+};

package/components/fileUploading/restrictions/restrictFileType/restrictFileType.d.ts

@@ -1,2 +1,2 @@
-import type { RestrictionFn } from '../../types';
-export declare const restrictFileType: (accept: string[]) => RestrictionFn;
+import type { AcceptMeta, RestrictionFn } from '../../types';
+export declare const restrictFileType: (acceptMeta: AcceptMeta) => RestrictionFn;

package/components/fileUploading/restrictions/restrictFileType/restrictFileType.js

@@ -1,63 +1,39 @@
-import { getFileType } from '@astral/utils/file/getFileType';
-import { FILE_TYPE_ERROR_INFO } from './constants';
-import { getFileTypeFromFile, prepareType } from './utils';
-const getGeneralType = (type) => type.split('/')[0];
-const compareFileType = (fileTypeA, fileTypeB) => {
-    if (Object.is(prepareType(fileTypeA), prepareType(fileTypeB))) {
-        return true;
-    }
-    const isGeneralType = /^[\w.-]+\/\*$/.test(fileTypeA);
-    // Если переданный тип заканчивается на '/*'
-    if (isGeneralType) {
-        return Object.is(getGeneralType(fileTypeA), getGeneralType(fileTypeB));
-    }
-    return false;
-};
-export const restrictFileType = (accept) => (file) => {
-    if (!file || !accept.length) {
+import { MimeTypeRegistry } from '../../services/MimeTypeRegistry';
+import { FILE_TYPE_ERROR_INFO, INCONSISTENCY_EXTENSION_AND_MIME_TYPE_ERROR_INFO, } from './constants';
+import { getFileMeta } from './utils';
+const getAcceptMimeTypes = (acceptMeta) => acceptMeta.mimeTypes.concat(...acceptMeta.extensions
+    .map((extension) => MimeTypeRegistry.getInstance().getMimeTypeByExtension(extension))
+    .filter((value) => typeof value === 'string'));
+const checkEmptyAccept = (acceptMeta) => !acceptMeta.extensions.length &&
+    !acceptMeta.mimeTypes.length &&
+    !acceptMeta.generalMimeTypes.length;
+export const restrictFileType = (acceptMeta) => (file) => {
+    if (!file || checkEmptyAccept(acceptMeta)) {
         return undefined;
     }
-    const acceptInput = [...accept];
-    const addMimeTypes = (mimeType) => {
-        mimeType.forEach((type) => {
-            if (!accept.includes(type)) {
-                acceptInput.push(type);
-            }
-        });
-    };
-    if (accept.includes('.xml')) {
-        addMimeTypes(['text/xml']);
+    const fileMeta = getFileMeta(file);
+    const acceptMimeTypes = getAcceptMimeTypes(acceptMeta);
+    if (acceptMeta.generalMimeTypes.length) {
+        const isValid = acceptMeta.generalMimeTypes.some((mimeType) => mimeType.split('/')[0] === fileMeta.mimeType.split('/')[0]);
+        if (!isValid) {
+            return FILE_TYPE_ERROR_INFO;
+        }
+        return undefined;
     }
-    if (accept.includes('.zip')) {
-        addMimeTypes([
-            'application/zip',
-            'application/zip-compressed',
-            'application/x-zip-compressed',
-        ]);
+    const isInconsistencyExtensionAndMimeType = !MimeTypeRegistry.getInstance()
+        .getExtensionsByMimeType(fileMeta.mimeType)
+        ?.includes(fileMeta.extension);
+    if (isInconsistencyExtensionAndMimeType) {
+        return INCONSISTENCY_EXTENSION_AND_MIME_TYPE_ERROR_INFO;
     }
-    if (accept.includes('.rar')) {
-        addMimeTypes([
-            'application/x-rar-compressed',
-            'application/vnd.rar',
-            'application/x-compressed',
-        ]);
+    if (!acceptMimeTypes.includes(fileMeta.mimeType)) {
+        return FILE_TYPE_ERROR_INFO;
     }
-    // Приводим к MIME-Type
-    const acceptedTypes = acceptInput.map((acceptType) => {
-        if (acceptType.includes('/')) {
-            return acceptType;
-        }
-        return getFileType(acceptType) || acceptType;
-    });
-    const fileType = getFileTypeFromFile(file);
-    const isValid = acceptedTypes.some((acceptedType) => {
-        return compareFileType(acceptedType, fileType);
-    });
-    if (!isValid) {
-        return {
-            code: FILE_TYPE_ERROR_INFO.code,
-            message: FILE_TYPE_ERROR_INFO.message,
-        };
+    // Если в accept указаны только расширения, то нужно проверить соотносится ли расширение с разрешенным
+    // Ибо mime type может подойти (например, image/jpeg может быть jpg, jpeg, jpe)
+    if (acceptMeta.isOnlyExtensions &&
+        !acceptMeta.extensions.includes(fileMeta.extension)) {
+        return FILE_TYPE_ERROR_INFO;
     }
     return undefined;
 };

package/components/fileUploading/restrictions/restrictFileType/utils/getFileMeta/getFileMeta.d.ts

@@ -0,0 +1,5 @@
+export type FileMeta = {
+    mimeType: string;
+    extension: string;
+};
+export declare const getFileMeta: (file: File) => FileMeta;

package/components/fileUploading/restrictions/restrictFileType/utils/getFileMeta/getFileMeta.js

@@ -0,0 +1,21 @@
+import { MimeTypeRegistry } from '../../../../services/MimeTypeRegistry';
+const getExtensionFromName = (filename) => {
+    const lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex < 0) {
+        return '';
+    }
+    return filename.slice(lastDotIndex + 1);
+};
+export const getFileMeta = (file) => {
+    const extension = getExtensionFromName(file.name);
+    if (file.type) {
+        return {
+            mimeType: file.type,
+            extension,
+        };
+    }
+    return {
+        mimeType: MimeTypeRegistry.getInstance().getMimeTypeByExtension(extension) || '',
+        extension,
+    };
+};

package/components/fileUploading/restrictions/restrictFileType/utils/getFileMeta/index.d.ts

@@ -0,0 +1 @@
+export * from './getFileMeta';

package/components/fileUploading/restrictions/restrictFileType/utils/getFileMeta/index.js

@@ -0,0 +1 @@
+export * from './getFileMeta';

package/components/fileUploading/restrictions/restrictFileType/utils/index.d.ts

@@ -1,2 +1 @@
-export * from './getFileTypeFromFile';
-export * from './prepareType';
+export * from './getFileMeta';

package/components/fileUploading/restrictions/restrictFileType/utils/index.js

@@ -1,2 +1 @@
-export * from './getFileTypeFromFile';
-export * from './prepareType';
+export * from './getFileMeta';

package/components/fileUploading/services/MimeTypeRegistry/MimeTypeRegistry.d.ts

@@ -0,0 +1,9 @@
+export declare class MimeTypeRegistry {
+    private static instanceRef?;
+    private readonly extensionsMap;
+    private readonly mimeTypesMap;
+    private constructor();
+    getMimeTypeByExtension(extension: string): string | null;
+    getExtensionsByMimeType(mimeType: string): string[] | null;
+    static getInstance(): MimeTypeRegistry;
+}

package/components/fileUploading/services/MimeTypeRegistry/MimeTypeRegistry.js

@@ -0,0 +1,27 @@
+import { getMimeTypesMap } from './constants';
+export class MimeTypeRegistry {
+    constructor() {
+        this.mimeTypesMap = getMimeTypesMap();
+        this.extensionsMap = new Map();
+        for (const [mimeType, extensions] of Object.entries(this.mimeTypesMap)) {
+            for (const extension of extensions) {
+                this.extensionsMap.set(extension, mimeType);
+            }
+        }
+    }
+    getMimeTypeByExtension(extension) {
+        return (this.extensionsMap.get(extension.toLowerCase().replace('.', '')) || null);
+    }
+    getExtensionsByMimeType(mimeType) {
+        return this.mimeTypesMap[mimeType] || null;
+    }
+    static getInstance() {
+        const instance = this.instanceRef?.deref();
+        if (instance) {
+            return instance;
+        }
+        const newInstance = new MimeTypeRegistry();
+        this.instanceRef = new WeakRef(newInstance);
+        return newInstance;
+    }
+}

package/components/fileUploading/services/MimeTypeRegistry/constants.d.ts

@@ -0,0 +1 @@
+export declare const getMimeTypesMap: () => Record<string, string[]>;