fix(bottom-sheet): fixed height calculation

core-ds · Sep 11, 2023 · 626a126 · 626a126
1 parent 9658abb
commit 626a126
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/.changeset/rude-gorillas-promise.md b/.changeset/rude-gorillas-promise.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-bottom-sheet': patch
+---
+
+Исправлена ошибка, из-за которой не пересчитывалась высота магнитных зон
diff --git a/.changeset/witty-snails-marry.md b/.changeset/witty-snails-marry.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-shared': minor
+---
+
+Добавлена функция isNil
diff --git a/packages/bottom-sheet/src/component.tsx b/packages/bottom-sheet/src/component.tsx
@@ -14,7 +14,7 @@ import { HandledEvents } from 'react-swipeable/es/types';
 import cn from 'classnames';
 
 import { BaseModal } from '@alfalab/core-components-base-modal';
-import { getDataTestId } from '@alfalab/core-components-shared';
+import { fnUtils, getDataTestId } from '@alfalab/core-components-shared';
 
 import { Footer } from './components/footer/Component';
 import { Header, HeaderProps } from './components/header/Component';
@@ -31,6 +31,8 @@ import {
 
 import styles from './index.module.css';
 
+const { isNil } = fnUtils;
+
 export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
     (
         {
@@ -98,7 +100,6 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
         },
         ref,
     ) => {
-        const hasInitialIdx = initialActiveAreaIndex !== undefined;
         const fullHeight = use100vh() || 0;
         // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
         const isFirstRender = fullHeight === 0;
@@ -389,12 +390,10 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
 
         const handleExited = (node: HTMLElement) => {
             const idx = initialActiveAreaIndex as number;
-            const nextArea = hasInitialIdx ? magneticAreas[idx] : lastMagneticArea;
+            const nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
 
             setBackdropOpacity(1);
-            setSheetOffset(
-                hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0],
-            );
+            setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
             setActiveArea(nextArea);
             onMagnetizeEnd?.();
             if (transitionProps.onExited) {
@@ -431,19 +430,14 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
         };
 
         useEffect(() => {
-            // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
+            // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (!isFirstRender) {
-                setSheetOffset(
-                    hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0,
-                );
+                const idx = initialActiveAreaIndex as number;
 
-                setActiveArea(
-                    hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea,
-                );
+                setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
+                setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
             }
-
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [isFirstRender]);
+        }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
 
         useEffect(() => {
             if (!sheetRef.current) return;

diff --git a/packages/shared/src/fnUtils.ts b/packages/shared/src/fnUtils.ts
@@ -0,0 +1,10 @@
+/**
+ * Возвращает true, если значение равно null или undefined
+ */
+function isNil(value: unknown) {
+    return value == null;
+}
+
+export const fnUtils = {
+    isNil,
+};
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -3,3 +3,4 @@ export * from './getDataTestId';
 export * from './createPaddingStyle';
 export * from './easingFns';
 export * from './inputUtils';
+export * from './fnUtils';