Merge pull request #1110 from inplayer-org/tooltip-ref-method

Fix: Panel copying functionality does not work properly

Author: srdjanRakic

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.2.4] - 07-09-2020
+
+### Changes
+
+- expose the flashTooltip method to parent component when using ref through useImperativeHandle 
+
 # [2.2.3] - 27-08-2020
 
 ### Changes

src/components/Tooltip/Tooltip.tsx

@@ -1,10 +1,20 @@
-import React, { useState, ReactChild, ReactNode } from 'react';
+import React, {
+  useState,
+  ReactChild,
+  ReactNode,
+  forwardRef,
+  useImperativeHandle,
+  Ref,
+} from 'react';
 import styled from 'styled-components';
-
 import Arrow from './Arrow';
 import TooltipWrapper, { FadeEasing } from './TooltipWrapper';
 import Bubble from './Bubble';
 
+export interface FlashTooltipRef {
+  flashTooltip: () => Promise<void>;
+}
+
 export type Placement = 'left' | 'right' | 'top' | 'bottom';
 export type TooltipBehavior = 'hover' | 'click' | 'ref';
 
@@ -75,86 +85,98 @@ export type TooltipProps = {
    */
   className?: string;
   children?: ReactChild | ReactNode | null;
+  ref: Ref<FlashTooltipRef>;
 };
 
 const Container = styled.div`
   position: relative;
   display: inline-block;
 `;
 
-const Tooltip = ({
-  behavior = 'hover',
-  arrowWidth = 8,
-  background = '',
-  border = '',
-  children = null,
-  color = '',
-  content,
-  fadeDuration = 150,
-  fadeEasing = 'linear',
-  fixed = false,
-  fontSize = '',
-  offset = 0,
-  padding = 0.7,
-  placement = 'top',
-  radius = 0,
-  zIndex = 1,
-  className = '',
-  durationOnClick = 1000,
-}: TooltipProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+const Tooltip = forwardRef<FlashTooltipRef, TooltipProps>(
+  (
+    {
+      behavior = 'hover',
+      arrowWidth = 8,
+      background = '',
+      border = '',
+      children = null,
+      color = '',
+      content,
+      fadeDuration = 150,
+      fadeEasing = 'linear',
+      fixed = false,
+      fontSize = '',
+      offset = 0,
+      padding = 0.7,
+      placement = 'top',
+      radius = 0,
+      zIndex = 1,
+      className = '',
+      durationOnClick = 1000,
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const timeDelay = (msDuration: number) =>
+      new Promise((resolve) => setTimeout(() => resolve(true), msDuration));
 
-  const timeDelay = (msDuration: number) =>
-    new Promise((resolve) => setTimeout(() => resolve(true), msDuration));
+    const showTooltip = () => setIsOpen(true);
 
-  const showTooltip = () => setIsOpen(true);
+    const hideTooltip = () => setIsOpen(false);
 
-  const hideTooltip = () => setIsOpen(false);
+    const flashTooltip = async () => {
+      if (isOpen) return;
 
-  const flashTooltip = async () => {
-    if (isOpen) return;
+      showTooltip();
+      await timeDelay(durationOnClick);
+      hideTooltip();
+    };
 
-    showTooltip();
-    await timeDelay(durationOnClick);
-    hideTooltip();
-  };
+    useImperativeHandle(ref, () => ({
+      flashTooltip,
+    }));
 
-  const tooltipElement = (
-    <TooltipWrapper
-      isOpen={!children || fixed ? true : isOpen}
-      placement={placement}
-      offset={offset + arrowWidth}
-      zIndex={zIndex}
-      fadeEasing={fadeEasing}
-      fadeDuration={fadeDuration}
-    >
-      <Bubble
-        background={background}
-        border={border}
-        color={color}
-        radius={radius}
-        fontSize={fontSize}
-        padding={padding}
+    const tooltipElement = (
+      <TooltipWrapper
+        isOpen={!children || fixed ? true : isOpen}
+        placement={placement}
+        offset={offset + arrowWidth}
+        zIndex={zIndex}
+        fadeEasing={fadeEasing}
+        fadeDuration={fadeDuration}
       >
-        <Arrow width={arrowWidth} background={background} border={border} placement={placement} />
-        {content}
-      </Bubble>
-    </TooltipWrapper>
-  );
+        <Bubble
+          background={background}
+          border={border}
+          color={color}
+          radius={radius}
+          fontSize={fontSize}
+          padding={padding}
+        >
+          <Arrow width={arrowWidth} background={background} border={border} placement={placement} />
+          {content}
+        </Bubble>
+      </TooltipWrapper>
+    );
 
-  return (
-    <Container
-      className={className}
-      onClick={behavior === 'click' ? flashTooltip : undefined}
-      onMouseEnter={behavior === 'hover' && !fixed ? showTooltip : undefined}
-      onMouseLeave={behavior === 'hover' && !fixed ? hideTooltip : undefined}
-    >
-      <>
-        {children}
-        {tooltipElement}
-      </>
-    </Container>
-  );
-};
+    return (
+      <Container
+        className={className}
+        onClick={behavior === 'click' ? flashTooltip : undefined}
+        onMouseEnter={behavior === 'hover' && !fixed ? showTooltip : undefined}
+        onMouseLeave={behavior === 'hover' && !fixed ? hideTooltip : undefined}
+      >
+        <>
+          {children}
+          {tooltipElement}
+        </>
+      </Container>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';
 
 export default Tooltip;