mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: move closePopover utility to a standalone file (#43478)
* Chore: move close popover utility to a standalone file * remove duplicate function in colorpicker * fixed incorrect import * make method slightly flexible by removing type parameter
This commit is contained in:
parent
c5af1aecec
commit
545d6c4ddb
@ -8,6 +8,7 @@ import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
|
||||
import { css } from '@emotion/css';
|
||||
import { withTheme2, stylesFactory } from '../../themes';
|
||||
import { ColorSwatch } from './ColorSwatch';
|
||||
import { closePopover } from '../../utils/closePopover';
|
||||
|
||||
/**
|
||||
* If you need custom trigger for the color picker you can do that with a render prop pattern and supply a function
|
||||
@ -38,20 +39,6 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
|
||||
return changeHandler(color);
|
||||
};
|
||||
|
||||
stopPropagation = (event: React.KeyboardEvent<HTMLDivElement>, hidePopper: () => void) => {
|
||||
if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
hidePopper();
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { theme, children } = this.props;
|
||||
const styles = getStyles(theme);
|
||||
@ -72,7 +59,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
|
||||
wrapperClassName={styles.colorPicker}
|
||||
onMouseLeave={hidePopper}
|
||||
onMouseEnter={showPopper}
|
||||
onKeyDown={(event) => this.stopPropagation(event, hidePopper)}
|
||||
onKeyDown={(event) => closePopover(event, hidePopper)}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
@ -2,6 +2,7 @@ import React, { createRef, FC } from 'react';
|
||||
import { VirtualElement } from '@popperjs/core';
|
||||
import { Popover } from './Popover';
|
||||
import { PopoverController, UsingPopperProps } from './PopoverController';
|
||||
import { closePopover } from '../../utils/closePopover';
|
||||
|
||||
export interface TooltipProps extends UsingPopperProps {
|
||||
theme?: 'info' | 'error' | 'info-alt';
|
||||
@ -16,19 +17,6 @@ export type PopoverContent = string | React.ReactElement<any> | ((props: Popover
|
||||
export const Tooltip: FC<TooltipProps> = React.memo(({ children, theme, ...controllerProps }: TooltipProps) => {
|
||||
const tooltipTriggerRef = createRef<HTMLElement | VirtualElement>();
|
||||
const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
|
||||
const closePopover = (event: React.KeyboardEvent<HTMLDivElement>, hidePopper: () => void) => {
|
||||
if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
hidePopper();
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
return (
|
||||
<PopoverController {...controllerProps}>
|
||||
|
13
packages/grafana-ui/src/utils/closePopover.ts
Normal file
13
packages/grafana-ui/src/utils/closePopover.ts
Normal file
@ -0,0 +1,13 @@
|
||||
export const closePopover = (event: React.KeyboardEvent, hidePopper: () => void) => {
|
||||
if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
hidePopper();
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
Loading…
Reference in New Issue
Block a user