@buoy-gg/highlight-updates 7.0.38 → 7.0.40

package/lib/commonjs/highlight-updates/components/ModalHeaderContent.js

@@ -1 +1,293 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SearchSection=exports.MainListHeader=exports.HeaderActions=exports.FilterViewHeader=exports.DetailViewHeader=exports.CopySettingsViewHeader=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_StatsDisplay=require("./StatsDisplay"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?r:i){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?a(s,t,o):s[t]=e[t]);return s})(e,t)}const SearchSectionInner=(0,_react.memo)(function({isActive:e,searchText:t,onSearchChange:i,onSearchClose:r}){return e?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Search,{value:t,onChangeText:i,onCancel:()=>{i(""),r()},onDismiss:r,dismissOnBlur:!0,clearOnlyWhenText:!0,placeholder:"Search testID, nativeID, component...",accessibilityLabel:"Search renders",iconSize:14,testID:"buoy-highlight-search-field",containerTestID:"buoy-highlight-search-container",containerNativeID:"__rn_buoy__search-container",clearTestID:"buoy-highlight-search-clear"}):null}),SearchSection=exports.SearchSection=SearchSectionInner,HeaderActionsInner=(0,_react.memo)(function({onSearchToggle:e,onFilterToggle:t,onToggleTracking:i,onToggleFreeze:r,onClear:a,onOpenCopySettings:o,isTracking:s,isFrozen:n,activeFilterCount:c,hasRenders:l}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-search",accessibilityRole:"button",accessibilityLabel:"Search renders",onPress:e,style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-filters",accessibilityRole:"button",accessibilityLabel:c>0?`Filters, ${c} active`:"Filters",onPress:t,style:[styles.headerActionButton,c>0&&styles.activeFilterButton],children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:c>0?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-copy",accessibilityRole:"button",onPress:o,style:[styles.headerActionButton,!l&&styles.headerActionButtonDisabled],disabled:!l,accessibilityLabel:"Open copy settings",children:(0,_jsxRuntime.jsx)(_sharedUi.Copy,{size:14,color:l?_sharedUi.night.color.textSecondary:_sharedUi.night.color.textTertiary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-freeze",accessibilityRole:"button",accessibilityLabel:n?"Unfreeze frame":"Freeze frame",onPress:r,style:[styles.headerActionButton,n&&styles.freezeButton,!s&&styles.headerActionButtonDisabled],disabled:!s,children:(0,_jsxRuntime.jsx)(_sharedUi.Pause,{size:14,color:s&&n?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary})}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{testID:"buoy-highlight-power",isEnabled:s,onToggle:i,accessibilityLabel:"Toggle render tracking"}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-clear",accessibilityRole:"button",accessibilityLabel:"Clear tracked renders",onPress:a,style:[styles.headerActionButton,!l&&styles.headerActionButtonDisabled],disabled:!l,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:_sharedUi.night.color.textTertiary})})]})}),HeaderActions=exports.HeaderActions=HeaderActionsInner,MainListHeader=exports.MainListHeader=(0,_react.memo)(function({onBack:e,isSearchActive:t,searchText:i,onSearchChange:r,onSearchToggle:a,onSearchClose:o,onFilterToggle:s,onToggleTracking:n,onToggleFreeze:c,onClear:l,onOpenCopySettings:h,isTracking:d,isFrozen:u,activeFilterCount:g,hasRenders:_,searchInputRef:x}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[e&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:e}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:t?(0,_jsxRuntime.jsx)(SearchSection,{isActive:t,searchText:i,onSearchChange:r,onSearchClose:o,searchInputRef:x}):(0,_jsxRuntime.jsx)(_StatsDisplay.StatsDisplay,{})}),(0,_jsxRuntime.jsx)(HeaderActions,{onSearchToggle:a,onFilterToggle:s,onToggleTracking:n,onToggleFreeze:c,onClear:l,onOpenCopySettings:h,isTracking:d,isFrozen:u,activeFilterCount:g,hasRenders:_})]})}),FilterViewHeader=exports.FilterViewHeader=(0,_react.memo)(function({onBack:e,activeTab:t,onTabChange:i,activeFilterCount:r=0}){const a=[{key:"filters",label:"Filters"+(r>0?` (${r})`:"")},{key:"settings",label:"Settings"}];return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:e}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:!0,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:a,activeTab:t,onTabChange:e=>i(e),testIDPrefix:"buoy-highlight-filter-tab"})}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{})]})}),DetailViewHeader=exports.DetailViewHeader=(0,_react.memo)(function({onBack:e,activeTab:t,onTabChange:i,hasHistory:r=!0}){const a=[{key:"details",label:"Details"},{key:"history",label:"History",disabled:!r}];return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:e}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:!0,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:a,activeTab:t,onTabChange:e=>i(e),testIDPrefix:"buoy-highlight-detail-tab"})}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{})]})}),CopySettingsViewHeader=exports.CopySettingsViewHeader=(0,_react.memo)(function({onBack:e}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:e}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Copy Settings",testID:"buoy-highlight-copy-title"})]})}),styles=_reactNative.StyleSheet.create({headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},activeFilterButton:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},freezeButton:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchSection = exports.MainListHeader = exports.HeaderActions = exports.FilterViewHeader = exports.DetailViewHeader = exports.CopySettingsViewHeader = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _StatsDisplay = require("./StatsDisplay");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ModalHeaderContent
+ *
+ * Memoized header content components for the HighlightUpdatesModal.
+ * Extracted to prevent re-renders when parent state changes unrelated to header.
+ *
+ * Following the optimization guide: extract inline JSX to memoized components.
+ */
+
+// ============================================================================
+// Search Section - isolated component for search UI
+// ============================================================================
+
+const SearchSectionInner = /*#__PURE__*/(0, _react.memo)(function SearchSection({
+  isActive,
+  searchText,
+  onSearchChange,
+  onSearchClose
+}) {
+  if (!isActive) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+    value: searchText,
+    onChangeText: onSearchChange,
+    onCancel: () => {
+      onSearchChange("");
+      onSearchClose();
+    },
+    onDismiss: onSearchClose,
+    dismissOnBlur: true,
+    clearOnlyWhenText: true,
+    placeholder: "Search testID, nativeID, component...",
+    accessibilityLabel: "Search renders",
+    iconSize: 14,
+    testID: "buoy-highlight-search-field",
+    containerTestID: "buoy-highlight-search-container",
+    containerNativeID: "__rn_buoy__search-container",
+    clearTestID: "buoy-highlight-search-clear"
+  });
+});
+const SearchSection = exports.SearchSection = SearchSectionInner;
+
+// ============================================================================
+// Header Actions - isolated component for action buttons
+// ============================================================================
+
+const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions({
+  onSearchToggle,
+  onFilterToggle,
+  onToggleTracking,
+  onToggleFreeze,
+  onClear,
+  onOpenCopySettings,
+  isTracking,
+  isFrozen,
+  activeFilterCount,
+  hasRenders
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-search",
+      accessibilityRole: "button",
+      accessibilityLabel: "Search renders",
+      onPress: onSearchToggle,
+      style: styles.headerActionButton,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+        size: 14,
+        color: _sharedUi.night.color.textSecondary
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-filters",
+      accessibilityRole: "button",
+      accessibilityLabel: activeFilterCount > 0 ? `Filters, ${activeFilterCount} active` : "Filters",
+      onPress: onFilterToggle,
+      style: [styles.headerActionButton, activeFilterCount > 0 && styles.activeFilterButton],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+        size: 14,
+        color: activeFilterCount > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-copy",
+      accessibilityRole: "button",
+      onPress: onOpenCopySettings,
+      style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
+      disabled: !hasRenders,
+      accessibilityLabel: "Open copy settings",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+        size: 14,
+        color: hasRenders ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-freeze",
+      accessibilityRole: "button",
+      accessibilityLabel: isFrozen ? "Unfreeze frame" : "Freeze frame",
+      onPress: onToggleFreeze,
+      style: [styles.headerActionButton, isFrozen && styles.freezeButton, !isTracking && styles.headerActionButtonDisabled],
+      disabled: !isTracking,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pause, {
+        size: 14,
+        color: !isTracking ? _sharedUi.night.color.textTertiary : isFrozen ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+      testID: "buoy-highlight-power",
+      isEnabled: isTracking,
+      onToggle: onToggleTracking,
+      accessibilityLabel: "Toggle render tracking"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: "buoy-highlight-clear",
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear tracked renders",
+      onPress: onClear,
+      style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
+      disabled: !hasRenders,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+        size: 14,
+        color: hasRenders ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textTertiary
+      })
+    })]
+  });
+});
+const HeaderActions = exports.HeaderActions = HeaderActionsInner;
+
+// ============================================================================
+// Main List Header - complete header for main list view
+// ============================================================================
+
+const MainListHeader = exports.MainListHeader = /*#__PURE__*/(0, _react.memo)(function MainListHeader({
+  onBack,
+  isSearchActive,
+  searchText,
+  onSearchChange,
+  onSearchToggle,
+  onSearchClose,
+  onFilterToggle,
+  onToggleTracking,
+  onToggleFreeze,
+  onClear,
+  onOpenCopySettings,
+  isTracking,
+  isFrozen,
+  activeFilterCount,
+  hasRenders,
+  searchInputRef
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: onBack
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: "",
+      children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchSection, {
+        isActive: isSearchActive,
+        searchText: searchText,
+        onSearchChange: onSearchChange,
+        onSearchClose: onSearchClose,
+        searchInputRef: searchInputRef
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatsDisplay.StatsDisplay, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderActions, {
+      onSearchToggle: onSearchToggle,
+      onFilterToggle: onFilterToggle,
+      onToggleTracking: onToggleTracking,
+      onToggleFreeze: onToggleFreeze,
+      onClear: onClear,
+      onOpenCopySettings: onOpenCopySettings,
+      isTracking: isTracking,
+      isFrozen: isFrozen,
+      activeFilterCount: activeFilterCount,
+      hasRenders: hasRenders
+    })]
+  });
+});
+
+// ============================================================================
+// Filter View Header
+// ============================================================================
+
+const FilterViewHeader = exports.FilterViewHeader = /*#__PURE__*/(0, _react.memo)(function FilterViewHeader({
+  onBack,
+  activeTab,
+  onTabChange,
+  activeFilterCount = 0
+}) {
+  const tabs = [{
+    key: "filters",
+    label: `Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}`
+  }, {
+    key: "settings",
+    label: "Settings"
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: onBack
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: "",
+      noMargin: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+        tabs: tabs,
+        activeTab: activeTab,
+        onTabChange: tab => onTabChange(tab),
+        testIDPrefix: "buoy-highlight-filter-tab"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
+  });
+});
+
+// ============================================================================
+// Detail View Header
+// ============================================================================
+
+const DetailViewHeader = exports.DetailViewHeader = /*#__PURE__*/(0, _react.memo)(function DetailViewHeader({
+  onBack,
+  activeTab,
+  onTabChange,
+  hasHistory = true
+}) {
+  const tabs = [{
+    key: "details",
+    label: "Details"
+  }, {
+    key: "history",
+    label: "History",
+    disabled: !hasHistory
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: onBack
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: "",
+      noMargin: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+        tabs: tabs,
+        activeTab: activeTab,
+        onTabChange: tab => onTabChange(tab),
+        testIDPrefix: "buoy-highlight-detail-tab"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
+  });
+});
+
+// ============================================================================
+// Copy Settings View Header
+// ============================================================================
+
+const CopySettingsViewHeader = exports.CopySettingsViewHeader = /*#__PURE__*/(0, _react.memo)(function CopySettingsViewHeader({
+  onBack
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: onBack
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: "Copy Settings",
+      testID: "buoy-highlight-copy-title"
+    })]
+  });
+});
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = _reactNative.StyleSheet.create({
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  activeFilterButton: {
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
+  },
+  freezeButton: {
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
+  }
+});