diff --git a/.changeset/rude-gorillas-promise.md b/.changeset/rude-gorillas-promise.md new file mode 100644 index 0000000000..5b36b9e19c --- /dev/null +++ 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 new file mode 100644 index 0000000000..d402265380 --- /dev/null +++ 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 index 7f399f086d..579bd0511d 100644 --- 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( ( { @@ -98,7 +100,6 @@ export const BottomSheet = forwardRef( }, ref, ) => { - const hasInitialIdx = initialActiveAreaIndex !== undefined; const fullHeight = use100vh() || 0; // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null. const isFirstRender = fullHeight === 0; @@ -389,12 +390,10 @@ export const BottomSheet = forwardRef( 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( }; 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 new file mode 100644 index 0000000000..a2d3d08d76 --- /dev/null +++ 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 index 0c4695fc03..923e424ae2 100644 --- 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';