Merge pull request #612 from easyops-cn/steve/footer-pinned

fix(main-view): show footer shadow only when it's pinned
easyops-cn · Nov 16, 2023 · 5686c37 · 5686c37
2 parents 249f59e + 9045955
commit 5686c37
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 8 deletions.
diff --git a/bricks/containers/src/main-view/index.spec.tsx b/bricks/containers/src/main-view/index.spec.tsx
@@ -5,8 +5,16 @@ import { EoMainView } from "./index.js";
 
 jest.mock("@next-core/theme", () => ({}));
 
+const disconnect = jest.fn();
+(global.IntersectionObserver as any) = jest.fn((callback: any) => ({
+  observe() {
+    callback([{ intersectionRatio: 0.99 }]);
+  },
+  disconnect,
+}));
+
 describe("eo-main-view", () => {
-  test("basic usage", async () => {
+  test("basic usage", () => {
     const element = document.createElement("eo-main-view") as EoMainView;
 
     expect(element.shadowRoot).toBeFalsy();
@@ -26,7 +34,7 @@ describe("eo-main-view", () => {
     expect(element.shadowRoot?.childNodes.length).toBe(0);
   });
 
-  test("narrow", async () => {
+  test("narrow", () => {
     const element = document.createElement("eo-main-view") as EoMainView;
     element.narrow = "medium";
 
@@ -43,7 +51,7 @@ describe("eo-main-view", () => {
     });
   });
 
-  test("banner alone", async () => {
+  test("banner alone", () => {
     const element = document.createElement("eo-main-view") as EoMainView;
     element.bannerAlone = true;
     element.bannerTitle = "Hello";
@@ -65,4 +73,25 @@ describe("eo-main-view", () => {
       document.body.removeChild(element);
     });
   });
+
+  test("footer", async () => {
+    const element = document.createElement("eo-main-view") as EoMainView;
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+    expect(
+      element.shadowRoot?.querySelector(".footer").classList.contains("pinned")
+    ).toBe(false);
+
+    element.showFooter = true;
+    await act(() => (global as any).flushPromises());
+    expect(
+      element.shadowRoot?.querySelector(".footer").classList.contains("pinned")
+    ).toBe(true);
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
 });
diff --git a/bricks/containers/src/main-view/index.tsx b/bricks/containers/src/main-view/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createDecorators } from "@next-core/element";
 import {
   ReactNextElement,
@@ -13,6 +13,7 @@ import type {
 } from "../narrow-view/index.js";
 import { BannerProps, EoBanner } from "../banner/index.js";
 import styleText from "./styles.shadow.css";
+import classNames from "classnames";
 
 const { defineElement, property } = createDecorators();
 
@@ -111,6 +112,7 @@ class EoMainView extends ReactNextElement {
         bannerTitle={this.bannerTitle}
         bannerDescription={this.bannerDescription}
         bannerImage={this.bannerImage}
+        showFooter={this.showFooter}
       />
     );
   }
@@ -122,9 +124,31 @@ export function EoMainViewComponent({
   bannerTitle,
   bannerDescription,
   bannerImage,
+  showFooter,
 }: MainViewProps) {
   const narrow = _narrow ?? "full";
   const bannerConfig = bannerAlone ? { bannerTitle, bannerDescription } : null;
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [footerPinned, setFooterPinned] = useState(false);
+
+  useEffect(() => {
+    const footer = footerRef.current;
+    if (showFooter && footer) {
+      const observer = new IntersectionObserver(
+        ([e]) => {
+          setFooterPinned(e.intersectionRatio < 1);
+        },
+        {
+          rootMargin: "0px 0px -1px 0px",
+          threshold: [1],
+        }
+      );
+      observer.observe(footer);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [showFooter]);
 
   return (
     <>
@@ -153,7 +177,10 @@ export function EoMainViewComponent({
       <WrappedNarrowView className="content" size={narrow}>
         <slot />
       </WrappedNarrowView>
-      <div className="footer">
+      <div
+        className={classNames("footer", { pinned: footerPinned })}
+        ref={footerRef}
+      >
         <WrappedNarrowView size={narrow}>
           <slot name="footer" />
         </WrappedNarrowView>

diff --git a/bricks/containers/src/main-view/styles.shadow.css b/bricks/containers/src/main-view/styles.shadow.css
@@ -80,16 +80,19 @@ eo-banner {
   position: sticky;
   bottom: 0;
   width: 100%;
-  background: var(--color-fill-global-bg-2);
-  /* box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.08); */
-  box-shadow: var(--slide-up-shadow);
   margin-left: calc(-1 * var(--page-padding-left));
   margin-right: calc(-1 * var(--page-padding-right));
   margin-bottom: calc(-1 * var(--page-padding-bottom));
   padding-left: var(--page-padding-left);
   padding-right: var(--page-padding-right);
 }
 
+.pinned {
+  background: var(--color-fill-global-bg-2);
+  /* box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.08); */
+  box-shadow: var(--slide-up-shadow);
+}
+
 .footer > eo-narrow-view {
   padding: 20px 0;
 }