Skip to content

N
nexpie-grafana-theme
Commit 4384eb2f by Dominik Prokop
Options

Move tooltip themes to Tooltip component making Popper/PopperController theme agnostic

parent ac378790
Showing with 24 additions and 25 deletions
packages/grafana-ui/src/components/Tooltip/Popper.tsx
...@@ -4,11 +4,6 @@ import { Manager, Popper as ReactPopper } from 'react-popper'; ...@@ -4,11 +4,6 @@ import { Manager, Popper as ReactPopper } from 'react-popper';
import { Portal } from '@grafana/ui'; import { Portal } from '@grafana/ui';
import Transition from 'react-transition-group/Transition'; import Transition from 'react-transition-group/Transition';
export enum Themes {
Default = 'popper__background--default',
Error = 'popper__background--error',
Brand = 'popper__background--brand',
}
const defaultTransitionStyles = { const defaultTransitionStyles = {
transition: 'opacity 200ms linear', transition: 'opacity 200ms linear',
...@@ -22,22 +17,20 @@ const transitionStyles: {[key: string]: object} = { ...@@ -22,22 +17,20 @@ const transitionStyles: {[key: string]: object} = {
exiting: { opacity: 0 }, exiting: { opacity: 0 },
}; };
interface Props extends React.DOMAttributes<HTMLDivElement> { interface Props extends React.HTMLAttributes<HTMLDivElement> {
renderContent: (content: any) => any; renderContent: (content: any) => any;
show: boolean; show: boolean;
placement?: PopperJS.Placement; placement?: PopperJS.Placement;
content: string | ((props: any) => JSX.Element); content: string | ((props: any) => JSX.Element);
referenceElement: PopperJS.ReferenceObject; referenceElement: PopperJS.ReferenceObject;
theme?: Themes;
} }
class Popper extends PureComponent<Props> { class Popper extends PureComponent<Props> {
render() { render() {
const { renderContent, show, placement, onMouseEnter, onMouseLeave, theme } = this.props; const { renderContent, show, placement, onMouseEnter, onMouseLeave, className } = this.props;
const { content } = this.props; const { content } = this.props;
const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
return ( return (
<Manager> <Manager>
<Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}> <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
...@@ -56,9 +49,9 @@ class Popper extends PureComponent<Props> { ...@@ -56,9 +49,9 @@ class Popper extends PureComponent<Props> {
...transitionStyles[transitionState], ...transitionStyles[transitionState],
}} }}
data-placement={placement} data-placement={placement}
className="popper" className={`popper`}
> >
<div className={popperBackgroundClassName}> <div className={className}>
{renderContent(content)} {renderContent(content)}
<div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" /> <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
</div> </div>
......
packages/grafana-ui/src/components/Tooltip/PopperController.tsx
import React from 'react'; import React from 'react';
import * as PopperJS from 'popper.js'; import * as PopperJS from 'popper.js';
import { Themes } from './Popper';
type PopperContent = string | (() => JSX.Element); type PopperContent = string | (() => JSX.Element);
...@@ -10,7 +9,6 @@ export interface UsingPopperProps { ...@@ -10,7 +9,6 @@ export interface UsingPopperProps {
content: PopperContent; content: PopperContent;
children: JSX.Element; children: JSX.Element;
renderContent?: (content: PopperContent) => JSX.Element; renderContent?: (content: PopperContent) => JSX.Element;
theme?: Themes;
} }
type PopperControllerRenderProp = ( type PopperControllerRenderProp = (
...@@ -21,7 +19,6 @@ type PopperControllerRenderProp = ( ...@@ -21,7 +19,6 @@ type PopperControllerRenderProp = (
placement: PopperJS.Placement; placement: PopperJS.Placement;
content: string | ((props: any) => JSX.Element); content: string | ((props: any) => JSX.Element);
renderContent: (content: any) => any; renderContent: (content: any) => any;
theme?: Themes;
} }
) => JSX.Element; ) => JSX.Element;
...@@ -30,7 +27,6 @@ interface Props { ...@@ -30,7 +27,6 @@ interface Props {
content: PopperContent; content: PopperContent;
className?: string; className?: string;
children: PopperControllerRenderProp; children: PopperControllerRenderProp;
theme?: Themes;
} }
interface State { interface State {
...@@ -83,7 +79,7 @@ class PopperController extends React.Component<Props, State> { ...@@ -83,7 +79,7 @@ class PopperController extends React.Component<Props, State> {
} }
render() { render() {
const { children, content, theme } = this.props; const { children, content } = this.props;
const { show, placement } = this.state; const { show, placement } = this.state;
return children(this.showPopper, this.hidePopper, { return children(this.showPopper, this.hidePopper, {
...@@ -91,7 +87,6 @@ class PopperController extends React.Component<Props, State> { ...@@ -91,7 +87,6 @@ class PopperController extends React.Component<Props, State> {
placement, placement,
content, content,
renderContent: this.renderContent, renderContent: this.renderContent,
theme,
}); });
} }
} }
......
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
...@@ -3,8 +3,18 @@ import * as PopperJS from 'popper.js'; ...@@ -3,8 +3,18 @@ import * as PopperJS from 'popper.js';
import Popper from './Popper'; import Popper from './Popper';
import PopperController, { UsingPopperProps } from './PopperController'; import PopperController, { UsingPopperProps } from './PopperController';
export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => { export enum Themes {
Default = 'popper__background--default',
Error = 'popper__background--error',
Brand = 'popper__background--brand',
}
interface TooltipProps extends UsingPopperProps {
theme?: Themes;
}
export const Tooltip = ({ children, renderContent, theme, ...controllerProps }: TooltipProps) => {
const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>(); const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
return ( return (
<PopperController {...controllerProps}> <PopperController {...controllerProps}>
...@@ -17,6 +27,7 @@ export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPo ...@@ -17,6 +27,7 @@ export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPo
onMouseEnter={showPopper} onMouseEnter={showPopper}
onMouseLeave={hidePopper} onMouseLeave={hidePopper}
referenceElement={tooltipTriggerRef.current} referenceElement={tooltipTriggerRef.current}
className={popperBackgroundClassName}
/> />
)} )}
{React.cloneElement(children, { {React.cloneElement(children, {
......
packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
$popper-margin-from-ref: 5px; $popper-margin-from-ref: 5px;
@mixin popper-theme($backgroundColor, $arrowColor) { @mixin popper-theme($backgroundColor, $arrowColor) {
background: $backgroundColor; background: $backgroundColor;
.popper__arrow { .popper__arrow {
...@@ -22,6 +21,10 @@ $popper-margin-from-ref: 5px; ...@@ -22,6 +21,10 @@ $popper-margin-from-ref: 5px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px; padding: 10px;
.popper__arrow {
border-color: $tooltipBackground;
}
// Themes // Themes
&.popper__background--error { &.popper__background--error {
@include popper-theme($tooltipBackgroundError, $tooltipBackgroundError); @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
...@@ -41,9 +44,6 @@ $popper-margin-from-ref: 5px; ...@@ -41,9 +44,6 @@ $popper-margin-from-ref: 5px;
margin: 0px; margin: 0px;
} }
.popper__arrow {
border-color: $tooltipBackground;
}
// Top // Top
.popper[data-placement^='top'] { .popper[data-placement^='top'] {
......
public/app/features/dashboard/dashgrid/DataPanel.tsx
// Library // Library
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Tooltip } from '@grafana/ui'; import { Tooltip } from '@grafana/ui';
import { Themes } from '@grafana/ui/src/components/Tooltip/Popper'; import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary'; import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
......
public/app/features/dashboard/panel_editor/PanelEditor.tsx
...@@ -16,7 +16,7 @@ import { DashboardModel } from '../dashboard_model'; ...@@ -16,7 +16,7 @@ import { DashboardModel } from '../dashboard_model';
import { PanelPlugin } from 'app/types/plugins'; import { PanelPlugin } from 'app/types/plugins';
import { Tooltip } from '@grafana/ui'; import { Tooltip } from '@grafana/ui';
import { Themes } from '@grafana/ui/src/components/Tooltip/Popper'; import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
interface PanelEditorProps { interface PanelEditorProps {
panel: PanelModel; panel: PanelModel;
......
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