diff --git a/src/SettingTab.tsx b/src/SettingTab.tsx index 92292d2..63315e1 100644 --- a/src/SettingTab.tsx +++ b/src/SettingTab.tsx @@ -136,7 +136,6 @@ export class SettingTab extends PluginSettingTab { initFolderAndFileBehaviorSettings() { this.createHeader2(this.headersCopy.folderAndFileBehavior); - this._initDropdownSetting("expandFolderByClickingOn"); this._initToggleSetting("hideRootFolder"); this._initToggleSetting("showFolderHierarchyLines"); this._initToggleSetting("openDestinationFolderAfterMove"); diff --git a/src/components/ExpandIcon.tsx b/src/components/ExpandIcon.tsx index 5adbcb7..cc2fe26 100644 --- a/src/components/ExpandIcon.tsx +++ b/src/components/ExpandIcon.tsx @@ -6,9 +6,8 @@ import { ChevronRight } from "src/assets/icons"; type Props = { isExpanded: boolean; hideIcon: boolean; - onClickExpandIcon: (e: React.MouseEvent) => void; }; -const ExpandIcon = ({ isExpanded, hideIcon, onClickExpandIcon }: Props) => { +const ExpandIcon = ({ isExpanded, hideIcon }: Props) => { let content: ReactNode; if (hideIcon) { content = null; @@ -23,7 +22,6 @@ const ExpandIcon = ({ isExpanded, hideIcon, onClickExpandIcon }: Props) => { className={classNames("tree-item-icon collapse-icon", { "is-collapsed": !isExpanded, })} - onClick={onClickExpandIcon} > {content} diff --git a/src/components/Folder/Content.tsx b/src/components/Folder/Content.tsx index ccdf57a..abfaaa5 100644 --- a/src/components/Folder/Content.tsx +++ b/src/components/Folder/Content.tsx @@ -4,10 +4,7 @@ import { useEffect, useRef, useState } from "react"; import { ExplorerStore } from "src/store"; import { FolderListModal } from "../FolderListModal"; -import { - useShowFolderIcon, - useExpandFolderByClickingOnElement, -} from "src/hooks/useSettingsHandler"; +import { useShowFolderIcon } from "src/hooks/useSettingsHandler"; import FilesCount from "./FilesCount"; import useRenderEditableName from "src/hooks/useRenderEditableName"; import { FOLDER_OPERATION_COPY } from "src/locales"; @@ -38,7 +35,7 @@ const FolderContent = ({ folder, onToggleExpandState }: Props) => { renameFolder, latestCreatedFolder, latestFolderCreatedTime, - getNameOfFolder + getNameOfFolder, } = useExplorerStore( useShallow((store: ExplorerStore) => ({ focusedFolder: store.focusedFolder, @@ -53,7 +50,7 @@ const FolderContent = ({ folder, onToggleExpandState }: Props) => { renameFolder: store.renameFolder, latestCreatedFolder: store.latestCreatedFolder, latestFolderCreatedTime: store.latestFolderCreatedTime, - getNameOfFolder: store.getNameOfFolder + getNameOfFolder: store.getNameOfFolder, })) ); @@ -62,9 +59,7 @@ const FolderContent = ({ folder, onToggleExpandState }: Props) => { const { settings } = plugin; const { showFolderIcon } = useShowFolderIcon(settings.showFolderIcon); - const { expandFolderByClickingOn } = useExpandFolderByClickingOnElement( - settings.expandFolderByClickingOn - ); + const isFocused = folder.path == focusedFolder?.path; const onSaveName = (name: string) => renameFolder(folder, name); @@ -210,15 +205,6 @@ const FolderContent = ({ folder, onToggleExpandState }: Props) => { menu.showAtPosition({ x: e.clientX, y: e.clientY }); }; - const onClickFolderName = (e: React.MouseEvent): void => { - e.stopPropagation(); - if (focusedFolder?.path !== folder.path) { - setFocusedFolder(folder); - } else if (expandFolderByClickingOn === "folder") { - onToggleExpandState(); - } - }; - const maybeRenderFolderIcon = () => { if (!showFolderIcon) return null; const className = classNames("ffs__folder-icon", { @@ -237,11 +223,7 @@ const FolderContent = ({ folder, onToggleExpandState }: Props) => { }; const renderTitleContent = () => ( -
+
{maybeRenderFolderIcon()} {renderFolderName()} @@ -254,7 +236,6 @@ const FolderContent = ({ folder, onToggleExpandState }: Props) => { onContextMenu={onShowContextMenu} onClick={(e) => { if (isFocused) { - e.stopPropagation(); folderRef.current?.focus(); setIsFocusing(true); } diff --git a/src/components/Folder/ExpandIcon.tsx b/src/components/Folder/ExpandIcon.tsx index dbc7190..1e00bfb 100644 --- a/src/components/Folder/ExpandIcon.tsx +++ b/src/components/Folder/ExpandIcon.tsx @@ -2,56 +2,28 @@ import { TFolder } from "obsidian"; import { useShallow } from "zustand/react/shallow"; import { ExplorerStore } from "src/store"; -import { useExpandFolderByClickingOnElement } from "src/hooks/useSettingsHandler"; import { useExplorer } from "src/hooks/useExplorer"; import ExpandIcon from "../ExpandIcon"; -import { uniq } from "src/utils"; type Props = { folder: TFolder; }; const FolderExpandIcon = ({ folder }: Props) => { - const { useExplorerStore, plugin } = useExplorer(); - const { settings } = plugin; + const { useExplorerStore } = useExplorer(); - const { - hasFolderChildren, - expandedFolderPaths, - changeExpandedFolderPaths, - } = useExplorerStore( + const { hasFolderChildren, expandedFolderPaths } = useExplorerStore( useShallow((store: ExplorerStore) => ({ hasFolderChildren: store.hasFolderChildren, expandedFolderPaths: store.expandedFolderPaths, - changeExpandedFolderPaths: store.changeExpandedFolderPaths, })) ); - const { expandFolderByClickingOn } = useExpandFolderByClickingOnElement( - settings.expandFolderByClickingOn - ); - const isFolderExpanded = expandedFolderPaths.includes(folder.path); - const onToggleExpandState = (): void => { - if (hasFolderChildren(folder)) { - const folderPaths = isFolderExpanded - ? expandedFolderPaths.filter((path) => path !== folder.path) - : uniq([...expandedFolderPaths, folder.path]); - changeExpandedFolderPaths(folderPaths); - } - }; - - const onClickExpandIcon = (e: React.MouseEvent): void => { - if (expandFolderByClickingOn !== "icon") return; - e.stopPropagation(); - onToggleExpandState(); - }; - return ( ); }; diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx index eda9c4d..4825cab 100644 --- a/src/components/Folder/index.tsx +++ b/src/components/Folder/index.tsx @@ -140,7 +140,10 @@ const Folder = ({
setFocusedFolder(folder)} + onClick={() => { + onToggleExpandState(); + setFocusedFolder(folder); + }} style={getIndentStyle()} data-tooltip-position="right" aria-label={getAriaLabel()} diff --git a/src/components/Tag/Content.tsx b/src/components/Tag/Content.tsx index 43c39e0..56d4bd9 100644 --- a/src/components/Tag/Content.tsx +++ b/src/components/Tag/Content.tsx @@ -132,7 +132,6 @@ const TagContent = ({ tag }: Props) => { onContextMenu={onShowContextMenu} onClick={(e) => { if (isFocused) { - e.stopPropagation(); tagRef.current?.focus(); setIsFocusing(true); } diff --git a/src/components/Tag/ExpandIcon.tsx b/src/components/Tag/ExpandIcon.tsx index 864a3d5..fef3ccd 100644 --- a/src/components/Tag/ExpandIcon.tsx +++ b/src/components/Tag/ExpandIcon.tsx @@ -1,54 +1,29 @@ import { useShallow } from "zustand/react/shallow"; import { ExplorerStore } from "src/store"; -import { useExpandFolderByClickingOnElement } from "src/hooks/useSettingsHandler"; import { useExplorer } from "src/hooks/useExplorer"; import ExpandIcon from "../ExpandIcon"; import { TagNode } from "src/store/tag"; -import { uniq } from "src/utils"; type Props = { tag: TagNode; }; const TagExpandIcon = ({ tag }: Props) => { - const { useExplorerStore, plugin } = useExplorer(); - const { settings } = plugin; + const { useExplorerStore } = useExplorer(); - const { hasTagChildren, expandedTagPaths, changeExpandedTagPaths } = - useExplorerStore( - useShallow((store: ExplorerStore) => ({ - hasTagChildren: store.hasTagChildren, - expandedTagPaths: store.expandedTagPaths, - changeExpandedTagPaths: store.changeExpandedTagPaths, - })) - ); - - const { expandFolderByClickingOn } = useExpandFolderByClickingOnElement( - settings.expandFolderByClickingOn + const { hasTagChildren, expandedTagPaths } = useExplorerStore( + useShallow((store: ExplorerStore) => ({ + hasTagChildren: store.hasTagChildren, + expandedTagPaths: store.expandedTagPaths, + })) ); const isTagExpanded = expandedTagPaths.includes(tag.fullPath); - const onToggleExpandState = (): void => { - if (hasTagChildren(tag)) { - const tagPaths = isTagExpanded - ? expandedTagPaths.filter((path) => path !== tag.fullPath) - : uniq([...expandedTagPaths, tag.fullPath]); - changeExpandedTagPaths(tagPaths); - } - }; - - const onClickExpandIcon = (e: React.MouseEvent): void => { - if (expandFolderByClickingOn !== "icon") return; - e.stopPropagation(); - onToggleExpandState(); - }; - return ( ); }; diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index 4d63ea3..115ab8f 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -27,6 +27,9 @@ const Tag = ({ focusedTag, getFilesInTag, getTagsByParent, + expandedTagPaths, + collapseTag, + expandTag, } = useExplorerStore( useShallow((store: ExplorerStore) => ({ hasTagChildren: store.hasTagChildren, @@ -34,8 +37,21 @@ const Tag = ({ focusedTag: store.focusedTag, getTagsByParent: store.getTagsByParent, getFilesInTag: store.getFilesInTag, + expandedTagPaths: store.expandedTagPaths, + collapseTag: store.collapseTag, + expandTag: store.expandTag, })) ); + + const onToggleExpandState = (): void => { + const isFolderExpanded = expandedTagPaths.includes(tag.fullPath); + if (isFolderExpanded) { + collapseTag(tag); + } else { + expandTag(tag); + } + }; + const isFocused = tag.fullPath == focusedTag?.fullPath; const getAriaLabel = () => { @@ -75,7 +91,10 @@ const Tag = ({
setFocusedTag(tag)} + onClick={() => { + setFocusedTag(tag); + onToggleExpandState(); + }} data-tooltip-position="right" aria-label={getAriaLabel()} > diff --git a/src/hooks/useSettingsHandler/index.tsx b/src/hooks/useSettingsHandler/index.tsx index b3b4b5d..5cf9977 100644 --- a/src/hooks/useSettingsHandler/index.tsx +++ b/src/hooks/useSettingsHandler/index.tsx @@ -1,5 +1,4 @@ import { useShowFolderIcon } from "./useShowFolderIcon"; -import { useExpandFolderByClickingOnElement } from "./useExpandFolderByClickingOnEle"; import { useIncludeSubfolderFiles } from "./useIncludeSubfolderFiles"; import { useShowFileDetail } from "./useShowFileDetail"; import { useShowHierarchyLines } from "./useShowHierarchyLines"; @@ -22,7 +21,6 @@ import { useShowTagIcon } from "./useShowTagIcon"; export { useShowFolderIcon, - useExpandFolderByClickingOnElement, useIncludeSubfolderFiles, useShowFileDetail, useShowHierarchyLines, diff --git a/src/hooks/useSettingsHandler/useExpandFolderByClickingOnEle.tsx b/src/hooks/useSettingsHandler/useExpandFolderByClickingOnEle.tsx deleted file mode 100644 index 17b516a..0000000 --- a/src/hooks/useSettingsHandler/useExpandFolderByClickingOnEle.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useState } from "react"; - -import { ExpandFolderByClickingOnElement } from "src/settings"; -import { useWatchSettingsChange } from "./useWatchSettingsChange"; - -export const useExpandFolderByClickingOnElement = ( - defaultClickingOnElement: ExpandFolderByClickingOnElement -): { expandFolderByClickingOn: ExpandFolderByClickingOnElement } => { - const [expandFolderByClickingOn, setExpandFolderByClickingOn] = useState( - defaultClickingOnElement - ); - - const onChangeShowFolderIcon = (event: CustomEvent) => { - const { changeKey, changeValue } = event.detail; - if (changeKey == "expandFolderByClickingOn") { - setExpandFolderByClickingOn(changeValue); - } - }; - - useWatchSettingsChange(onChangeShowFolderIcon); - - return { expandFolderByClickingOn }; -}; diff --git a/src/locales/settings.ts b/src/locales/settings.ts index 9a4844c..08cc40e 100644 --- a/src/locales/settings.ts +++ b/src/locales/settings.ts @@ -123,20 +123,6 @@ export const EN_SETTINGS: SettingsLocaleResource = { name: "Auto-hide action bar", desc: "When enabled, the top action bar will be hidden by default and only appear when hovering over it.", }, - expandFolderByClickingOn: { - name: "Expand folder/tag on click", - desc: "Choose whether to expand a folder/tag by clicking on the toggle icon (▶/▼) or the folder/tag name.", - options: [ - { - value: EXPAND_FOLDER_BY_CLICKING_ELEMENT.ICON, - text: "Toggle Icon", - }, - { - value: EXPAND_FOLDER_BY_CLICKING_ELEMENT.FOLDER, - text: "Folder/Tag Name", - }, - ], - }, includeSubfolderFiles: { name: "Include subfolder files", desc: "When enabled, files inside subfolders will be included in the file list and their count will be reflected in the folder’s file count.", @@ -293,20 +279,6 @@ export const ZH_SETTINGS: SettingsLocaleResource = { name: "自动隐藏操作栏", desc: "启用后，顶部操作栏默认隐藏，鼠标悬停时才会显示。", }, - expandFolderByClickingOn: { - name: "点击展开文件夹/标签", - desc: "选择通过点击切换图标（▶/▼）或文件夹/标签名称来展开文件夹/标签。", - options: [ - { - value: EXPAND_FOLDER_BY_CLICKING_ELEMENT.ICON, - text: "切换图标", - }, - { - value: EXPAND_FOLDER_BY_CLICKING_ELEMENT.FOLDER, - text: "文件夹/标签名称", - }, - ], - }, includeSubfolderFiles: { name: "包含子文件夹文件", desc: "启用后，子文件夹中的文件将会显示在文件列表中，并计入所属文件夹的文件数量。", diff --git a/src/main.ts b/src/main.ts index c465f53..78fbded 100644 --- a/src/main.ts +++ b/src/main.ts @@ -38,6 +38,7 @@ export default class FolderFileSplitterPlugin extends Plugin { ); await this.loadSettings(); + console.log("settings", this.settings.expandFolderByClickingOn) this.addCommand({ id: "open-file-tree-view", diff --git a/src/settings.ts b/src/settings.ts index 3d4456b..f753787 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -1,13 +1,5 @@ type ValueOf = T[keyof T]; -export const EXPAND_FOLDER_BY_CLICKING_ELEMENT = { - ICON: "icon", - FOLDER: "folder", -} as const; -export type ExpandFolderByClickingOnElement = ValueOf< - typeof EXPAND_FOLDER_BY_CLICKING_ELEMENT ->; - export const LAYOUT_MODE = { HORIZONTAL_SPLIT: "Horizontal split", VERTICAL_SPLIT: "Vertical split", @@ -40,7 +32,6 @@ export type FolderNoteMissingBehavior = ValueOf< export const DEFAULT_FILE_CREATION_DATE_FORMAT = "YYYY/MM/DD"; export interface FolderFileSplitterPluginSettings { - expandFolderByClickingOn: ExpandFolderByClickingOnElement; includeSubfolderFiles: boolean; showFolderHierarchyLines: boolean; showFolderIcon: boolean; @@ -70,7 +61,6 @@ export interface FolderFileSplitterPluginSettings { } export const DEFAULT_SETTINGS: FolderFileSplitterPluginSettings = { - expandFolderByClickingOn: EXPAND_FOLDER_BY_CLICKING_ELEMENT.FOLDER, includeSubfolderFiles: false, showFolderHierarchyLines: false, showFolderIcon: true, diff --git a/src/store/folder.ts b/src/store/folder.ts index 796e034..1ad0fbd 100644 --- a/src/store/folder.ts +++ b/src/store/folder.ts @@ -95,8 +95,8 @@ export type FolderExplorerStore = { ) => Promise; moveFolder: (folder: TFolder, newPath: string) => Promise; renameFolder: (folder: TFolder, newName: string) => Promise; - expandFolder: (folder: TFolder) => void; - collapseFolder: (folder: TFolder) => void; + expandFolder: (folder: TFolder) => Promise; + collapseFolder: (folder: TFolder) => Promise; updateFolderPinState: (oldPath: string, newPath: string) => Promise; getNameOfFolder: (folder: TFolder) => string; }; @@ -609,25 +609,25 @@ export const createFolderExplorerStore = const newPath = folder.path.replace(folder.name, newName); await moveFolder(folder, newPath); }, - expandFolder: (folder: TFolder) => { + expandFolder: async (folder: TFolder) => { const { changeExpandedFolderPaths, expandedFolderPaths, hasFolderChildren, } = get(); if (!hasFolderChildren(folder) || folder.isRoot()) return; - changeExpandedFolderPaths( + await changeExpandedFolderPaths( uniq([...expandedFolderPaths, folder.path]) ); }, - collapseFolder: (folder: TFolder) => { + collapseFolder: async(folder: TFolder) => { const { changeExpandedFolderPaths, hasFolderChildren, expandedFolderPaths, } = get(); if (!hasFolderChildren(folder) || folder.isRoot()) return; - changeExpandedFolderPaths( + await changeExpandedFolderPaths( expandedFolderPaths.filter((path) => path !== folder.path) ); }, diff --git a/src/store/tag.ts b/src/store/tag.ts index 12f2bb4..0d1ee5d 100644 --- a/src/store/tag.ts +++ b/src/store/tag.ts @@ -8,6 +8,7 @@ import { FFS_FOCUSED_TAG_PATH_KEY, FFS_PINNED_TAG_PATHS_KEY, } from "src/assets/constants"; +import { uniq } from "src/utils"; type FolderPath = string; type ChildrenPaths = string[]; @@ -50,6 +51,8 @@ export type TagExplorerStore = { changeExpandedTagPaths: (paths: string[]) => Promise; restoreExpandedTagPaths: () => Promise; + expandTag: (tag: TagNode) => Promise; + collapseTag: (tag: TagNode) => Promise; _setFocusedTag: (tag: TagNode | null) => void; setFocusedTag: (folder: TagNode | null) => Promise; @@ -230,6 +233,22 @@ export const createTagExplorerStore = ); }, + expandTag: async (tag: TagNode) => { + const { changeExpandedTagPaths, expandedTagPaths, hasTagChildren } = + get(); + if (!hasTagChildren(tag)) return; + await changeExpandedTagPaths(uniq([...expandedTagPaths, tag.fullPath])); + }, + + collapseTag: async (tag: TagNode) => { + const { changeExpandedTagPaths, hasTagChildren, expandedTagPaths } = + get(); + if (!hasTagChildren(tag)) return; + await changeExpandedTagPaths( + expandedTagPaths.filter((path) => path !== tag.fullPath) + ); + }, + restoreExpandedTagPaths: async () => { const { getDataFromLocalStorage, hasTagChildren, tagTree } = get(); const lastExpandedTagPaths = getDataFromLocalStorage(