diff --git a/src/ui/components/elements-inspector/ElementsInspector.js b/src/ui/components/elements-inspector/ElementsInspector.js index 1fa9f2416..7e86a2ca2 100644 --- a/src/ui/components/elements-inspector/ElementsInspector.js +++ b/src/ui/components/elements-inspector/ElementsInspector.js @@ -7,7 +7,7 @@ import {Component} from 'react'; import FlexRow from '../FlexRow.js'; -import {Elements} from './elements.js'; +import {Elements, type DecorateRow} from './elements.js'; import type {ContextMenuExtension} from 'flipper'; export type ElementID = string; @@ -65,6 +65,7 @@ export default class ElementsInspector extends Component<{ useAppSidebar?: boolean, alternateRowColor?: boolean, contextMenuExtensions?: Array, + decorateRow?: DecorateRow, }> { static defaultProps = { alternateRowColor: true, @@ -81,6 +82,7 @@ export default class ElementsInspector extends Component<{ searchResults, alternateRowColor, contextMenuExtensions, + decorateRow, } = this.props; return ( @@ -96,6 +98,7 @@ export default class ElementsInspector extends Component<{ elements={elements} alternateRowColor={alternateRowColor} contextMenuExtensions={contextMenuExtensions} + decorateRow={decorateRow} /> ); diff --git a/src/ui/components/elements-inspector/elements.js b/src/ui/components/elements-inspector/elements.js index dab428caf..d59d957c1 100644 --- a/src/ui/components/elements-inspector/elements.js +++ b/src/ui/components/elements-inspector/elements.js @@ -12,7 +12,7 @@ import type { } from './ElementsInspector.js'; import {reportInteraction} from '../../../utils/InteractionTracker'; import ContextMenu from '../ContextMenu.js'; -import {PureComponent} from 'react'; +import {PureComponent, type Element as ReactElement} from 'react'; import FlexRow from '../FlexRow.js'; import FlexColumn from '../FlexColumn.js'; import Glyph from '../Glyph.js'; @@ -205,6 +205,7 @@ type ElementsRowProps = { onElementHovered: ?(key: ?ElementID) => void, style?: Object, contextMenuExtensions: Array, + decorateRow?: DecorateRow, }; type ElementsRowState = {| @@ -283,6 +284,7 @@ class ElementsRow extends PureComponent { style, even, matchingSearchQuery, + decorateRow, } = this.props; const hasChildren = element.children && element.children.length > 0; @@ -312,20 +314,22 @@ class ElementsRow extends PureComponent { )) : []; - const decoration = (() => { - switch (element.decoration) { - case 'litho': - return ; - case 'componentkit': - return ; - case 'componentscript': - return ; - case 'accessibility': - return ; - default: - return null; - } - })(); + const decoration = decorateRow + ? decorateRow(element) + : (() => { + switch (element.decoration) { + case 'litho': + return ; + case 'componentkit': + return ; + case 'componentscript': + return ; + case 'accessibility': + return ; + default: + return null; + } + })(); // when we hover over or select an expanded element with children, we show a line from the // bottom of the element to the next sibling @@ -381,6 +385,8 @@ const ElementsBox = styled(FlexColumn)({ overflow: 'auto', }); +export type DecorateRow = Element => ?ReactElement; + type ElementsProps = {| root: ?ElementID, selected: ?ElementID, @@ -392,6 +398,7 @@ type ElementsProps = {| onElementHovered: ?(key: ?ElementID) => void, alternateRowColor?: boolean, contextMenuExtensions?: Array, + decorateRow?: DecorateRow, |}; type ElementsState = {| @@ -562,6 +569,7 @@ export class Elements extends PureComponent { focused, searchResults, contextMenuExtensions, + decorateRow, } = this.props; const {flatElements} = this.state; @@ -600,6 +608,7 @@ export class Elements extends PureComponent { elements={elements} childrenCount={childrenCount} contextMenuExtensions={contextMenuExtensions || []} + decorateRow={decorateRow} /> ); };