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

Chore: Rename Popper to Popover (#18543)

Browse Source 
* 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
This commit is contained in:
Tobias Skarhed
2019-08-19 11:40:47 +02:00
committed by Torkel Ödegaard
parent 21948e80e0
commit 90df8c4bb0
16 changed files with 55 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
View File

@@ -1,7 +1,7 @@
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>(
}); });
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>(
</> </>
); );
}} }}
</PopperController> </PopoverController>
); );
} }
}; };

4
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@@ -1,7 +1,7 @@
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 {
enableNamedColors?: boolean; enableNamedColors?: boolean;
} }
export interface Props<T> extends ColorPickerProps, PopperContentProps { export interface Props<T> extends ColorPickerProps, PopoverContentProps {
customPickers?: T; customPickers?: T;
} }

4
packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
View File

@@ -1,11 +1,11 @@
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;
} }

4
packages/grafana-ui/src/components/FormField/FormField.tsx
View File

@@ -1,10 +1,10 @@
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;

5
packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
View File

@@ -1,7 +1,6 @@
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 {
htmlFor?: string; htmlFor?: string;
isFocused?: boolean; isFocused?: boolean;
isInvalid?: boolean; isInvalid?: boolean;
tooltip?: PopperContent<any>; tooltip?: PopoverContent;
width?: number; width?: number;
} }

5
packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
View File

@@ -1,9 +1,8 @@
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) => {

4
packages/grafana-ui/src/components/Select/ButtonSelect.tsx
View File

@@ -1,6 +1,6 @@
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> {
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;

6
packages/grafana-ui/src/components/Select/Select.tsx
View File

@@ -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> {
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 {
onOpenMenu?: () => void; onOpenMenu?: () => void;
onCloseMenu?: () => void; onCloseMenu?: () => void;
isOpen?: boolean; isOpen?: boolean;
tooltipContent?: PopperContent<any>; tooltipContent?: PopoverContent;
} }
export interface TooltipWrapperState { export interface TooltipWrapperState {

4
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
View File

@@ -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`] = `
</div> </div>
</div> </div>
</ForwardRef(ColorPickerTrigger)> </ForwardRef(ColorPickerTrigger)>
</PopperController> </PopoverController>
</ColorPicker> </ColorPicker>
</WithTheme(ColorPicker)> </WithTheme(ColorPicker)>
</div> </div>

8
packages/grafana-ui/src/components/Tooltip/Popper.tsx → packages/grafana-ui/src/components/Tooltip/Popover.tsx
View File

@@ -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
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> {
} }
} }
export { Popper }; export { Popover };

16
packages/grafana-ui/src/components/Tooltip/PopperController.tsx → packages/grafana-ui/src/components/Tooltip/PopoverController.tsx
View File

@@ -1,18 +1,14 @@
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 = (
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 {
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> {
} }
} }
export { PopperController }; export { PopoverController };

17
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
View File

@@ -1,17 +1,24 @@
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) =
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) =
</> </>
); );
}} }}
</PopperController> </PopoverController>
); );
}; };

6
packages/grafana-ui/src/components/index.ts
View File

@@ -1,7 +1,7 @@
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';

4
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
View File

@@ -1,7 +1,7 @@
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> {
); );
}; };
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}>

4
public/app/features/plugins/PluginStateInfo.tsx
View File

@@ -1,13 +1,13 @@
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 (

8
public/app/plugins/datasource/graphite/FunctionEditor.tsx
View File

@@ -1,5 +1,5 @@
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
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
</> </>
); );
}} }}
</PopperController> </PopoverController>
); );
} }
} }