obsidian-plugin/xuquan-nikkkki_FolderFile-Splitter-Plugin
1
0
Fork 0
mirror of https://github.com/xuquan-nikkkki/FolderFile-Splitter-Plugin.git synced 2026-07-22 05:37:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: abstract vertical layout folders and tags pane to comopnent

Browse source
This commit is contained in:
Xu Quan 2025-06-22 17:25:00 +08:00
parent 6984d4a4cb
commit cd04b27878
2 changed files with 82 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/components/layout/VerticalSplitFoldersAndTagsPane.tsx Normal file
View file

@ -0,0 +1,75 @@
import { ActionsContainer, FolderAndTagActionSection } from "./Actions";
import FolderAndTagTree from "../FolderAndTagTree";
import { useExplorer } from "src/hooks/useExplorer";
import {
useShowFolderView,
useShowTagView,
} from "src/hooks/useSettingsHandler";
import ToggleFolderAndTagMode from "../FolderAndTagActions/ToggleFolderAndTagView";
import { VERTICAL_SPLIT_LAYOUT_OPERATION_COPY } from "src/locales";
import { ClosePaneButton, OpenPaneButton } from "./TogglePaneButton";
type Props = {
folderPaneHeight: number | undefined;
isFilesCollapsed: boolean;
isFoldersCollapsed: boolean;
setIsFoldersCollapsed: (isCollapsed: boolean) => void;
};
const VerticalSplitFoldersAndTagsPane = ({
folderPaneHeight,
isFilesCollapsed,
isFoldersCollapsed,
setIsFoldersCollapsed,
}: Props) => {
const { plugin } = useExplorer();
const { settings, language } = plugin;
const { showFolderView: showFolder, showTagView: showTag } = settings;
const { showFolderView } = useShowFolderView(showFolder);
const { showTagView } = useShowTagView(showTag);
const { openFoldersAndTags, closeFoldersAndTags } =
VERTICAL_SPLIT_LAYOUT_OPERATION_COPY;
const copy = [showFolderView && "Folders", showTagView && "Tags"]
.filter(Boolean)
.join(" & ");
if (isFoldersCollapsed) {
return (
<ActionsContainer>
<div className="ffs__actions-section ffs__collapsed-folders nav-buttons-container">
{copy}
</div>
<div className="ffs__actions-section nav-buttons-container">
<OpenPaneButton
onOpen={() => setIsFoldersCollapsed(false)}
label={openFoldersAndTags[language]}
/>
</div>
</ActionsContainer>
);
}
return (
<div
className="ffs__layout-pane ffs__folders-pane--vertical"
style={{
height: isFilesCollapsed ? "100%" : folderPaneHeight,
}}
>
<ActionsContainer>
<FolderAndTagActionSection />
<div className="ffs__actions-section nav-buttons-container">
<ToggleFolderAndTagMode />
<ClosePaneButton
onClose={() => setIsFoldersCollapsed(true)}
label={closeFoldersAndTags[language]}
/>
</div>
</ActionsContainer>
<FolderAndTagTree />
</div>
);
};
export default VerticalSplitFoldersAndTagsPane;

76
src/components/layout/VerticalSplitLayout.tsx
View file

@ -2,27 +2,12 @@ import { useEffect, useState, useRef } from "react";
import { FFS_FOLDER_PANE_HEIGHT_KEY } from "src/assets/constants";
import { VerticalDraggableDivider } from "./DraggableDivider";
import {
ActionsContainer,
FolderAndTagActionSection,
} from "./Actions";
import FolderAndTagTree from "../FolderAndTagTree";
import useChangeActiveLeaf from "src/hooks/useChangeActiveLeaf";
import { useExplorer } from "src/hooks/useExplorer";
import {
useShowFolderView,
useShowTagView,
} from "src/hooks/useSettingsHandler";
import ToggleFolderAndTagMode from "../FolderAndTagActions/ToggleFolderAndTagView";
import { VERTICAL_SPLIT_LAYOUT_OPERATION_COPY } from "src/locales";
import { toValidNumber } from "src/utils";
import { ClosePaneButton, OpenPaneButton } from "./TogglePaneButton";
import VerticalSplitFilesPane from "./VerticalSplitFilesPane";
import VerticalSplitFoldersAndTagsPane from "./VerticalSplitFoldersAndTagsPane";
const VerticalSplitLayout = () => {
const { plugin } = useExplorer();
const { settings, language } = plugin;
const [folderPaneHeight, setFolderPaneHeight] = useState<
number | undefined
>();
@ -32,10 +17,6 @@ const VerticalSplitLayout = () => {
const pluginRef = useRef<HTMLDivElement>(null);
useChangeActiveLeaf();
const { showFolderView: showFolder, showTagView: showTag } = settings;
const { showFolderView } = useShowFolderView(showFolder);
const { showTagView } = useShowTagView(showTag);
const changeHeightAndSave = (height: number) => {
setFolderPaneHeight(height);
localStorage.setItem(FFS_FOLDER_PANE_HEIGHT_KEY, String(height));
@ -66,57 +47,14 @@ const VerticalSplitLayout = () => {
restoreLayout();
}, []);
const renderFoldersAndTagsPane = () => {
const onOpenPane = () => setIsFoldersCollapsed(false);
const onClosePane = () => setIsFoldersCollapsed(true);
const { openFoldersAndTags, closeFoldersAndTags } =
VERTICAL_SPLIT_LAYOUT_OPERATION_COPY;
const copy = [showFolderView && "Folders", showTagView && "Tags"]
.filter(Boolean)
.join(" & ");
if (isFoldersCollapsed) {
return (
<ActionsContainer>
<div className="ffs__actions-section ffs__collapsed-folders nav-buttons-container">
{copy}
</div>
<div className="ffs__actions-section nav-buttons-container">
<OpenPaneButton
onOpen={onOpenPane}
label={openFoldersAndTags[language]}
/>
</div>
</ActionsContainer>
);
}
return (
<div
className="ffs__layout-pane ffs__folders-pane--vertical"
style={{
height: isFilesCollapsed ? "100%" : folderPaneHeight,
}}
>
<ActionsContainer>
<FolderAndTagActionSection />
<div className="ffs__actions-section nav-buttons-container">
<ToggleFolderAndTagMode />
<ClosePaneButton
onClose={onClosePane}
label={closeFoldersAndTags[language]}
/>
</div>
</ActionsContainer>
<FolderAndTagTree />
</div>
);
};
return (
<div className="ffs__layout ffs__layout--vertical" ref={pluginRef}>
{renderFoldersAndTagsPane()}
<VerticalSplitFoldersAndTagsPane
folderPaneHeight={folderPaneHeight}
isFoldersCollapsed={isFoldersCollapsed}
isFilesCollapsed={isFilesCollapsed}
setIsFoldersCollapsed={setIsFoldersCollapsed}
/>
{!isFilesCollapsed && !isFoldersCollapsed && (
<VerticalDraggableDivider
initialHeight={folderPaneHeight}