WIP: apply simplebar

packages/app/src/components/Sidebar.tsx

@@ -2,6 +2,8 @@ import React, {
   FC, useCallback, useEffect, useRef, useState,
 } from 'react';
 
+import SimpleBar from 'simplebar-react';
+
 import { scheduleToPutUserUISettings } from '~/client/services/user-ui-settings';
 import {
   useDrawerMode, useDrawerOpened,
@@ -72,9 +74,11 @@ const SidebarContentsWrapper = () => {
       />
 
       <div id="grw-sidebar-contents-scroll-target" style={{ minHeight: '100%' }}>
-        <div id="grw-sidebar-content-container" className="grw-sidebar-content-container" onLoad={() => setResetKey(Math.random())}>
-          <SidebarContents />
-        </div>
+        <SimpleBar style={{ minHeight: `${calcViewHeight()}px` }}>
+          <div id="grw-sidebar-content-container" className="grw-sidebar-content-container" onLoad={() => setResetKey(Math.random())}>
+            <SidebarContents />
+          </div>
+        </SimpleBar>
       </div>
 
       <DrawerToggler iconClass="icon-arrow-left" />

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -73,12 +73,12 @@ const generateInitialNodeAfterResponse = (ancestorsChildren: Record<string, Part
 
 // Auto scroll by jquery slimScroll
 const scrollPageTree = () => {
-  const scrollElement = document.getElementById('grw-sidebar-contents-scroll-target');
-  const scrollTargetElement = document.getElementById('grw-pagetree-is-target');
+  // const scrollElement = document.getElementById('grw-sidebar-contents-scroll-target');
+  // const scrollTargetElement = document.getElementById('grw-pagetree-is-target');
 
-  if (scrollElement != null && scrollTargetElement != null) {
-    jQuerySlimScrollIntoView(scrollElement, scrollTargetElement, SCROLL_OFFSET_TOP);
-  }
+  // if (scrollElement != null && scrollTargetElement != null) {
+  //   jQuerySlimScrollIntoView(scrollElement, scrollTargetElement, SCROLL_OFFSET_TOP);
+  // }
 };
 
 

packages/app/src/components/StickyStretchableScroller.jsx

@@ -78,41 +78,41 @@ const StickyStretchableScroller = (props) => {
     logger.debug(`[${scrollTargetSelector}] viewHeight`, viewHeight);
     logger.debug(`[${scrollTargetSelector}] contentsHeight`, contentsHeight);
 
-    const isScrollEnabled = viewHeight === 'auto' || (viewHeight < contentsHeight);
-
-    $(scrollTargetSelector).slimScroll({
-      color: '#666',
-      railColor: '#999',
-      railVisible: true,
-      position: 'right',
-      height: isScrollEnabled ? viewHeight : contentsHeight,
-      wheelStep: 10,
-      allowPageScroll: true,
-    });
+    // const isScrollEnabled = viewHeight === 'auto' || (viewHeight < contentsHeight);
+
+    // $(scrollTargetSelector).slimScroll({
+    //   color: '#666',
+    //   railColor: '#999',
+    //   railVisible: true,
+    //   position: 'right',
+    //   height: isScrollEnabled ? viewHeight : contentsHeight,
+    //   wheelStep: 10,
+    //   allowPageScroll: true,
+    // });
 
     /**
      * The below code is a workaround for the following effect
      * The scrollbar doesn't move without mouseover event after applying slimscroll
      * https://github.com/rochal/jQuery-slimScroll/issues/287#issuecomment-797090432
      */
-    $(scrollTargetSelector).trigger('mouseover');
+    // $(scrollTargetSelector).trigger('mouseover');
 
     // destroy
-    if (!isScrollEnabled) {
-      $(scrollTargetSelector).slimScroll({ destroy: true });
-    }
+    // if (!isScrollEnabled) {
+    //   $(scrollTargetSelector).slimScroll({ destroy: true });
+    // }
 
   }, [contentsElemSelector, calcViewHeightFunc, calcContentsHeightFunc, scrollTargetSelector]);
 
   const resetScrollbarDebounced = debounce(100, resetScrollbar);
 
 
-  useEffect(() => {
-    document.addEventListener(SidebarScrollerEvent.RESET_SCROLLBAR, resetScrollbarDebounced);
-    return () => {
-      document.removeEventListener(SidebarScrollerEvent.RESET_SCROLLBAR, resetScrollbarDebounced);
-    };
-  }, []);
+  // useEffect(() => {
+  //   document.addEventListener(SidebarScrollerEvent.RESET_SCROLLBAR, resetScrollbarDebounced);
+  //   return () => {
+  //     document.removeEventListener(SidebarScrollerEvent.RESET_SCROLLBAR, resetScrollbarDebounced);
+  //   };
+  // }, []);
 
   const stickyChangeHandler = useCallback((event) => {
     logger.debug('StickyEvents.CHANGE detected');

packages/app/src/styles/_vendor.scss

@@ -23,3 +23,6 @@
 
 // import Handsontable styles
 @import '~handsontable/dist/handsontable.full.css';
+
+// import SimpleBar styles
+@import '~simplebar/dist/simplebar.min.css';