ElementsInspector: Allow for custom row decorations.

Summary: Adds the capability to customize rows in the elements inspector via a callback.

Reviewed By: danielbuechele

Differential Revision: D15738355

fbshipit-source-id: 27b91a74535736318b7fdb9d2eb44dfa20b4d77b

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<ContextMenuExtension>,
+  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}
         />
       </FlexRow>
     );

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<ContextMenuExtension>,
+  decorateRow?: DecorateRow,
 };
 
 type ElementsRowState = {|
@@ -283,6 +284,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
       style,
       even,
       matchingSearchQuery,
+      decorateRow,
     } = this.props;
     const hasChildren = element.children && element.children.length > 0;
 
@@ -312,20 +314,22 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
         ))
       : [];
 
-    const decoration = (() => {
+    const decoration = decorateRow
-      switch (element.decoration) {
+      ? decorateRow(element)
-        case 'litho':
+      : (() => {
-          return <DecorationImage src="icons/litho-logo.png" />;
+          switch (element.decoration) {
-        case 'componentkit':
+            case 'litho':
-          return <DecorationImage src="icons/componentkit-logo.png" />;
+              return <DecorationImage src="icons/litho-logo.png" />;
-        case 'componentscript':
+            case 'componentkit':
-          return <DecorationImage src="icons/componentscript-logo.png" />;
+              return <DecorationImage src="icons/componentkit-logo.png" />;
-        case 'accessibility':
+            case 'componentscript':
-          return <DecorationImage src="icons/accessibility.png" />;
+              return <DecorationImage src="icons/componentscript-logo.png" />;
-        default:
+            case 'accessibility':
-          return null;
+              return <DecorationImage src="icons/accessibility.png" />;
-      }
+            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<empty>;
+
 type ElementsProps = {|
   root: ?ElementID,
   selected: ?ElementID,
@@ -392,6 +398,7 @@ type ElementsProps = {|
   onElementHovered: ?(key: ?ElementID) => void,
   alternateRowColor?: boolean,
   contextMenuExtensions?: Array<ContextMenuExtension>,
+  decorateRow?: DecorateRow,
 |};
 
 type ElementsState = {|
@@ -562,6 +569,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
       focused,
       searchResults,
       contextMenuExtensions,
+      decorateRow,
     } = this.props;
     const {flatElements} = this.state;
 
@@ -600,6 +608,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
         elements={elements}
         childrenCount={childrenCount}
         contextMenuExtensions={contextMenuExtensions || []}
+        decorateRow={decorateRow}
       />
     );
   };