fix: cancelation on backdrop click

lifinance · Nov 24, 2022 · 7d648ad · 7d648ad
1 parent 8a36627
commit 7d648ad
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/packages/widget/src/components/BottomSheet/BottomSheet.tsx b/packages/widget/src/components/BottomSheet/BottomSheet.tsx
@@ -4,20 +4,21 @@ import {
   useCallback,
   useImperativeHandle,
   useRef,
-  useState,
+  useState
 } from 'react';
 import { getScrollableContainer } from '../../hooks';
 import { backdropProps, modalProps, paperProps } from '../Dialog';
 import type { BottomSheetBase, BottomSheetProps } from './types';
 
 export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
-  ({ elementRef, children, open }, ref) => {
+  ({ elementRef, children, open, onClose }, ref) => {
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
 
     const close = useCallback(() => {
       setDrawerOpen(false);
       openRef.current = false;
+      onClose?.();
     }, []);
 
     useImperativeHandle(

diff --git a/packages/widget/src/components/BottomSheet/types.ts b/packages/widget/src/components/BottomSheet/types.ts
@@ -1,8 +1,9 @@
 import type { DrawerProps } from '@mui/material';
 import type { RefObject } from 'react';
 
-export type BottomSheetProps = DrawerProps & {
+export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
   elementRef?: RefObject<HTMLDivElement>;
+  onClose?(): void;
 };
 
 export interface BottomSheetBase {

diff --git a/packages/widget/src/pages/SwapPage/ExchangeRateBottomSheet.tsx b/packages/widget/src/pages/SwapPage/ExchangeRateBottomSheet.tsx
@@ -6,6 +6,7 @@ import Big from 'big.js';
 import {
   forwardRef,
   MutableRefObject,
+  useCallback,
   useImperativeHandle,
   useRef,
   useState
@@ -45,12 +46,12 @@ export const ExchangeRateBottomSheet = forwardRef<
     onContinue?.();
   };
 
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
       false,
     );
     onCancel?.();
-  };
+  }, []);
 
   useImperativeHandle(
     ref,
@@ -70,7 +71,7 @@ export const ExchangeRateBottomSheet = forwardRef<
   );
 
   return (
-    <BottomSheet ref={bottomSheetRef}>
+    <BottomSheet ref={bottomSheetRef} onClose={handleCancel}>
       <ExchangeRateBottomSheetContent
         data={data}
         onContinue={handleContinue}

diff --git a/packages/widget/src/pages/SwapPage/TokenValueBottomSheet.tsx b/packages/widget/src/pages/SwapPage/TokenValueBottomSheet.tsx
@@ -3,8 +3,7 @@ import type { Route } from '@lifi/sdk';
 import { WarningRounded as WarningIcon } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
 import Big from 'big.js';
-import type { MutableRefObject } from 'react';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, MutableRefObject, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { BottomSheetBase } from '../../components/BottomSheet';
 import { BottomSheet } from '../../components/BottomSheet';
@@ -21,13 +20,13 @@ export const TokenValueBottomSheet = forwardRef<
   BottomSheetBase,
   TokenValueBottomSheetProps
 >(({ route, onContinue, onCancel }, ref) => {
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     (ref as MutableRefObject<BottomSheetBase>).current?.close();
     onCancel?.();
-  };
+  }, []);
 
   return (
-    <BottomSheet ref={ref}>
+    <BottomSheet ref={ref} onClose={handleCancel}>
       <TokenValueBottomSheetContent
         route={route}
         onContinue={onContinue}