feat(UIKIT-1606,Notify): Реализована адаптивность под мобильные устро…

…йства (#1079)
kaluga-astral · Aug 7, 2024 · 525bb48 · 525bb48
1 parent be8e92f
commit 525bb48
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git a/...s/components/src/NotificationNext/NotificationContainerNext/NotificationContainerNext.tsx b/...s/components/src/NotificationNext/NotificationContainerNext/NotificationContainerNext.tsx
@@ -6,6 +6,7 @@ import {
   NOTIFY_CONTAINER_ID,
   NOTIFY_POSITIONS,
 } from '../constants';
+import { useViewportType } from '../../hooks/useViewportType';
 
 import { Inner, Wrapper } from './styles';
 
@@ -23,21 +24,27 @@ export type NotificationContainerProps = Omit<
 export const NotificationContainerNext = ({
   containerId = NOTIFY_CONTAINER_ID,
   ...props
-}: NotificationContainerProps) => (
-  <Wrapper>
-    <Inner
-      {...props}
-      containerId={containerId}
-      pauseOnFocusLoss
-      position={NOTIFY_POSITIONS.BOTTOM_RIGHT}
-      newestOnTop={false}
-      closeOnClick={false}
-      draggable={false}
-      rtl={false}
-      closeButton={false}
-      bodyClassName={`${NOTIFY_CLASSNAME}__body`}
-      toastClassName={NOTIFY_CLASSNAME}
-      progressClassName={`${NOTIFY_CLASSNAME}__progress`}
-    />
-  </Wrapper>
-);
+}: NotificationContainerProps) => {
+  const { isMobile } = useViewportType();
+
+  return (
+    <Wrapper>
+      <Inner
+        {...props}
+        containerId={containerId}
+        pauseOnFocusLoss
+        position={
+          isMobile ? NOTIFY_POSITIONS.TOP_CENTER : NOTIFY_POSITIONS.BOTTOM_RIGHT
+        }
+        newestOnTop={false}
+        closeOnClick={false}
+        draggable={false}
+        rtl={false}
+        closeButton={false}
+        bodyClassName={`${NOTIFY_CLASSNAME}__body`}
+        toastClassName={NOTIFY_CLASSNAME}
+        progressClassName={`${NOTIFY_CLASSNAME}__progress`}
+      />
+    </Wrapper>
+  );
+};
diff --git a/packages/components/src/NotificationNext/NotificationContainerNext/styles.ts b/packages/components/src/NotificationNext/NotificationContainerNext/styles.ts
@@ -27,6 +27,15 @@ const leaveOut = keyframes`
   }
 `;
 
+const leaveInMobile = keyframes`
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0px);
+  }
+`;
+
 // используем дополнительный враппер,
 // потому что styled для ToastContainer не умеет работать с theme внутри
 // использовать бэм классы для стилизации пришлось,
@@ -37,6 +46,11 @@ export const Wrapper = styled.div`
   .${NOTIFY_ANIMATION_IN_CLASSNAME} {
     animation: ${leaveIn} ease-in-out 0.34s;
     animation-fill-mode: both;
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      animation: ${leaveInMobile} ease-in-out 0.34s;
+      animation-fill-mode: both;
+    }
   }
 
   .${NOTIFY_ANIMATION_OUT_CLASSNAME} {
@@ -62,6 +76,10 @@ export const Wrapper = styled.div`
       height: 3px;
     }
 
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin-bottom: ${({ theme }) => theme.spacing(3)};
+    }
+
     .Toastify__progress-bar--wrp {
       top: 0;
 
@@ -118,4 +136,11 @@ export const Wrapper = styled.div`
 export const Inner = styled(ToastContainer)`
   min-width: 400px;
   max-width: 400px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+    min-width: unset;
+    max-width: unset;
+    padding: ${({ theme }) => theme.spacing(2, 4, 0, 4)};
+  }
 `;