Skip to content

N
nexpie-grafana-theme
Commit 90df8c4b by Tobias Skarhed Committed by Torkel Ödegaard
Options

Chore: Rename Popper to Popover (#18543) 

* Rename PopperContent to TooltipContent

* Move exports from PopperController

* Change ToolipContent to PopoverContent and PopoverController

* Rename Popper to Popover

* Add forgotten files

* Update snapshot

* Remove generic
parent 21948e80
Showing with 55 additions and 54 deletions
packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
import React, { Component, createRef } from 'react';
import omit from 'lodash/omit';
import { PopperController } from '../Tooltip/PopperController';
import { Popper } from '../Tooltip/Popper';
import { PopoverController } from '../Tooltip/PopoverController';
import { Popover } from '../Tooltip/Popover';
import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover';
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
......@@ -46,12 +46,12 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
});
return (
<PopperController content={popoverElement} hideAfter={300}>
<PopoverController content={popoverElement} hideAfter={300}>
{(showPopper, hidePopper, popperProps) => {
return (
<>
{this.pickerTriggerRef.current && (
<Popper
<Popover
{...popperProps}
referenceElement={this.pickerTriggerRef.current}
wrapperClassName="ColorPicker"
......@@ -80,7 +80,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
</>
);
}}
</PopperController>
</PopoverController>
);
}
};
......
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
import React from 'react';
import { NamedColorsPalette } from './NamedColorsPalette';
import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import { PopperContentProps } from '../Tooltip/PopperController';
import { PopoverContentProps } from '../Tooltip/Tooltip';
import SpectrumPalette from './SpectrumPalette';
import { GrafanaThemeType, Themeable } from '../../types/theme';
import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation';
......@@ -19,7 +19,7 @@ export interface ColorPickerProps extends Themeable {
enableNamedColors?: boolean;
}
export interface Props<T> extends ColorPickerProps, PopperContentProps {
export interface Props<T> extends ColorPickerProps, PopoverContentProps {
customPickers?: T;
}
......
packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
import React, { FunctionComponent } from 'react';
import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';
import { PopperContentProps } from '../Tooltip/PopperController';
import { PopoverContentProps } from '../Tooltip/Tooltip';
import { Switch } from '../Switch/Switch';
import { withTheme } from '../../themes/ThemeContext';
export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps {
export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps {
yaxis?: number;
onToggleAxis?: () => void;
}
......
packages/grafana-ui/src/components/FormField/FormField.tsx
import React, { InputHTMLAttributes, FunctionComponent } from 'react';
import { FormLabel } from '../FormLabel/FormLabel';
import { PopperContent } from '../Tooltip/PopperController';
import { PopoverContent } from '../Tooltip/Tooltip';
import { cx } from 'emotion';
export interface Props extends InputHTMLAttributes<HTMLInputElement> {
label: string;
tooltip?: PopperContent<any>;
tooltip?: PopoverContent;
labelWidth?: number;
inputWidth?: number;
inputEl?: React.ReactNode;
......
packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
import React, { FunctionComponent, ReactNode } from 'react';
import classNames from 'classnames';
import { Tooltip } from '../Tooltip/Tooltip';
import { PopperContent } from '../Tooltip/PopperController';
import { Tooltip, PopoverContent } from '../Tooltip/Tooltip';
interface Props {
children: ReactNode;
......@@ -9,7 +8,7 @@ interface Props {
htmlFor?: string;
isFocused?: boolean;
isInvalid?: boolean;
tooltip?: PopperContent<any>;
tooltip?: PopoverContent;
width?: number;
}
......
packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
import React from 'react';
import { Tooltip, TooltipProps } from '../Tooltip/Tooltip';
import { PopperContent } from '../Tooltip/PopperController';
import { Tooltip, TooltipProps, PopoverContent } from '../Tooltip/Tooltip';
interface InfoTooltipProps extends Omit<TooltipProps, 'children' | 'content'> {
children: PopperContent<any>;
children: PopoverContent;
}
export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {
......
packages/grafana-ui/src/components/Select/ButtonSelect.tsx
import React, { PureComponent, ReactElement } from 'react';
import Select from './Select';
import { PopperContent } from '../Tooltip/PopperController';
import { PopoverContent } from '../Tooltip/Tooltip';
import { SelectableValue } from '@grafana/data';
interface ButtonComponentProps {
......@@ -38,7 +38,7 @@ export interface Props<T> {
components?: any;
maxMenuHeight?: number;
onChange: (item: SelectableValue<T>) => void;
tooltipContent?: PopperContent<any>;
tooltipContent?: PopoverContent;
isMenuOpen?: boolean;
onOpenMenu?: () => void;
onCloseMenu?: () => void;
......
packages/grafana-ui/src/components/Select/Select.tsx
......@@ -17,7 +17,7 @@ import IndicatorsContainer from './IndicatorsContainer';
import NoOptionsMessage from './NoOptionsMessage';
import resetSelectStyles from './resetSelectStyles';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
import { PopperContent } from '../Tooltip/PopperController';
import { PopoverContent } from '../Tooltip/Tooltip';
import { Tooltip } from '../Tooltip/Tooltip';
import { SelectableValue } from '@grafana/data';
......@@ -43,7 +43,7 @@ export interface CommonProps<T> {
backspaceRemovesValue?: boolean;
isOpen?: boolean;
components?: any;
tooltipContent?: PopperContent<any>;
tooltipContent?: PopoverContent;
onOpenMenu?: () => void;
onCloseMenu?: () => void;
tabSelectsValue?: boolean;
......@@ -269,7 +269,7 @@ export interface TooltipWrapperProps {
onOpenMenu?: () => void;
onCloseMenu?: () => void;
isOpen?: boolean;
tooltipContent?: PopperContent<any>;
tooltipContent?: PopoverContent;
}
export interface TooltipWrapperState {
......
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
......@@ -225,7 +225,7 @@ exports[`Render should render with base threshold 1`] = `
}
}
>
<PopperController
<PopoverController
content={
<ColorPickerPopover
color="green"
......@@ -439,7 +439,7 @@ exports[`Render should render with base threshold 1`] = `
</div>
</div>
</ForwardRef(ColorPickerTrigger)>
</PopperController>
</PopoverController>
</ColorPicker>
</WithTheme(ColorPicker)>
</div>
......
packages/grafana-ui/src/components/Tooltip/Popper.tsx → packages/grafana-ui/src/components/Tooltip/Popover.tsx
......@@ -3,7 +3,7 @@ import * as PopperJS from 'popper.js';
import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper';
import { Portal } from '../Portal/Portal';
import Transition from 'react-transition-group/Transition';
import { PopperContent } from './PopperController';
import { PopoverContent } from './Tooltip';
const defaultTransitionStyles = {
transition: 'opacity 200ms linear',
......@@ -22,14 +22,14 @@ export type RenderPopperArrowFn = (props: { arrowProps: PopperArrowProps; placem
interface Props extends React.HTMLAttributes<HTMLDivElement> {
show: boolean;
placement?: PopperJS.Placement;
content: PopperContent<any>;
content: PopoverContent;
referenceElement: PopperJS.ReferenceObject;
wrapperClassName?: string;
renderArrow?: RenderPopperArrowFn;
eventsEnabled?: boolean;
}
class Popper extends PureComponent<Props> {
class Popover extends PureComponent<Props> {
static defaultProps: Partial<Props> = {
eventsEnabled: true,
};
......@@ -101,4 +101,4 @@ class Popper extends PureComponent<Props> {
}
}
export { Popper };
export { Popover };
packages/grafana-ui/src/components/Tooltip/PopperController.tsx → packages/grafana-ui/src/components/Tooltip/PopoverController.tsx
import React from 'react';
import * as PopperJS from 'popper.js';
import { PopoverContent } from './Tooltip';
// This API allows popovers to update Popper's position when e.g. popover content changes
// updatePopperPosition is delivered to content by react-popper
export interface PopperContentProps {
updatePopperPosition?: () => void;
}
export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T> | ((props: T) => JSX.Element);
export interface UsingPopperProps {
show?: boolean;
placement?: PopperJS.Placement;
content: PopperContent<any>;
content: PopoverContent;
children: JSX.Element;
}
......@@ -22,13 +18,13 @@ type PopperControllerRenderProp = (
popperProps: {
show: boolean;
placement: PopperJS.Placement;
content: PopperContent<any>;
content: PopoverContent;
}
) => JSX.Element;
interface Props {
placement?: PopperJS.Placement;
content: PopperContent<any>;
content: PopoverContent;
className?: string;
children: PopperControllerRenderProp;
hideAfter?: number;
......@@ -39,7 +35,7 @@ interface State {
show: boolean;
}
class PopperController extends React.Component<Props, State> {
class PopoverController extends React.Component<Props, State> {
private hideTimeout: any;
constructor(props: Props) {
......@@ -101,4 +97,4 @@ class PopperController extends React.Component<Props, State> {
}
}
export { PopperController };
export { PopoverController };
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
import React, { createRef } from 'react';
import * as PopperJS from 'popper.js';
import { Popper } from './Popper';
import { PopperController, UsingPopperProps } from './PopperController';
import { Popover } from './Popover';
import { PopoverController, UsingPopperProps } from './PopoverController';
export interface TooltipProps extends UsingPopperProps {
theme?: 'info' | 'error';
}
export interface PopoverContentProps {
updatePopperPosition?: () => void;
}
export type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);
export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => {
const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
return (
<PopperController {...controllerProps}>
<PopoverController {...controllerProps}>
{(showPopper, hidePopper, popperProps) => {
{
/* Override internal 'show' state if passed in as prop */
......@@ -23,7 +30,7 @@ export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) =
return (
<>
{tooltipTriggerRef.current && (
<Popper
<Popover
{...payloadProps}
onMouseEnter={showPopper}
onMouseLeave={hidePopper}
......@@ -43,6 +50,6 @@ export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) =
</>
);
}}
</PopperController>
</PopoverController>
);
};
packages/grafana-ui/src/components/index.ts
export { DeleteButton } from './DeleteButton/DeleteButton';
export { Tooltip } from './Tooltip/Tooltip';
export { PopperController, PopperContent } from './Tooltip/PopperController';
export { Popper } from './Tooltip/Popper';
export { Tooltip, PopoverContent } from './Tooltip/Tooltip';
export { PopoverController } from './Tooltip/PopoverController';
export { Popover } from './Tooltip/Popover';
export { Portal } from './Portal/Portal';
export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
import React, { Component } from 'react';
import { renderMarkdown } from '@grafana/data';
import { Tooltip, ScopedVars, PopperContent } from '@grafana/ui';
import { Tooltip, ScopedVars, PopoverContent } from '@grafana/ui';
import { DataLink } from '@grafana/data';
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
......@@ -71,7 +71,7 @@ export class PanelHeaderCorner extends Component<Props> {
);
};
renderCornerType(infoMode: InfoMode, content: PopperContent<any>) {
renderCornerType(infoMode: InfoMode, content: PopoverContent) {
const theme = infoMode === InfoMode.Error ? 'error' : 'info';
return (
<Tooltip content={content} placement="top-start" theme={theme}>
......
public/app/features/plugins/PluginStateInfo.tsx
import React, { FC, useContext } from 'react';
import { css } from 'emotion';
import { PluginState, Tooltip, ThemeContext } from '@grafana/ui';
import { PopperContent } from '@grafana/ui/src/components/Tooltip/PopperController';
import { PopoverContent } from '@grafana/ui/src/components/Tooltip/Tooltip';
interface Props {
state?: PluginState;
}
function getPluginStateInfoText(state?: PluginState): PopperContent<any> | null {
function getPluginStateInfoText(state?: PluginState): PopoverContent | null {
switch (state) {
case PluginState.alpha:
return (
......
public/app/plugins/datasource/graphite/FunctionEditor.tsx
import React from 'react';
import { PopperController, Popper } from '@grafana/ui';
import { PopoverController, Popover } from '@grafana/ui';
// @ts-ignore
import rst2html from 'rst2html';
import { FunctionDescriptor, FunctionEditorControlsProps, FunctionEditorControls } from './FunctionEditorControls';
......@@ -68,12 +68,12 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
render() {
return (
<PopperController content={this.renderContent} placement="top" hideAfter={300}>
<PopoverController content={this.renderContent} placement="top" hideAfter={300}>
{(showPopper, hidePopper, popperProps) => {
return (
<>
{this.triggerRef && (
<Popper
<Popover
{...popperProps}
referenceElement={this.triggerRef.current}
wrapperClassName="popper"
......@@ -103,7 +103,7 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
</>
);
}}
</PopperController>
</PopoverController>
);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment