fix(Sheet): resize sheet if image in content is loaded (#1566)

src/components/Sheet/SheetContent.tsx

@@ -71,7 +71,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     sheetInnerContentRef = React.createRef<HTMLDivElement>();
     sheetTitleRef = React.createRef<HTMLDivElement>();
     velocityTracker = new VelocityTracker();
-    observer: MutationObserver | null = null;
+    observer: ResizeObserver | null = null;
 
     state: SheetContentState = {
         startScrollTop: 0,
@@ -408,6 +408,10 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
 
         const sheetHeight = this.sheetTitleHeight + this.innerContentHeight + this.sheetTopHeight;
 
+        if (sheetHeight === this.state.prevSheetHeight && !this.state.inWindowResizeScope) {
+            return;
+        }
+
         const availableViewportHeight =
             window.innerHeight * MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT;
 
@@ -427,10 +431,13 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     private addListeners() {
         window.addEventListener('resize', this.onResizeWindow);
 
-        if (this.sheetRef.current) {
-            const config = {subtree: true, childList: true};
-            this.observer = new MutationObserver(this.onResize);
-            this.observer.observe(this.sheetRef.current, config);
+        if (this.sheetInnerContentRef.current) {
+            this.observer = new ResizeObserver(() => {
+                if (!this.state.inWindowResizeScope) {
+                    this.onResize();
+                }
+            });
+            this.observer.observe(this.sheetInnerContentRef.current);
         }
     }
 

src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx

@@ -32,7 +32,10 @@ export default {
     component: Sheet,
 } as Meta;
 
-export const Showcase: StoryFn<SheetProps> = (args: SheetProps) => {
+export const Default: StoryFn<SheetProps> = ({
+    allowHideOnContentScroll = false,
+    ...args
+}: SheetProps) => {
     const [visible, setVisible] = React.useState(false);
     const [withExtraOuterContent, setWithExtraOuterContent] = React.useState(false);
     const [withExtraInnerContent, setWithExtraInnerContent] = React.useState(false);
@@ -64,6 +67,7 @@ export const Showcase: StoryFn<SheetProps> = (args: SheetProps) => {
             )}
             <Sheet
                 {...args}
+                allowHideOnContentScroll={allowHideOnContentScroll}
                 visible={visible}
                 onClose={() => setVisible(false)}
                 title={withTitle ? 'Sheet title' : undefined}

src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.scss

@@ -0,0 +1,15 @@
+.sheet-stories-with-multiple-sheets {
+    display: flex;
+    justify-content: center;
+
+    &__show-btn {
+        margin: 20px 0;
+    }
+
+    img {
+        object-fit: contain;
+        border: none;
+        max-width: 100%;
+        vertical-align: middle;
+    }
+}

src/components/Sheet/__stories__/MultipleSheetsShowcase/MultipleSheets.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Button} from '../../..';
+import {cn} from '../../../utils/cn';
+import {Sheet} from '../../Sheet';
+import type {SheetProps} from '../../Sheet';
+
+import './MultipleSheets.scss';
+
+const b = cn('sheet-stories-with-multiple-sheets');
+
+export default {
+    title: 'Components/Overlays/Sheet',
+    component: Sheet,
+} as Meta;
+
+export const MultipleSheets: StoryFn<SheetProps> = (args: SheetProps) => {
+    const [visible, setVisible] = React.useState(false);
+    const [moreContentVisible, setMoreContentVisible] = React.useState(false);
+
+    return (
+        <div className={b()}>
+            <Button className={b('show-btn')} onClick={() => setVisible(true)}>
+                Show modal
+            </Button>
+            <Sheet {...args} visible={visible} id="main" onClose={() => setVisible(false)}>
+                <img
+                    src="https://avatars.githubusercontent.com/u/107542106"
+                    width="100%"
+                    alt="example"
+                />
+                <Button
+                    size="xl"
+                    width="max"
+                    className={b('show-btn')}
+                    onClick={() => setMoreContentVisible(true)}
+                >
+                    Show one more modal
+                </Button>
+            </Sheet>
+            <Sheet
+                {...args}
+                id="more-content"
+                visible={moreContentVisible}
+                onClose={() => setMoreContentVisible(false)}
+            >
+                <div className={b('text')}>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam consequatur
+                    quasi quo temporibus. Optio tenetur, aliquam ratione natus asperiores
+                    necessitatibus? Cumque nulla nesciunt esse minus cum nam rerum illum dicta.
+                </div>
+                <div>
+                    <Button
+                        size="xl"
+                        width="max"
+                        className={b('show-btn')}
+                        onClick={() => setMoreContentVisible(false)}
+                    >
+                        Close
+                    </Button>
+                </div>
+            </Sheet>
+        </div>
+    );
+};

src/components/Sheet/__stories__/Sheet.stories.tsx

@@ -2,18 +2,7 @@ import type {Meta} from '@storybook/react';
 
 import {Sheet} from '../Sheet';
 
-import {Showcase} from './DefaultShowcase/DefaultShowcase.stories';
-import {WithMenuShowcase} from './WithMenuShowcase/WithMenuShowcase.stories';
-
 export default {
     title: 'Components/Overlays/Sheet',
     component: Sheet,
 } as Meta;
-
-export const Default = Showcase.bind({});
-
-Default.args = {
-    allowHideOnContentScroll: false,
-};
-
-export const WithMenu = WithMenuShowcase.bind({});