@docusaurus/theme-classic 0.0.0-4784 → 0.0.0-4788

package/lib-next/theme/BackToTopButton/index.js

@@ -4,110 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
+import {ThemeClassNames, useBackToTopButton} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
-import {
-  ThemeClassNames,
-  useScrollPosition,
-  useLocationChange,
-} from '@docusaurus/theme-common';
-const threshold = 300; // Not all have support for smooth scrolling (particularly Safari mobile iOS)
-// TODO proper detection is currently unreliable!
-// see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
-
-const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling =
-//   ExecutionEnvironment.canUseDOM &&
-//   'scrollBehavior' in document.documentElement.style;
-
-function smoothScrollTopNative() {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  });
-  return () => {
-    // Nothing to cancel, it's natively cancelled if user tries to scroll down
-  };
-}
-
-function smoothScrollTopPolyfill() {
-  let raf = null;
-
-  function rafRecursion() {
-    const currentScroll = document.documentElement.scrollTop;
-
-    if (currentScroll > 0) {
-      raf = requestAnimationFrame(rafRecursion);
-      window.scrollTo(0, Math.floor(currentScroll * 0.85));
-    }
-  }
-
-  rafRecursion(); // Break the recursion. Prevents the user from "fighting" against that
-  // recursion producing a weird UX
-
-  return () => raf && cancelAnimationFrame(raf);
-}
-
-function useSmoothScrollToTop() {
-  const lastCancelRef = useRef(null);
-
-  function smoothScrollTop() {
-    lastCancelRef.current = SupportsNativeSmoothScrolling
-      ? smoothScrollTopNative()
-      : smoothScrollTopPolyfill();
-  }
-
-  return {
-    smoothScrollTop,
-    cancelScrollToTop: () => lastCancelRef.current?.(),
-  };
-}
-
 export default function BackToTopButton() {
-  const [show, setShow] = useState(false);
-  const isFocusedAnchor = useRef(false);
-  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
-  useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
-    const lastScrollTop = lastPosition?.scrollY; // No lastScrollTop means component is just being mounted.
-    // Not really a scroll event from the user, so we ignore it
-
-    if (!lastScrollTop) {
-      return;
-    }
-
-    if (isFocusedAnchor.current) {
-      isFocusedAnchor.current = false;
-      return;
-    }
-
-    const isScrollingUp = scrollTop < lastScrollTop;
-
-    if (!isScrollingUp) {
-      cancelScrollToTop();
-    }
-
-    if (scrollTop < threshold) {
-      setShow(false);
-      return;
-    }
-
-    if (isScrollingUp) {
-      const documentHeight = document.documentElement.scrollHeight;
-      const windowHeight = window.innerHeight;
-
-      if (scrollTop + windowHeight < documentHeight) {
-        setShow(true);
-      }
-    } else {
-      setShow(false);
-    }
-  });
-  useLocationChange((locationChangeEvent) => {
-    if (locationChangeEvent.location.hash) {
-      isFocusedAnchor.current = true;
-      setShow(false);
-    }
+  const {shown, scrollToTop} = useBackToTopButton({
+    threshold: 300,
   });
   return (
     <button
@@ -120,10 +24,10 @@ export default function BackToTopButton() {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        show && styles.backToTopButtonShow,
+        shown && styles.backToTopButtonShow,
       )}
       type="button"
-      onClick={() => smoothScrollTop()}
+      onClick={scrollToTop}
     />
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4784",
+  "version": "0.0.0-4788",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4784",
-    "@docusaurus/plugin-content-blog": "0.0.0-4784",
-    "@docusaurus/plugin-content-docs": "0.0.0-4784",
-    "@docusaurus/plugin-content-pages": "0.0.0-4784",
-    "@docusaurus/theme-common": "0.0.0-4784",
-    "@docusaurus/theme-translations": "0.0.0-4784",
-    "@docusaurus/utils": "0.0.0-4784",
-    "@docusaurus/utils-common": "0.0.0-4784",
-    "@docusaurus/utils-validation": "0.0.0-4784",
+    "@docusaurus/core": "0.0.0-4788",
+    "@docusaurus/plugin-content-blog": "0.0.0-4788",
+    "@docusaurus/plugin-content-docs": "0.0.0-4788",
+    "@docusaurus/plugin-content-pages": "0.0.0-4788",
+    "@docusaurus/theme-common": "0.0.0-4788",
+    "@docusaurus/theme-translations": "0.0.0-4788",
+    "@docusaurus/utils": "0.0.0-4788",
+    "@docusaurus/utils-common": "0.0.0-4788",
+    "@docusaurus/utils-validation": "0.0.0-4788",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.5.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4784",
-    "@docusaurus/types": "0.0.0-4784",
+    "@docusaurus/module-type-aliases": "0.0.0-4788",
+    "@docusaurus/types": "0.0.0-4788",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.2",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "49507f2c3c11ebdaa274bbda21f50d45b34f9c28"
+  "gitHead": "880b995e4b33e050d1e6cb2bcbe5058ee6fd8cbd"
 }

package/src/theme/BackToTopButton/index.tsx

@@ -5,122 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
+import {ThemeClassNames, useBackToTopButton} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
-import {
-  ThemeClassNames,
-  useScrollPosition,
-  useLocationChange,
-} from '@docusaurus/theme-common';
-
-const threshold = 300;
-
-// Not all have support for smooth scrolling (particularly Safari mobile iOS)
-// TODO proper detection is currently unreliable!
-// see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
-const SupportsNativeSmoothScrolling = false;
-// const SupportsNativeSmoothScrolling =
-//   ExecutionEnvironment.canUseDOM &&
-//   'scrollBehavior' in document.documentElement.style;
-
-type CancelScrollTop = () => void;
-
-function smoothScrollTopNative(): CancelScrollTop {
-  window.scrollTo({top: 0, behavior: 'smooth'});
-  return () => {
-    // Nothing to cancel, it's natively cancelled if user tries to scroll down
-  };
-}
-
-function smoothScrollTopPolyfill(): CancelScrollTop {
-  let raf: number | null = null;
-  function rafRecursion() {
-    const currentScroll = document.documentElement.scrollTop;
-    if (currentScroll > 0) {
-      raf = requestAnimationFrame(rafRecursion);
-      window.scrollTo(0, Math.floor(currentScroll * 0.85));
-    }
-  }
-  rafRecursion();
-
-  // Break the recursion. Prevents the user from "fighting" against that
-  // recursion producing a weird UX
-  return () => raf && cancelAnimationFrame(raf);
-}
-
-type UseSmoothScrollTopReturn = {
-  // We use a cancel function because the non-native smooth scroll-top
-  // implementation must be interrupted if user scroll down
-  smoothScrollTop: () => void;
-  cancelScrollToTop: CancelScrollTop;
-};
-
-function useSmoothScrollToTop(): UseSmoothScrollTopReturn {
-  const lastCancelRef = useRef<CancelScrollTop | null>(null);
-
-  function smoothScrollTop(): void {
-    lastCancelRef.current = SupportsNativeSmoothScrolling
-      ? smoothScrollTopNative()
-      : smoothScrollTopPolyfill();
-  }
-
-  return {
-    smoothScrollTop,
-    cancelScrollToTop: () => lastCancelRef.current?.(),
-  };
-}
 
 export default function BackToTopButton(): JSX.Element {
-  const [show, setShow] = useState(false);
-  const isFocusedAnchor = useRef(false);
-  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
-
-  useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
-    const lastScrollTop = lastPosition?.scrollY;
-
-    // No lastScrollTop means component is just being mounted.
-    // Not really a scroll event from the user, so we ignore it
-    if (!lastScrollTop) {
-      return;
-    }
-
-    if (isFocusedAnchor.current) {
-      isFocusedAnchor.current = false;
-      return;
-    }
-
-    const isScrollingUp = scrollTop < lastScrollTop;
-
-    if (!isScrollingUp) {
-      cancelScrollToTop();
-    }
-
-    if (scrollTop < threshold) {
-      setShow(false);
-      return;
-    }
-
-    if (isScrollingUp) {
-      const documentHeight = document.documentElement.scrollHeight;
-      const windowHeight = window.innerHeight;
-      if (scrollTop + windowHeight < documentHeight) {
-        setShow(true);
-      }
-    } else {
-      setShow(false);
-    }
-  });
-
-  useLocationChange((locationChangeEvent) => {
-    if (locationChangeEvent.location.hash) {
-      isFocusedAnchor.current = true;
-      setShow(false);
-    }
-  });
-
+  const {shown, scrollToTop} = useBackToTopButton({threshold: 300});
   return (
     <button
       aria-label={translate({
@@ -132,10 +25,10 @@ export default function BackToTopButton(): JSX.Element {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        show && styles.backToTopButtonShow,
+        shown && styles.backToTopButtonShow,
       )}
       type="button"
-      onClick={() => smoothScrollTop()}
+      onClick={scrollToTop}
     />
   );
 }