fix(Sheet): fix Sheet resize when viewport size changes (#1055)

gravity-ui · Oct 24, 2023 · 35a7b74 · 35a7b74
1 parent 4d54945
commit 35a7b74
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -33,7 +33,7 @@
 /src/components/User @DaffPunks
 /src/components/UserAvatar @DaffPunks
 /src/components/Select @korvin89
-/src/components/Sheet @korvin89
+/src/components/Sheet @mournfulCoroner
 /src/components/Skeleton @SeqviriouM
 /src/components/Spin @SeqviriouM
 /src/components/Stories @DarkGenius

diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx
@@ -50,7 +50,7 @@ interface SheetContentState {
     startScrollTop: number;
     startY: number;
     deltaY: number;
-    prevInnerContentHeight: number;
+    prevSheetHeight: number;
     swipeAreaTouched: boolean;
     contentTouched: boolean;
     veilTouched: boolean;
@@ -78,7 +78,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
         startScrollTop: 0,
         startY: 0,
         deltaY: 0,
-        prevInnerContentHeight: 0,
+        prevSheetHeight: 0,
         swipeAreaTouched: false,
         contentTouched: false,
         veilTouched: false,
@@ -90,7 +90,9 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
         this.addListeners();
         this.show();
         this.setInitialStyles();
-        this.setState({prevInnerContentHeight: this.innerContentHeight});
+        this.setState({
+            prevSheetHeight: this.sheetTitleHeight + this.innerContentHeight + this.sheetTopHeight,
+        });
     }
 
     componentDidUpdate(prevProps: SheetContentInnerProps) {
@@ -336,7 +338,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
             accelerationY > ACCELERATION_Y_MAX
         ) {
             this.hide();
-        } else {
+        } else if (deltaY !== 0) {
             this.show();
         }
     };
@@ -399,30 +401,26 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     };
 
     private onResize = () => {
-        const heightChanged = this.state.prevInnerContentHeight !== this.innerContentHeight;
-
-        if (!this.sheetRef.current || !this.sheetContentRef.current || !heightChanged) {
+        if (!this.sheetRef.current || !this.sheetContentRef.current) {
             return;
         }
 
+        const sheetHeight = this.sheetTitleHeight + this.innerContentHeight + this.sheetTopHeight;
+
+        const availableViewportHeight =
+            window.innerHeight * MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT;
+
+        const resultHeight =
+            sheetHeight >= availableViewportHeight ? availableViewportHeight : sheetHeight;
+
         this.sheetContentRef.current.style.transition =
-            this.state.prevInnerContentHeight > this.innerContentHeight
+            this.state.prevSheetHeight > sheetHeight
                 ? `height 0s ease ${this.transitionDuration}`
                 : 'none';
 
-        const contentHeight = this.sheetTitleHeight + this.innerContentHeight;
-
-        const viewportHeight = window.innerHeight;
-        const resultHeight =
-            contentHeight >= viewportHeight
-                ? viewportHeight * MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT
-                : contentHeight;
-
-        this.sheetContentRef.current.style.height = `${resultHeight}px`;
-        this.sheetRef.current.style.transform = `translate3d(0, -${
-            resultHeight + this.sheetTopHeight
-        }px, 0)`;
-        this.setState({prevInnerContentHeight: contentHeight});
+        this.sheetContentRef.current.style.height = `${resultHeight - this.sheetTopHeight}px`;
+        this.sheetRef.current.style.transform = `translate3d(0, -${resultHeight}px, 0)`;
+        this.setState({prevSheetHeight: sheetHeight});
     };
 
     private addListeners() {

diff --git a/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx b/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
-import {Button, Checkbox} from '../../../';
+import {Button, Checkbox, TextInput} from '../../../';
 import {cn} from '../../../utils/cn';
 import {Sheet} from '../../Sheet';
 import type {SheetProps} from '../../Sheet';
@@ -68,6 +68,9 @@ export const Showcase: StoryFn<SheetProps> = (args: SheetProps) => {
                 onClose={() => setVisible(false)}
                 title={withTitle ? 'Sheet title' : undefined}
             >
+                <div className={b('content-item')}>
+                    <TextInput />
+                </div>
                 <div className={b('content-item', b('checkbox'))}>
                     <Checkbox
                         content="Extra content"