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:
Uchechukwu Obasi 2021-12-23 18:08:02 +01:00 committed by GitHub
parent c5af1aecec
commit 545d6c4ddb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 28 deletions

View File

@ -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)}
/>
)}

View File

@ -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}>

View 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;
};