{"files":[{"path":"src\/devtools\/views\/Components\/OwnersStack.js","status":"M"},{"path":"src\/devtools\/views\/hooks.js","status":"M"}],"commit":{"authorEmail":"bvaughn@fb.com","authoredAt":"2019-04-07T10:34:44-07:00","subject":"Cleaned up is-overflowing hook and dependencies","authorName":"Brian Vaughn","shortRevision":"2e5e88e127","revision":"2e5e88e127f5bac959aef7c0536b9d0cecd746ab"},"parents":["5b6dbb8dd7490604ac508a5f7dbee67ce916e1b6"],"body":"","patch":"diff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nindex e04bf18ce8..f3888c1817 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -7,12 +7,12 @@ import React, {\n createRef,\n forwardRef,\n } from 'react';\n-import throttle from 'lodash.throttle';\n import classNames from 'classnames';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import { TreeContext } from '.\/TreeContext';\n import { StoreContext } from '..\/context';\n+import { useIsOverflowing } from '..\/hooks';\n \n import type { Element } from '.\/types';\n \n@@ -27,6 +27,7 @@ function ElementsDropdown({\n children,\n }: ElementsDropdownProps) {\n const [isDropdownVisible, setIsDropdownVisible] = useState(false);\n+\n const handleClick = useCallback(() => {\n setIsDropdownVisible(!isDropdownVisible);\n }, [isDropdownVisible, setIsDropdownVisible]);\n@@ -102,11 +103,11 @@ export default function OwnerStack() {\n const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(\n TreeContext\n );\n- const [isElementsBarOverflowing, setIsElementsBarOverflowing] = useState(\n- false\n- );\n+\n const [elementsTotalWidth, setElementsTotalWidth] = useState(0);\n const elementsBarRef = createRef();\n+ const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);\n+\n const elements = ownerStack.map((id, index) => (\n \n ));\n@@ -115,22 +116,20 @@ export default function OwnerStack() {\n if (elementsBarRef.current === null) {\n return () => {};\n }\n- const elements = Array.from(elementsBarRef.current.children);\n- const elementsTotalWidth = elements.reduce((acc, el) => {\n- const { offsetWidth } = el;\n- const marginRight = parseInt(getComputedStyle(el).marginRight, 10);\n- return acc + (offsetWidth + marginRight);\n- }, 0);\n \n- setElementsTotalWidth(elementsTotalWidth);\n- \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n- }, [ownerStackIndex, elementsBarRef]);\n+ let elementsTotalWidth = 0;\n+ for (let i = 0; i < ownerStack.length; i++) {\n+ const element = elementsBarRef.current.children[i];\n+ const computedStyle = getComputedStyle(element);\n \n- useElementsBarOverflowing(\n- elementsBarRef,\n- elementsTotalWidth,\n- setIsElementsBarOverflowing\n- );\n+ elementsTotalWidth +=\n+ element.offsetWidth +\n+ parseInt(computedStyle.marginLeft, 10) +\n+ parseInt(computedStyle.marginRight, 10);\n+ }\n+\n+ setElementsTotalWidth(elementsTotalWidth);\n+ }, [elementsBarRef, ownerStack.length]);\n \n return (\n

\n@@ -141,7 +140,7 @@ export default function OwnerStack() {\n >\n \n <\/Button>\n- {isElementsBarOverflowing && (\n+ {isOverflowing && (\n \n {elements}\n <\/ElementsDropdown>\n@@ -149,35 +148,9 @@ export default function OwnerStack() {\n

\n \n <\/div>\n );\n }\n-\n-function useElementsBarOverflowing(\n- elementsBarRef: Object,\n- elementsTotalWidth: number,\n- callback: Function\n-) {\n- useLayoutEffect(() => {\n- const handleResize = throttle(() => {\n- let isElementsBarOverflowing = false;\n- if (elementsBarRef.current !== null) {\n- const elementsBarWidth = elementsBarRef.current.clientWidth;\n- isElementsBarOverflowing = elementsBarWidth <= elementsTotalWidth;\n- }\n- callback(isElementsBarOverflowing);\n- }, 100);\n-\n- handleResize();\n-\n- \/\/ It's important to listen to the ownerDocument.defaultView to support the browser extension.\n- \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n- \/\/ and the root document might belong to a different window.\n- const ownerWindow = elementsBarRef.current.ownerDocument.defaultView;\n- ownerWindow.addEventListener('resize', handleResize);\n- return () => ownerWindow.removeEventListener('resize', handleResize);\n- }, [elementsBarRef, elementsTotalWidth, callback]);\n-}\ndiff --git a\/src\/devtools\/views\/hooks.js b\/src\/devtools\/views\/hooks.js\nindex 06364caa77..933a8097ba 100644\n--- a\/src\/devtools\/views\/hooks.js\n+++ b\/src\/devtools\/views\/hooks.js\n@@ -1,7 +1,40 @@\n \/\/ @flow\n \n+import throttle from 'lodash.throttle';\n import { useCallback, useEffect, useLayoutEffect, useState } from 'react';\n \n+export function useIsOverflowing(\n+ containerRef: { current: HTMLDivElement | null },\n+ totalChildWidth: number\n+): boolean {\n+ const [isOverflowing, setIsOverflowing] = useState(false);\n+\n+ \/\/ It's important to use a layout effect, so that we avoid showing a flash of overflowed content.\n+ useLayoutEffect(() => {\n+ if (containerRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const container = ((containerRef.current: any): HTMLDivElement);\n+\n+ const handleResize = throttle(\n+ () => setIsOverflowing(container.clientWidth <= totalChildWidth),\n+ 100\n+ );\n+\n+ handleResize();\n+\n+ \/\/ It's important to listen to the ownerDocument.defaultView to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerWindow = container.ownerDocument.defaultView;\n+ ownerWindow.addEventListener('resize', handleResize);\n+ return () => ownerWindow.removeEventListener('resize', handleResize);\n+ }, [containerRef, totalChildWidth]);\n+\n+ return isOverflowing;\n+}\n+\n \/\/ Forked from https:\/\/usehooks.com\/useLocalStorage\/\n export function useLocalStorage(\n key: string,\n"}

dillon1000/react

Files changed