IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

ToolbarButtonRow: Overflow button now toggles visibility correctly (#60635)

Browse Source 
* only close the overlay if we're interacting with something other than the overflow button/the overlay itself

* use a ref instead of a test id
This commit is contained in:
Ashley Harrison 2022-12-21 15:01:39 +00:00 committed by GitHub
parent e723021e13
commit 44232569a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
View File

@ -15,8 +15,6 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
alignment?: 'left' | 'right'; alignment?: 'left' | 'right';
} }
const OVERFLOW_BUTTON_ID = 'overflow-button';
export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>( export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
({ alignment = 'left', className, children, ...rest }, ref) => { ({ alignment = 'left', className, children, ...rest }, ref) => {
// null is a valid react child so we need to filter it out to prevent unnecessary padding // null is a valid react child so we need to filter it out to prevent unnecessary padding
@ -24,9 +22,15 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(true)); const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(true));
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [showOverflowItems, setShowOverflowItems] = useState(false); const [showOverflowItems, setShowOverflowItems] = useState(false);
const overflowRef = useRef<HTMLDivElement>(null);
const overflowItemsRef = createRef<HTMLDivElement>(); const overflowItemsRef = createRef<HTMLDivElement>();
const { overlayProps } = useOverlay( const { overlayProps } = useOverlay(
{ onClose: () => setShowOverflowItems(false), isDismissable: true, isOpen: showOverflowItems }, {
onClose: () => setShowOverflowItems(false),
isDismissable: true,
isOpen: showOverflowItems,
shouldCloseOnInteractOutside: (element: Element) => !overflowRef.current?.contains(element),
},
overflowItemsRef overflowItemsRef
); );
const { dialogProps } = useDialog({}, overflowItemsRef); const { dialogProps } = useDialog({}, overflowItemsRef);
@ -56,7 +60,7 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
if (containerRef.current) { if (containerRef.current) {
Array.from(containerRef.current.children).forEach((item) => { Array.from(containerRef.current.children).forEach((item) => {
// don't observe the overflow button // don't observe the overflow button
if (item instanceof HTMLElement && item.dataset.testid !== OVERFLOW_BUTTON_ID) { if (item instanceof HTMLElement && item !== overflowRef.current) {
intersectionObserver.observe(item); intersectionObserver.observe(item);
} }
}); });
@ -76,7 +80,7 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
</div> </div>
))} ))}
{childVisibility.includes(false) && ( {childVisibility.includes(false) && (
<div data-testid={OVERFLOW_BUTTON_ID} className={styles.overflowButton}> <div ref={overflowRef} className={styles.overflowButton}>
<ToolbarButton <ToolbarButton
variant={showOverflowItems ? 'active' : 'default'} variant={showOverflowItems ? 'active' : 'default'}
tooltip="Show more items" tooltip="Show more items"