IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Ignore null children in ToolbarButtonRow (#57201)

Browse Source 
* filter out any null buttons to prevent padding being added for them

* ignore null children in toolbarbuttonrow
This commit is contained in:
Ashley Harrison 2022-10-19 10:00:57 +01:00 committed by GitHub
parent 0491c19712
commit 96660992f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,9 +19,9 @@ const OVERFLOW_BUTTON_ID = 'overflow-button';
export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
({ alignment = 'left', className, children, ...rest }, ref) => {
const [childVisibility, setChildVisibility] = useState<boolean[]>(
Array(React.Children.toArray(children).length).fill(true)
);
// null is a valid react child so we need to filter it out to prevent unnecessary padding
const childrenWithoutNull = React.Children.toArray(children).filter((child) => child !== null);
const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(true));
const containerRef = useRef<HTMLDivElement>(null);
const [showOverflowItems, setShowOverflowItems] = useState(false);
const overflowItemsRef = createRef<HTMLDivElement>();
@ -66,8 +66,9 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
return (
<div ref={containerRef} className={cx(styles.container, className)} {...rest}>
{React.Children.map(children, (child, index) => (
{childrenWithoutNull.map((child, index) => (
<div
key={index}
style={{ order: index, visibility: childVisibility[index] ? 'visible' : 'hidden' }}
className={styles.childWrapper}
>
@ -87,7 +88,7 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
{showOverflowItems && (
<FocusScope contain autoFocus>
<div className={styles.overflowItems} ref={overflowItemsRef} {...overlayProps} {...dialogProps}>
{React.Children.toArray(children).map((child, index) => !childVisibility[index] && child)}
{childrenWithoutNull.map((child, index) => !childVisibility[index] && child)}
</div>
</FocusScope>
)}