1.10.0

Author: lxieyang

CHANGELOG.md

@@ -17,6 +17,13 @@ Please provide valuable feedback by:
 - Creating a [new issue](https://github.com/lxieyang/vertical-tabs-chrome-extension/issues/new)
 - Email: [email protected]
 
+### [1.10.0](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.10.0) (2021-10-18)
+
+#### New Features
+
+- Bug fixes
+- Smoother drag experience
+
 ### [1.9.1](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.9.1) (2021-10-17)
 
 #### New Features

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vertical-tabs-chrome-extension",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "A chrome extension that presents your tabs vertically.",
   "license": "MIT",
   "repository": {

package.json

@@ -30,14 +30,14 @@ class Sidebar extends Component {
     this.tabUpdatedHandler = this.handleTabUpdated.bind(this);
     this.tabMovedHandler = this.handleTabMoved.bind(this);
     this.tabActivatedHandler = this.handleTabActivated.bind(this);
-    this.tabHighlightedHandler = this.handleTabHighlighted.bind(this);
+    // this.tabHighlightedHandler = this.handleTabHighlighted.bind(this);
 
     chrome.tabs.onCreated.addListener(this.tabCreatedHandler);
     chrome.tabs.onRemoved.addListener(this.tabRemovedHandler);
     chrome.tabs.onUpdated.addListener(this.tabUpdatedHandler);
     chrome.tabs.onMoved.addListener(this.tabMovedHandler);
     chrome.tabs.onActivated.addListener(this.tabActivatedHandler);
-    chrome.tabs.onHighlighted.addListener(this.tabHighlightedHandler);
+    // chrome.tabs.onHighlighted.addListener(this.tabHighlightedHandler);
   }
 
   componentDidMount() {
@@ -85,7 +85,7 @@ class Sidebar extends Component {
     chrome.tabs.onUpdated.removeListener(this.tabUpdatedHandler);
     chrome.tabs.onMoved.removeListener(this.tabMovedHandler);
     chrome.tabs.onActivated.removeListener(this.tabActivatedHandler);
-    chrome.tabs.onHighlighted.removeListener(this.tabHighlightedHandler);
+    // chrome.tabs.onHighlighted.removeListener(this.tabHighlightedHandler);
 
     window.removeEventListener('scroll', this.handleScroll);
   }
@@ -140,7 +140,7 @@ class Sidebar extends Component {
     window.clearTimeout(this.isScrolling);
 
     // Set a timeout to run after scrolling ends
-    this.isScrolling = setTimeout(function() {
+    this.isScrolling = setTimeout(function () {
       chrome.runtime.sendMessage({
         from: 'sidebar',
         msg: 'SIDEBAR_SCROLL_POSITION_CHANGED',
@@ -244,16 +244,20 @@ class Sidebar extends Component {
     this.updateTabOrders();
   };
 
-  handleTabHighlighted = (highlightInfo) => {};
-
-  moveTab = (dragIndex, hoverIndex) => {
-    const dragTab = this.state.tabOrders[dragIndex];
-    this.setState({
-      tabOrders: update(this.state.tabOrders, {
-        $splice: [[dragIndex, 1], [hoverIndex, 0, dragTab]],
-      }),
-    });
-  };
+  // handleTabHighlighted = (highlightInfo) => {
+  // };
+
+  // moveTab = (dragIndex, hoverIndex) => {
+  //   const dragTab = this.state.tabOrders[dragIndex];
+  //   this.setState({
+  //     tabOrders: update(this.state.tabOrders, {
+  //       $splice: [
+  //         [dragIndex, 1],
+  //         [hoverIndex, 0, dragTab],
+  //       ],
+  //     }),
+  //   });
+  // };
 
   setDisplayTabInFull = (toStatus) => {
     this.setState({ displayTabInFull: toStatus });
@@ -275,10 +279,13 @@ class Sidebar extends Component {
               <Title setDisplayTabInFull={this.setDisplayTabInFull} />
               <TabsList
                 displayTabInFull={displayTabInFull}
-                tabOrders={tabOrders}
+                tabOrders={tabOrders
+                  .filter(({ id }) => tabsDict[id] !== undefined)
+                  .map((tabOrder) => ({
+                    ...tabOrder,
+                    ...tabsDict[tabOrder.id],
+                  }))}
                 activeTab={activeTab}
-                tabsDict={tabsDict}
-                moveTab={this.moveTab}
                 setTabAsLoading={this.setTabAsLoading}
               />
               {/* <UpdateNotice /> */}

src/pages/Sidebar/Sidebar.jsx

@@ -169,7 +169,8 @@
 }
 
 .blink {
-  animation: blinker 1.2s linear infinite;
+  opacity: 0;
+  /* animation: blinker 1.2s linear infinite; */
 }
 
 @keyframes blinker {

src/pages/Sidebar/containers/TabsList/Tab/Tab.css

@@ -1,4 +1,4 @@
-import React, { useRef, useContext } from 'react';
+import React, { useRef, useContext, memo } from 'react';
 import classNames from 'classnames';
 import DarkModeContext from '../../../context/dark-mode-context';
 import Loader from 'react-loader-spinner';
@@ -40,6 +40,7 @@ const Tab = ({
   displayTabInFull,
   contextMenuShow,
   contextMenuShowPrev,
+  findTab,
   moveTab,
   setTabAsLoading,
   isSearching,
@@ -58,47 +59,41 @@ const Tab = ({
   const darkModeContext = useContext(DarkModeContext);
   const { isDark } = darkModeContext;
 
-  const [, drop] = useDrop(() => ({
-    accept: ItemTypes.TABCARD,
-    hover(item, monitor) {
-      if (!ref.current) {
-        return;
-      }
-
-      const dragIndex = item.idx;
-      const hoverIndex = idx;
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      const hoverMiddleY =
-        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-      moveTab(dragIndex, hoverIndex);
-      item.idx = hoverIndex;
-    },
-  }));
+  const originalIndex = findTab(id).index;
+  const [{ isDragging }, drag] = useDrag(
+    () => ({
+      type: ItemTypes.TABCARD,
+      item: { id, originalIndex },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+      end: (item, monitor) => {
+        const { id: droppedId, originalIndex } = item;
+        const { index: overIndex } = findTab(droppedId);
+        const didDrop = monitor.didDrop();
+        if (!didDrop) {
+          moveTab(droppedId, originalIndex);
+        } else {
+          moveTabToIndex(id, overIndex);
+        }
+      },
+    }),
+    [id, originalIndex, moveTab]
+  );
 
-  const [{ isDragging }, drag] = useDrag(() => ({
-    type: ItemTypes.TABCARD,
-    item: { id, idx },
-    end: (item, monitor) => {
-      moveTabToIndex(id, item.idx);
-    },
-    canDrag(monitor) {
-      return !isSearching;
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
+  const [, drop] = useDrop(
+    () => ({
+      accept: ItemTypes.TABCARD,
+      canDrop: () => false,
+      hover({ id: draggedId, originalIndex: draggedIndex }) {
+        if (draggedId !== id) {
+          const { index: overIndex } = findTab(id);
+          moveTab(draggedId, overIndex);
+        }
+      },
     }),
-  }));
+    [findTab, moveTab]
+  );
 
   drag(drop(ref));
   /* End of --> Drag and Drop support */
@@ -158,7 +153,7 @@ const Tab = ({
           <ContextMenuTrigger id={id.toString()} holdToDisplay={-1}>
             <li
               // style={{ opacity: isDragging ? 0 : 1 }}
-              ref={ref}
+
               title={`${title}\n\n${url}`}
               className={classNames({
                 TabItem: true,
@@ -192,6 +187,7 @@ const Tab = ({
               }}
             >
               <div
+                ref={ref}
                 className={classNames({
                   TabContainer: true,
                   isPinned: pinned,
@@ -381,4 +377,4 @@ const Tab = ({
   );
 };
 
-export default Tab;
+export default memo(Tab);