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: use hook to render file name to simplify logic in File Component

Browse source
This commit is contained in:
Xu Quan 2025-03-06 15:22:55 +08:00
parent e54bffd2de
commit b5ca949f55
2 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/File.tsx
View file

@ -6,11 +6,11 @@ import { FileTreeStore } from "src/store";
import FolderFileSplitterPlugin from "src/main";
import { FolderListModal } from "./FolderListModal";
import { useShowFileDetail } from "src/hooks/useSettingsHandler";
import useRenderEditableName from "src/hooks/useRenderEditableName";
import FileDetail from "./FileDetail";
import useDraggable, { getDraggingStyles } from "src/hooks/useDraggable";
import { FFS_DRAG_FILES_TYPE } from "src/assets/constants";
import { isAbstractFileIncluded } from "src/utils";
import useRenderFileName from "src/hooks/useRenderFileName";
type Props = {
useFileTreeStore: UseBoundStore<StoreApi<FileTreeStore>>;
@ -75,17 +75,8 @@ const File = ({
plugin.settings.showFileDetail
);
const onSaveName = async (name: string) => {
const newPath = file.path.replace(file.basename, name);
await plugin.app.vault.rename(file, newPath);
};
const getClassNames = (isEditing: boolean) => {
return "ffs-file-name" + (isEditing ? " ffs-file-name-edit-mode" : "");
};
const { renderEditableName, selectFileNameText, onBeginEdit } =
useRenderEditableName(file.basename, onSaveName, getClassNames);
const { renderFileName, selectFileNameText, onBeginEdit } =
useRenderFileName(file, plugin);
const onShowContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
e.preventDefault();
@ -235,7 +226,7 @@ const File = ({
style={getDraggingStyles(getIsDragging())}
>
<div className="ffs-file-content">
{renderEditableName()}
{renderFileName()}
{maybeRenderFileDetail()}
</div>
</div>

32
src/hooks/useRenderFileName.tsx Normal file
View file

@ -0,0 +1,32 @@
import { TFile } from "obsidian";
import FolderFileSplitterPlugin from "src/main";
import useRenderEditableName from "src/hooks/useRenderEditableName";
const useRenderFileName = (
file: TFile,
plugin: FolderFileSplitterPlugin,
) => {
const getClassNames = (isEditing: boolean) => {
return "ffs-file-name" + (isEditing ? " ffs-file-name-edit-mode" : "");
};
const onSaveName = async (name: string) => {
const newPath = file.path.replace(file.name, name);
await plugin.app.vault.rename(file, newPath);
};
const {
renderEditableName: renderFileName,
selectFileNameText,
onBeginEdit,
} = useRenderEditableName(file.basename, onSaveName, getClassNames);
return {
renderFileName,
selectFileNameText,
onBeginEdit,
};
};
export default useRenderFileName;