@buoy-gg/highlight-updates 7.0.38 → 7.0.40

package/lib/module/highlight-updates/components/RenderListItem.js

@@ -1 +1,230 @@
-"use strict";import React,{useMemo}from"react";import{View,Text,TouchableOpacity,StyleSheet}from"react-native";import{ChevronRight,night,useRelativeTime,monoFont}from"@buoy-gg/shared-ui";import{IdentifierBadge}from"./IdentifierBadge";import{RenderCauseBadge}from"./RenderCauseBadge";import{renderRowTestID}from"../utils/testIDs";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function RenderListItemInner({render:e,onPress:t}){const i=useMemo(()=>e.testID?{type:"testID",value:e.testID}:e.nativeID?{type:"nativeID",value:e.nativeID}:e.componentName?{type:"component",value:e.componentName}:e.accessibilityLabel?{type:"accessibilityLabel",value:e.accessibilityLabel}:{type:"nativeTag",value:String(e.nativeTag)},[e.testID,e.nativeID,e.componentName,e.accessibilityLabel,e.nativeTag]),o=useMemo(()=>e.accessibilityLabel&&"accessibilityLabel"!==i.type?{type:"accessibilityLabel",value:e.accessibilityLabel}:null,[e.accessibilityLabel,i.type]),n=useRelativeTime(e.lastRenderTime),r=renderRowTestID(i.value);return _jsxs(TouchableOpacity,{testID:r,accessibilityRole:"button",accessibilityLabel:`${e.displayName}, ${i.type} ${i.value}, ${e.renderCount} renders`,style:styles.container,onPress:()=>t(e),activeOpacity:.7,children:[_jsx(View,{style:[styles.colorIndicator,{backgroundColor:e.color}]}),_jsxs(View,{style:styles.content,children:[_jsxs(View,{style:styles.topRow,children:[_jsxs(View,{style:styles.viewTypeContainer,children:[_jsx(Text,{testID:`${r}-name`,style:styles.viewType,numberOfLines:1,children:e.displayName}),o?_jsx(IdentifierBadge,{type:o.type,value:o.value,compact:!0,shortLabel:!0}):e.displayName!==e.viewType?_jsx(Text,{testID:`${r}-type`,style:styles.nativeType,numberOfLines:1,children:e.viewType}):null]}),_jsx(View,{style:[styles.renderCountBadge,{backgroundColor:e.color+"30"}],children:_jsxs(Text,{testID:`${r}-count`,style:[styles.renderCount,{color:e.color}],children:[e.renderCount,"x"]})})]}),e.lastRenderCause&&_jsx(View,{style:styles.causeRow,children:_jsx(RenderCauseBadge,{testID:`${r}-cause`,cause:e.lastRenderCause,compact:!0,showKeys:!0,showTwoLevel:!0})}),_jsxs(View,{style:styles.bottomRow,children:[_jsx(View,{style:styles.identifierContainer,children:_jsx(IdentifierBadge,{testID:`${r}-identifier`,type:i.type,value:i.value,compact:!0,shortLabel:!0})}),_jsx(Text,{testID:`${r}-time`,style:styles.timing,children:n})]})]}),_jsx(ChevronRight,{size:16,color:night.color.textTertiary})]})}export const RenderListItem=React.memo(RenderListItemInner,(e,t)=>{const i=e.render,o=t.render;return i.id===o.id&&i.renderCount===o.renderCount&&i.color===o.color&&i.lastRenderTime===o.lastRenderTime&&i.lastRenderCause?.type===o.lastRenderCause?.type&&i.lastRenderCause?.componentCause===o.lastRenderCause?.componentCause&&e.onPress===t.onPress});const styles=StyleSheet.create({container:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:night.color.surface,borderRadius:8,borderWidth:1,borderColor:night.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},causeRow:{marginBottom:4},viewTypeContainer:{flex:1,marginRight:8},viewType:{fontSize:13,fontWeight:"600",color:night.color.text},nativeType:{fontSize:10,color:night.color.textTertiary,fontFamily:monoFont,marginTop:1},accessibilityLabel:{fontSize:10,color:night.color.accent,fontStyle:"italic",marginTop:1},renderCountBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:10},renderCount:{fontSize:11,fontWeight:"700",fontFamily:monoFont},bottomRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},identifierContainer:{flex:1,flexShrink:1,overflow:"hidden"},timing:{fontSize:10,color:night.color.textTertiary,fontWeight:"500",flexShrink:0}});export default RenderListItem;
+"use strict";
+
+/**
+ * RenderListItem
+ *
+ * Compact list item showing a tracked component render.
+ * Displays viewType, identifier (testID/nativeID/component), render count, and timing.
+ */
+
+import React, { useMemo } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { ChevronRight, night, useRelativeTime, monoFont } from "@buoy-gg/shared-ui";
+import { IdentifierBadge } from "./IdentifierBadge";
+import { RenderCauseBadge } from "./RenderCauseBadge";
+import { renderRowTestID } from "../utils/testIDs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function RenderListItemInner({
+  render,
+  onPress
+}) {
+  // Get best identifier to show (primary)
+  const identifier = useMemo(() => {
+    if (render.testID) return {
+      type: "testID",
+      value: render.testID
+    };
+    if (render.nativeID) return {
+      type: "nativeID",
+      value: render.nativeID
+    };
+    if (render.componentName) return {
+      type: "component",
+      value: render.componentName
+    };
+    if (render.accessibilityLabel) return {
+      type: "accessibilityLabel",
+      value: render.accessibilityLabel
+    };
+    return {
+      type: "nativeTag",
+      value: String(render.nativeTag)
+    };
+  }, [render.testID, render.nativeID, render.componentName, render.accessibilityLabel, render.nativeTag]);
+
+  // Get secondary identifier (accessibilityLabel if not already primary)
+  const secondaryIdentifier = useMemo(() => {
+    if (render.accessibilityLabel && identifier.type !== "accessibilityLabel") {
+      return {
+        type: "accessibilityLabel",
+        value: render.accessibilityLabel
+      };
+    }
+    return null;
+  }, [render.accessibilityLabel, identifier.type]);
+
+  // Format time since last render (live-updating)
+  const timeSinceRender = useRelativeTime(render.lastRenderTime);
+
+  // The row is addressed by the identifier it SHOWS, never by nativeTag — see
+  // utils/testIDs.ts for why a tag can't be a handle. The label spells the row
+  // out for assistive tech, which otherwise gets a coloured bar and a count.
+  const rowTestID = renderRowTestID(identifier.value);
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    testID: rowTestID,
+    accessibilityRole: "button",
+    accessibilityLabel: `${render.displayName}, ${identifier.type} ${identifier.value}, ${render.renderCount} renders`,
+    style: styles.container,
+    onPress: () => onPress(render),
+    activeOpacity: 0.7,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.colorIndicator, {
+        backgroundColor: render.color
+      }]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.topRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.viewTypeContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            testID: `${rowTestID}-name`,
+            style: styles.viewType,
+            numberOfLines: 1,
+            children: render.displayName
+          }), secondaryIdentifier ? /*#__PURE__*/_jsx(IdentifierBadge, {
+            type: secondaryIdentifier.type,
+            value: secondaryIdentifier.value,
+            compact: true,
+            shortLabel: true
+          }) : render.displayName !== render.viewType ? /*#__PURE__*/_jsx(Text, {
+            testID: `${rowTestID}-type`,
+            style: styles.nativeType,
+            numberOfLines: 1,
+            children: render.viewType
+          }) : null]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.renderCountBadge, {
+            backgroundColor: render.color + "30"
+          }],
+          children: /*#__PURE__*/_jsxs(Text, {
+            testID: `${rowTestID}-count`,
+            style: [styles.renderCount, {
+              color: render.color
+            }],
+            children: [render.renderCount, "x"]
+          })
+        })]
+      }), render.lastRenderCause && /*#__PURE__*/_jsx(View, {
+        style: styles.causeRow,
+        children: /*#__PURE__*/_jsx(RenderCauseBadge, {
+          testID: `${rowTestID}-cause`,
+          cause: render.lastRenderCause,
+          compact: true,
+          showKeys: true,
+          showTwoLevel: true
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.bottomRow,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.identifierContainer,
+          children: /*#__PURE__*/_jsx(IdentifierBadge, {
+            testID: `${rowTestID}-identifier`,
+            type: identifier.type,
+            value: identifier.value,
+            compact: true,
+            shortLabel: true
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          testID: `${rowTestID}-time`,
+          style: styles.timing,
+          children: timeSinceRender
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ChevronRight, {
+      size: 16,
+      color: night.color.textTertiary
+    })]
+  });
+}
+
+// Memoize with custom comparison - only re-render when relevant props change
+// This is critical for performance when the modal is open during rapid renders
+export const RenderListItem = /*#__PURE__*/React.memo(RenderListItemInner, (prevProps, nextProps) => {
+  // Return true if props are EQUAL (skip re-render)
+  // Return false if props are DIFFERENT (trigger re-render)
+  const prevRender = prevProps.render;
+  const nextRender = nextProps.render;
+  return prevRender.id === nextRender.id && prevRender.renderCount === nextRender.renderCount && prevRender.color === nextRender.color && prevRender.lastRenderTime === nextRender.lastRenderTime && prevRender.lastRenderCause?.type === nextRender.lastRenderCause?.type && prevRender.lastRenderCause?.componentCause === nextRender.lastRenderCause?.componentCause && prevProps.onPress === nextProps.onPress;
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginHorizontal: 12,
+    marginBottom: 6,
+    backgroundColor: night.color.surface,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.border
+  },
+  colorIndicator: {
+    width: 4,
+    height: 36,
+    borderRadius: 2,
+    marginRight: 10
+  },
+  content: {
+    flex: 1,
+    marginRight: 8
+  },
+  topRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  causeRow: {
+    marginBottom: 4
+  },
+  viewTypeContainer: {
+    flex: 1,
+    marginRight: 8
+  },
+  viewType: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: night.color.text
+  },
+  nativeType: {
+    fontSize: 10,
+    color: night.color.textTertiary,
+    fontFamily: monoFont,
+    marginTop: 1
+  },
+  accessibilityLabel: {
+    fontSize: 10,
+    color: night.color.accent,
+    fontStyle: "italic",
+    marginTop: 1
+  },
+  renderCountBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  renderCount: {
+    fontSize: 11,
+    fontWeight: "700",
+    fontFamily: monoFont
+  },
+  bottomRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8
+  },
+  identifierContainer: {
+    flex: 1,
+    flexShrink: 1,
+    overflow: "hidden"
+  },
+  timing: {
+    fontSize: 10,
+    color: night.color.textTertiary,
+    fontWeight: "500",
+    flexShrink: 0
+  }
+});
+export default RenderListItem;