Просмотр исходного кода

fix growi contextual sub navigation style broken

jam411 3 лет назад
Родитель
Сommit
1e2ed5482e
1 измененных файлов с 10 добавлено и 4 удалено
  1. 10 4
      packages/app/src/components/Navbar/GrowiSubNavigationSwitcher.tsx

+ 10 - 4
packages/app/src/components/Navbar/GrowiSubNavigationSwitcher.tsx

@@ -38,9 +38,11 @@ export const GrowiSubNavigationSwitcher = (props: GrowiSubNavigationSwitcherProp
   // use more specific type HTMLDivElement for avoid assertion error.
   // use more specific type HTMLDivElement for avoid assertion error.
   // see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement
   // see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement
   const fixedContainerRef = useRef<HTMLDivElement>(null);
   const fixedContainerRef = useRef<HTMLDivElement>(null);
+  const clientWidth = fixedContainerRef.current?.parentElement?.clientWidth;
 
 
+  // Do not use clientWidth as useCallback deps, resizing events will not work in production builds.
   const initWidth = useCallback(() => {
   const initWidth = useCallback(() => {
-    if (fixedContainerRef.current && fixedContainerRef.current.parentElement) {
+    if (fixedContainerRef.current != null && fixedContainerRef.current.parentElement != null) {
       // get parent elements width
       // get parent elements width
       const { clientWidth } = fixedContainerRef.current.parentElement;
       const { clientWidth } = fixedContainerRef.current.parentElement;
       setWidth(clientWidth);
       setWidth(clientWidth);
@@ -84,10 +86,14 @@ export const GrowiSubNavigationSwitcher = (props: GrowiSubNavigationSwitcherProp
     }
     }
   }, [isSidebarCollapsed, initWidth]);
   }, [isSidebarCollapsed, initWidth]);
 
 
-  // initialize width
+  /*
+   * initialize width.
+   * Since width is not recalculated at production build first rendering,
+   * make initWidth execution dependent on clientWidth.
+   */
   useEffect(() => {
   useEffect(() => {
-    initWidth();
-  }, [initWidth]);
+    if (clientWidth != null) initWidth();
+  }, [initWidth, clientWidth]);
 
 
   if (currentPage == null) {
   if (currentPage == null) {
     return <></>;
     return <></>;