feat: fix drawer provider, add browsers list config

TomatoVan · Mar 6, 2024 · f0858ae · f0858ae
1 parent 431664a
commit f0858ae
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+# Browsers that we support
+defaults
+not IE 11
diff --git a/src/features/notificationButton/ui/NotificationButton/NotificationButton.tsx b/src/features/notificationButton/ui/NotificationButton/NotificationButton.tsx
@@ -5,7 +5,6 @@ import { Icon } from '@/shared/ui/Icon/Icon';
 import NotificationIcon from '@/shared/assets/icons/notification-20-20.svg';
 import { Popover } from '@/shared/ui/Popups';
 import { Drawer } from '@/shared/ui/Drawer/Drawer';
-import { AnimationProvider } from '@/shared/lib/components/AnimationProvider';
 import { NotificationList } from '../../../../entities/Notification';
 import cls from './NotificationButton.module.scss';
 
@@ -29,20 +28,15 @@ export const NotificationButton = memo(() => {
     return (
         <div>
             <BrowserView>
-                <Popover
-                    direction="bottom left"
-                    trigger={trigger}
-                >
+                <Popover direction="bottom left" trigger={trigger}>
                     <NotificationList className={cls.notifications} />
                 </Popover>
             </BrowserView>
             <MobileView>
                 {trigger}
-                <AnimationProvider>
-                    <Drawer isOpen={isOpen} onClose={onCloseDrawer}>
-                        <NotificationList />
-                    </Drawer>
-                </AnimationProvider>
+                <Drawer isOpen={isOpen} onClose={onCloseDrawer}>
+                    <NotificationList />
+                </Drawer>
             </MobileView>
         </div>
     );

diff --git a/src/shared/ui/Drawer/Drawer.tsx b/src/shared/ui/Drawer/Drawer.tsx
@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useTheme } from '@/app/providers/ThemeProvider';
-import { useAnimationLibs } from '@/shared/lib/components/AnimationProvider';
+import { AnimationProvider, useAnimationLibs } from '@/shared/lib/components/AnimationProvider';
 import { Overlay } from '../Overlay/Overlay';
 import cls from './Drawer.module.scss';
 import { Portal } from '../Portal/Portal';
@@ -96,12 +96,18 @@ export const DrawerContent = memo((props: DrawerProps) => {
     );
 });
 
-export const Drawer = memo((props: DrawerProps) => {
+const DrawerAsync = (props: DrawerProps) => {
     const { isLoaded } = useAnimationLibs();
 
     if (!isLoaded) {
         return null;
     }
 
     return <DrawerContent {...props} />;
-});
+};
+
+export const Drawer = (props: DrawerProps) => (
+    <AnimationProvider>
+        <DrawerAsync {...props} />
+    </AnimationProvider>
+);