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 20px',
  28         width: '100%',
  29     },
  30     overflowStyle: {
  31         order: 99,
  32         position: 'sticky',
  33         right: '-2rem',
  34         backgroundColor: 'white',
  35     },
  36 });
  37
  38 type WrapperProps = {
  39     children: OverflowChild[];
  40 };
  41
  42 export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperProps & WithStyles<CssRules>) => {
  43     const { classes, children } = props;
  44
  45     const navRef = useRef<any>(null);
  46     const [visibilityMap, setVisibilityMap] = useState({});
  47
  48     const handleIntersection = (entries) => {
  49         const updatedEntries = {};
  50         entries.forEach((entry) => {
  51             const targetid = entry.target.dataset.targetid;
  52             if (entry.isIntersecting) {
  53                 updatedEntries[targetid] = true;
  54             } else {
  55                 updatedEntries[targetid] = false;
  56             }
  57         });
  58
  59         setVisibilityMap((prev) => ({
  60             ...prev,
  61             ...updatedEntries,
  62         }));
  63     };
  64     useEffect((): any => {
  65         const observer = new IntersectionObserver(handleIntersection, {
  66             root: navRef.current,
  67             rootMargin: '0px -20px 0px 0px',
  68             threshold: 1,
  69         });
  70         // We are adding observers to child elements of the container div
  71         // with ref as navRef. Notice that we are adding observers
  72         // only if we have the data attribute targetid on the child element
  73         if (navRef.current)
  74             Array.from(navRef.current.children).forEach((item: any) => {
  75                 if (item.dataset.targetid) {
  76                     observer.observe(item);
  77                 }
  78             });
  79         return () => {
  80             observer.disconnect();
  81         };
  82     }, []);
  83
  84     return (
  85         <div
  86             className={classes.toolbarWrapper}
  87             ref={navRef}
  88         >
  89             {React.Children.map(children, (child) => {
  90                 return React.cloneElement(child, {
  91                     className: classnames(child.props.className, {
  92                         [classes.visible]: !!visibilityMap[child.props['data-targetid']],
  93                         [classes.inVisible]: !visibilityMap[child.props['data-targetid']],
  94                     }),
  95                 });
  96             })}
  97             <OverflowMenu
  98                 visibilityMap={visibilityMap}
  99                 className={classes.overflowStyle}
 100             >
 101                 {children}
 102             </OverflowMenu>
 103         </div>
 104     );
 105 });