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