fix: panel on change remove referesgh

ccontrols · Jun 10, 2020 · 4e38c6c · 4e38c6c
1 parent 3672ade
commit 4e38c6c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -55,6 +55,7 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
     width,
     minWidth,
     position: 'relative',
+    flexShrink: 0,
   };
   const style: SxStyleProp = !responsive
     ? defaultStyle

diff --git a/ui/app/src/DocPage/DocPage.tsx b/ui/app/src/DocPage/DocPage.tsx
@@ -30,7 +30,7 @@ export const BasePage: FC<DocPageProps> = ({ pagesFn }) => {
     0,
   );
   return (
-    <Box sx={{ flex: '1 0 auto' }}>
+    <Flex sx={{ flex: '1 0 auto' }}>
       <Sidebar />
       <Box sx={{ flexGrow: 1 }} id="content">
         <Tabs
@@ -67,7 +67,7 @@ export const BasePage: FC<DocPageProps> = ({ pagesFn }) => {
         </Tabs>
       </Box>
       <SideContext pageRef={pageRef} />
-    </Box>
+    </Flex>
   );
 };
 

diff --git a/ui/components/src/PanelContainer/PanelContainer.tsx b/ui/components/src/PanelContainer/PanelContainer.tsx
@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC, MouseEvent, useCallback } from 'react';
 import { Button, ButtonProps, useThemeUI } from 'theme-ui';
 import { Collapsible } from '../Collapsible';
 import { Tab, Tabs, TabList, TabPanel } from '../Tabs';
@@ -52,16 +52,23 @@ export const PanelContainer: FC<PanelContainerProps> = ({
   const [tabsIndex, setTabsIndex] = React.useState<number | undefined>(
     undefined,
   );
+
   const { theme } = useThemeUI();
 
   const panels: ActionItems = getSortedPanels(actions);
 
+  const findPanel = useCallback(
+    (id: PanelContainerOwnProps['openTab']) => {
+      return panels.findIndex((p: ActionItem) => p.id === id || p.title === id);
+    },
+    // do not update on each panel change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
   React.useEffect(() => {
-    const index = panels.findIndex(
-      (p: ActionItem) => p.id === openTab || p.title === openTab,
-    );
+    const index = findPanel(openTab);
     setTabsIndex(index > -1 ? index : undefined);
-  }, [openTab, actions, panels]);
+  }, [openTab, findPanel]);
   const panelActions = React.useMemo(
     () =>
       actions.map((panel: ActionItem) => {