refactor SortingOptions to outer list item

django-cms · Sep 23, 2024 · ac050a5 · ac050a5
1 parent bbd8c1d
commit ac050a5
Showing 1 changed file with 21 additions and 23 deletions.
diff --git 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 (
-		<ul ref={ref} role="combobox" aria-expanded="false">
-			<li onClick={() => changeSorting('')} className={isActive('')}><span>{gettext("Unsorted")}</span></li>
-			<li onClick={() => changeSorting('name_asc')} className={isActive('name_asc')}><SortDescIcon /><span>{gettext("Name")}</span></li>
-			<li onClick={() => changeSorting('name_desc')} className={isActive('name_desc')}><SortAscIcon /><span>{gettext("Name")}</span></li>
-			<li onClick={() => changeSorting('date_asc')} className={isActive('date_asc')}><SortDescIcon /><span>{gettext("Date")}</span></li>
-			<li onClick={() => changeSorting('date_desc')} className={isActive('date_desc')}><SortAscIcon /><span>{gettext("Date")}</span></li>
-			<li onClick={() => changeSorting('size_asc')} className={isActive('size_asc')}><SortDescIcon /><span>{gettext("Size")}</span></li>
-			<li onClick={() => changeSorting('size_desc')} className={isActive('size_desc')}><SortAscIcon /><span>{gettext("Size")}</span></li>
-			<li onClick={() => changeSorting('type_asc')} className={isActive('type_asc')}><SortDescIcon /><span>{gettext("Type")}</span></li>
-			<li onClick={() => changeSorting('type_desc')} className={isActive('type_desc')}><SortAscIcon /><span>{gettext("Type")}</span></li>
-		</ul>
+		<li className="sorting-dropdown" onClick={toggleSorting} aria-haspopup="true" data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Change sorting order")}>
+			<SortingIcon/>
+			<ul ref={ref} role="combobox" aria-expanded="false">
+				<li onClick={() => changeSorting('')} className={isActive('')}><span>{gettext("Unsorted")}</span></li>
+				<li onClick={() => changeSorting('name_asc')} className={isActive('name_asc')}>
+					<SortDescIcon/><span>{gettext("Name")}</span></li>
+				<li onClick={() => changeSorting('name_desc')} className={isActive('name_desc')}><SortAscIcon /><span>{gettext("Name")}</span></li>
+				<li onClick={() => changeSorting('date_asc')} className={isActive('date_asc')}><SortDescIcon /><span>{gettext("Date")}</span></li>
+				<li onClick={() => changeSorting('date_desc')} className={isActive('date_desc')}><SortAscIcon /><span>{gettext("Date")}</span></li>
+				<li onClick={() => changeSorting('size_asc')} className={isActive('size_asc')}><SortDescIcon /><span>{gettext("Size")}</span></li>
+				<li onClick={() => changeSorting('size_desc')} className={isActive('size_desc')}><SortAscIcon /><span>{gettext("Size")}</span></li>
+				<li onClick={() => changeSorting('type_asc')} className={isActive('type_asc')}><SortDescIcon /><span>{gettext("Type")}</span></li>
+				<li onClick={() => changeSorting('type_desc')} className={isActive('type_desc')}><SortAscIcon /><span>{gettext("Type")}</span></li>
+			</ul>
+		</li>
 	)
-});
+}
 
 
 
 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) => {
 				<li className={isActive('mosaic')} onClick={() => setLayout('mosaic')} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Mosaic view")}><MosaicIcon /></li>
 				<li className={isActive('list')} onClick={() => setLayout('list')} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("List view")}><ListIcon /></li>
 				<li className={isActive('columns')} onClick={() => setLayout('columns')} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Columns view")}><ColumnsIcon /></li>
-				<li className="sorting-dropdown" onClick={() => sortingRef.current.toggleSorting()} aria-haspopup="true" data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Change sorting order")}>
-					<SortingIcon />
-					<SortingOptions ref={sortingRef} columnRefs={columnRefs} />
-				</li>
+				<SortingOptionsItem columnRefs={columnRefs} />
 				<li className={numSelectedInodes ? null : "disabled"} onClick={cutInodes} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Cut selected to clipboard")}><CutIcon /></li>
 				{settings.is_trash ? (<>
 					<li className={numSelectedInodes ? null : "disabled"} onClick={undoDiscardInodes} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Undo discarding files/folders")}><UndoIcon /></li>