Migrate to custom plugin

Summary: In this step, we want to visualize our mammals in a custom card view. For this reason, we need to replace `createTablePlugin` with a React component that extends `FlipperPlugin`.

Reviewed By: jknoxville

Differential Revision: D15183324

fbshipit-source-id: 329cdc5c6cbd7e1435538e8cdddf049d914ff221

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/plugin/SeaMammalFlipperPlugin.kt

@@ -33,7 +33,7 @@ class SeaMammalFlipperPlugin : FlipperPlugin {
         connection = null
     }
 
-    override fun runInBackground(): Boolean = false
+    override fun runInBackground(): Boolean = true
 
     private     fun newRow(row: FlipperObject) {
         connection?.send("newRow", row)

src/plugins/seamammals/index.js

@@ -6,7 +6,18 @@
  * @flow strict-local
  */
 
-import {Text, Panel, ManagedDataInspector, createTablePlugin} from 'flipper';
+import {
+  Text,
+  Panel,
+  ManagedDataInspector,
+  FlipperPlugin,
+  DetailSidebar,
+  FlexRow,
+  FlexColumn,
+  styled,
+  colors,
+} from 'flipper';
+import React from 'react';
 
 type Id = number;
 
@@ -16,24 +27,6 @@ type Row = {
   url: string,
 };
 
-function buildRow(row: Row) {
-  return {
-    columns: {
-      title: {
-        value: <Text>{row.title}</Text>,
-        filterValue: row.title,
-      },
-      url: {
-        value: <Text>{row.url}</Text>,
-        filterValue: row.url,
-      },
-    },
-    key: row.id,
-    copyText: JSON.stringify(row),
-    filterValue: `${row.title} ${row.url}`,
-  };
-}
-
 function renderSidebar(row: Row) {
   return (
     <Panel floating={false} heading={'Extras'}>
@@ -42,24 +35,114 @@ function renderSidebar(row: Row) {
   );
 }
 
-const columns = {
-  title: {
-    value: 'Title',
-  },
-  url: {
-    value: 'URL',
-  },
+type State = {
+  selectedIndex: number,
 };
 
-const columnSizes = {
-  title: '15%',
-  url: 'flex',
+type PersistedState = {
+  data: Array<Row>,
 };
 
-export default createTablePlugin({
-  method: 'newRow',
-  columns,
-  columnSizes,
-  renderSidebar,
-  buildRow,
-});
+export default class SeaMammals extends FlipperPlugin<
+  State,
+  void,
+  PersistedState,
+> {
+  static defaultPersistedState = {
+    data: [],
+  };
+
+  static persistedStateReducer = (
+    persistedState: PersistedState,
+    method: string,
+    payload: Row,
+  ) => {
+    if (method === 'newRow') {
+      return {
+        data: [...persistedState.data, payload],
+      };
+    }
+    return persistedState;
+  };
+
+  static Container = styled(FlexRow)({
+    backgroundColor: colors.macOSTitleBarBackgroundBlur,
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexGrow: 1,
+  });
+
+  state = {
+    selectedIndex: -1,
+  };
+
+  render() {
+    const {selectedIndex} = this.state;
+    const {data} = this.props.persistedState;
+
+    return (
+      <SeaMammals.Container>
+        {data.map((row, i) => (
+          <Card
+            {...row}
+            onSelect={() => this.setState({selectedIndex: i})}
+            selected={i === selectedIndex}
+            key={i}
+          />
+        ))}
+        <DetailSidebar>
+          {this.state.selectedIndex > -1 &&
+            renderSidebar(this.props.persistedState.data[selectedIndex])}
+        </DetailSidebar>
+      </SeaMammals.Container>
+    );
+  }
+}
+
+class Card extends React.Component<{
+  ...Row,
+  onSelect: () => void,
+  selected: boolean,
+}> {
+  static Container = styled(FlexColumn)(props => ({
+    margin: 10,
+    borderRadius: 5,
+    border: '2px solid black',
+    backgroundColor: colors.white,
+    borderColor: props.selected
+      ? colors.macOSTitleBarIconSelected
+      : colors.white,
+    padding: 0,
+    width: 150,
+    overflow: 'hidden',
+    boxShadow: '1px 1px 4px rgba(0,0,0,0.1)',
+    cursor: 'pointer',
+  }));
+
+  static Image = styled('div')({
+    backgroundSize: 'cover',
+    width: '100%',
+    paddingTop: '100%',
+  });
+
+  static Title = styled(Text)({
+    fontSize: 14,
+    fontWeight: 'bold',
+    padding: '10px 5px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  });
+
+  render() {
+    return (
+      <Card.Container
+        onClick={this.props.onSelect}
+        selected={this.props.selected}>
+        <Card.Image style={{backgroundImage: `url(${this.props.url || ''})`}} />
+        <Card.Title>{this.props.title}</Card.Title>
+      </Card.Container>
+    );
+  }
+}