@emailmaker/filemanager 0.10.66 → 0.10.67

package/components/FileContent/FileContent.d.ts

@@ -1,18 +1,11 @@
 import React from 'react';
-import { UseFileUploadReturn } from '../../hooks/useFileUpload';
 import { SortByType, SortOptionType, SortOrderType } from '../../hooks/core/types';
-import { File as AppFile, PaginationState, PathItem, ThumbnailFile } from '../../types';
+import { File as AppFile, PaginationState, ThumbnailFile } from '../../types';
 interface FileContentProps {
     searchTerm: string;
-    sortField: string;
-    setSortField: (field: string) => void;
-    pathHistory: PathItem[];
-    handleBreadcrumbClick: (index: number) => void;
     handleAddFile: () => void;
-    setIsUrlModalVisible: (visible: boolean) => void;
     files: AppFile[];
     handleSearch: (searchTerm: string) => void;
-    handleSort: (sortBy: SortByType, sortOrder: SortOrderType) => void;
     sortBy: SortByType;
     sortOrder: SortOrderType;
     handleSortOptionChange: (option: SortOptionType) => void;
@@ -20,22 +13,17 @@ interface FileContentProps {
     setPagination: (pagination: Partial<PaginationState>) => void;
     loading: boolean;
     handleItemClick: (record: AppFile) => void;
-    handleDeleteFile: (fileId: string) => void;
-    selectedFiles: Set<string>;
-    toggleFileSelection: (fileId: string, opts?: {
-        metaKey?: boolean;
-        ctrlKey?: boolean;
-        shiftKey?: boolean;
-        forceToggle?: boolean;
-    }) => void;
-    handleDroppedFiles: (droppedFiles: globalThis.File[]) => Promise<void>;
-    fileUpload: UseFileUploadReturn;
     onClearSelection: () => void;
     onRename: (selectedFileId?: string) => void;
     onDelete: (file?: AppFile) => void;
     onCopy: () => void;
     onMove: () => void;
+    showRenameModal: (fileId: string) => void;
+    showDeleteConfirm?: () => void;
+    showCopyModal: () => void;
+    showMoveModal: () => void;
     onEdit: (file?: AppFile | ThumbnailFile) => void;
+    getFileData: (fileId: string, silent?: boolean) => Promise<Blob | undefined>;
 }
-export declare const FileContent: React.FC<FileContentProps>;
+export declare const FileContent: React.NamedExoticComponent<FileContentProps>;
 export {};

package/components/FileContent/FileContentHeader.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { TFunction } from 'i18next';
+import { SortOptionType } from '../../hooks/core/types';
+import { File as AppFile, ThumbnailFile } from '../../types';
+interface FileContentHeaderProps {
+    files: AppFile[];
+    filesById: Map<string, AppFile>;
+    currentSortOption: SortOptionType;
+    isSmallScreen: boolean;
+    iconStrokeWidth?: number;
+    features: Record<string, boolean | undefined>;
+    viewMode: 'grid' | 'table';
+    setViewMode: (value: 'grid' | 'table') => void;
+    handleSearch: (searchTerm: string) => void;
+    handleSortOptionChange: (option: SortOptionType) => void;
+    onClearSelection: () => void;
+    onRename: (selectedFileId?: string) => void;
+    onDelete: (file?: AppFile) => void;
+    onCopy: () => void;
+    onMove: () => void;
+    onEdit: (file?: AppFile | ThumbnailFile) => void;
+    t: TFunction;
+}
+/**
+ * Selection-toolbar живёт отдельно от корня `FileContent`.
+ *
+ * Это важно для производительности: selection меняется часто, и если держать
+ * подписку на `selectedFiles` в корне списка, каждый клик по checkbox будет
+ * заново прогонять весь `FileContent`, даже когда сама таблица уже стабилизирована.
+ */
+export declare const FileContentHeader: React.NamedExoticComponent<FileContentHeaderProps>;
+export {};

package/components/FileContent/FileSelectionCheckbox.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface FileSelectionCheckboxProps {
+    fileId: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Узкий checkbox выбора файла.
+ *
+ * Компонент подписывается только на булево состояние конкретного `fileId`.
+ * Благодаря этому при смене selection не нужно заново перерисовывать весь список:
+ * обновится только тот checkbox, у которого реально поменялось состояние.
+ */
+export declare const FileSelectionCheckbox: React.NamedExoticComponent<FileSelectionCheckboxProps>;
+export {};

package/components/FileContent/SelectableTableRow.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type SelectableTableRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
+    'data-row-key'?: string | number;
+};
+/**
+ * Кастомная строка таблицы, которая сама знает, выбран ли её `rowKey`.
+ *
+ * Это позволяет не прокидывать `selectedFiles` в `rowClassName` из родителя и
+ * не заставлять всю таблицу зависеть от каждого изменения selection.
+ */
+export declare const SelectableTableRow: React.NamedExoticComponent<SelectableTableRowProps>;
+export {};

package/components/FileContent/presentation/FileGridItem.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { FileItemViewModel } from './types';
+import type { File as AppFile } from '../../../types';
+import type { TFunction } from 'i18next';
+interface FileGridItemProps {
+    item: FileItemViewModel;
+    t: TFunction;
+    iconStrokeWidth?: number;
+    FolderIcon: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    handleSingleClick: (callback: () => void) => void;
+    handleDoubleClick: (callback: () => void) => void;
+    handleItemClick: (record: AppFile) => void;
+    setCurrentMenuFile?: (file: string) => void;
+    showMoveModal: () => void;
+    showCopyModal: () => void;
+    showRenameModal: (fileId: string) => void;
+    showDeleteConfirm?: () => void;
+    onEdit: (file?: AppFile) => void;
+    onEditorOk?: (file: AppFile) => void;
+    getFileData: (fileId: string, silent?: boolean) => Promise<Blob | undefined>;
+}
+/**
+ * Карточка grid-режима на основе общего view-model.
+ *
+ * Grid и table используют один и тот же подготовленный `item`, поэтому
+ * визуальные режимы отличаются только отрисовкой, а не повторным derive данных.
+ */
+export declare const FileGridItem: React.NamedExoticComponent<FileGridItemProps>;
+export {};

package/components/FileContent/presentation/FileItemActionsDropdown.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { TFunction } from 'i18next';
+import type { File as AppFile } from '../../../types';
+import type { FileItemViewModel } from './types';
+interface FileItemActionsDropdownProps {
+    item: FileItemViewModel;
+    variant?: 'table' | 'grid';
+    t: TFunction;
+    iconStrokeWidth?: number;
+    setCurrentMenuFile?: (file: string) => void;
+    showMoveModal: () => void;
+    showCopyModal: () => void;
+    showRenameModal: (fileId: string) => void;
+    showDeleteConfirm?: () => void;
+    onEdit: (file?: AppFile) => void;
+}
+/**
+ * Общий dropdown для table и grid.
+ *
+ * Меню строится по готовым флагам из view-model, поэтому при rerender контейнера
+ * здесь не нужно заново вычислять доступность действий из исходного файла.
+ */
+export declare const FileItemActionsDropdown: React.NamedExoticComponent<FileItemActionsDropdownProps>;
+export {};

package/components/FileContent/presentation/FileItemDate.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { FileItemViewModel } from './types';
+interface FileItemDateProps {
+    item: FileItemViewModel;
+}
+/**
+ * Дата вынесена отдельно, чтобы tooltip и форматированный текст были изолированы
+ * от остального содержимого строки.
+ */
+export declare const FileItemDate: React.NamedExoticComponent<FileItemDateProps>;
+export {};

package/components/FileContent/presentation/FileItemName.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FileItemViewModel } from './types';
+interface FileItemNameProps {
+    item: FileItemViewModel;
+}
+/**
+ * Имя и вторичный текст для папки.
+ *
+ * Это leaf-компонент, поэтому при rerender таблицы он может быстро bailout-иться,
+ * если сам `item` не изменился.
+ */
+export declare const FileItemName: React.NamedExoticComponent<FileItemNameProps>;
+export {};

package/components/FileContent/presentation/FileItemPreview.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { FileItemViewModel } from './types';
+interface FileItemPreviewProps {
+    item: FileItemViewModel;
+    variant?: 'table' | 'grid';
+    FolderIcon: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    getFileData: (fileId: string, silent?: boolean) => Promise<Blob | undefined>;
+    className?: string;
+    width?: number;
+    height?: number;
+}
+/**
+ * Отдельный leaf-компонент превью.
+ *
+ * Его задача простая: не вычислять ничего на лету, а только отрисовать уже
+ * подготовленный view-model. Тогда rerender таблицы не тянет повторную derive-логику.
+ */
+export declare const FileItemPreview: React.NamedExoticComponent<FileItemPreviewProps>;
+export {};

package/components/FileContent/presentation/types.d.ts

@@ -0,0 +1 @@
+export type { FileListRowModel as FileItemViewModel } from '../../../presentation/file-list/types';

package/components/FileContent/renderers/FileGridView.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { TFunction } from 'i18next';
+import type { FileListRowModel } from '../../../presentation/file-list/types';
+import type { File as AppFile } from '../../../types';
+interface FileGridViewProps {
+    rows: FileListRowModel[];
+    topOffset?: number;
+    bottomOffset?: number;
+    t: TFunction;
+    iconStrokeWidth?: number;
+    FolderIcon: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    handleSingleClick: (callback: () => void) => void;
+    handleDoubleClick: (callback: () => void) => void;
+    handleItemClick: (record: AppFile) => void;
+    setCurrentMenuFile?: (file: string) => void;
+    showMoveModal: () => void;
+    showCopyModal: () => void;
+    showRenameModal: (fileId: string) => void;
+    showDeleteConfirm?: () => void;
+    onEdit: (file?: AppFile) => void;
+    onEditorOk?: (file: AppFile) => void;
+    getFileData: (fileId: string, silent?: boolean) => Promise<Blob | undefined>;
+}
+/**
+ * Изолированный renderer grid-режима.
+ *
+ * Здесь остаётся только раскладка и composition карточек, а orchestration
+ * живёт в `FileContent`, чтобы случайные правки UI не ломали memo-цепочку.
+ */
+export declare const FileGridView: React.NamedExoticComponent<FileGridViewProps>;
+export {};

package/components/FileContent/renderers/FileTableView.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ColumnsType } from 'antd/es/table';
+import type { FileListRowModel } from '../../../presentation/file-list/types';
+interface FileTableViewProps {
+    rows: FileListRowModel[];
+    columns: ColumnsType<FileListRowModel>;
+    loading: boolean;
+    topOffset?: number;
+    bottomOffset?: number;
+    onRow: (record: FileListRowModel) => React.HTMLAttributes<HTMLElement>;
+    components: {
+        body: {
+            row: React.ComponentType<React.HTMLAttributes<HTMLTableRowElement> & {
+                'data-row-key'?: string | number;
+            }>;
+        };
+    };
+}
+/**
+ * Изолированный renderer table-режима.
+ *
+ * Важно, что `loading` живёт снаружи таблицы, а не внутри `Table`,
+ * поэтому сам table tree не пересобирается только из-за spinner state.
+ */
+export declare const FileTableView: React.NamedExoticComponent<FileTableViewProps>;
+export {};

package/file-manager.css

@@ -32,6 +32,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
   padding: 36px 16px;
 }
 
@@ -51,6 +52,7 @@
 .em-filemanager .filesContainer {
   position: relative;
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -115,12 +117,19 @@
 
 .em-filemanager .tableContainer {
   flex: 1;
-  overflow: auto;
+  min-height: 0;
+  overflow: hidden;
   width: 100%;
+  display: flex;
+  flex-direction: column;
   position: relative;
   z-index: 0;
 }
 
+.em-filemanager .tableLoadingWrapper {
+  width: 100%;
+}
+
 .em-filemanager .imagePreview {
   max-width: 100%;
   display: block;
@@ -559,7 +568,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  color: #8C8C8C;
+  color: #8c8c8c;
 }
 @charset "UTF-8";
 .em-filemanager .folderTree .emptyFolderContainer {