Sorting on folders

This commit is contained in:
Elio Struyf
2024-11-29 15:41:50 +01:00
parent 5a45fdc94f
commit 1f6ea6ac20
2 changed files with 13 additions and 3 deletions

View File

@@ -47,7 +47,7 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
return (
<>
<li
className={`flex flex-col group relative text-[var(--vscode-sideBarTitle-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)] dark:shadow-none bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border border-[var(--frontmatter-border)] rounded`}
className={`flex flex-col group relative text-[var(--vscode-sideBarTitle-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)] shadow-md hover:shadow-xl dark:shadow-none bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border border-[var(--frontmatter-border)] rounded`}
>
<button
title={isContentFolder ? localize(LocalizationKey.dashboardMediaFolderItemContentDirectory) : localize(LocalizationKey.dashboardMediaFolderItemPublicDirectory)}

View File

@@ -8,6 +8,7 @@ import {
PagedItems,
SelectedMediaFolderAtom,
SettingsSelector,
SortingAtom,
ViewDataSelector
} from '../../state';
import { Spinner } from '../Common/Spinner';
@@ -30,6 +31,7 @@ import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
import { MediaItemPanel } from './MediaItemPanel';
import { FilesProvider } from '../../providers/FilesProvider';
import { SortOption } from '../../constants/SortOption';
export interface IMediaProps { }
@@ -42,6 +44,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
const folders = useRecoilValue(MediaFoldersAtom);
const loading = useRecoilValue(LoadingAtom);
const crntSorting = useRecoilValue(SortingAtom);
const [, setPagedItems] = useRecoilState(PagedItems);
const currentStaticFolder = useMemo(() => {
@@ -85,11 +88,18 @@ export const Media: React.FunctionComponent<IMediaProps> = (
currentStaticFolder &&
settings?.staticFolder !== STATIC_FOLDER_PLACEHOLDER.hexo.placeholder
) {
return folders.filter((f) => parseWinPath(f).includes(currentStaticFolder));
const allFolders = folders.filter((f) => parseWinPath(f).includes(currentStaticFolder));
if (crntSorting && crntSorting.id === SortOption.FileNameAsc) {
return allFolders.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
} else if (crntSorting && crntSorting.id === SortOption.FileNameDesc) {
return allFolders.sort((a, b) => b.localeCompare(a, undefined, { numeric: true }));
} else {
return allFolders;
}
}
return undefined;
}, [folders, viewData, currentStaticFolder, settings?.staticFolder]);
}, [folders, viewData, currentStaticFolder, settings?.staticFolder, crntSorting]);
const allMedia = useMemo(() => {
let mediaFiles: MediaInfo[] = Object.assign([], media);