Trigger update when container resizes

patternfly · May 9, 2023 · b13af97 · b13af97
1 parent 7d14727
commit b13af97
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/packages/module/src/LogViewer/LogViewer.tsx b/packages/module/src/LogViewer/LogViewer.tsx
@@ -102,6 +102,8 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
  const [loading, setLoading] = useState(true);
  const [listKey, setListKey] = useState(1);
 
+ const [, setEmptyState] = useState({});
+
  /* Parse data every time it changes */
  const parsedData = React.useMemo(() => parseConsoleOutput(data), [data]);
 
@@ -113,13 +115,21 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
  let resizeTimer = null as any;
 
  useEffect(() => {
+ let observer : ResizeObserver | undefined = undefined;
  if (containerRef && containerRef.current) {
  window.addEventListener('resize', callbackResize);
+ observer = new ResizeObserver((event) => {
+ setEmptyState({});
+ }); 
+ observer.observe(containerRef.current);
  setLoading(false);
  createDummyElements();
  ansiUp.resetStyles();
  }
- return () => window.removeEventListener('resize', callbackResize);
+ return () => { 
+ window.removeEventListener('resize', callbackResize);
+ observer?.disconnect();
+ }
  }, [containerRef.current]);
 
  const callbackResize = () => {
@@ -168,6 +178,9 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
  }, [parsedData, scrollToRow]);
 
  const createDummyElements = () => {
+ if (!(containerRef && containerRef.current)) {
+ return;
+ }
  // create dummy elements
  const dummyIndex = document.createElement('span');
  dummyIndex.className = css(styles.logViewerIndex);