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 12:00:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: optimize code for better understanding

Browse source
This commit is contained in:
Xu Quan 2025-02-28 21:58:27 +08:00
parent 3ae8e23c98
commit 25c2b42fc9
2 changed files with 65 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/File.tsx
View file

@ -48,13 +48,11 @@ const File = ({ file, useFileTreeStore, plugin, deleteFile }: Props) => {
return "ffs-file-name" + (isEditing ? " ffs-file-name-edit-mode" : "");
};
const {
renderEditableName,
selectFileNameText,
onBeginEdit,
} = useRenderEditableName(file.basename, onSaveName, getClassNames);
const { renderEditableName, selectFileNameText, onBeginEdit } =
useRenderEditableName(file.basename, onSaveName, getClassNames);
const loadContent = async () => {
const maybeLoadContent = async () => {
if (file.extension !== "md") return;
const content = await readFile(file);
const cleanContent = content
.replace(/^---\n[\s\S]*?\n---\n/, "")
@ -63,8 +61,7 @@ const File = ({ file, useFileTreeStore, plugin, deleteFile }: Props) => {
};
useEffect(() => {
if (file.extension !== "md") return;
loadContent();
maybeLoadContent();
}, []);
const onShowContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
@ -121,31 +118,36 @@ const File = ({ file, useFileTreeStore, plugin, deleteFile }: Props) => {
menu.showAtPosition({ x: e.clientX, y: e.clientY });
};
const isFocused = focusedFile?.path === file.path;
const className = "ffs-file" + (isFocused ? " ffs-focused-file" : "");
const maybeRenderFileDetail = () => {
if (!showFileDetail) return null;
const fileCreatedDate = new Date(file.stat.ctime)
.toLocaleString()
.split(" ")[0];
return (
<div className="ffs-file-details">
<span className="ffs-file-created-time">{fileCreatedDate}</span>
<span className="ffs-file-content-preview">
{contentPreview}
</span>
</div>
);
};
const getFileClassName = () => {
const isFocused = focusedFile?.path === file.path;
return "ffs-file" + (isFocused ? " ffs-focused-file" : "");
};
return (
<div
className={className}
className={getFileClassName()}
onClick={() => selectFile(file)}
onContextMenu={onShowContextMenu}
>
<div className="ffs-file-content">
{renderEditableName()}
{showFileDetail && (
<div className="ffs-file-details">
<span className="ffs-file-created-time">
{
new Date(file.stat.ctime)
.toLocaleString()
.split(" ")[0]
}
</span>
<span className="ffs-file-content-preview">
{contentPreview}
</span>
</div>
)}
{maybeRenderFileDetail()}
</div>
</div>
);

72
src/components/Folder.tsx
View file

@ -135,6 +135,23 @@ const Folder = ({
menu.showAtPosition({ x: e.clientX, y: e.clientY });
};
const onClickFolder = (e: React.MouseEvent<HTMLDivElement>): void => {
if (expandFolderByClickingOn !== "folder") return;
e.stopPropagation();
if (focusedFolder?.path !== folder.path) {
setFocusedFolder(folder);
} else {
onToggleExpandState();
}
};
const onClickExpandIcon = (e: React.MouseEvent<HTMLDivElement>): void => {
if (expandFolderByClickingOn !== "icon") return;
e.stopPropagation();
onToggleExpandState();
};
const renderFilesCount = () => {
const filesCount = getFilesCountInFolder(
folder,
@ -143,53 +160,40 @@ const Folder = ({
return <span className="ffs-files-count">{filesCount}</span>;
};
const isFocused = folder.path == focusedFolder?.path;
const isExpanded = isRoot || expandedFolderPaths.includes(folder.path);
const getFolderClassName = (): string => {
const isFocused = folder.path == focusedFolder?.path;
const folderClassNames = ["ffs-folder"];
if (
isFocused &&
(!focusedFile || focusedFile.parent?.path !== folder.path)
) {
folderClassNames.push("ffs-focused-folder");
} else if (isFocused) {
folderClassNames.push("ffs-focused-folder-with-focused-file");
}
if (isRoot) {
folderClassNames.push("ffs-root-folder");
}
const isFocusedFileInFolder = focusedFile?.parent?.path === folder.path;
const folderClassNames = ["ffs-folder", isRoot && "ffs-root-folder"];
if (isFocused && (!focusedFile || !isFocusedFileInFolder)) {
folderClassNames.push("ffs-focused-folder");
} else if (isFocused) {
folderClassNames.push("ffs-focused-folder-with-focused-file");
}
return folderClassNames.filter(Boolean).join(" ");
};
const maybeRenderExpandIcon = () => {
const isExpanded = isRoot || expandedFolderPaths.includes(folder.path);
if (!hasFolderChildren(folder) || isRoot) return null;
return isExpanded ? <ArrowDownIcon /> : <ArrowRightIcon />;
};
return (
<div
className={folderClassNames.join(" ")}
className={getFolderClassName()}
onClick={() => setFocusedFolder(folder)}
onContextMenu={onShowContextMenu}
>
<div
className="ffs-folder-pane-left-sectionn"
onClick={(e) => {
if (expandFolderByClickingOn == "folder") {
e.stopPropagation();
if (focusedFolder?.path !== folder.path) {
setFocusedFolder(folder);
} else {
onToggleExpandState();
}
}
}}
onClick={onClickFolder}
>
<span
className="ffs-folder-arrow-icon-wrapper"
onClick={(e) => {
if (expandFolderByClickingOn == "icon") {
e.stopPropagation();
onToggleExpandState();
}
}}
onClick={onClickExpandIcon}
>
{hasFolderChildren(folder) &&
!isRoot &&
(isExpanded ? <ArrowDownIcon /> : <ArrowRightIcon />)}
{maybeRenderExpandIcon()}
</span>
{showFolderIcon && <FolderIcon />}
{renderEditableName()}