implements disabled tooltip

HumanSignal · Feb 27, 2024 · d40a1e9 · d40a1e9
1 parent bbfe3b1
commit d40a1e9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/src/components/Common/SDKButtons.js b/src/components/Common/SDKButtons.js
@@ -1,30 +1,17 @@
 import React from "react";
 import { useSDK } from "../../providers/SDKProvider";
 import { Button } from "./Button/Button";
-import { Block } from "../../utils/bem";
-import { Tooltip } from "./Tooltip/Tooltip";
 
 const SDKButton = ({ eventName, ...props }) => {
   const sdk = useSDK();
 
   return sdk.hasHandler(eventName) ? (
-    <Tooltip
-      title="You must upgrade your plan to import data"
-      style={{
-        maxWidth:200,
-        textAlign: "center",
+    <Button
+      {...props}
+      onClick={() => {
+        sdk.invoke(eventName);
       }}
-      disabled={!props.isSelfServeExpired}>
-      <Block name="button-wrapper">
-        <Button
-          {...props}
-          disabled={ props.disabled || props.isSelfServeExpired }
-          onClick={() => {
-            sdk.invoke(eventName);
-          }}
-        />
-      </Block>
-    </Tooltip>
+    />     
   ) : null;
 };
 

diff --git a/src/components/Common/Tooltip/Tooltip.js b/src/components/Common/Tooltip/Tooltip.js
@@ -6,7 +6,7 @@ import { aroundTransition } from "../../../utils/transition";
 import "./Tooltip.styl";
 
 export const Tooltip = forwardRef(
-  ({ title, children, defaultVisible, style }, ref) => {
+  ({ title, children, defaultVisible, disabled, style }, ref) => {
     const child = Children.only(children);
     const triggerElement = ref ?? useRef();
     const tooltipElement = useRef();
@@ -83,14 +83,20 @@ export const Tooltip = forwardRef(
       [injected, offset, title, visibilityClasses, tooltipElement],
     );
 
+    useEffect(() => {
+      if (disabled === true && visibility === "visible") performAnimation(false);
+    }, [disabled]);
+
     const clone = cloneElement(child, {
       ...child.props,
       ref: triggerElement,
       onMouseEnter(e) {
+        if (disabled === true) return;
         setInjected(true);
         child.props.onMouseEnter?.(e);
       },
       onMouseLeave(e) {
+        if (disabled === true) return;
         performAnimation(false);
         child.props.onMouseLeave?.(e);
       },

diff --git a/src/components/DataManager/Toolbar/instruments.js b/src/components/DataManager/Toolbar/instruments.js
@@ -13,6 +13,8 @@ import { LoadingPossum } from "./LoadingPossum";
 import { OrderButton } from "./OrderButton";
 import { RefreshButton } from "./RefreshButton";
 import { ViewToggle } from "./ViewToggle";
+import { Tooltip } from "../../Common/Tooltip/Tooltip";
+import { Block } from "../../../utils/bem";
 
 const style = {
   minWidth: '110px',
@@ -80,7 +82,17 @@ export const instruments = {
   'import-button': ({ size }) => {
     return (
       <Interface name="import">
-        <ImportButton isSelfServeExpired={isSelfServeExpired} size={size}>Import</ImportButton>
+        <Tooltip
+          title="You must upgrade your plan to import data"
+          style={{
+            maxWidth:200,
+            textAlign: "center",
+          }}
+          disabled={!isSelfServeExpired}>
+          <Block name="button-wrapper">
+            <ImportButton disabled={isSelfServeExpired} size={size}>Import</ImportButton>
+          </Block>
+        </Tooltip>
       </Interface>
     );
   },