fix: flipper navigation plugin event table rows selection highlight n…

…ot working and black theme text not showing (#10004) fixes #10003 fixes #10000)
react-navigation · Nov 27, 2022 · b423b2a · b423b2a
1 parent 2bf9ab8
commit b423b2a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 31 deletions.
diff --git a/packages/flipper-plugin-react-navigation/package.json b/packages/flipper-plugin-react-navigation/package.json
@@ -37,11 +37,15 @@
     "@react-navigation/core": "^6.1.1",
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
     "antd": "^4.16.1",
     "flipper": "^0.112.0",
     "flipper-pkg": "^0.112.0",
     "flipper-plugin": "^0.112.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.6"
   }
 }
diff --git a/packages/flipper-plugin-react-navigation/src/Logs.tsx b/packages/flipper-plugin-react-navigation/src/Logs.tsx
@@ -1,46 +1,75 @@
 import { CompassOutlined } from '@ant-design/icons';
-import { DataList, DetailSidebar, styled, theme } from 'flipper-plugin';
+import { DetailSidebar, styled } from 'flipper';
+import { theme } from 'flipper-plugin';
 import * as React from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList as List } from 'react-window';
 
 import { Sidebar } from './Sidebar';
-import type { StoreType } from './types';
+import type { Log, StoreType } from './types';
 
 type Props = StoreType & {
   active: boolean;
 };
 
 export function Logs({ active, logs, index, resetTo }: Props) {
   const [selectedID, setSelectedID] = React.useState<string | null>(null);
+  const listRef = React.useRef<List<Log[]>>();
 
   const selectedItem = selectedID
     ? logs.find((log) => log.id === selectedID)
     : logs[logs.length - 1];
 
+  const itemKey = (index: number) => logs[index].id;
+
+  React.useEffect(() => {
+    if (listRef.current && !selectedID) {
+      listRef.current.scrollToItem(logs.length - 1);
+    }
+  }, [logs.length, selectedID]);
+
   return logs.length ? (
     <>
-      <DataList
-        style={{ height: '100%' }}
-        items={logs}
-        onRenderItem={({ id, action }, _, i) => (
-          <Row
-            key={id}
-            selected={selectedItem?.id === id}
-            faded={index != null ? index > -1 && i > index : false}
-            onClick={() => {
-              if (id === logs[logs.length - 1].id) {
-                setSelectedID(null);
-              } else {
-                setSelectedID(id);
-              }
-            }}
+      <AutoSizer>
+        {({ height, width }) => (
+          <List
+            ref={listRef as any}
+            itemData={logs}
+            itemSize={51}
+            itemCount={logs.length}
+            itemKey={itemKey}
+            height={height}
+            width={width}
           >
-            {action.type}
-            <JumpButton type="button" onClick={() => resetTo(id)}>
-              Reset to this
-            </JumpButton>
-          </Row>
+            {({ index: itemIndex, style }) => {
+              if (!logs[itemIndex]) return null;
+              const { action, id } = logs[itemIndex];
+              return (
+                <Row
+                  key={id}
+                  selected={selectedItem?.id === id}
+                  faded={
+                    index != null ? index > -1 && itemIndex > index : false
+                  }
+                  onClick={() => {
+                    if (id === logs[logs.length - 1].id) {
+                      setSelectedID(null);
+                    } else {
+                      setSelectedID(id);
+                    }
+                  }}
+                  style={style}
+                >
+                  {action.type}
+                  <JumpButton type="button" onClick={() => resetTo(id)}>
+                    Reset to this
+                  </JumpButton>
+                </Row>
+              );
+            }}
+          </List>
         )}
-      />
+      </AutoSizer>
       {active ? (
         <DetailSidebar>
           {selectedItem && (
@@ -72,8 +101,8 @@ const Row = styled.button<{ selected: boolean; faded: boolean }>((props) => ({
   'fontSize': theme.monospace.fontSize,
   'textAlign': 'left',
   'padding': `${theme.space.medium}px ${theme.space.large}px`,
-  'color': props.selected ? '#fff' : '#000',
-  'backgroundColor': props.selected ? theme.primaryColor : 'transparent',
+  'color': props.selected ? '#fff' : 'inherit',
+  'backgroundColor': props.selected ? theme.primaryColor : 'inherit',
   'opacity': props.faded ? 0.5 : 1,
   'border': 0,
   'boxShadow': `inset 0 -1px 0 0 ${theme.dividerColor}`,

diff --git a/packages/flipper-plugin-react-navigation/src/Sidebar.tsx b/packages/flipper-plugin-react-navigation/src/Sidebar.tsx
@@ -1,5 +1,4 @@
-import { Layout, ManagedDataInspector, styled } from 'flipper';
-import { theme } from 'flipper-plugin';
+import { DataInspector, Layout, styled, theme } from 'flipper-plugin';
 import * as React from 'react';
 
 import { Title4 } from './Typography';
@@ -67,9 +66,9 @@ export function Sidebar({
         </>
       ) : null}
       <Title4>Action</Title4>
-      <ManagedDataInspector data={action} expandRoot={false} />
+      <DataInspector data={action} expandRoot={false} />
       <Title4>State</Title4>
-      <ManagedDataInspector data={state} expandRoot={false} />
+      <DataInspector data={state} expandRoot={false} />
     </Layout.Container>
   );
 }