@buoy-gg/highlight-updates 2.1.12 → 2.1.14

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

@@ -1,298 +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 { View, TouchableOpacity, TextInput, StyleSheet } from "react-native";
-import { Trash2, Search, Filter, X, Pause, ModalHeader, TabSelector, CopyButton, buoyColors, 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__*/_jsxs(View, {
-    nativeID: "__rn_buoy__search-container",
-    style: styles.headerSearchContainer,
-    children: [/*#__PURE__*/_jsx(Search, {
-      size: 14,
-      color: buoyColors.textSecondary
-    }), /*#__PURE__*/_jsx(TextInput, {
-      style: styles.headerSearchInput,
-      placeholder: "Search testID, nativeID, component...",
-      placeholderTextColor: buoyColors.textMuted,
-      value: searchText,
-      onChangeText: onSearchChange,
-      onSubmitEditing: onSearchClose,
-      onBlur: onSearchClose,
-      accessibilityLabel: "Search renders",
-      autoCapitalize: "none",
-      autoCorrect: false,
-      returnKeyType: "search",
-      autoFocus: true
-    }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: () => {
-        onSearchChange("");
-        onSearchClose();
-      },
-      style: styles.headerSearchClear,
-      children: /*#__PURE__*/_jsx(X, {
-        size: 14,
-        color: buoyColors.textSecondary
-      })
-    }) : null]
-  });
-});
-export const SearchSection = SearchSectionInner;
-
-// ============================================================================
-// Header Actions - isolated component for action buttons
-// ============================================================================
-
-const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
-  onSearchToggle,
-  onFilterToggle,
-  onToggleTracking,
-  onToggleFreeze,
-  onClear,
-  copyData,
-  isTracking,
-  isFrozen,
-  activeFilterCount,
-  hasRenders
-}) {
-  return /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onSearchToggle,
-      style: styles.headerActionButton,
-      children: /*#__PURE__*/_jsx(Search, {
-        size: 14,
-        color: buoyColors.textSecondary
-      })
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onFilterToggle,
-      style: [styles.headerActionButton, activeFilterCount > 0 && styles.activeFilterButton],
-      children: /*#__PURE__*/_jsx(Filter, {
-        size: 14,
-        color: activeFilterCount > 0 ? buoyColors.primary : buoyColors.textMuted
-      })
-    }), /*#__PURE__*/_jsx(CopyButton, {
-      value: copyData,
-      size: 14,
-      buttonStyle: hasRenders ? styles.headerActionButton : styles.headerActionButtonCopyDisabled,
-      disabled: !hasRenders,
-      colors: {
-        idle: hasRenders ? buoyColors.textSecondary : buoyColors.textMuted
-      }
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onToggleFreeze,
-      style: [styles.headerActionButton, isFrozen && styles.freezeButton, !isTracking && styles.headerActionButtonDisabled],
-      disabled: !isTracking,
-      children: /*#__PURE__*/_jsx(Pause, {
-        size: 14,
-        color: !isTracking ? buoyColors.textMuted : isFrozen ? buoyColors.primary : buoyColors.textMuted
-      })
-    }), /*#__PURE__*/_jsx(PowerToggleButton, {
-      isEnabled: isTracking,
-      onToggle: onToggleTracking,
-      accessibilityLabel: "Toggle render tracking"
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: onClear,
-      style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
-      disabled: !hasRenders,
-      children: /*#__PURE__*/_jsx(Trash2, {
-        size: 14,
-        color: hasRenders ? buoyColors.textMuted : buoyColors.textMuted
-      })
-    })]
-  });
-});
-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,
-  copyData,
-  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,
-      copyData: copyData,
-      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)
-      })
-    }), /*#__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)
-      })
-    }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
-  });
-});
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: buoyColors.input,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: buoyColors.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: buoyColors.hover,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonDisabled: {
-    opacity: 0.55
-  },
-  headerActionButtonCopyDisabled: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: buoyColors.hover,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    alignItems: "center",
-    justifyContent: "center",
-    opacity: 0.55
-  },
-  activeFilterButton: {
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40"
-  },
-  freezeButton: {
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40"
-  }
-});
+"use strict";import React,{memo}from"react";import{View,TouchableOpacity,TextInput,StyleSheet}from"react-native";import{Trash2,Search,Filter,X,Pause,ModalHeader,TabSelector,CopyButton,buoyColors,PowerToggleButton}from"@buoy-gg/shared-ui";import{StatsDisplay}from"./StatsDisplay";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SearchSectionInner=memo(function({isActive:e,searchText:o,onSearchChange:t,onSearchClose:r}){return e?_jsxs(View,{nativeID:"__rn_buoy__search-container",style:styles.headerSearchContainer,children:[_jsx(Search,{size:14,color:buoyColors.textSecondary}),_jsx(TextInput,{style:styles.headerSearchInput,placeholder:"Search testID, nativeID, component...",placeholderTextColor:buoyColors.textMuted,value:o,onChangeText:t,onSubmitEditing:r,onBlur:r,accessibilityLabel:"Search renders",autoCapitalize:"none",autoCorrect:!1,returnKeyType:"search",autoFocus:!0}),o.length>0?_jsx(TouchableOpacity,{onPress:()=>{t(""),r()},style:styles.headerSearchClear,children:_jsx(X,{size:14,color:buoyColors.textSecondary})}):null]}):null});export const SearchSection=SearchSectionInner;const HeaderActionsInner=memo(function({onSearchToggle:e,onFilterToggle:o,onToggleTracking:t,onToggleFreeze:r,onClear:a,copyData:n,isTracking:s,isFrozen:i,activeFilterCount:l,hasRenders:c}){return _jsxs(ModalHeader.Actions,{children:[_jsx(TouchableOpacity,{onPress:e,style:styles.headerActionButton,children:_jsx(Search,{size:14,color:buoyColors.textSecondary})}),_jsx(TouchableOpacity,{onPress:o,style:[styles.headerActionButton,l>0&&styles.activeFilterButton],children:_jsx(Filter,{size:14,color:l>0?buoyColors.primary:buoyColors.textMuted})}),_jsx(CopyButton,{value:n,size:14,buttonStyle:c?styles.headerActionButton:styles.headerActionButtonCopyDisabled,disabled:!c,colors:{idle:c?buoyColors.textSecondary:buoyColors.textMuted}}),_jsx(TouchableOpacity,{onPress:r,style:[styles.headerActionButton,i&&styles.freezeButton,!s&&styles.headerActionButtonDisabled],disabled:!s,children:_jsx(Pause,{size:14,color:s&&i?buoyColors.primary:buoyColors.textMuted})}),_jsx(PowerToggleButton,{isEnabled:s,onToggle:t,accessibilityLabel:"Toggle render tracking"}),_jsx(TouchableOpacity,{onPress:a,style:[styles.headerActionButton,!c&&styles.headerActionButtonDisabled],disabled:!c,children:_jsx(Trash2,{size:14,color:buoyColors.textMuted})})]})});export const HeaderActions=HeaderActionsInner;export const MainListHeader=memo(function({onBack:e,isSearchActive:o,searchText:t,onSearchChange:r,onSearchToggle:a,onSearchClose:n,onFilterToggle:s,onToggleTracking:i,onToggleFreeze:l,onClear:c,copyData:d,isTracking:u,isFrozen:h,activeFilterCount:y,hasRenders:b,searchInputRef:g}){return _jsxs(ModalHeader,{children:[e&&_jsx(ModalHeader.Navigation,{onBack:e}),_jsx(ModalHeader.Content,{title:"",children:o?_jsx(SearchSection,{isActive:o,searchText:t,onSearchChange:r,onSearchClose:n,searchInputRef:g}):_jsx(StatsDisplay,{})}),_jsx(HeaderActions,{onSearchToggle:a,onFilterToggle:s,onToggleTracking:i,onToggleFreeze:l,onClear:c,copyData:d,isTracking:u,isFrozen:h,activeFilterCount:y,hasRenders:b})]})});export const FilterViewHeader=memo(function({onBack:e,activeTab:o,onTabChange:t,activeFilterCount:r=0}){const a=[{key:"filters",label:"Filters"+(r>0?` (${r})`:"")},{key:"settings",label:"Settings"}];return _jsxs(ModalHeader,{children:[_jsx(ModalHeader.Navigation,{onBack:e}),_jsx(ModalHeader.Content,{title:"",noMargin:!0,children:_jsx(TabSelector,{tabs:a,activeTab:o,onTabChange:e=>t(e)})}),_jsx(ModalHeader.Actions,{})]})});export const DetailViewHeader=memo(function({onBack:e,activeTab:o,onTabChange:t,hasHistory:r=!0}){const a=[{key:"details",label:"Details"},{key:"history",label:"History",disabled:!r}];return _jsxs(ModalHeader,{children:[_jsx(ModalHeader.Navigation,{onBack:e}),_jsx(ModalHeader.Content,{title:"",noMargin:!0,children:_jsx(TabSelector,{tabs:a,activeTab:o,onTabChange:e=>t(e)})}),_jsx(ModalHeader.Actions,{})]})});const styles=StyleSheet.create({headerSearchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:buoyColors.input,borderRadius:10,borderWidth:1,borderColor:buoyColors.border,paddingHorizontal:12,paddingVertical:5},headerSearchInput:{flex:1,color:buoyColors.text,fontSize:13,marginLeft:6,paddingVertical:2},headerSearchClear:{marginLeft:6,padding:4},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:buoyColors.hover,borderWidth:1,borderColor:buoyColors.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonCopyDisabled:{width:32,height:32,borderRadius:8,backgroundColor:buoyColors.hover,borderWidth:1,borderColor:buoyColors.border,alignItems:"center",justifyContent:"center",opacity:.55},activeFilterButton:{backgroundColor:buoyColors.primary+"15",borderColor:buoyColors.primary+"40"},freezeButton:{backgroundColor:buoyColors.primary+"15",borderColor:buoyColors.primary+"40"}});