fix: makes tabs more responsiveness

pengx17 · Aug 31, 2021 · 18f269f · 18f269f
1 parent 043fcb0
commit 18f269f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/src/PageTabs.css b/src/PageTabs.css
@@ -1,5 +1,5 @@
 .logseq-tab {
-  @apply cursor-pointer font-sans select-none text-xs h-6 transition-all
+  @apply cursor-pointer font-sans select-none text-xs h-6 transition-all duration-100
   flex items-center rounded mx-0.5
     px-2 light:text-black dark:text-white;
 }
@@ -18,7 +18,7 @@
 }
 
 .logseq-tab-title {
-  @apply overflow-ellipsis max-w-80 px-1 overflow-hidden whitespace-nowrap inline transition-all duration-200 ease-in-out;
+  @apply overflow-ellipsis max-w-80 px-1 overflow-hidden whitespace-nowrap inline transition-all duration-100 ease-in-out;
 }
 
 .logseq-tab[data-active="false"] .logseq-tab-title {

diff --git a/src/PageTabs.tsx b/src/PageTabs.tsx
@@ -5,7 +5,6 @@ import keyboardjs from "keyboardjs";
 import { us } from "keyboardjs/locales/us";
 import React from "react";
 import { useDeepCompareEffect, useLatest } from "react-use";
-
 import "./PageTabs.css";
 import { ITabInfo } from "./types";
 import {
@@ -49,13 +48,14 @@ function isTabEqual(
 interface TabsProps {
   tabs: ITabInfo[];
   activePage: ITabInfo | null;
+  onClickTab: (tab: ITabInfo) => void;
   onCloseTab: (tab: ITabInfo, tabIdx: number) => void;
   onPinTab: (tab: ITabInfo) => void;
   onSwapTab: (tab: ITabInfo, anotherTab: ITabInfo) => void;
 }
 
 const Tabs = React.forwardRef<HTMLElement, TabsProps>(
-  ({ activePage, tabs, onCloseTab, onPinTab, onSwapTab }, ref) => {
+  ({ activePage, onClickTab, tabs, onCloseTab, onPinTab, onSwapTab }, ref) => {
     const [draggingTab, setDraggingTab] = React.useState<ITabInfo>();
 
     React.useEffect(() => {
@@ -77,8 +77,7 @@ const Tabs = React.forwardRef<HTMLElement, TabsProps>(
       >
         {tabs.map((tab, idx) => {
           const isActive = isTabEqual(tab, activePage);
-          const onClickTab = () =>
-            logseq.App.pushState("page", { name: tab.originalName });
+
           const onClose: React.MouseEventHandler = (e) => {
             e.stopPropagation();
             onCloseTab(tab, idx);
@@ -92,7 +91,7 @@ const Tabs = React.forwardRef<HTMLElement, TabsProps>(
           };
           return (
             <div
-              onClick={onClickTab}
+              onClick={() => onClickTab(tab)}
               onDoubleClick={() => onPinTab(tab)}
               key={tab.uuid}
               data-active={isActive}
@@ -185,12 +184,12 @@ export function useActivePage() {
     };
   }, [page]);
 
-  return page;
+  return [page, setPage] as const;
 }
 
 export function PageTabs(): JSX.Element {
   const [tabs, setTabs] = useOpeningPageTabs();
-  const activePage = useActivePage();
+  const [activePage, setActivePage] = useActivePage();
 
   const onCloseTab = useEventCallback((tab: ITabInfo, idx?: number) => {
     if (idx == null) {
@@ -207,9 +206,8 @@ export function PageTabs(): JSX.Element {
     if (newTabs.length === 0) {
       logseq.App.pushState("home");
     } else if (isTabEqual(tab, activePage)) {
-      logseq.App.pushState("page", {
-        name: newTabs[Math.min(newTabs.length - 1, idx)].originalName,
-      });
+      const newTab = newTabs[Math.min(newTabs.length - 1, idx)];
+      setActivePage(newTab);
     }
   });
 
@@ -220,7 +218,7 @@ export function PageTabs(): JSX.Element {
           return [..._tabs, t];
         } else {
           // If it is already in the tab, just make it active
-          logseq.App.pushState("page", { name: t.originalName });
+          setActivePage(t);
         }
       }
       return _tabs;
@@ -233,6 +231,7 @@ export function PageTabs(): JSX.Element {
   const latestTabsRef = useLatest(tabs);
 
   useDeepCompareEffect(() => {
+    let timer = 0;
     let newTabs = latestTabsRef.current;
     // If a new ActivePage is set, we will need to replace or insert the tab
     if (activePage) {
@@ -248,9 +247,18 @@ export function PageTabs(): JSX.Element {
           newTabs[currentIndex] = activePage;
         }
       }
+
+      timer = setTimeout(() => {
+        logseq.App.pushState("page", { name: activePage.originalName });
+      }, 200);
     }
     currActivePageRef.current = activePage;
     setTabs(newTabs);
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
   }, [activePage ?? {}]);
 
   const onPinTab = useEventCallback((t) => {
@@ -296,6 +304,10 @@ export function PageTabs(): JSX.Element {
   const ref = React.useRef<HTMLElement>(null);
   const scrollWidth = useScrollWidth(ref);
 
+  const onClickTab = useEventCallback((t: ITabInfo) => {
+    setActivePage(t);
+  });
+
   useAdaptMainUIStyle(tabs.length > 0, scrollWidth);
 
   React.useEffect(() => {
@@ -311,6 +323,7 @@ export function PageTabs(): JSX.Element {
   return (
     <Tabs
       ref={ref}
+      onClickTab={onClickTab}
       activePage={activePage}
       tabs={tabs}
       onSwapTab={onSwapTab}

diff --git a/src/main.tsx b/src/main.tsx
@@ -21,12 +21,6 @@ function main() {
     document.getElementById("app")
   );
 
-  logseq.setMainUIInlineStyle({
-    zIndex: 0,
-    position: "fixed",
-    left: "0",
-  });
-
   // @ts-expect-error
   top[magicKey] = true;
 }

diff --git a/src/utils.ts b/src/utils.ts
@@ -148,6 +148,9 @@ export function useAdaptMainUIStyle(show: boolean, tabsWidth?: number | null) {
         const { bottom: topOffset, width } = leftHeader.getBoundingClientRect();
         logseq.setMainUIInlineStyle({
           zIndex: 9,
+          userSelect: "none",
+          position: "fixed",
+          left: "0",
           top: `${topOffset + 2}px`,
           height: show ? "28px" : "0px",
           width: Math.min(tabsWidth ?? 9999, width - 10) + "px", // 10 is the width of the scrollbar