feat(Modal, Select): Add optional closeTimeoutMS prop (#300)

binance-chain-npm · Dec 29, 2021 · 471c219 · 471c219
1 parent 87f4e3d
commit 471c219
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
@@ -39,6 +39,7 @@ export type Props = Testable & {
   closeOnEsc?: boolean;
   closeOnBackgroundClick?: boolean;
   onClose?: () => void;
+  closeTimeoutMS?: number;
 };
 
 export const Component = ({
@@ -51,6 +52,7 @@ export const Component = ({
   closeOnBackgroundClick = true,
   onClose,
   'data-testid': testId,
+  closeTimeoutMS = CLOSE_MODAL_TIMEOUT,
 }: Props) => {
   const { buildTestId } = useBuildTestId({ id: testId });
 
@@ -59,14 +61,20 @@ export const Component = ({
   const [show, setShow] = useState(false);
 
   const close = useCallback(() => {
-    onClose?.();
-
+    if (closeTimeoutMS === CLOSE_MODAL_TIMEOUT) {
+      onClose?.();
+      return;
+    }
     if (typeof window !== 'undefined') {
       window.setTimeout(() => {
-        if (isMounted) setShow(false);
-      }, CLOSE_MODAL_TIMEOUT);
+        onClose?.();
+      }, closeTimeoutMS);
     }
-  }, [onClose]);
+  }, [closeTimeoutMS, onClose]);
+
+  const handleOnAfterClose = useCallback(() => {
+    if (isMounted) setShow(false);
+  }, []);
 
   const context = useMemo(() => ({ loading, onClose: close, testId }), [loading, close, testId]);
 
@@ -88,9 +96,10 @@ export const Component = ({
     <ReactModal
       isOpen={open}
       onRequestClose={close}
+      onAfterClose={handleOnAfterClose}
       className={className}
       parentSelector={PARENT_SELECTOR}
-      closeTimeoutMS={CLOSE_MODAL_TIMEOUT}
+      closeTimeoutMS={closeTimeoutMS}
       shouldCloseOnEsc={closeOnEsc}
       shouldCloseOnOverlayClick={closeOnBackgroundClick}
       contentElement={(props, contentElement) => (

diff --git a/src/components/Select/component.tsx b/src/components/Select/component.tsx
@@ -41,7 +41,7 @@ export type Props = Pick<React.HTMLProps<HTMLElement>, 'children'> &
     target: React.ReactNode;
     open?: boolean;
     onClose?: () => void;
-    className?: string;
+    closeTimeoutMS?: number;
   };
 
 export const Component = ({