fix(Sheet): fix resizing depending on the size of the window (#1671)

gravity-ui · Jun 20, 2024 · 9352c99 · 9352c99
1 parent 164a1f2
commit 9352c99
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 19 deletions.
diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx
@@ -16,6 +16,7 @@ const ACCELERATION_Y_MAX = 0.08;
 const ACCELERATION_Y_MIN = -0.02;
 // 90% from viewport
 const MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT = 0.9;
+const WINDOW_RESIZE_TIMEOUT = 25;
 
 let hashHistory: string[] = [];
 
@@ -74,6 +75,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     sheetTitleRef = React.createRef<HTMLDivElement>();
     velocityTracker = new VelocityTracker();
     observer: ResizeObserver | null = null;
+    resizeWindowTimer: number | null = null;
 
     state: SheetContentState = {
         startScrollTop: 0,
@@ -90,9 +92,12 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     componentDidMount() {
         this.addListeners();
         this.show();
-        this.setInitialStyles();
+
+        const initialHeight = this.getResultHeight(this.sheetFullHeight);
+
+        this.setInitialStyles(initialHeight);
         this.setState({
-            prevSheetHeight: this.sheetTitleHeight + this.innerContentHeight + this.sheetTopHeight,
+            prevSheetHeight: initialHeight,
         });
     }
 
@@ -216,9 +221,12 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
         return this.sheetContentRef.current?.scrollTop || 0;
     }
 
-    private setInitialStyles() {
+    private get sheetFullHeight() {
+        return this.sheetTitleHeight + this.innerContentHeight + this.sheetTopHeight;
+    }
+
+    private setInitialStyles(initialHeight: number) {
         if (this.sheetContentRef.current && this.sheetInnerContentRef.current) {
-            const initialHeight = this.sheetHeight - this.sheetTopHeight;
             this.sheetContentRef.current.style.height = `${initialHeight}px`;
         }
     }
@@ -244,6 +252,16 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
         this.sheetRef.current.style.transform = translate;
     };
 
+    private getResultHeight = (sheetHeight: number) => {
+        const availableViewportHeight =
+            window.innerHeight * MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT - this.sheetTopHeight;
+
+        const resultHeight =
+            sheetHeight >= availableViewportHeight ? availableViewportHeight : sheetHeight;
+
+        return resultHeight;
+    };
+
     private show = () => {
         this.setState({isAnimating: true}, () => {
             this.setStyles({status: 'showing'});
@@ -403,27 +421,27 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     private onResizeWindow = () => {
         this.setState({inWindowResizeScope: true});
 
-        this.onResize();
+        if (this.resizeWindowTimer) {
+            window.clearTimeout(this.resizeWindowTimer);
+        }
 
-        setTimeout(() => this.setState({inWindowResizeScope: false}), 0);
+        this.resizeWindowTimer = window.setTimeout(() => {
+            this.onResize();
+        }, WINDOW_RESIZE_TIMEOUT);
     };
 
     private onResize = () => {
         if (!this.sheetRef.current || !this.sheetContentRef.current) {
             return;
         }
 
-        const sheetHeight = this.sheetTitleHeight + this.innerContentHeight + this.sheetTopHeight;
+        const sheetHeight = this.sheetFullHeight;
 
         if (sheetHeight === this.state.prevSheetHeight && !this.state.inWindowResizeScope) {
             return;
         }
 
-        const availableViewportHeight =
-            window.innerHeight * MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT;
-
-        const resultHeight =
-            sheetHeight >= availableViewportHeight ? availableViewportHeight : sheetHeight;
+        const resultHeight = this.getResultHeight(sheetHeight);
 
         this.sheetContentRef.current.style.transition =
             this.state.prevSheetHeight > sheetHeight
@@ -432,7 +450,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
 
         this.sheetContentRef.current.style.height = `${resultHeight - this.sheetTopHeight}px`;
         this.sheetRef.current.style.transform = `translate3d(0, -${resultHeight}px, 0)`;
-        this.setState({prevSheetHeight: sheetHeight});
+        this.setState({prevSheetHeight: sheetHeight, inWindowResizeScope: false});
     };
 
     private addListeners() {

diff --git a/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.scss b/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.scss
@@ -22,6 +22,8 @@
 
     &__extra-content {
         word-wrap: break-word;
+        margin: 20px 0;
+        padding: 0 10px;
     }
 
     &__content-item {

diff --git a/src/components/Sheet/__stories__/WithMenuShowcase/WithMenuShowcase.scss b/src/components/Sheet/__stories__/WithMenuShowcase/WithMenuShowcase.scss
@@ -5,4 +5,9 @@
     &__show-btn {
         width: max-content;
     }
+
+    &__menu {
+        margin: 10px 0;
+        padding: 5px 0;
+    }
 }
diff --git a/src/components/Sheet/__stories__/WithMenuShowcase/WithMenuShowcase.stories.tsx b/src/components/Sheet/__stories__/WithMenuShowcase/WithMenuShowcase.stories.tsx
@@ -19,23 +19,25 @@ export default {
 export const WithMenuShowcase: StoryFn<SheetProps> = (args: SheetProps) => {
     const [visible, setVisible] = React.useState(false);
 
+    const generateMenuItems = () => {
+        return Array.from({length: 50}, (_, index) => {
+            return <Menu.Item key={index}>menu item 2.{index}</Menu.Item>;
+        });
+    };
+
     return (
         <div className={b()}>
             <Button className={b('show-btn')} onClick={() => setVisible(true)}>
                 Show modal
             </Button>
             <Sheet {...args} visible={visible} onClose={() => setVisible(false)}>
-                <Menu>
+                <Menu className={b('menu')}>
                     <Menu.Group>
                         <Menu.Item>menu item 1.1</Menu.Item>
                         <Menu.Item>menu item 1.2</Menu.Item>
                         <Menu.Item>menu item 1.3</Menu.Item>
                     </Menu.Group>
-                    <Menu.Group>
-                        <Menu.Item>menu item 2.1</Menu.Item>
-                        <Menu.Item>menu item 2.2</Menu.Item>
-                        <Menu.Item>menu item 2.3</Menu.Item>
-                    </Menu.Group>
+                    <Menu.Group>{generateMenuItems()}</Menu.Group>
                 </Menu>
             </Sheet>
         </div>