diff --git a/client/finder/MenuBar.tsx b/client/finder/MenuBar.tsx
index f6f48b173..866daf451 100644
--- a/client/finder/MenuBar.tsx
+++ b/client/finder/MenuBar.tsx
@@ -22,7 +22,7 @@ import UploadIcon from 'icons/upload.svg';
const useSorting = () => useCookie('django-finder-sorting', '');
-const SortingOptions = forwardRef((props: any, forwardedRef) => {
+function SortingOptionsItem(props: any) {
const ref = useRef(null);
const [sorting, setSorting] = useSorting();
@@ -36,11 +36,9 @@ const SortingOptions = forwardRef((props: any, forwardedRef) => {
return () => window.removeEventListener('click', closeSorting);
}, []);
- useImperativeHandle(forwardedRef, () => ({
- toggleSorting: (selectedInodes) => {
- ref.current.setAttribute('aria-expanded', ref.current.ariaExpanded === 'true' ? 'false': 'true');
- },
- }));
+ function toggleSorting() {
+ ref.current.setAttribute('aria-expanded', ref.current.ariaExpanded === 'true' ? 'false': 'true');
+ }
function isActive(value) {
return sorting === value ? 'active' : null;
@@ -56,26 +54,29 @@ const SortingOptions = forwardRef((props: any, forwardedRef) => {
}
return (
-
- - changeSorting('')} className={isActive('')}>{gettext("Unsorted")}
- - changeSorting('name_asc')} className={isActive('name_asc')}>{gettext("Name")}
- - changeSorting('name_desc')} className={isActive('name_desc')}>{gettext("Name")}
- - changeSorting('date_asc')} className={isActive('date_asc')}>{gettext("Date")}
- - changeSorting('date_desc')} className={isActive('date_desc')}>{gettext("Date")}
- - changeSorting('size_asc')} className={isActive('size_asc')}>{gettext("Size")}
- - changeSorting('size_desc')} className={isActive('size_desc')}>{gettext("Size")}
- - changeSorting('type_asc')} className={isActive('type_asc')}>{gettext("Type")}
- - changeSorting('type_desc')} className={isActive('type_desc')}>{gettext("Type")}
-
+
+
+
+ - changeSorting('')} className={isActive('')}>{gettext("Unsorted")}
+ - changeSorting('name_asc')} className={isActive('name_asc')}>
+ {gettext("Name")}
+ - changeSorting('name_desc')} className={isActive('name_desc')}>{gettext("Name")}
+ - changeSorting('date_asc')} className={isActive('date_asc')}>{gettext("Date")}
+ - changeSorting('date_desc')} className={isActive('date_desc')}>{gettext("Date")}
+ - changeSorting('size_asc')} className={isActive('size_asc')}>{gettext("Size")}
+ - changeSorting('size_desc')} className={isActive('size_desc')}>{gettext("Size")}
+ - changeSorting('type_asc')} className={isActive('type_asc')}>{gettext("Type")}
+ - changeSorting('type_desc')} className={isActive('type_desc')}>{gettext("Type")}
+
+
)
-});
+}
export const MenuBar = forwardRef((props: any, forwardedRef) => {
const settings = useContext(FinderSettings);
const {currentFolderId, columnRefs, folderTabsRef, openUploader, downloadFiles, layout, setLayout, setSearchResult} = props;
- const sortingRef = useRef(null);
const [numSelectedInodes, setNumSelectedInodes] = useState(0);
const [numSelectedFiles, setNumSelectedFiles] = useState(0);
const [clipboard, setClipboard] = useClipboard();
@@ -302,10 +303,7 @@ export const MenuBar = forwardRef((props: any, forwardedRef) => {
setLayout('mosaic')} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Mosaic view")}>
setLayout('list')} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("List view")}>
setLayout('columns')} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Columns view")}>
- sortingRef.current.toggleSorting()} aria-haspopup="true" data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Change sorting order")}>
-
-
-
+
{settings.is_trash ? (<>