diff --git a/src/components/File/index.tsx b/src/components/File/index.tsx index 4852ffa..032dd73 100644 --- a/src/components/File/index.tsx +++ b/src/components/File/index.tsx @@ -7,18 +7,16 @@ import { FFS_DRAG_FILE } from "src/assets/constants"; import { useExplorer } from "src/hooks/useExplorer"; import FileContent, { FileProps } from "./Content"; +import { ITEM_INFO_COPY } from "src/locales"; +import dayjs from "dayjs"; type Props = FileProps & { onOpenFoldersPane: () => void; disableDrag?: boolean; }; -const File = ({ - file, - deleteFile, - disableDrag, - onOpenFoldersPane, -}: Props) => { - const { useExplorerStore } = useExplorer(); +const File = ({ file, deleteFile, disableDrag, onOpenFoldersPane }: Props) => { + const { useExplorerStore, plugin } = useExplorer(); + const { language } = plugin; const { selectFile } = useExplorerStore( useShallow((store: ExplorerStore) => ({ @@ -39,6 +37,19 @@ const File = ({ }; }, [onOpenFoldersPane]); + const getAriaLabel = () => { + const { fileModifiedTime, fileCreatedTime } = ITEM_INFO_COPY; + const { ctime, mtime } = file.stat; + const format = "YYYY-MM-DD HH:mm"; + + const modifiedInfo = + fileModifiedTime[language] + dayjs(mtime).format(format); + const createdInfo = + fileCreatedTime[language] + dayjs(ctime).format(format); + + return `${file.basename}\n${modifiedInfo}\n${createdInfo}`; + }; + return (
selectFile(file)} {...attributes} {...listeners} + data-tooltip-position="right" + aria-label={getAriaLabel()} >
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx index 52344e0..6805b81 100644 --- a/src/components/Folder/index.tsx +++ b/src/components/Folder/index.tsx @@ -8,6 +8,7 @@ import FolderContent, { FolderProps } from "./Content"; import { useExplorer } from "src/hooks/useExplorer"; import FolderExpandIcon from "./ExpandIcon"; import classNames from "classnames"; +import { ITEM_INFO_COPY, PUNCTUATION_COPY } from "src/locales"; type Props = FolderProps & { onOpenFilesPane: () => void; @@ -22,7 +23,7 @@ const Folder = ({ disableDrag = false, disableHoverIndent = false, }: Props) => { - const { useExplorerStore } = useExplorer(); + const { useExplorerStore, plugin } = useExplorer(); const { setFocusedFolder, @@ -31,6 +32,8 @@ const Folder = ({ expandedFolderPaths, focusedFolder, hasFolderChildren, + getFilesinFolder, + getFoldersByParent, } = useExplorerStore( useShallow((store: ExplorerStore) => ({ setFocusedFolder: store.setFocusedFolder, @@ -39,11 +42,14 @@ const Folder = ({ expandFolder: store.expandFolder, collapseFolder: store.collapseFolder, focusedFolder: store.focusedFolder, + getFilesinFolder: store.getFilesInFolder, + getFoldersByParent: store.getFoldersByParent, })) ); - const isFocused = folder.path == focusedFolder?.path; + const { language } = plugin; + const isFocused = folder.path == focusedFolder?.path; const isRoot = folder.isRoot(); const { @@ -97,6 +103,25 @@ const Folder = ({ return ; }; + const getAriaLabel = () => { + const filesCount = getFilesinFolder(folder).length; + const foldersCount = getFoldersByParent(folder).length; + const { filesCountInFolder, foldersCountInFolder } = ITEM_INFO_COPY; + + const filesCountInfo = + filesCount + + " " + + filesCountInFolder[language] + + (filesCount > 1 ? "s" : ""); + const foldersCountInfo = + foldersCount + + " " + + foldersCountInFolder[language] + + (foldersCount > 1 ? "s" : ""); + + return `${folder.name}\n${filesCountInfo}${PUNCTUATION_COPY.comma[language]}${foldersCountInfo}`; + }; + const folderLevel = isRoot ? 0 : folder.path.split("/").length - 1; return (
{maybeRenderExpandIcon()}
{ - const { useExplorerStore } = useExplorer(); + const { useExplorerStore, plugin } = useExplorer(); + const { language } = plugin; - const { hasTagChildren, setFocusedTag, focusedTag } = useExplorerStore( + const { + hasTagChildren, + setFocusedTag, + focusedTag, + getFilesInTag, + getTagsByParent, + } = useExplorerStore( useShallow((store: ExplorerStore) => ({ hasTagChildren: store.hasTagChildren, setFocusedTag: store.setFocusedTag, focusedTag: store.focusedTag, + getTagsByParent: store.getTagsByParent, + getFilesInTag: store.getFilesInTag, })) ); const isFocused = tag.fullPath == focusedTag?.fullPath; + const getAriaLabel = () => { + const filesCount = getFilesInTag(tag).length; + const tagsCount = getTagsByParent(tag.fullPath).length; + const { filesCountInTag, tagsCountInTag } = ITEM_INFO_COPY; + + const filesCountInfo = + filesCount + + " " + + filesCountInTag[language] + + (filesCount > 1 ? "s" : ""); + const tagsCountInfo = + tagsCount + + " " + + tagsCountInTag[language] + + (tagsCount > 1 ? "s" : ""); + + return `${tag.name}\n${filesCountInfo}${PUNCTUATION_COPY.comma[language]}${tagsCountInfo}`; + }; + const tagLevel = tag.fullPath.split("/").length - 1; return (
setFocusedTag(tag)} + data-tooltip-position="right" + aria-label={getAriaLabel()} > {!hideExpandIcon && } diff --git a/src/locales/index.ts b/src/locales/index.ts index 4347498..3e0c77e 100644 --- a/src/locales/index.ts +++ b/src/locales/index.ts @@ -147,3 +147,37 @@ export const FILE_SORT_RULES_COPY: Copy = { zh: "手动排序", }, }; + +export const PUNCTUATION_COPY: Copy = { + comma: { + en: ", ", + zh: "，", + }, +}; + +export const ITEM_INFO_COPY: Copy = { + filesCountInFolder: { + en: "file", + zh: "条笔记", + }, + foldersCountInFolder: { + en: "folder", + zh: "个文件夹", + }, + filesCountInTag: { + en: "file", + zh: "条笔记", + }, + tagsCountInTag: { + en: "tag", + zh: "个标签", + }, + fileModifiedTime: { + en: "Last modified at ", + zh: "最后修改于 ", + }, + fileCreatedTime: { + en: "Created at ", + zh: "创建于 ", + }, +};