{"files":[{"path":"src\/backend\/agent.js","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"},{"path":"src\/backend\/types.js","status":"M"},{"path":"src\/constants.js","status":"M"},{"path":"src\/devtools\/store.js","status":"M"},{"path":"src\/devtools\/views\/Button.js","status":"M"},{"path":"src\/devtools\/views\/ButtonIcon.js","status":"M"},{"path":"src\/devtools\/views\/Components\/ComponentFiltersModal.css","status":"A"},{"path":"src\/devtools\/views\/Components\/ComponentFiltersModal.js","status":"A"},{"path":"src\/devtools\/views\/Components\/ComponentFiltersModalContext.js","status":"A"},{"path":"src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js","status":"A"},{"path":"src\/devtools\/views\/Components\/Tree.css","status":"M"},{"path":"src\/devtools\/views\/Components\/Tree.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/Settings.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/SettingsContext.js","status":"M"},{"path":"src\/devtools\/views\/root.css","status":"M"},{"path":"src\/types.js","status":"M"},{"path":"src\/utils.js","status":"M"}],"body":"","parents":["0b4bfbc98fdf3cf8c11a25ef7d8f8841cbc549d6"],"commit":{"shortRevision":"8429220164","authoredAt":"2019-05-01T10:43:40-07:00","authorEmail":"bvaughn@fb.com","authorName":"Brian Vaughn","revision":"84292201644143dd3f2aace2753f10caec339840","subject":"Added filter UI (but with a lot of $FlowFixMe comments)"},"patch":"diff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex fed7344dbe..32982814df 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -16,7 +16,7 @@ import type {\n RendererID,\n RendererInterface,\n } from '.\/types';\n-import type { Bridge, FilterPreferences } from '..\/types';\n+import type { Bridge, ComponentFilter } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -118,7 +118,7 @@ export default class Agent extends EventEmitter {\n this.syncSelectionFromNativeElementsPanel\n );\n bridge.addListener('shutdown', this.shutdown);\n- bridge.addListener('updateFilterPreferences', this.updateFilterPreferences);\n+ bridge.addListener('updateComponentFilters', this.updateComponentFilters);\n bridge.addListener('viewElementSource', this.viewElementSource);\n \n if (this._isProfiling) {\n@@ -490,12 +490,12 @@ export default class Agent extends EventEmitter {\n this._bridge.send('profilingStatus', this._isProfiling);\n };\n \n- updateFilterPreferences = (filterPreferences: FilterPreferences) => {\n+ updateComponentFilters = (componentFilters: Array) => {\n for (let rendererID in this._rendererInterfaces) {\n const renderer = ((this._rendererInterfaces[\n (rendererID: any)\n ]: any): RendererInterface);\n- renderer.updateFilterPreferences(filterPreferences);\n+ renderer.updateComponentFilters(componentFilters);\n }\n };\n \ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 4808b694e4..403f6277c9 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -2,6 +2,9 @@\n \n import { gte } from 'semver';\n import {\n+ ComponentFilterDisplayName,\n+ ComponentFilterElementType,\n+ ComponentFilterPath,\n ElementTypeClass,\n ElementTypeContext,\n ElementTypeEventComponent,\n@@ -17,7 +20,7 @@ import {\n } from 'src\/types';\n import {\n getDisplayName,\n- getSavedFilterPreferences,\n+ getSavedComponentFilters,\n getUID,\n utfEncodeString,\n } from 'src\/utils';\n@@ -47,7 +50,7 @@ import type {\n RendererInterface,\n } from '.\/types';\n import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n-import type { ElementType, FilterPreferences } from 'src\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n \n function getInternalReactConstants(version) {\n const ReactSymbols = {\n@@ -261,17 +264,53 @@ export function attach(\n }\n };\n \n- let {\n- hideElementsWithTypes,\n- hideElementsWithDisplayNames,\n- hideElementsWithPaths,\n- } = getSavedFilterPreferences();\n+ \/\/ Configurable Components tree filters.\n+ const hideElementsWithDisplayNames: Set = new Set();\n+ const hideElementsWithPaths: Set = new Set();\n+ const hideElementsWithTypes: Set = new Set();\n+\n+ function applyComponentFilters(componentFilters: Array) {\n+ hideElementsWithTypes.clear();\n+ hideElementsWithDisplayNames.clear();\n+ hideElementsWithPaths.clear();\n+\n+ componentFilters.forEach(componentFilter => {\n+ if (!componentFilter.isEnabled) {\n+ return;\n+ }\n+\n+ switch (componentFilter.type) {\n+ case ComponentFilterDisplayName:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithDisplayNames.add(\n+ new RegExp(componentFilter.value, 'i')\n+ );\n+ }\n+ break;\n+ case ComponentFilterElementType:\n+ hideElementsWithTypes.add(componentFilter.value);\n+ break;\n+ case ComponentFilterPath:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));\n+ }\n+ break;\n+ default:\n+ console.warn(\n+ `Invalid component filter type \"${componentFilter.type}\"`\n+ );\n+ break;\n+ }\n+ });\n+ }\n+\n+ applyComponentFilters(getSavedComponentFilters());\n \n \/\/ TODO (filter) Should we make this operation more efficient?\n \/\/ For example, we could add a new recursive unmount tree operation.\n \/\/ The unmount operations are already significantly smaller than mount opreations though.\n \/\/ This is something to keep in mind for later.\n- function updateFilterPreferences(filterPreferences: FilterPreferences) {\n+ function updateComponentFilters(componentFilters: Array) {\n if (this._isProfiling) {\n \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n@@ -286,10 +325,7 @@ export function attach(\n currentRootID = -1;\n });\n \n- hideElementsWithTypes = filterPreferences.hideElementsWithTypes;\n- hideElementsWithDisplayNames =\n- filterPreferences.hideElementsWithDisplayNames;\n- hideElementsWithPaths = filterPreferences.hideElementsWithPaths;\n+ applyComponentFilters(componentFilters);\n \n \/\/ Recursively re-mount all roots with new filter criteria applied.\n hook.getFiberRoots(rendererID).forEach(root => {\n@@ -2280,6 +2316,6 @@ export function attach(\n setTrackedPath,\n startProfiling,\n stopProfiling,\n- updateFilterPreferences,\n+ updateComponentFilters,\n };\n }\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex a12dda6292..1675416f96 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import type { ElementType, FilterPreferences } from 'src\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n \n type BundleType =\n@@ -139,7 +139,7 @@ export type RendererInterface = {\n setTrackedPath: (path: Array | null) => void,\n startProfiling: () => void,\n stopProfiling: () => void,\n- updateFilterPreferences: (filterPreferences: FilterPreferences) => void,\n+ updateComponentFilters: (somponentFilters: Array) => void,\n };\n \n export type Handler = (data: any) => void;\ndiff --git a\/src\/constants.js b\/src\/constants.js\nindex f5c7683d69..fcbf9cb65e 100644\n--- a\/src\/constants.js\n+++ b\/src\/constants.js\n@@ -6,7 +6,7 @@ export const TREE_OPERATION_REORDER_CHILDREN = 3;\n export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;\n \n export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =\n- 'React::DevTools::filterPreferences';\n+ 'React::DevTools::componentFilters';\n \n export const LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY =\n 'React::DevTools::reloadAndProfile';\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 7c062247cf..6da87d3032 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -11,8 +11,8 @@ import {\n } from '..\/constants';\n import { ElementTypeRoot } from '..\/types';\n import {\n- getSavedFilterPreferences,\n- saveFilterPreferences,\n+ getSavedComponentFilters,\n+ saveComponentFilters,\n utfDecodeString,\n } from '..\/utils';\n import { __DEBUG__ } from '..\/constants';\n@@ -24,7 +24,7 @@ import type {\n ImportedProfilingData,\n ProfilingSnapshotNode,\n } from '.\/views\/Profiler\/types';\n-import type { Bridge, ElementType, FilterPreferences } from '..\/types';\n+import type { Bridge, ComponentFilter, ElementType } from '..\/types';\n \n const debug = (methodName, ...args) => {\n if (__DEBUG__) {\n@@ -69,7 +69,7 @@ export default class Store extends EventEmitter {\n \/\/ Should new nodes be collapsed by default when added to the tree?\n _collapseNodesByDefault: boolean = true;\n \n- _filterPreferences: FilterPreferences;\n+ _componentFilters: Array;\n \n \/\/ At least one of the injected renderers contains (DEV only) owner metadata.\n _hasOwnerMetadata: boolean = false;\n@@ -143,7 +143,7 @@ export default class Store extends EventEmitter {\n localStorage.getItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==\n 'false';\n \n- this._filterPreferences = getSavedFilterPreferences();\n+ this._componentFilters = getSavedComponentFilters();\n \n if (config != null) {\n const {\n@@ -239,26 +239,26 @@ export default class Store extends EventEmitter {\n this.emit('collapseNodesByDefault');\n }\n \n- get filterPreferences(): FilterPreferences {\n- return this._filterPreferences;\n+ get componentFilters(): Array {\n+ return this._componentFilters;\n }\n- set filterPreferences(value: FilterPreferences): void {\n+ set componentFilters(value: Array): void {\n if (this._isProfiling) {\n \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n throw Error('Cannot modify filter preferences while profiling');\n }\n \n- this._filterPreferences = value;\n+ this._componentFilters = value;\n \n \/\/ Update persisted filter preferences stored in localStorage.\n- saveFilterPreferences(value);\n+ saveComponentFilters(value);\n \n \/\/ Notify the renderer that filter prefernces have changed.\n \/\/ This is an expensive opreation; it unmounts and remounts the entire tree.\n- this._bridge.send('updateFilterPreferences', value);\n+ this._bridge.send('updateComponentFilters', value);\n \n- this.emit('filterPreferences');\n+ this.emit('componentFilters');\n }\n \n get hasOwnerMetadata(): boolean {\ndiff --git a\/src\/devtools\/views\/Button.js b\/src\/devtools\/views\/Button.js\nindex 78a9c8201f..bb55bca22f 100644\n--- a\/src\/devtools\/views\/Button.js\n+++ b\/src\/devtools\/views\/Button.js\n@@ -9,13 +9,13 @@ import tooltipStyles from '.\/Tooltip.css';\n type Props = {\n children: React$Node,\n className?: string,\n- title: string,\n+ title?: string,\n };\n \n export default function Button({\n children,\n className = '',\n- title,\n+ title = '',\n ...rest\n }: Props) {\n let button = (\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex 3099068b5b..0e05ce771f 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -6,6 +6,7 @@ import styles from '.\/ButtonIcon.css';\n export type IconType =\n | 'add'\n | 'cancel'\n+ | 'clear'\n | 'close'\n | 'collapsed'\n | 'copy'\n@@ -21,7 +22,11 @@ export type IconType =\n | 'previous'\n | 'record'\n | 'reload'\n+ | 'save'\n | 'search'\n+ | 'settings'\n+ | 'toggle_off'\n+ | 'toggle_on'\n | 'undo'\n | 'up'\n | 'view-dom'\n@@ -41,6 +46,9 @@ export default function ButtonIcon({ className = '', type }: Props) {\n case 'cancel':\n pathData = PATH_CANCEL;\n break;\n+ case 'clear':\n+ pathData = PATH_CLEAR;\n+ break;\n case 'close':\n pathData = PATH_CLOSE;\n break;\n@@ -86,9 +94,21 @@ export default function ButtonIcon({ className = '', type }: Props) {\n case 'reload':\n pathData = PATH_RELOAD;\n break;\n+ case 'save':\n+ pathData = PATH_SAVE;\n+ break;\n case 'search':\n pathData = PATH_SEARCH;\n break;\n+ case 'settings':\n+ pathData = PATH_SETTINGS;\n+ break;\n+ case 'toggle_off':\n+ pathData = PATH_TOGGLE_OFF;\n+ break;\n+ case 'toggle_on':\n+ pathData = PATH_TOGGLE_ON;\n+ break;\n case 'undo':\n pathData = PATH_UNDO;\n break;\n@@ -120,9 +140,14 @@ export default function ButtonIcon({ className = '', type }: Props) {\n );\n }\n \n-const PATH_ADD = 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z';\n+const PATH_ADD =\n+ 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z';\n \n const PATH_CANCEL = `\n+ M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\n+`;\n+\n+const PATH_CLEAR = `\n M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69\n 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z\n `;\n@@ -138,8 +163,8 @@ const PATH_COPY = `\n `;\n \n const PATH_DELETE = `\n- M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12\n- 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z\n+ M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12\n+ 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\n `;\n \n const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';\n@@ -177,11 +202,30 @@ const PATH_RELOAD = `\n 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\n `;\n \n+const PATH_SAVE = `\n+ M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\n+`;\n+\n const PATH_SEARCH = `\n M8.5,22H3.7l-1.4-1.5V3.8l1.3-1.5h17.2l1,1.5v4.9h-1.3V4.3l-0.4-0.6H4.2L3.6,4.3V20l0.7,0.7h4.2V22z\n M23,13.9l-4.6,3.6l4.6,4.6l-1.1,1.1l-4.7-4.4l-3.3,4.4l-3.2-12.3L23,13.9z\n `;\n \n+const PATH_SETTINGS = `\n+ M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12\n+ 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39\n+ 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69\n+ 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58\n+ 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0\n+ .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z\n+`;\n+\n+const PATH_TOGGLE_OFF =\n+ 'M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z';\n+\n+const PATH_TOGGLE_ON =\n+ 'M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z';\n+\n const PATH_UNDO = `\n M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88\n 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\ndiff --git a\/src\/devtools\/views\/Components\/ComponentFiltersModal.css b\/src\/devtools\/views\/Components\/ComponentFiltersModal.css\nnew file mode 100644\nindex 0000000000..1e16c7e3de\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ComponentFiltersModal.css\n@@ -0,0 +1,119 @@\n+.Background {\n+ position: absolute;\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: flex-start;\n+ justify-content: center;\n+ padding: 1rem;\n+ background-color: var(--color-modal-background);\n+ overflow: auto;\n+}\n+\n+.Modal {\n+ position: relative;\n+ z-index: 3;\n+ min-width: 20rem;\n+ max-width: 100%;\n+ display: inline-block;\n+ background-color: var(--color-background);\n+ padding: 0.5rem;\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.25rem;\n+}\n+\n+.LeftRight {\n+ display: flex;\n+}\n+.Left {\n+}\n+.Right {\n+ flex: 1;\n+ display: flex;\n+ align-items: center;\n+ justify-content: flex-end;\n+}\n+\n+.ButtonIcon {\n+ margin-right: 0.25rem;\n+}\n+\n+.NoFiltersCell {\n+ padding: 0.25rem 0;\n+ color: var(--color-dim);\n+}\n+\n+.Table {\n+ min-width: 20rem;\n+ margin-top: 0.5rem;\n+ border-spacing: 0;\n+}\n+\n+.TableRow {\n+ padding-bottom: 0.5rem;\n+}\n+\n+.TableCell {\n+ padding: 0;\n+ padding-right: 0.5rem;\n+}\n+.TableCell:last-of-type {\n+ text-align: right;\n+ padding-right: 0;\n+}\n+\n+.Select {\n+}\n+\n+.Input {\n+ border: none;\n+ border-radius: 0.125rem;\n+ padding: 0.125rem;\n+}\n+\n+.CancelButton {\n+ margin-right: 0.25rem;\n+}\n+\n+.InvalidRegExp,\n+.InvalidRegExp:active,\n+.InvalidRegExp:focus,\n+.InvalidRegExp:hover {\n+ color: var(--color-value-invalid);\n+}\n+\n+.ToggleOffInvalid,\n+.ToggleOnInvalid,\n+.ToggleOff,\n+.ToggleOn {\n+ border-radius: 0.75rem;\n+ width: 1rem;\n+ height: 0.625rem;\n+ display: flex;\n+ align-items: center;\n+ padding: 0.125rem;\n+}\n+.ToggleOffInvalid {\n+ background-color: var(--color-toggle-background-invalid);\n+ justify-content: flex-start;\n+}\n+.ToggleOnInvalid {\n+ background-color: var(--color-toggle-background-invalid);\n+ justify-content: flex-end;\n+}\n+.ToggleOff {\n+ background-color: var(--color-toggle-background-off);\n+ justify-content: flex-start;\n+}\n+.ToggleOn {\n+ background-color: var(--color-toggle-background-on);\n+ justify-content: flex-end;\n+}\n+\n+.ToggleInsideOff,\n+.ToggleInsideOn {\n+ border-radius: 0.375rem;\n+ width: 0.375rem;\n+ height: 0.375rem;\n+ background-color: var(--color-toggle-text);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/ComponentFiltersModal.js b\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\nnew file mode 100644\nindex 0000000000..e7a29f4e58\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ComponentFiltersModal.js\n@@ -0,0 +1,406 @@\n+\/\/ @flow\n+\n+import React, {\n+ useCallback,\n+ useContext,\n+ useMemo,\n+ useRef,\n+ useState,\n+} from 'react';\n+import { useModalDismissSignal, useSubscription } from '..\/hooks';\n+import { ComponentFiltersModalContext } from '.\/ComponentFiltersModalContext';\n+import { StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import Toggle from '..\/Toggle';\n+import Store from 'src\/devtools\/store';\n+import {\n+ ComponentFilterElementType,\n+ ComponentFilterDisplayName,\n+ ComponentFilterPath,\n+ ElementTypeClass,\n+ ElementTypeContext,\n+ ElementTypeEventTarget,\n+ ElementTypeFunction,\n+ ElementTypeForwardRef,\n+ ElementTypeHostComponent,\n+ ElementTypeMemo,\n+ ElementTypeOtherOrUnknown,\n+ ElementTypeProfiler,\n+ ElementTypeSuspense,\n+} from 'src\/types';\n+import styles from '.\/ComponentFiltersModal.css';\n+\n+import type {\n+ ComponentFilter,\n+ ElementType,\n+ ElementTypeComponentFilter,\n+ FilterType,\n+ RegExpComponentFilter,\n+} from 'src\/types';\n+\n+export default function ComponentFiltersModalWrapper(_: {||}) {\n+ const store = useContext(StoreContext);\n+\n+ const { isModalShowing, setIsModalShowing } = useContext(\n+ ComponentFiltersModalContext\n+ );\n+\n+ \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n+ \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n+ const isProfilingSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.isProfiling,\n+ subscribe: (callback: Function) => {\n+ store.addListener('isProfiling', callback);\n+ return () => store.removeListener('isProfiling', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const isProfiling = useSubscription(isProfilingSubscription);\n+ if (isProfiling && isModalShowing) {\n+ setIsModalShowing(false);\n+ }\n+\n+ return isModalShowing ? (\n+ \n+ ) : null;\n+}\n+\n+type Props = {|\n+ store: Store,\n+ setIsModalShowing: (value: boolean) => void,\n+|};\n+\n+function ComponentFiltersModal({ store, setIsModalShowing }: Props) {\n+ const dismissModal = useCallback(() => setIsModalShowing(false), [\n+ setIsModalShowing,\n+ ]);\n+\n+ const modalRef = useRef(null);\n+\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n+ const {\n+ addFilter,\n+ changeFilterType,\n+ updateFilterValueElementType,\n+ updateFilterValueRegExp,\n+ componentFilters,\n+ removeFilter,\n+ saveFilters,\n+ toggleFilterIsEnabled,\n+ } = useComponentFilters();\n+\n+ const saveAndClose = useCallback(() => {\n+ saveFilters();\n+ dismissModal();\n+ }, [dismissModal, saveFilters]);\n+\n+ return (\n+

\n+

Hide components where...<\/div>\n+

\n+

\n+ No filters have been added.\n+ <\/td>\n+ <\/tr>\n+ )}\n+ {componentFilters.map((componentFilter, index) => (\n+
\n+ \n+ toggleFilterIsEnabled(componentFilter, isEnabled)\n+ }\n+ title={\n+ componentFilter.isValid === false\n+ ? 'Filter invalid'\n+ : componentFilter.isEnabled\n+ ? 'Filter enabled'\n+ : 'Filter disabled'\n+ }\n+ >\n+ \n+ <\/Toggle>\n+ <\/td>\n+	\n+ \n+ changeFilterType(\n+ componentFilter,\n+ \/\/ $FlowFixMe TODO (filters)\n+ parseInt(currentTarget.value, 10)\n+ )\n+ }\n+ >\n+	\n+ {componentFilter.type === ComponentFilterElementType\n+ ? 'equals'\n+ : 'matches'}\n+ <\/td>\n+	\n+ {componentFilter.type === ComponentFilterElementType ? (\n+ \n+ updateFilterValueElementType(\n+ componentFilter,\n+ \/\/ $FlowFixMe TODO (filters)\n+ parseInt(currentTarget.value, 10)\n+ )\n+ }\n+ >\n+	\n+ removeFilter(index)}\n+ title=\"Delete filter\"\n+ >\n+ \n+ <\/Button>\n+ <\/td>\n+ <\/tr>\n+ ))}\n+ <\/tbody>\n+ <\/table>\n+ \n+ \n+

dillon1000/react

Files changed