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
2 changed files with 10 additions and 10 deletions
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 { export interface Props {
overlay: React.ReactElement | (() => React.ReactElement); overlay: React.ReactElement | (() => React.ReactElement);
placement?: TooltipPlacement; placement?: TooltipPlacement;
children: React.ReactElement | ((isOpen: boolean) => React.ReactElement); children: React.ReactElement;
/** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */ /** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */
offset?: [number, number]; offset?: [number, number];
onVisibleChange?: (state: boolean) => void; onVisibleChange?: (state: boolean) => void;
@@ -51,7 +51,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
return ( return (
<> <>
{React.cloneElement(typeof children === 'function' ? children(visible) : children, { {React.cloneElement(children, {
ref: setTriggerRef, ref: setTriggerRef,
})} })}
{visible && ( {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 navBarTree = useSelector((state) => state.navBarTree);
const breakpoint = theme.breakpoints.values.sm; const breakpoint = theme.breakpoints.values.sm;
const [isOpen, setIsOpen] = useState(false);
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches); const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]); const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
@@ -46,14 +47,13 @@ export const QuickAdd = ({}: Props) => {
return createActions.length > 0 ? ( return createActions.length > 0 ? (
<> <>
<Dropdown overlay={MenuActions} placement="bottom-end"> <Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={setIsOpen}>
{(isOpen) => <ToolbarButton
isSmallScreen ? ( iconOnly
<ToolbarButton iconOnly icon="plus-circle" aria-label="New" /> icon={isSmallScreen ? 'plus-circle' : 'plus'}
) : ( isOpen={isSmallScreen ? undefined : isOpen}
<ToolbarButton iconOnly icon="plus" isOpen={isOpen} aria-label="New" /> aria-label="New"
) />
}
</Dropdown> </Dropdown>
<NavToolbarSeparator className={styles.separator} /> <NavToolbarSeparator className={styles.separator} />
</> </>