@buoy-gg/highlight-updates 7.0.41 → 7.0.42

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

@@ -1,288 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import React, { memo } from "react";
-import { TouchableOpacity, StyleSheet } from "react-native";
-import { Trash2, Search, Filter, Pause, Copy, ModalHeader, TabSelector, night, PowerToggleButton } from "@buoy-gg/shared-ui";
-import { StatsDisplay } from "./StatsDisplay";
-
-// ============================================================================
-// Search Section - isolated component for search UI
-// ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SearchSectionInner = /*#__PURE__*/memo(function SearchSection({
-  isActive,
-  searchText,
-  onSearchChange,
-  onSearchClose
-}) {
-  if (!isActive) return null;
-  return /*#__PURE__*/_jsx(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"
-  });
-});
-export const SearchSection = SearchSectionInner;
-
-// ============================================================================
-// Header Actions - isolated component for action buttons
-// ============================================================================
-
-const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
-  onSearchToggle,
-  onFilterToggle,
-  onToggleTracking,
-  onToggleFreeze,
-  onClear,
-  onOpenCopySettings,
-  isTracking,
-  isFrozen,
-  activeFilterCount,
-  hasRenders
-}) {
-  return /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      testID: "buoy-highlight-search",
-      accessibilityRole: "button",
-      accessibilityLabel: "Search renders",
-      onPress: onSearchToggle,
-      style: styles.headerActionButton,
-      children: /*#__PURE__*/_jsx(Search, {
-        size: 14,
-        color: night.color.textSecondary
-      })
-    }), /*#__PURE__*/_jsx(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__*/_jsx(Filter, {
-        size: 14,
-        color: activeFilterCount > 0 ? night.color.accent : night.color.textTertiary
-      })
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      testID: "buoy-highlight-copy",
-      accessibilityRole: "button",
-      onPress: onOpenCopySettings,
-      style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
-      disabled: !hasRenders,
-      accessibilityLabel: "Open copy settings",
-      children: /*#__PURE__*/_jsx(Copy, {
-        size: 14,
-        color: hasRenders ? night.color.textSecondary : night.color.textTertiary
-      })
-    }), /*#__PURE__*/_jsx(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__*/_jsx(Pause, {
-        size: 14,
-        color: !isTracking ? night.color.textTertiary : isFrozen ? night.color.accent : night.color.textTertiary
-      })
-    }), /*#__PURE__*/_jsx(PowerToggleButton, {
-      testID: "buoy-highlight-power",
-      isEnabled: isTracking,
-      onToggle: onToggleTracking,
-      accessibilityLabel: "Toggle render tracking"
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      testID: "buoy-highlight-clear",
-      accessibilityRole: "button",
-      accessibilityLabel: "Clear tracked renders",
-      onPress: onClear,
-      style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
-      disabled: !hasRenders,
-      children: /*#__PURE__*/_jsx(Trash2, {
-        size: 14,
-        color: hasRenders ? night.color.textTertiary : night.color.textTertiary
-      })
-    })]
-  });
-});
-export const HeaderActions = HeaderActionsInner;
-
-// ============================================================================
-// Main List Header - complete header for main list view
-// ============================================================================
-
-export const MainListHeader = /*#__PURE__*/memo(function MainListHeader({
-  onBack,
-  isSearchActive,
-  searchText,
-  onSearchChange,
-  onSearchToggle,
-  onSearchClose,
-  onFilterToggle,
-  onToggleTracking,
-  onToggleFreeze,
-  onClear,
-  onOpenCopySettings,
-  isTracking,
-  isFrozen,
-  activeFilterCount,
-  hasRenders,
-  searchInputRef
-}) {
-  return /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      children: isSearchActive ? /*#__PURE__*/_jsx(SearchSection, {
-        isActive: isSearchActive,
-        searchText: searchText,
-        onSearchChange: onSearchChange,
-        onSearchClose: onSearchClose,
-        searchInputRef: searchInputRef
-      }) : /*#__PURE__*/_jsx(StatsDisplay, {})
-    }), /*#__PURE__*/_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
-// ============================================================================
-
-export const FilterViewHeader = /*#__PURE__*/memo(function FilterViewHeader({
-  onBack,
-  activeTab,
-  onTabChange,
-  activeFilterCount = 0
-}) {
-  const tabs = [{
-    key: "filters",
-    label: `Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}`
-  }, {
-    key: "settings",
-    label: "Settings"
-  }];
-  return /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/_jsx(TabSelector, {
-        tabs: tabs,
-        activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab),
-        testIDPrefix: "buoy-highlight-filter-tab"
-      })
-    }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
-  });
-});
-
-// ============================================================================
-// Detail View Header
-// ============================================================================
-
-export const DetailViewHeader = /*#__PURE__*/memo(function DetailViewHeader({
-  onBack,
-  activeTab,
-  onTabChange,
-  hasHistory = true
-}) {
-  const tabs = [{
-    key: "details",
-    label: "Details"
-  }, {
-    key: "history",
-    label: "History",
-    disabled: !hasHistory
-  }];
-  return /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/_jsx(TabSelector, {
-        tabs: tabs,
-        activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab),
-        testIDPrefix: "buoy-highlight-detail-tab"
-      })
-    }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
-  });
-});
-
-// ============================================================================
-// Copy Settings View Header
-// ============================================================================
-
-export const CopySettingsViewHeader = /*#__PURE__*/memo(function CopySettingsViewHeader({
-  onBack
-}) {
-  return /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "Copy Settings",
-      testID: "buoy-highlight-copy-title"
-    })]
-  });
-});
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonDisabled: {
-    opacity: 0.55
-  },
-  activeFilterButton: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  freezeButton: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  }
-});
+"use strict";import V,{memo as g}from"react";import{TouchableOpacity as f,StyleSheet as m}from"react-native";import{Trash2 as A,Search as H,Filter as k,Pause as z,Copy as v,ModalHeader as t,TabSelector as S,night as o,PowerToggleButton as w}from"@buoy-gg/shared-ui";import{StatsDisplay as L}from"./StatsDisplay";import{jsx as e,jsxs as p}from"react/jsx-runtime";const P=g(function u({isActive:r,searchText:n,onSearchChange:c,onSearchClose:i}){if(!r)return null;return e(t.Search,{value:n,onChangeText:c,onCancel:()=>{c("");i()},onDismiss:i,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"})});export const SearchSection=P;const F=g(function u({onSearchToggle:r,onFilterToggle:n,onToggleTracking:c,onToggleFreeze:i,onClear:s,onOpenCopySettings:h,isTracking:b,isFrozen:y,activeFilterCount:d,hasRenders:l}){return p(t.Actions,{children:[e(f,{testID:"buoy-highlight-search",accessibilityRole:"button",accessibilityLabel:"Search renders",onPress:r,style:a.headerActionButton,children:e(H,{size:14,color:o.color.textSecondary})}),e(f,{testID:"buoy-highlight-filters",accessibilityRole:"button",accessibilityLabel:d>0?`Filters, ${d} active`:"Filters",onPress:n,style:[a.headerActionButton,d>0&&a.activeFilterButton],children:e(k,{size:14,color:d>0?o.color.accent:o.color.textTertiary})}),e(f,{testID:"buoy-highlight-copy",accessibilityRole:"button",onPress:h,style:[a.headerActionButton,!l&&a.headerActionButtonDisabled],disabled:!l,accessibilityLabel:"Open copy settings",children:e(v,{size:14,color:l?o.color.textSecondary:o.color.textTertiary})}),e(f,{testID:"buoy-highlight-freeze",accessibilityRole:"button",accessibilityLabel:y?"Unfreeze frame":"Freeze frame",onPress:i,style:[a.headerActionButton,y&&a.freezeButton,!b&&a.headerActionButtonDisabled],disabled:!b,children:e(z,{size:14,color:!b?o.color.textTertiary:y?o.color.accent:o.color.textTertiary})}),e(w,{testID:"buoy-highlight-power",isEnabled:b,onToggle:c,accessibilityLabel:"Toggle render tracking"}),e(f,{testID:"buoy-highlight-clear",accessibilityRole:"button",accessibilityLabel:"Clear tracked renders",onPress:s,style:[a.headerActionButton,!l&&a.headerActionButtonDisabled],disabled:!l,children:e(A,{size:14,color:l?o.color.textTertiary:o.color.textTertiary})})]})});export const HeaderActions=F;export const MainListHeader=g(function u({onBack:r,isSearchActive:n,searchText:c,onSearchChange:i,onSearchToggle:s,onSearchClose:h,onFilterToggle:b,onToggleTracking:y,onToggleFreeze:d,onClear:l,onOpenCopySettings:D,isTracking:T,isFrozen:x,activeFilterCount:B,hasRenders:C,searchInputRef:I}){return p(t,{children:[r&&e(t.Navigation,{onBack:r}),e(t.Content,{title:"",children:n?e(SearchSection,{isActive:n,searchText:c,onSearchChange:i,onSearchClose:h,searchInputRef:I}):e(L,{})}),e(HeaderActions,{onSearchToggle:s,onFilterToggle:b,onToggleTracking:y,onToggleFreeze:d,onClear:l,onOpenCopySettings:D,isTracking:T,isFrozen:x,activeFilterCount:B,hasRenders:C})]})});export const FilterViewHeader=g(function u({onBack:r,activeTab:n,onTabChange:c,activeFilterCount:i=0}){const s=[{key:"filters",label:`Filters${i>0?` (${i})`:""}`},{key:"settings",label:"Settings"}];return p(t,{children:[e(t.Navigation,{onBack:r}),e(t.Content,{title:"",noMargin:true,children:e(S,{tabs:s,activeTab:n,onTabChange:h=>c(h),testIDPrefix:"buoy-highlight-filter-tab"})}),e(t.Actions,{})]})});export const DetailViewHeader=g(function u({onBack:r,activeTab:n,onTabChange:c,hasHistory:i=true}){const s=[{key:"details",label:"Details"},{key:"history",label:"History",disabled:!i}];return p(t,{children:[e(t.Navigation,{onBack:r}),e(t.Content,{title:"",noMargin:true,children:e(S,{tabs:s,activeTab:n,onTabChange:h=>c(h),testIDPrefix:"buoy-highlight-detail-tab"})}),e(t.Actions,{})]})});export const CopySettingsViewHeader=g(function u({onBack:r}){return p(t,{children:[e(t.Navigation,{onBack:r}),e(t.Content,{title:"Copy Settings",testID:"buoy-highlight-copy-title"})]})});const a=m.create({headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:o.color.buttonSurface,borderWidth:1,borderColor:o.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},activeFilterButton:{backgroundColor:o.color.accentSoft,borderColor:o.color.accentBorderStrong},freezeButton:{backgroundColor:o.color.accentSoft,borderColor:o.color.accentBorderStrong}});