Merge pull request #932 from VEuPathDB/75-coreui-tooltip-component

75 coreui tooltip component

packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { debounce } from 'lodash';
 
-import Tooltip from './Tooltip';
+import MesaTooltip from './MesaTooltip';
 import Events from '../Utils/Events';
 import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from '../Ui/MesaContants';
 
@@ -56,7 +56,7 @@ class AnchoredTooltip extends React.Component {
     const extractedProps = { ...props, children };
 
     return (
-      <Tooltip
+      <MesaTooltip
         corner="top-left"
         className="AnchoredTooltip"
         getPosition={this.getPosition}

packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx

@@ -0,0 +1,72 @@
+import React, { CSSProperties } from 'react';
+
+import { Tooltip } from '../../info/Tooltip';
+
+interface Position {
+  top?: CSSProperties['top'];
+  left?: CSSProperties['left'];
+}
+
+interface MesaTooltipProps {
+  hideDelay?: number;
+  showDelay?: number;
+  children: React.ReactElement;
+  className?: string;
+  content: React.ReactNode;
+  corner?: string;
+  position?: Position;
+  style?: CSSProperties;
+  getPosition?: () => Position;
+  renderHtml?: boolean;
+}
+
+const MesaTooltip = ({
+  hideDelay,
+  showDelay,
+  children,
+  className,
+  content,
+  corner,
+  position,
+  style,
+  getPosition,
+  renderHtml,
+}: MesaTooltipProps) => {
+  const getPositionResult = getPosition?.();
+  const currentPosition = position
+    ? {
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+      }
+    : getPositionResult
+    ? {
+        top: getPositionResult?.top ?? 0,
+        left: getPositionResult?.left ?? 0,
+      }
+    : { top: 0, left: 0 };
+  const finalStyle = {
+    top: currentPosition.top,
+    left: currentPosition.left,
+    ...style,
+  };
+
+  return (
+    <Tooltip
+      title={
+        renderHtml ? (
+          <div dangerouslySetInnerHTML={{ __html: content as string }} />
+        ) : (
+          content ?? <></>
+        )
+      }
+      leaveDelay={hideDelay}
+      enterDelay={showDelay}
+      className={(className ?? '') + (corner ? ` ${corner}` : '')}
+      style={finalStyle}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+export default MesaTooltip;

packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import Templates from '../Templates';
 import Icon from '../Components/Icon';
-import Tooltip from '../Components/Tooltip';
+import HelpTrigger from '../Components/HelpTrigger';
 import { makeClassifier } from '../Utils/Utils';
 import Events, { EventsFactory } from '../Utils/Events';
 import { MESA_SCROLL_EVENT, MESA_REFLOW_EVENT } from './MesaContants';
@@ -65,7 +65,7 @@ class HeadingCell extends React.PureComponent {
   updateOffset() {
     const { element } = this;
     if (!element) return;
-    let offset = Tooltip.getOffset(element);
+    const offset = element.getBoundingClientRect();
     this.setState({ offset });
   }
 
@@ -180,21 +180,8 @@ class HeadingCell extends React.PureComponent {
 
   renderHelpTrigger() {
     const { column } = this.props;
-    const { offset } = this.state;
-    const { top, left, height } = offset ? offset : {};
-    const position = { top: top + height, left };
-
     if (!column.helpText && !column.htmlHelp) return null;
-    return (
-      <Tooltip
-        position={position}
-        className="Trigger HelpTrigger"
-        content={column.htmlHelp ?? column.helpText}
-        renderHtml={!!column.htmlHelp}
-      >
-        <Icon fa="question-circle" />
-      </Tooltip>
-    );
+    return <HelpTrigger>{column.htmlHelp ?? column.helpText}</HelpTrigger>;
   }
 
   // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

packages/libs/coreui/src/components/Mesa/index.jsx

@@ -9,7 +9,7 @@ import ActionToolbar from './Ui/ActionToolbar';
 import PaginationMenu from './Ui/PaginationMenu';
 import MesaController from './Ui/MesaController';
 
-import Tooltip from './Components/Tooltip';
+import MesaTooltip from './Components/MesaTooltip';
 import Checkbox from './Components/Checkbox';
 import BodyLayer from './Components/BodyLayer';
 import HelpTrigger from './Components/HelpTrigger';
@@ -31,7 +31,7 @@ export {
   TableToolbar,
   ActionToolbar,
   PaginationMenu,
-  Tooltip,
+  MesaTooltip,
   Checkbox,
   BodyLayer,
   HelpTrigger,

packages/libs/coreui/src/components/info/Tooltip.tsx

@@ -0,0 +1,33 @@
+import { ComponentProps } from 'react';
+import { Theme, Tooltip as MUITooltip, withStyles } from '@material-ui/core';
+import _ from 'lodash';
+
+/**
+ * Tooltip will not render if the title is an empty value or a boolean.
+ */
+const UnstyledTooltip = (props: ComponentProps<typeof MUITooltip>) => {
+  const { title, ...otherProps } = props;
+
+  const finalTitle = !(
+    _.isEqual(title, {}) ||
+    _.isEqual(title, []) ||
+    typeof title === 'boolean'
+  )
+    ? title
+    : '';
+
+  return <MUITooltip title={finalTitle} {...otherProps} />;
+};
+
+export const Tooltip = withStyles((theme: Theme) => ({
+  tooltip: {
+    backgroundColor: '#fffde7',
+    color: 'rgba(0, 0, 0, 0.87)',
+    maxWidth: 320,
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #dadde9',
+    boxShadow: theme.shadows[1],
+  },
+}))(UnstyledTooltip);
+
+export { Tooltip as HtmlTooltip };