Merge pull request #1 from mriiad/popup-disabled-issue

Popup do not hide when disabled is set yjose#293
Kinjeiro · Oct 11, 2023 · 6a43e23 · 6a43e23
2 parents c085fa6 + 8838945
commit 6a43e23
Showing 1 changed file with 38 additions and 44 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,25 +1,18 @@
 import React, {
-  useState,
-  useRef,
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
+  forwardRef, useEffect, useImperativeHandle, useRef, useState
 } from 'react';
 import ReactDOM from 'react-dom';
-import { PopupProps, PopupActions } from './types';
 import {
-  useOnEscape,
-  useRepositionOnResize,
-  useOnClickOutside,
-  useTabbing,
-  useIsomorphicLayoutEffect,
+  useIsomorphicLayoutEffect, useOnClickOutside, useOnEscape,
+  useRepositionOnResize, useTabbing
 } from './hooks';
-
 import './index.css';
-
 import styles from './styles';
+import { PopupActions, PopupProps } from './types';
 import calculatePosition from './Utils';
 
+
+
 let popupIdCounter = 0;
 
 const getRootPopup = () => {
@@ -38,8 +31,8 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
   (
     {
       trigger = null,
-      onOpen = () => {},
-      onClose = () => {},
+      onOpen = () => { },
+      onClose = () => { },
       defaultOpen = false,
       open = undefined,
       disabled = false,
@@ -91,22 +84,26 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
 
     // for uncontrolled popup we need to sync isOpen with open prop
     useEffect(() => {
-      if (typeof open === 'boolean') {
-        if (open) openPopup();
-        else closePopup();
+      if (!disabled) {
+        if (typeof open === 'boolean') {
+          if (open) openPopup();
+          else closePopup();
+        }
+      } else {
+        closePopup();
       }
     }, [open, disabled]);
 
     const openPopup = (event?: React.SyntheticEvent) => {
-      if (isOpen || disabled) return;
+      if (isOpen) return;
       setIsOpen(true);
       setTimeout(() => onOpen(event), 0);
     };
 
     const closePopup = (
       event?: React.SyntheticEvent | KeyboardEvent | TouchEvent | MouseEvent
     ) => {
-      if (!isOpen || disabled) return;
+      if (!isOpen) return;
       setIsOpen(false);
       if (isModal) (focusedElBeforeOpen.current as HTMLElement)?.focus();
       setTimeout(() => onClose(event), 0);
@@ -247,14 +244,13 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
         : styles.popupContent.tooltip;
 
       const childrenElementProps: any = {
-        className: `popup-content ${
-          className !== ''
-            ? className
-                .split(' ')
-                .map(c => `${c}-content`)
-                .join(' ')
-            : ''
-        }`,
+        className: `popup-content ${className !== ''
+          ? className
+            .split(' ')
+            .map(c => `${c}-content`)
+            .join(' ')
+          : ''
+          }`,
         style: {
           ...popupContentStyle,
           ...contentStyle,
@@ -284,14 +280,13 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
             <div ref={arrowRef} style={styles.popupArrow}>
               <svg
                 data-testid="arrow"
-                className={`popup-arrow ${
-                  className !== ''
-                    ? className
-                        .split(' ')
-                        .map(c => `${c}-arrow`)
-                        .join(' ')
-                    : ''
-                }`}
+                className={`popup-arrow ${className !== ''
+                  ? className
+                    .split(' ')
+                    .map(c => `${c}-arrow`)
+                    .join(' ')
+                  : ''
+                  }`}
                 viewBox="0 0 32 16"
                 style={{
                   position: 'absolute',
@@ -318,14 +313,13 @@ export const Popup = forwardRef<PopupActions, PopupProps>(
           key="O"
           data-testid="overlay"
           data-popup={isModal ? 'modal' : 'tooltip'}
-          className={`popup-overlay ${
-            className !== ''
-              ? className
-                  .split(' ')
-                  .map(c => `${c}-overlay`)
-                  .join(' ')
-              : ''
-          }`}
+          className={`popup-overlay ${className !== ''
+            ? className
+              .split(' ')
+              .map(c => `${c}-overlay`)
+              .join(' ')
+            : ''
+            }`}
           style={{
             ...ovStyle,
             ...overlayStyle,