Merge branch '21448-menu-reorder'
[arvados.git] / 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 });