Move onContextMenu to the Card body

The context menu handling is Card body specific and does not have to live in the app code.
cockpit-project · Feb 1, 2024 · 9a35053 · 9a35053
1 parent 8167c2d
commit 9a35053
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/app.jsx b/src/app.jsx
@@ -49,7 +49,6 @@ export const Application = () => {
     const [isGrid, setIsGrid] = useState(true);
     const [sortBy, setSortBy] = useState(localStorage.getItem("cockpit-navigator.sort") || "az");
     const [selected, setSelected] = useState([]);
-    const [selectedContext, setSelectedContext] = useState(null);
     const [showHidden, setShowHidden] = useState(localStorage.getItem("cockpit-navigator.showHiddenFiles") === "true");
     const [history, setHistory] = useState([]);
     const [historyIndex, setHistoryIndex] = useState(0);
@@ -122,11 +121,7 @@ export const Application = () => {
               setHistory={setHistory} history={history}
               historyIndex={historyIndex} setHistoryIndex={setHistoryIndex}
             />
-            <PageSection onContextMenu={() => {
-                setSelectedContext(null);
-                setSelected([{ name: sel }]);
-            }}
-            >
+            <PageSection>
                 <Sidebar isPanelRight hasGutter>
                     <SidebarContent>
                         <Card>
@@ -142,8 +137,7 @@ export const Application = () => {
                               currentDir={currentDir}
                               isGrid={isGrid} sortBy={sortBy}
                               selected={selected} setSelected={setSelected}
-                              selectedContext={selectedContext}
-                              setSelectedContext={setSelectedContext} setHistory={setHistory}
+                              setHistory={setHistory}
                               setHistoryIndex={setHistoryIndex} historyIndex={historyIndex}
                               loadingFiles={loadingFiles}
                               clipboard={clipboard}

diff --git a/src/navigator-card-body.jsx b/src/navigator-card-body.jsx
@@ -176,17 +176,16 @@ export const NavigatorCardBody = ({
     setHistory,
     setHistoryIndex,
     setSelected,
-    setSelectedContext,
     sortBy,
     loadingFiles,
     clipboard,
     setClipboard,
     addAlert,
     allFiles,
-    selectedContext,
     rootInfo,
 }) => {
     const [boxPerRow, setBoxPerRow] = useState(0);
+    const [selectedContext, setSelectedContext] = useState(null);
     const Dialogs = useDialogs();
     const sortedFiles = useMemo(() => {
         const compareFunc = compare(sortBy);
@@ -319,6 +318,12 @@ export const NavigatorCardBody = ({
         }
     };
 
+    const handleContextMenu = () => {
+        setSelectedContext(null);
+        const sel = path ? path[path.length - 1] : undefined;
+        setSelected([{ name: sel }]);
+    };
+
     const Item = ({ file }) => {
         const getFileType = (file) => {
             if (file.type === "dir") {
@@ -405,7 +410,11 @@ export const NavigatorCardBody = ({
         return (
             <>
                 {contextMenu}
-                <CardBody onClick={resetSelected} id="navigator-card-body">
+                <CardBody
+                  id="navigator-card-body"
+                  onClick={resetSelected}
+                  onContextMenu={handleContextMenu}
+                >
                     <Gallery id="folder-view">
                         {sortedFiles.map(file => <Item file={file} key={file.name} />)}
                     </Gallery>
@@ -422,6 +431,7 @@ export const NavigatorCardBody = ({
                   variant="compact"
                   columns={[_("Name")]}
                   rows={sortedFiles.map(file => ({ columns: [{ title: <Item file={file} key={file.name} /> }] }))}
+                  onContextMenu={handleContextMenu}
                 />
             </>
         );