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 , ReactElement, JSXElementConstructor} 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 className={classes.toolbarWrapper} ref={navRef}>
  86       {React.Children.map(children, (child) => {
  87         return React.cloneElement(child, {
  88           className: classnames(child.props.className, {
  89             [classes.visible]: !!visibilityMap[child.props["data-targetid"]],
  90             [classes.inVisible]: !visibilityMap[child.props["data-targetid"]]
  91           })
  92         });
  93       })}
  94       <OverflowMenu
  95         visibilityMap={visibilityMap}
  96         className={classes.overflowStyle}
  97       >
  98         {children}
  99       </OverflowMenu>
 100     </div>
 101     );
 102 });