fix(SheetContent): fix setting height for content (#572)

gravity-ui · Mar 17, 2023 · 01f9add · 01f9add
1 parent f1227f0
commit 01f9add
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 7 deletions.
diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx
@@ -9,6 +9,8 @@ const DEFAULT_TRANSITION_DURATION = '0.3s';
 const HIDE_THRESHOLD = 50;
 const ACCELERATION_Y_MAX = 0.08;
 const ACCELERATION_Y_MIN = -0.02;
+// 90% from viewport
+const MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT = 0.9;
 
 let hashHistory: string[] = [];
 
@@ -64,6 +66,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     sheetTopRef = React.createRef<HTMLDivElement>();
     sheetContentRef = React.createRef<HTMLDivElement>();
     sheetInnerContentRef = React.createRef<HTMLDivElement>();
+    sheetTitleRef = React.createRef<HTMLDivElement>();
     velocityTracker = new VelocityTracker();
     observer: MutationObserver | null = null;
     transitionDuration = DEFAULT_TRANSITION_DURATION;
@@ -161,7 +164,14 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
                         onTouchEnd={this.onContentTouchEnd}
                         onTransitionEnd={this.onContentTransitionEnd}
                     >
-                        {title && <div className={sheetBlock('sheet-content-title')}>{title}</div>}
+                        {title && (
+                            <div
+                                ref={this.sheetTitleRef}
+                                className={sheetBlock('sheet-content-title')}
+                            >
+                                {title}
+                            </div>
+                        )}
                         <div ref={this.sheetInnerContentRef}>{content}</div>
                     </div>
                 </div>
@@ -185,6 +195,10 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
         return this.sheetInnerContentRef.current?.getBoundingClientRect().height || 0;
     }
 
+    private get sheetTitleHeight() {
+        return this.sheetTitleRef.current?.getBoundingClientRect().height || 0;
+    }
+
     private get sheetScrollTop() {
         return this.sheetContentRef.current?.scrollTop || 0;
     }
@@ -392,12 +406,19 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
                 ? `height 0s ease ${this.transitionDuration}`
                 : 'none';
 
-        this.setState({prevInnerContentHeight: this.innerContentHeight});
+        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 = `${this.innerContentHeight}px`;
+        this.sheetContentRef.current.style.height = `${resultHeight}px`;
         this.sheetRef.current.style.transform = `translate3d(0, -${
-            this.innerContentHeight + this.sheetTopHeight
+            resultHeight + this.sheetTopHeight
         }px, 0)`;
+        this.setState({prevInnerContentHeight: contentHeight});
     };
 
     private addListeners() {

diff --git a/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx b/src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx
@@ -21,12 +21,16 @@ const getRandomText = (length: number) => {
 };
 
 const EXTRA_OUTER_CONTENT = getRandomText(8000);
-const EXTRA_INNER_CONTENT = getRandomText(1000);
+const EXTRA_INNER_CONTENT = getRandomText(500);
+const EXTRA_INNER_CONTENT_MORE_THAN_VIEWPORT = getRandomText(3000);
 
 export const Showcase: Story<SheetProps> = (args: SheetProps) => {
     const [visible, setVisible] = React.useState(false);
     const [withExtraOuterContent, setWithExtraOuterContent] = React.useState(false);
     const [withExtraInnerContent, setWithExtraInnerContent] = React.useState(false);
+    const [withExtraInnerContentMoreThenViewport, setWithExtraInnerContentMoreThenViewport] =
+        React.useState(false);
+    const [withTitle, setWithTitle] = React.useState(false);
 
     return (
         <div className={b()}>
@@ -40,22 +44,54 @@ export const Showcase: Story<SheetProps> = (args: SheetProps) => {
                     checked={withExtraOuterContent}
                 />
             </div>
+            <div className={b('content-item', b('checkbox'))}>
+                <Checkbox
+                    content="Show title in sheet"
+                    onUpdate={() => setWithTitle(!withTitle)}
+                    checked={withTitle}
+                />
+            </div>
             {withExtraOuterContent && (
                 <div className={b('extra-content')}>{EXTRA_OUTER_CONTENT}</div>
             )}
-            <Sheet {...args} visible={visible} onClose={() => setVisible(false)}>
+            <Sheet
+                {...args}
+                visible={visible}
+                onClose={() => setVisible(false)}
+                title={withTitle ? 'Sheet title' : undefined}
+            >
                 <div className={b('content-item', b('checkbox'))}>
                     <Checkbox
                         content="Extra content"
-                        onUpdate={() => setWithExtraInnerContent(!withExtraInnerContent)}
+                        onUpdate={() => {
+                            setWithExtraInnerContent(!withExtraInnerContent);
+                            setWithExtraInnerContentMoreThenViewport(false);
+                        }}
                         checked={withExtraInnerContent}
                     />
                 </div>
+                <div className={b('content-item', b('checkbox'))}>
+                    <Checkbox
+                        content="Extra content more then viewport"
+                        onUpdate={() => {
+                            setWithExtraInnerContentMoreThenViewport(
+                                !withExtraInnerContentMoreThenViewport,
+                            );
+                            setWithExtraInnerContent(false);
+                        }}
+                        checked={withExtraInnerContentMoreThenViewport}
+                    />
+                </div>
                 {withExtraInnerContent && (
                     <div className={b('content-item', b('extra-content'))}>
                         {EXTRA_INNER_CONTENT}
                     </div>
                 )}
+                {withExtraInnerContentMoreThenViewport && (
+                    <div className={b('content-item', b('extra-content'))}>
+                        {EXTRA_INNER_CONTENT_MORE_THAN_VIEWPORT}
+                    </div>
+                )}
                 <Button
                     view="action"
                     size="s"