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