1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
11 type CssRules = 'visible' | 'inVisible' | 'toolbarWrapper' | 'overflowStyle';
13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
16 visibility: 'visible',
22 pointerEvents: 'none',
27 padding: '0 0px 0 20px',
39 children: OverflowChild[];
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));
50 const prevNumHidden = useRef(numHidden);
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 (entry.isIntersecting) {
57 updatedEntries[targetid] = true;
59 updatedEntries[targetid] = false;
63 setVisibilityMap((prev) => ({
66 [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
71 if ((prevNumHidden.current === 2 || prevNumHidden.current === 0) && numHidden === 1) {
72 setVisibilityMap((prev) => ({
77 prevNumHidden.current = numHidden;
78 }, [numHidden, lastEntryId]);
81 setNumHidden(findNumHidden(visibilityMap));
84 useEffect((): any => {
86 const observer = new IntersectionObserver(handleIntersection, {
88 rootMargin: '0px -30px 0px 0px',
91 // We are adding observers to child elements of the container div
92 // with ref as navRef. Notice that we are adding observers
93 // only if we have the data attribute targetid on the child element
95 Array.from(navRef.current.children).forEach((item: any) => {
96 if (item.dataset.targetid) {
97 observer.observe(item);
101 observer.disconnect();
103 // eslint-disable-next-line
106 function findNumHidden(visMap: {}) {
107 return Object.values(visMap).filter((x) => x === false).length;
112 className={classes.toolbarWrapper}
115 {React.Children.map(children, (child) => {
116 return React.cloneElement(child, {
117 className: classnames(child.props.className, {
118 [classes.visible]: !!visibilityMap[child.props['data-targetid']],
119 [classes.inVisible]: !visibilityMap[child.props['data-targetid']],
125 visibilityMap={visibilityMap}
126 className={classes.overflowStyle}