Move useResizeObserver into features/preview (#5188)

GitOrigin-RevId: c12dfc30b07e4a214990b7e80ce11364edb6137a
2021-09-24 08:04:28 +00:00
parent 233ceb5356
commit c5c727f552
3 changed files with 2 additions and 2 deletions
@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import useExpandCollapse from '../../../shared/hooks/use-expand-collapse'
-import useResizeObserver from '../../../shared/hooks/use-resize-observer'
+import useResizeObserver from '../hooks/use-resize-observer'
 import Icon from '../../../shared/components/icon'

 function PreviewLogsPaneEntry({
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import PreviewDownloadButton from './preview-download-button'
 import PreviewRecompileButton from './preview-recompile-button'
 import PreviewLogsToggleButton from './preview-logs-toggle-button'
-import useResizeObserver from '../../../shared/hooks/use-resize-observer'
+import useResizeObserver from '../hooks/use-resize-observer'
 import Icon from '../../../shared/components/icon'

 function _getElementWidth(element) {
@@ -0,0 +1,36 @@
+import { useLayoutEffect, useRef, useCallback } from 'react'
+
+function useResizeObserver(observedElement, observedData, callback) {
+  const resizeObserver = useRef()
+
+  const observe = useCallback(() => {
+    resizeObserver.current = new ResizeObserver(function (elementsObserved) {
+      callback(elementsObserved[0])
+    })
+  }, [callback])
+
+  function unobserve(observedCurrent) {
+    resizeObserver.current.unobserve(observedCurrent)
+  }
+
+  useLayoutEffect(() => {
+    if ('ResizeObserver' in window) {
+      const observedCurrent = observedElement && observedElement.current
+      if (observedCurrent) {
+        observe(observedElement.current)
+      }
+
+      if (resizeObserver.current && observedCurrent) {
+        resizeObserver.current.observe(observedCurrent)
+      }
+
+      return () => {
+        if (observedCurrent) {
+          unobserve(observedCurrent)
+        }
+      }
+    }
+  }, [observedElement, observedData, observe])
+}
+
+export default useResizeObserver