From c81dfffe0076c94dc61397fd17677cb24f67cdf2 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 24 Apr 2022 19:56:15 +0800
Subject: ...

---
 FrontEnd/src/utilities/hooks/mediaQuery.ts         |  5 ++
 FrontEnd/src/utilities/hooks/useClickOutside.ts    | 38 +++++++++++++++
 .../hooks/useReverseScrollPositionRemember.ts      | 56 ++++++++++++++++++++++
 FrontEnd/src/utilities/hooks/useScrollToTop.ts     | 43 +++++++++++++++++
 4 files changed, 142 insertions(+)
 create mode 100644 FrontEnd/src/utilities/hooks/mediaQuery.ts
 create mode 100644 FrontEnd/src/utilities/hooks/useClickOutside.ts
 create mode 100644 FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts
 create mode 100644 FrontEnd/src/utilities/hooks/useScrollToTop.ts

(limited to 'FrontEnd/src/utilities/hooks')

diff --git a/FrontEnd/src/utilities/hooks/mediaQuery.ts b/FrontEnd/src/utilities/hooks/mediaQuery.ts
new file mode 100644
index 00000000..ad55c3c0
--- /dev/null
+++ b/FrontEnd/src/utilities/hooks/mediaQuery.ts
@@ -0,0 +1,5 @@
+import { useMediaQuery } from "react-responsive";
+
+export function useIsSmallScreen(): boolean {
+  return useMediaQuery({ maxWidth: 576 });
+}
diff --git a/FrontEnd/src/utilities/hooks/useClickOutside.ts b/FrontEnd/src/utilities/hooks/useClickOutside.ts
new file mode 100644
index 00000000..4b2f0e5c
--- /dev/null
+++ b/FrontEnd/src/utilities/hooks/useClickOutside.ts
@@ -0,0 +1,38 @@
+import React from "react";
+
+export default function useClickOutside(
+  element: HTMLElement | null | undefined,
+  onClickOutside: () => void,
+  nextTick?: boolean
+): void {
+  const onClickOutsideRef = React.useRef<() => void>(onClickOutside);
+
+  React.useEffect(() => {
+    onClickOutsideRef.current = onClickOutside;
+  }, [onClickOutside]);
+
+  React.useEffect(() => {
+    if (element != null) {
+      const handler = (event: MouseEvent): void => {
+        let e: HTMLElement | null = event.target as HTMLElement;
+        while (e) {
+          if (e == element) {
+            return;
+          }
+          e = e.parentElement;
+        }
+        onClickOutsideRef.current();
+      };
+      if (nextTick) {
+        setTimeout(() => {
+          document.addEventListener("click", handler);
+        });
+      } else {
+        document.addEventListener("click", handler);
+      }
+      return () => {
+        document.removeEventListener("click", handler);
+      };
+    }
+  }, [element, nextTick]);
+}
diff --git a/FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts b/FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts
new file mode 100644
index 00000000..6fdd4b43
--- /dev/null
+++ b/FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts
@@ -0,0 +1,56 @@
+import React from "react";
+
+let on = false;
+
+let rememberedReversePosition = getReverseScrollPosition();
+
+export function getReverseScrollPosition(): number {
+  if (document.documentElement.scrollHeight <= window.innerHeight) {
+    return 0;
+  } else {
+    return (
+      document.documentElement.scrollHeight -
+      document.documentElement.scrollTop -
+      window.innerHeight
+    );
+  }
+}
+
+export function scrollToReverseScrollPosition(reversePosition: number): void {
+  if (document.documentElement.scrollHeight <= window.innerHeight) return;
+
+  const old = document.documentElement.style.scrollBehavior;
+  document.documentElement.style.scrollBehavior = "auto";
+
+  const newPosition =
+    document.documentElement.scrollHeight -
+    window.innerHeight -
+    reversePosition;
+
+  window.scrollTo(0, newPosition);
+
+  document.documentElement.style.scrollBehavior = old;
+}
+
+const scrollListener = (): void => {
+  rememberedReversePosition = getReverseScrollPosition();
+};
+
+const resizeObserver = new ResizeObserver(() => {
+  scrollToReverseScrollPosition(rememberedReversePosition);
+});
+
+export default function useReverseScrollPositionRemember(): void {
+  React.useEffect(() => {
+    if (on) return;
+    on = true;
+    window.addEventListener("scroll", scrollListener);
+    resizeObserver.observe(document.documentElement);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", scrollListener);
+      on = false;
+    };
+  }, []);
+}
diff --git a/FrontEnd/src/utilities/hooks/useScrollToTop.ts b/FrontEnd/src/utilities/hooks/useScrollToTop.ts
new file mode 100644
index 00000000..95c8b7b9
--- /dev/null
+++ b/FrontEnd/src/utilities/hooks/useScrollToTop.ts
@@ -0,0 +1,43 @@
+import React from "react";
+import { fromEvent } from "rxjs";
+import { filter, throttleTime } from "rxjs/operators";
+
+function useScrollToTop(
+  handler: () => void,
+  enable = true,
+  option = {
+    maxOffset: 5,
+    throttle: 1000,
+  }
+): void {
+  const handlerRef = React.useRef<(() => void) | null>(null);
+
+  React.useEffect(() => {
+    handlerRef.current = handler;
+
+    return () => {
+      handlerRef.current = null;
+    };
+  }, [handler]);
+
+  React.useEffect(() => {
+    const subscription = fromEvent(window, "scroll")
+      .pipe(
+        filter(() => {
+          return window.scrollY <= option.maxOffset;
+        }),
+        throttleTime(option.throttle)
+      )
+      .subscribe(() => {
+        if (enable) {
+          handlerRef.current?.();
+        }
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [enable, option.maxOffset, option.throttle]);
+}
+
+export default useScrollToTop;
-- 
cgit v1.2.3