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

Dropdown: Stop Dropdown accepting a function as children (#65467)

Browse Source 
remove dropdown accepting function children
This commit is contained in:
Ashley Harrison 2023-04-04 14:40:44 +01:00 committed by GitHub
parent fcabaac037
commit 6f7363af3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
View File

@ -11,7 +11,7 @@ import { TooltipPlacement } from '../Tooltip/types';
export interface Props {
overlay: React.ReactElement | (() => React.ReactElement);
placement?: TooltipPlacement;
children: React.ReactElement | ((isOpen: boolean) => React.ReactElement);
children: React.ReactElement;
/** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */
offset?: [number, number];
onVisibleChange?: (state: boolean) => void;
@ -51,7 +51,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
return (
<>
{React.cloneElement(typeof children === 'function' ? children(visible) : children, {
{React.cloneElement(children, {
ref: setTriggerRef,
})}
{visible && (

16
public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
View File

@ -19,6 +19,7 @@ export const QuickAdd = ({}: Props) => {
const navBarTree = useSelector((state) => state.navBarTree);
const breakpoint = theme.breakpoints.values.sm;
const [isOpen, setIsOpen] = useState(false);
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
@ -46,14 +47,13 @@ export const QuickAdd = ({}: Props) => {
return createActions.length > 0 ? (
<>
<Dropdown overlay={MenuActions} placement="bottom-end">
{(isOpen) =>
isSmallScreen ? (
<ToolbarButton iconOnly icon="plus-circle" aria-label="New" />
) : (
<ToolbarButton iconOnly icon="plus" isOpen={isOpen} aria-label="New" />
)
}
<Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={setIsOpen}>
<ToolbarButton
iconOnly
icon={isSmallScreen ? 'plus-circle' : 'plus'}
isOpen={isSmallScreen ? undefined : isOpen}
aria-label="New"
/>
</Dropdown>
<NavToolbarSeparator className={styles.separator} />
</>