Merge branch '21448-menu-reorder' into 21224-project-details

[arvados.git] / services / workbench2 / src / components / multiselect-toolbar / ms-toolbar-overflow-wrapper.tsx

diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
index ee88a1efaec156f7787d1cfc8771fece772ba1c5..5c1c433712a718230b2476604e90bd31be49ff5e 100644 (file)
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
@@ -24,14 +24,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     toolbarWrapper: {
         display: 'flex',
         overflow: 'hidden',
-        padding: '0 20px',
+        padding: '0 0px 0 20px',
         width: '100%',
     },
     overflowStyle: {
         order: 99,
         position: 'sticky',
         right: '-2rem',
-        backgroundColor: 'white',
+        width: 0,
     },
 });
 
@@ -44,12 +44,15 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
     const { classes, children, menuLength } = props;
     const lastEntryId = (children[menuLength - 1] as any).props['data-targetid'];
     const navRef = useRef<any>(null);
-    const [visibilityMap, setVisibilityMap] = useState({});
-
+    const [visibilityMap, setVisibilityMap] = useState<Record<string, boolean>>({});
+    const [numHidden, setNumHidden] = useState(() => findNumHidden(visibilityMap));
+    const prevNumHidden = useRef(numHidden);
+    
     const handleIntersection = (entries) => {
-        const updatedEntries = {};
+        const updatedEntries: Record<string, boolean> = {};
         entries.forEach((entry) => {
-            const targetid = entry.target.dataset.targetid;
+            const targetid = entry.target.dataset.targetid as string;
+            //if true, the element is visible
             if (entry.isIntersecting) {
                 updatedEntries[targetid] = true;
             } else {
@@ -58,18 +61,32 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
         });
 
         setVisibilityMap((prev) => ({
-                ...prev,
-                ...updatedEntries,
-                [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
-            })
-        );
+            ...prev,
+            ...updatedEntries,
+            [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
+        }));
     };
 
+    //ensures that the last element is always visible if the second to last is visible
+    useEffect(() => {
+        if ((prevNumHidden.current > 1 || prevNumHidden.current === 0) && numHidden === 1) {
+            setVisibilityMap((prev) => ({
+                ...prev,
+                [lastEntryId]: true,
+            }));
+        }
+        prevNumHidden.current = numHidden;
+    }, [numHidden, lastEntryId]);
+
+    useEffect(() => {
+        setNumHidden(findNumHidden(visibilityMap));
+    }, [visibilityMap]);
+
     useEffect((): any => {
-        setVisibilityMap({})
+        setVisibilityMap({});
         const observer = new IntersectionObserver(handleIntersection, {
             root: navRef.current,
-            rootMargin: '0px -20px 0px 0px',
+            rootMargin: '0px -30px 0px 0px',
             threshold: 1,
         });
         // We are adding observers to child elements of the container div
@@ -84,12 +101,12 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
         return () => {
             observer.disconnect();
         };
-        // eslint-disable-next-line 
+        // eslint-disable-next-line
     }, [menuLength]);
 
-    const numHidden = (visMap: {}) => {
+    function findNumHidden(visMap: {}) {
         return Object.values(visMap).filter((x) => x === false).length;
-    };
+    }
 
     return (
         <div
@@ -104,12 +121,12 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
                     }),
                 });
             })}
-            {numHidden(visibilityMap) >= 2 && (
+            {numHidden >= 2 && (
                 <OverflowMenu
                     visibilityMap={visibilityMap}
                     className={classes.overflowStyle}
                 >
-                    {children}
+                    {children.filter((child) => !child.props['data-targetid'].includes("Divider"))}
                 </OverflowMenu>
             )}
         </div>