refactor: Decompose document and folder views into modular components and hooks, replacing monolithic list/grid implementations.

2025-11-26 01:50:53 +01:00
parent 342714528a
commit 0a4a3ae35c
20 changed files with 1074 additions and 917 deletions
@@ -0,0 +1,62 @@
+import React from 'react';
+import { useDocumentViewLogic, DocumentViewLogic } from './hooks/useDocumentViewLogic';
+import DocumentsListRow from './components/DocumentsListRow';
+import DocumentsGridCard from './components/DocumentsGridCard';
+import DocumentsListContainer from './components/DocumentsListContainer';
+import DocumentsGridContainer from './components/DocumentsGridContainer';
+import type { DocumentsViewProps } from './panel/DocumentsPanel';
+
+interface AbstractDocumentsViewProps<CProps extends { clearSelection: () => void; children: React.ReactNode }> extends DocumentsViewProps {
+    ContainerComponent: React.ComponentType<CProps>;
+    ItemComponent: React.ComponentType<{ entry: any; viewLogic: DocumentViewLogic } & DocumentsViewProps>;
+    containerProps?: Omit<CProps, 'children' | 'clearSelection'>;
+    [key: string]: any;
+}
+
+const AbstractDocumentsView = <CProps extends { clearSelection: () => void; children: React.ReactNode }>({
+    ContainerComponent,
+    ItemComponent,
+    containerProps,
+    ...props
+}: AbstractDocumentsViewProps<CProps>) => {
+    const { entries, onDocumentRename, onFolderRename } = props;
+    const viewLogic = useDocumentViewLogic({
+        onDocumentRename,
+        onFolderRename,
+    });
+    const { clearSelection } = viewLogic;
+
+    return (
+        <ContainerComponent clearSelection={clearSelection} {...(containerProps as any)}>
+            {entries.map((entry) => (
+                <ItemComponent
+                    key={entry.key}
+                    entry={entry}
+                    viewLogic={viewLogic}
+                    {...props}
+                />
+            ))}
+        </ContainerComponent>
+    );
+};
+
+export const DocumentsList: React.FC<DocumentsViewProps> = (props) => {
+    return (
+        <AbstractDocumentsView
+            ContainerComponent={DocumentsListContainer}
+            ItemComponent={DocumentsListRow}
+            {...props}
+        />
+    );
+};
+
+export const DocumentsGrid: React.FC<DocumentsViewProps & { gridIconSize?: number }> = (props) => {
+    return (
+        <AbstractDocumentsView
+            ContainerComponent={DocumentsGridContainer}
+            ItemComponent={DocumentsGridCard}
+            containerProps={{ gridIconSize: props.gridIconSize }}
+            {...props}
+        />
+    );
+};