feat: optimize frontend document panel rendering and folder creation.
This commit is contained in:
@@ -26,18 +26,10 @@ const DocumentsInner: React.FC<{
|
||||
const { openDetailPanel } = surfaceConfig;
|
||||
const sidebarHidden = sidebarCollapsed || sidebarSuppressed;
|
||||
|
||||
const documentsTablePropsWithNav = surfaceConfig.documentsTableProps
|
||||
? {
|
||||
...surfaceConfig.documentsTableProps,
|
||||
onBreadcrumbNavigate: surfaceConfig.handleBreadcrumbNavigate,
|
||||
}
|
||||
: null;
|
||||
|
||||
const { surface } = useWorkspaceSurface({
|
||||
sidebarHidden,
|
||||
onExpandSidebar: expandSidebar,
|
||||
...surfaceConfig,
|
||||
documentsTableProps: documentsTablePropsWithNav,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -22,7 +22,7 @@ const useDocumentsShell = (): DocumentsShellView => {
|
||||
|
||||
return useMemo(() => {
|
||||
const surfaceConfig: WorkspaceSurfaceConfig = {
|
||||
documentsTableProps: {},
|
||||
viewMode: shell.search?.documentsViewMode,
|
||||
detailPanelProps: (shell.detailPanel?.detailPanelProps ?? null) as WorkspaceSurfaceConfig['detailPanelProps'],
|
||||
detailPanelOpen: Boolean(shell.detailPanel?.detailPanelOpen),
|
||||
openDetailPanel: shell.detailPanel?.openDetailPanel as WorkspaceSurfaceConfig['openDetailPanel'],
|
||||
|
||||
@@ -16,7 +16,6 @@ type EnsureViewerData = (docId: Identifier, options?: Record<string, unknown>) =
|
||||
type GetDocumentAsset = (document: unknown, assetType: string) => unknown;
|
||||
type NotifyApiError = (error: unknown, fallbackMessage?: string) => void;
|
||||
|
||||
type DocumentsTableProps = ComponentProps<typeof DocumentsPanel> | null;
|
||||
type DetailPanelProps = (ComponentProps<typeof DocumentViewerPanel> & {
|
||||
onClose?: () => void;
|
||||
onOpenViewer?: (args: { documentIds: Array<string> }) => void;
|
||||
@@ -32,7 +31,7 @@ type WorkspaceSurface = { content: ReactNode; detail?: ReactNode | null; detailM
|
||||
export interface UseWorkspaceSurfaceArgs {
|
||||
sidebarHidden?: boolean;
|
||||
onExpandSidebar?: () => void;
|
||||
documentsTableProps?: DocumentsTableProps;
|
||||
viewMode?: string;
|
||||
detailPanelProps?: DetailPanelProps;
|
||||
detailPanelOpen?: boolean;
|
||||
viewerWorkspaceDocument?: unknown;
|
||||
@@ -51,7 +50,7 @@ interface UseWorkspaceSurfaceResult {
|
||||
export const useWorkspaceSurface = ({
|
||||
sidebarHidden = false,
|
||||
onExpandSidebar,
|
||||
documentsTableProps,
|
||||
viewMode,
|
||||
detailPanelProps,
|
||||
detailPanelOpen = false,
|
||||
viewerWorkspaceDocument,
|
||||
@@ -105,12 +104,7 @@ export const useWorkspaceSurface = ({
|
||||
}, [sidebarHidden, onExpandSidebar]);
|
||||
|
||||
const documentsSurface = useMemo<WorkspaceSurface>(() => {
|
||||
if (!documentsTableProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
|
||||
const viewMode = documentsTableProps.viewMode;
|
||||
const sidebarMode = viewMode === 'desk' ? 'overlay' : 'inline';
|
||||
|
||||
const detailMode: 'overlay' | 'inline' | null = detailPanelOpen && detailPanelProps ? sidebarMode : null;
|
||||
@@ -157,7 +151,7 @@ export const useWorkspaceSurface = ({
|
||||
detailMode,
|
||||
};
|
||||
}, [
|
||||
documentsTableProps,
|
||||
viewMode,
|
||||
renderSidebarToggle,
|
||||
detailPanelOpen,
|
||||
detailPanelProps,
|
||||
|
||||
@@ -179,11 +179,10 @@ const useFolderTreeActions = ({
|
||||
setCreatingFolder(true);
|
||||
let succeeded = false;
|
||||
try {
|
||||
const folderData = await foldersManager.create(name.trim(), targetParentId);
|
||||
await foldersManager.create(name.trim(), targetParentId);
|
||||
|
||||
showToast('Folder created.', 'success');
|
||||
|
||||
await selectFolder(folderData.id, { immediate: true });
|
||||
succeeded = true;
|
||||
return true;
|
||||
} catch (error) {
|
||||
@@ -199,7 +198,6 @@ const useFolderTreeActions = ({
|
||||
},
|
||||
[
|
||||
notifyApiError,
|
||||
selectFolder,
|
||||
selectedFolder,
|
||||
setCreatingFolder,
|
||||
foldersManager,
|
||||
|
||||
@@ -50,7 +50,7 @@ interface DocumentsPanelProps {
|
||||
headerLeading?: ReactNode;
|
||||
}
|
||||
|
||||
const DocumentsPanelInner: React.FC<DocumentsPanelProps> = (props) => {
|
||||
const DocumentsPanelInner: React.FC<DocumentsPanelProps> = React.memo((props) => {
|
||||
const { headerLeading } = props;
|
||||
const shell = useAppShell();
|
||||
const {
|
||||
@@ -304,7 +304,9 @@ const DocumentsPanelInner: React.FC<DocumentsPanelProps> = (props) => {
|
||||
</DocumentsViewStateContext.Provider>
|
||||
</DocumentsAssetContext.Provider>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
DocumentsPanelInner.displayName = 'DocumentsPanelInner';
|
||||
|
||||
const DocumentsPanel: React.FC<DocumentsPanelProps> = (props) => {
|
||||
const shell = useAppShell();
|
||||
|
||||
Reference in New Issue
Block a user