fix: allow tag to deselect

This commit is contained in:
Xu Quan 2025-07-13 18:20:26 +08:00
parent 476d6403f4
commit 2686818e95
4 changed files with 40 additions and 16 deletions

View file

@ -119,8 +119,8 @@ const FolderContent = ({ folder }: Props) => {
<TogglableContainer
nameRef={nameRef}
isFocused={isFocused}
onFocus={async () => await changeFocusedFolder(folder)}
onToggle={() => toggleFolder(folder)}
onSelect={async () => await changeFocusedFolder(folder)}
onToggleExpand={() => toggleFolder(folder)}
className="ffs__folder"
onContextMenu={onShowContextMenu}
>

View file

@ -31,6 +31,7 @@ const TagContent = ({ tag }: Props) => {
unpinTag,
changeFocusedTag,
toggleTag,
deselectFocusedTag,
} = useExplorerStore(
useShallow((store) => ({
focusedTag: store.focusedTag,
@ -39,13 +40,14 @@ const TagContent = ({ tag }: Props) => {
unpinTag: store.unpinTag,
changeFocusedTag: store.changeFocusedTag,
toggleTag: store.toggleTag,
deselectFocusedTag: store.deselectFocusedTag,
}))
);
const nameRef = useRef<NameRef>(null);
const contentRef = useRef<HTMLDivElement | null>(null);
const isFocused = tag.fullPath == focusedTag?.fullPath;
const isFocused = tag.fullPath === focusedTag?.fullPath;
const addPinInMenu = (menu: Menu) => {
const isPinned = isTagPinned(tag);
@ -81,8 +83,9 @@ const TagContent = ({ tag }: Props) => {
<TogglableContainer
nameRef={nameRef}
isFocused={isFocused}
onFocus={async () => await changeFocusedTag(tag)}
onToggle={() => toggleTag(tag)}
onSelect={() => changeFocusedTag(tag)}
onDeselect={deselectFocusedTag}
onToggleExpand={() => toggleTag(tag)}
className="ffs__tag"
onContextMenu={onShowContextMenu}
>

View file

@ -10,17 +10,19 @@ import ScrollInToViewContainer from "./ScrollInToViewContainer";
type Props = {
isFocused: boolean;
onFocus: AsyncNoop;
onToggle: Noop;
onSelect: AsyncNoop | Noop;
onToggleExpand: Noop;
nameRef: RefObject<NameRef | null>;
children: ReactNode;
onDeselect?: AsyncNoop | Noop;
} & HTMLAttributes<HTMLDivElement>;
const TogglableContainer = ({
nameRef,
isFocused,
onFocus,
onToggle,
onSelect,
onToggleExpand,
children,
onDeselect,
...props
}: Props) => {
const { plugin } = useExplorer();
@ -34,16 +36,22 @@ const TogglableContainer = ({
e.preventDefault();
if (!isFocused) {
await onFocus();
await onSelect();
} else if (onDeselect) {
onDeselect();
}
if (nameRef.current && !nameRef.current.isFocusing) {
nameRef.current.setIsFocusing(true);
if (nameRef.current) {
if (!nameRef.current.isFocusing) {
nameRef.current.setIsFocusing(true);
} else if (onDeselect) {
nameRef.current.setIsFocusing(false);
}
}
if (expandNodeByClick === EXPAND_NODE_ON_CLICK.LABEL) {
onToggle();
onToggleExpand();
} else if (expandNodeByClick === EXPAND_NODE_ON_CLICK.SELECTED_LABEL) {
if (nameRef.current?.isFocusing) {
onToggle();
onToggleExpand();
}
}
};

View file

@ -14,8 +14,11 @@ export interface FocusedTagSlice {
isFocusedTag: (tag: TagNode) => boolean;
setFocusedTagAndSave: (tag: TagNode | null) => void;
changeFocusedTag: (folder: TagNode | null) => Promise<void>;
changeFocusedTag: (folder: TagNode | null) => void;
restoreLastFocusedTag: () => void;
clearFocusedTag: () => void;
deselectFocusedTag: () => void;
}
export const createFocusedTagSlice =
@ -39,7 +42,7 @@ export const createFocusedTagSlice =
});
},
changeFocusedTag: async (tag: TagNode) => {
changeFocusedTag: (tag: TagNode) => {
const {
focusedFile,
changeToTagMode,
@ -69,4 +72,14 @@ export const createFocusedTagSlice =
validate: (tag) => Boolean(tag),
});
},
clearFocusedTag: async () => {
get().setFocusedTagAndSave(null);
},
deselectFocusedTag: () => {
const { clearFocusedTag, changeToAllMode } = get();
clearFocusedTag();
changeToAllMode();
},
});