services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useState, useRef, useEffect } from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { WithStyles } from '@mui/styles';
   8 import withStyles from '@mui/styles/withStyles';
   9 import classnames from 'classnames';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import { OverflowMenu, OverflowChild } from './ms-toolbar-overflow-menu';
  12
  13 type CssRules = 'visible' | 'inVisible' | 'toolbarWrapper' | 'overflowStyle';
  14
  15 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  16     visible: {
  17         order: 0,
  18         visibility: 'visible',
  19         opacity: 1,
  20     },
  21     inVisible: {
  22         order: 100,
  23         visibility: 'hidden',
  24         pointerEvents: 'none',
  25     },
  26     toolbarWrapper: {
  27         display: 'flex',
  28         overflow: 'hidden',
  29         padding: '0 0px 0 20px',
  30         width: '100%',
  31     },
  32     overflowStyle: {
  33         order: 99,
  34         position: 'sticky',
  35         right: '-2rem',
  36         width: 0,
  37     },
  38 });
  39
  40 type WrapperProps = {
  41     children: OverflowChild[];
  42     menuLength: number;
  43 };
  44
  45 export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperProps & WithStyles<CssRules>) => {
  46     const { classes, children, menuLength } = props;
  47     const lastEntryId = (children[menuLength - 1] as any).props['data-targetid'];
  48     const navRef = useRef<any>(null);
  49     const [visibilityMap, setVisibilityMap] = useState<Record<string, boolean>>({});
  50     const [numHidden, setNumHidden] = useState(() => findNumHidden(visibilityMap));
  51     const prevNumHidden = useRef(numHidden);
  52
  53     const handleIntersection = (entries) => {
  54         const updatedEntries: Record<string, boolean> = {};
  55         entries.forEach((entry) => {
  56             const targetid = entry.target.dataset.targetid as string;
  57             //if true, the element is visible
  58             if (entry.isIntersecting) {
  59                 updatedEntries[targetid] = true;
  60             } else {
  61                 updatedEntries[targetid] = false;
  62             }
  63         });
  64
  65         setVisibilityMap((prev) => ({
  66             ...prev,
  67             ...updatedEntries,
  68             [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
  69         }));
  70     };
  71
  72     //ensures that the last element is always visible if the second to last is visible
  73     useEffect(() => {
  74         if ((prevNumHidden.current > 1 || prevNumHidden.current === 0) && numHidden === 1) {
  75             setVisibilityMap((prev) => ({
  76                 ...prev,
  77                 [lastEntryId]: true,
  78             }));
  79         }
  80         prevNumHidden.current = numHidden;
  81     }, [numHidden, lastEntryId]);
  82
  83     useEffect(() => {
  84         setNumHidden(findNumHidden(visibilityMap));
  85     }, [visibilityMap]);
  86
  87     useEffect((): any => {
  88         setVisibilityMap({});
  89         const observer = new IntersectionObserver(handleIntersection, {
  90             root: navRef.current,
  91             rootMargin: '0px -30px 0px 0px',
  92             threshold: 1,
  93         });
  94         // We are adding observers to child elements of the container div
  95         // with ref as navRef. Notice that we are adding observers
  96         // only if we have the data attribute targetid on the child element
  97         if (navRef.current)
  98             Array.from(navRef.current.children).forEach((item: any) => {
  99                 if (item.dataset.targetid) {
 100                     observer.observe(item);
 101                 }
 102             });
 103         return () => {
 104             observer.disconnect();
 105         };
 106         // eslint-disable-next-line
 107     }, [menuLength]);
 108
 109     function findNumHidden(visMap: {}) {
 110         return Object.values(visMap).filter((x) => x === false).length;
 111     }
 112
 113     return (
 114         <div
 115             className={classes.toolbarWrapper}
 116             ref={navRef}
 117         >
 118             {React.Children.map(children, (child) => {
 119                 return React.cloneElement(child, {
 120                     className: classnames(child.props.className, {
 121                         [classes.visible]: !!visibilityMap[child.props['data-targetid']],
 122                         [classes.inVisible]: !visibilityMap[child.props['data-targetid']],
 123                     }),
 124                 });
 125             })}
 126             {numHidden >= 2 && (
 127                 <OverflowMenu
 128                     visibilityMap={visibilityMap}
 129                     className={classes.overflowStyle}
 130                 >
 131                     {children.filter((child) => !child.props['data-targetid'].includes("Divider"))}
 132                 </OverflowMenu>
 133             )}
 134         </div>
 135     );
 136 });