Get rid of unused renderContent prop on PopperController

This commit is contained in:
Dominik Prokop 2019-01-18 11:13:07 +01:00
parent 0505add7f6
commit 977d53c8c9
3 changed files with 7 additions and 20 deletions

View File

@ -3,6 +3,7 @@ import * as PopperJS from 'popper.js';
import { Manager, Popper as ReactPopper } from 'react-popper'; 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';
import { PopperContent } from './PopperController';
const defaultTransitionStyles = { const defaultTransitionStyles = {
transition: 'opacity 200ms linear', transition: 'opacity 200ms linear',
@ -17,17 +18,16 @@ const transitionStyles: { [key: string]: object } = {
}; };
interface Props extends React.HTMLAttributes<HTMLDivElement> { interface Props extends React.HTMLAttributes<HTMLDivElement> {
renderContent: (content: any) => any;
show: boolean; show: boolean;
placement?: PopperJS.Placement; placement?: PopperJS.Placement;
content: string | ((props: any) => JSX.Element); content: PopperContent;
referenceElement: PopperJS.ReferenceObject; referenceElement: PopperJS.ReferenceObject;
arrowClassName?: string; arrowClassName?: string;
} }
class Popper extends PureComponent<Props> { class Popper extends PureComponent<Props> {
render() { render() {
const { renderContent, show, placement, onMouseEnter, onMouseLeave, className, arrowClassName } = this.props; const { show, placement, onMouseEnter, onMouseLeave, className, arrowClassName } = this.props;
const { content } = this.props; const { content } = this.props;
return ( return (
@ -56,7 +56,7 @@ class Popper extends PureComponent<Props> {
className={`popper`} className={`popper`}
> >
<div className={className}> <div className={className}>
{renderContent(content)} {content}
<div <div
ref={arrowProps.ref} ref={arrowProps.ref}
style={{ ...arrowProps.style }} style={{ ...arrowProps.style }}

View File

@ -1,14 +1,13 @@
import React from 'react'; import React from 'react';
import * as PopperJS from 'popper.js'; import * as PopperJS from 'popper.js';
type PopperContent = string | (() => JSX.Element); export type PopperContent = string | JSX.Element;
export interface UsingPopperProps { export interface UsingPopperProps {
show?: boolean; show?: boolean;
placement?: PopperJS.Placement; placement?: PopperJS.Placement;
content: PopperContent; content: PopperContent;
children: JSX.Element; children: JSX.Element;
renderContent?: (content: PopperContent) => JSX.Element;
} }
type PopperControllerRenderProp = ( type PopperControllerRenderProp = (
@ -17,8 +16,7 @@ type PopperControllerRenderProp = (
popperProps: { popperProps: {
show: boolean; show: boolean;
placement: PopperJS.Placement; placement: PopperJS.Placement;
content: string | ((props: any) => JSX.Element); content: PopperContent;
renderContent: (content: any) => any;
} }
) => JSX.Element; ) => JSX.Element;
@ -69,16 +67,6 @@ class PopperController extends React.Component<Props, State> {
})); }));
}; };
renderContent(content: PopperContent) {
if (typeof content === 'function') {
// If it's a function we assume it's a React component
const ReactComponent = content;
return <ReactComponent />;
}
return content;
}
render() { render() {
const { children, content } = this.props; const { children, content } = this.props;
const { show, placement } = this.state; const { show, placement } = this.state;
@ -87,7 +75,6 @@ class PopperController extends React.Component<Props, State> {
show, show,
placement, placement,
content, content,
renderContent: this.renderContent,
}); });
} }
} }

View File

@ -12,7 +12,7 @@ export enum Themes {
interface TooltipProps extends UsingPopperProps { interface TooltipProps extends UsingPopperProps {
theme?: Themes; theme?: Themes;
} }
export const Tooltip = ({ children, renderContent, 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 ? ' ' + theme : ''); const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');