manage RefObject for SimpleBar with global state

packages/app/src/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import {
   useCurrentSidebarContents,
   useCurrentProductNavWidth,
   useSidebarResizeDisabled,
+  useSidebarScrollerRef,
 } from '~/stores/ui';
 
 import DrawerToggler from './Navbar/DrawerToggler';
@@ -50,6 +51,8 @@ const GlobalNavigation = () => {
 };
 
 const SidebarContentsWrapper = () => {
+  const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
+
   const calcViewHeight = useCallback(() => {
     const elem = document.querySelector('#grw-sidebar-contents-wrapper');
     return elem != null
@@ -61,6 +64,7 @@ const SidebarContentsWrapper = () => {
     <>
       <div id="grw-sidebar-contents-wrapper" style={{ minHeight: '100%' }}>
         <StickyStretchableScroller
+          simplebarRef={mutateSidebarScroller}
           stickyElemSelector=".grw-sidebar"
           calcViewHeight={calcViewHeight}
         >

packages/app/src/components/StickyStretchableScroller.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useEffect, useCallback, ReactNode, useRef, useState, useMemo,
+  useEffect, useCallback, ReactNode, useRef, useState, useMemo, RefObject,
 } from 'react';
 
 import { debounce } from 'throttle-debounce';
@@ -13,6 +13,7 @@ const logger = loggerFactory('growi:cli:StickyStretchableScroller');
 
 export type StickyStretchableScrollerProps = {
   stickyElemSelector: string,
+  simplebarRef?: (ref: RefObject<SimpleBar>) => void,
   calcViewHeight?: (scrollElement: HTMLElement) => number,
   children?: ReactNode,
 }
@@ -42,7 +43,7 @@ export type StickyStretchableScrollerProps = {
 export const StickyStretchableScroller = (props: StickyStretchableScrollerProps): JSX.Element => {
 
   const {
-    children, stickyElemSelector, calcViewHeight,
+    children, stickyElemSelector, calcViewHeight, simplebarRef: setSimplebarRef,
   } = props;
 
   const simplebarRef = useRef<SimpleBar>(null);
@@ -69,14 +70,6 @@ export const StickyStretchableScroller = (props: StickyStretchableScrollerProps)
 
   const resetScrollbarDebounced = useMemo(() => debounce(100, resetScrollbar), [resetScrollbar]);
 
-
-  // useEffect(() => {
-  //   document.addEventListener(SidebarScrollerEvent.RESET_SCROLLBAR, resetScrollbarDebounced);
-  //   return () => {
-  //     document.removeEventListener(SidebarScrollerEvent.RESET_SCROLLBAR, resetScrollbarDebounced);
-  //   };
-  // }, []);
-
   const stickyChangeHandler = useCallback(() => {
     logger.debug('StickyEvents.CHANGE detected');
     resetScrollbarDebounced();
@@ -117,6 +110,13 @@ export const StickyStretchableScroller = (props: StickyStretchableScrollerProps)
     resetScrollbarDebounced();
   }, [resetScrollbarDebounced]);
 
+  // update ref
+  useEffect(() => {
+    if (setSimplebarRef != null) {
+      setSimplebarRef(simplebarRef);
+    }
+  }, [setSimplebarRef]);
+
   return (
     <SimpleBar style={{ maxHeight: simplebarMaxHeight }} ref={simplebarRef}>
       { children }

packages/app/src/interfaces/ui.ts

@@ -25,7 +25,3 @@ export type OnDeletedFunction = (idOrPaths: string | string[], isRecursively: Nu
 export type OnRenamedFunction = (path: string) => void;
 export type OnDuplicatedFunction = (fromPath: string, toPath: string) => void;
 export type OnPutBackedFunction = (path: string) => void;
-
-export enum SidebarScrollerEvent {
-  RESET_SCROLLBAR = 'resetScrollbar'
-}

packages/app/src/stores/ui.tsx

@@ -1,12 +1,14 @@
-import useSWR, {
+import { RefObject } from 'react';
+import {
   useSWRConfig, SWRResponse, Key, Fetcher,
 } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
+import SimpleBar from 'simplebar-react';
+
 import { Breakpoint, addBreakpointListener } from '@growi/ui';
 import { pagePathUtils } from '@growi/core';
 
-import { RefObject } from 'react';
 import { SidebarContentsType } from '~/interfaces/ui';
 import loggerFactory from '~/utils/logger';
 
@@ -38,6 +40,15 @@ export const EditorMode = {
 export type EditorMode = typeof EditorMode[keyof typeof EditorMode];
 
 
+/** **********************************************************
+ *                     Storing RefObjects
+ *********************************************************** */
+
+export const useSidebarScrollerRef = (initialData?: RefObject<SimpleBar>): SWRResponse<RefObject<SimpleBar>, Error> => {
+  return useStaticSWR<RefObject<SimpleBar>, Error>('sidebarScrollerRef', initialData);
+};
+
+
 /** **********************************************************
  *                          SWR Hooks
  *                      for switching UI