Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Use tooltip from grafana/ui

Browse Source
This commit is contained in:
Alexander Zobnin
2022-02-15 18:22:02 +03:00
parent 709e3ff65a
commit 657bf771a4
10 changed files with 8 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ActionButton/ActionButton.tsx
View File

@@ -1,9 +1,8 @@
import React, { FC } from 'react';
import { cx, css } from '@emotion/css';
import { stylesFactory, useTheme } from '@grafana/ui';
import { stylesFactory, useTheme, Tooltip } from '@grafana/ui';
import { GrafanaTheme, GrafanaThemeType } from '@grafana/data';
import { FAIcon } from '../FAIcon/FAIcon';
import { Tooltip } from '../Tooltip/Tooltip';
interface Props {
icon?: string;

80
src/components/Tooltip/Popper.tsx
View File

@@ -1,80 +0,0 @@
import React, { FC } from 'react';
import { cx, css } from '@emotion/css';
import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
import Transition from 'react-transition-group/Transition';
import { stylesFactory } from '@grafana/ui';
import BodyPortal from './Portal';
const getStyles = stylesFactory(() => ({
defaultTransitionStyles: css`
transition: opacity 200ms linear;
opacity: 0;
`,
tooltipContent: css`
overflow-wrap: break-word;
`,
}));
const transitionStyles = {
exited: { opacity: 0 },
entering: { opacity: 0 },
entered: { opacity: 1 },
exiting: { opacity: 0 },
};
interface Props {
renderContent: (content: any) => any;
show: boolean;
placement?: any;
content: string | ((props: any) => JSX.Element);
refClassName?: string;
popperClassName?: string;
}
const Popper: FC<Props> = ({ show, placement, popperClassName, refClassName, content, children, renderContent }) => {
const refClass = cx('popper_ref', refClassName);
const styles = getStyles();
const popperClass = cx('popper', popperClassName, styles.defaultTransitionStyles);
return (
<Manager>
<Reference>
{({ ref }) => (
<div className={refClass} ref={ref}>
{children}
</div>
)}
</Reference>
<Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
{transitionState => (
<BodyPortal>
<ReactPopper placement={placement}>
{({ ref, style, placement, arrowProps }) => {
return (
<div
ref={ref}
style={{
...style,
...transitionStyles[transitionState],
}}
data-placement={placement}
className={popperClass}
>
<div className="popper__background">
<div className={styles.tooltipContent}>
{renderContent(content)}
</div>
<div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
</div>
</div>
);
}}
</ReactPopper>
</BodyPortal>
)}
</Transition>
</Manager>
);
};
export default Popper;

36
src/components/Tooltip/Portal.tsx
View File

@@ -1,36 +0,0 @@
import { PureComponent } from 'react';
import ReactDOM from 'react-dom';
interface Props {
className?: string;
root?: HTMLElement;
}
export default class BodyPortal extends PureComponent<Props> {
node: HTMLElement;
portalRoot: HTMLElement;
constructor(props) {
super(props);
const {
className,
root = document.body
} = this.props;
this.node = document.createElement('div');
if (className) {
this.node.classList.add(className);
}
this.portalRoot = root;
this.portalRoot.appendChild(this.node);
}
componentWillUnmount() {
this.portalRoot.removeChild(this.node);
}
render() {
return ReactDOM.createPortal(this.props.children, this.node);
}
}

15
src/components/Tooltip/Tooltip.tsx
View File

@@ -1,15 +0,0 @@
import React, { FC } from 'react';
import Popper from './Popper';
import withPopper, { UsingPopperProps } from './withPopper';
const TooltipWrapper: FC<UsingPopperProps> = ({ hidePopper, showPopper, className, children, ...restProps }) => {
return (
<div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
<Popper {...restProps}>{children}</Popper>
</div>
);
};
export const Tooltip = withPopper(TooltipWrapper);
export default Tooltip;

76
src/components/Tooltip/withPopper.tsx
View File

@@ -1,76 +0,0 @@
import React from 'react';
export interface UsingPopperProps {
showPopper: (prevState: object) => void;
hidePopper: (prevState: object) => void;
renderContent: (content: any) => any;
show: boolean;
placement?: string;
content: string | ((props: any) => JSX.Element);
className?: string;
refClassName?: string;
popperClassName?: string;
}
interface Props {
placement?: string;
className?: string;
refClassName?: string;
popperClassName?: string;
content: string | ((props: any) => JSX.Element);
}
interface State {
show: boolean;
}
export const withPopper = (WrappedComponent) => {
return class extends React.Component<Props, State> {
static defaultProps: Partial<Props> = {
placement: 'auto',
};
constructor(props) {
super(props);
this.state = {
show: false,
};
}
showPopper = () => {
this.setState({ show: true });
};
hidePopper = () => {
this.setState({ show: false });
};
renderContent(content) {
if (typeof content === 'function') {
// If it's a function we assume it's a React component
const ReactComponent = content;
return <ReactComponent />;
}
return content;
}
render() {
const { show } = this.state;
const { placement, className } = this.props;
return (
<WrappedComponent
{...this.props}
showPopper={this.showPopper}
hidePopper={this.hidePopper}
renderContent={this.renderContent}
placement={placement}
className={className}
show={show}
/>
);
}
};
};
export default withPopper;

1
src/components/index.ts
View File

@@ -3,5 +3,4 @@ export { FAIcon } from './FAIcon/FAIcon';
export { AckButton } from './AckButton/AckButton';
export { ExploreButton } from './ExploreButton/ExploreButton';
export { ExecScriptButton } from './ExecScriptButton/ExecScriptButton';
export { Tooltip } from './Tooltip/Tooltip';
export { ModalController } from './Modal/ModalController';