react-native-inapp-inspector 2.4.1 → 2.4.2

package/dist/commonjs/components/Inspector/ReduxTab.js

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(i,t,a,r){r===void 0&&(r=a);var n=Object.getOwnPropertyDescriptor(t,a);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(i,r,n)}):(function(i,t,a,r){r===void 0&&(r=a),i[r]=t[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(i,t){Object.defineProperty(i,"default",{enumerable:!0,value:t})}):function(i,t){i.default=t}),__importStar=this&&this.__importStar||(function(){var i=function(t){return i=Object.getOwnPropertyNames||function(a){var r=[];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(r[r.length]=n);return r},i(t)};return function(t){if(t&&t.__esModule)return t;var a={};if(t!=null)for(var r=i(t),n=0;n<r.length;n++)r[n]!=="default"&&__createBinding(a,t,r[n]);return __setModuleDefault(a,t),a}})(),__importDefault=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),i18n_1=require("../../i18n"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),HighlightText_1=__importDefault(require("../HighlightText")),helpers_1=require("../../helpers"),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),reduxLogger_1=require("../../customHooks/reduxLogger"),NetworkIcons_1=require("../NetworkIcons"),getOriginBadge=i=>{switch(i){case"saga":return{label:"SAGA",renderIcon:(t,a=9)=><NetworkIcons_1.BoltIcon color={t}size={a}/>,bg:AppColors_1.AppColors.purple100,text:AppColors_1.AppColors.brandPurple,border:AppColors_1.AppColors.purple200};case"thunk":return{label:"THUNK",renderIcon:(t,a=9)=><NetworkIcons_1.AtomIcon color={t}size={a}/>,bg:AppColors_1.AppColors.amber100,text:AppColors_1.AppColors.amber800Warm,border:AppColors_1.AppColors.amber200};case"ui":return{label:"UI",renderIcon:(t,a=9)=><NetworkIcons_1.ScreenIcon color={t}size={a}/>,bg:AppColors_1.AppColors.sky100,text:AppColors_1.AppColors.sky600,border:AppColors_1.AppColors.sky400};case"listener":return{label:"LISTENER",renderIcon:(t,a=9)=><NetworkIcons_1.ListenerIcon color={t}size={a}/>,bg:AppColors_1.AppColors.teal100,text:AppColors_1.AppColors.teal700,border:AppColors_1.AppColors.teal400};default:return{label:"DIRECT",renderIcon:(t,a=9)=><NetworkIcons_1.BoltIcon color={t}size={a}/>,bg:AppColors_1.AppColors.slate100,text:AppColors_1.AppColors.slate700,border:AppColors_1.AppColors.slate200}}},DEFAULT_PAGE_SIZE=50,LOAD_MORE_STEP=10,ReduxTab=react_1.default.memo(()=>{const{t:i}=(0,i18n_1.useTranslation)(),{reduxState:t,reduxLastActionMap:a,reduxSearch:r,setReduxSearch:n,setSelectedReduxSlice:b}=(0,InspectorContext_1.useInspector)(),x=(0,react_1.useRef)(null),[T,m]=(0,react_1.useState)(DEFAULT_PAGE_SIZE),[u,I]=(0,react_1.useState)("latest");react_1.default.useEffect(()=>{m(DEFAULT_PAGE_SIZE),x.current?.scrollToOffset({offset:0,animated:!1})},[r,u]);const R=(0,react_1.useMemo)(()=>(0,helpers_1.getSize)(t),[t]),v=(0,react_1.useMemo)(()=>(0,reduxLogger_1.getActionHistory)(),[a]),w=(0,react_1.useMemo)(()=>!t||typeof t!="object"?[]:Object.keys(t).map(l=>{const o=t[l],p=Array.isArray(o),A=o&&typeof o=="object";let y="Primitive",d=0;p?(d=o.length,y=`Array [${d}]`):A?(d=Object.keys(o).length,y=`Object {${d}}`):typeof o<"u"&&(d=1,y=typeof o);let f="live",c;A&&(o.loading===!0||o.isLoading===!0||o.status==="loading"||o.status==="pending"?(f="loading",c="Loading"):o.error||o.hasError||o.status==="error"||o.status==="failed"?(f="error",c=typeof o.error=="string"?o.error:"Error"):d===0&&(f="empty",c="Empty"));const s=a[l],B=s?.updatedAt||0,F=v.filter(C=>!C.affectedSlices||C.affectedSlices.length===0?!0:C.affectedSlices.includes(l)).length;let S;if(s){let C;if(s.payload!==void 0&&s.payload!==null)try{if(typeof s.payload=="object"){const V=Object.keys(s.payload);C=`{ ${V.slice(0,3).join(", ")}${V.length>3?"...":""} }`}else C=String(s.payload)}catch{}S={type:s.type,timestamp:s.timestamp,updatedAt:s.updatedAt,payloadPreview:C,originType:s.originType,callerFile:s.callerFile,callerLine:s.callerLine,callerCol:s.callerCol}}return{id:`slice-${l}`,name:l,keysCount:d,sizeStr:(0,helpers_1.getSize)(o),typeLabel:y,status:f,statusMessage:c,timelineCount:F,lastAction:S,updatedAt:B}}),[t,a,v]),g=(0,react_1.useMemo)(()=>{let e=w;if(r&&r.trim().length>0){const l=r.trim().toLowerCase().split(/\s+/).filter(Boolean);e=e.filter(o=>{const p=t?t[o.name]:null,A=[o.name||"",o.lastAction?.type||"",o.lastAction?.payloadPreview||"",o.lastAction?.originType||"",o.status||"",o.statusMessage||"",p?typeof p=="string"?p:JSON.stringify(p):""].join(" ").toLowerCase();return l.every(y=>A.includes(y))})}return[...e].sort((l,o)=>u==="latest"&&o.updatedAt!==l.updatedAt?o.updatedAt-l.updatedAt:l.name.localeCompare(o.name))},[w,r,u,t]),_=(0,react_1.useMemo)(()=>g.slice(0,T),[g,T]),h=(0,react_1.useMemo)(()=>{const e=Object.values(a);return e.length===0?null:e.reduce((l,o)=>l?(o.updatedAt||0)>(l.updatedAt||0)?o:l:o,null)},[a]),z=(0,react_1.useCallback)(({item:e,index:l})=>{const o=e.updatedAt>0&&Date.now()-e.updatedAt<5e3,p=e.status==="error"?AppColors_1.AppColors.errorColor:e.status==="loading"?AppColors_1.AppColors.warningIconGold:e.status==="empty"?AppColors_1.AppColors.grayTextWeak:AppColors_1.AppColors.greenColor,A=e.status==="error"?AppColors_1.AppColors.red100:e.status==="loading"?AppColors_1.AppColors.amber100:e.status==="empty"?AppColors_1.AppColors.grayBackground:AppColors_1.AppColors.emeraldBg,y=e.status==="error"?AppColors_1.AppColors.errorBorder:e.status==="loading"?AppColors_1.AppColors.amber200:e.status==="empty"?AppColors_1.AppColors.dividerColor:AppColors_1.AppColors.emeraldBorder,d=e.status==="error"?AppColors_1.AppColors.red600:e.status==="loading"?AppColors_1.AppColors.amber800Warm:e.status==="empty"?AppColors_1.AppColors.grayTextWeak:AppColors_1.AppColors.emerald700,f=e.lastAction?.callerFile?(0,helpers_1.getCleanCallerDisplay)(e.lastAction.callerFile):null;return<AnimatedEntrance_1.default index={l}distance={8}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(i,t,a,r){r===void 0&&(r=a);var n=Object.getOwnPropertyDescriptor(t,a);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(i,r,n)}):(function(i,t,a,r){r===void 0&&(r=a),i[r]=t[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(i,t){Object.defineProperty(i,"default",{enumerable:!0,value:t})}):function(i,t){i.default=t}),__importStar=this&&this.__importStar||(function(){var i=function(t){return i=Object.getOwnPropertyNames||function(a){var r=[];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(r[r.length]=n);return r},i(t)};return function(t){if(t&&t.__esModule)return t;var a={};if(t!=null)for(var r=i(t),n=0;n<r.length;n++)r[n]!=="default"&&__createBinding(a,t,r[n]);return __setModuleDefault(a,t),a}})(),__importDefault=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),i18n_1=require("../../i18n"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),HighlightText_1=__importDefault(require("../HighlightText")),helpers_1=require("../../helpers"),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),reduxLogger_1=require("../../customHooks/reduxLogger"),NetworkIcons_1=require("../NetworkIcons"),getOriginBadge=i=>{switch(i){case"saga":return{label:"SAGA",renderIcon:(t,a=9)=><NetworkIcons_1.BoltIcon color={t}size={a}/>,bg:AppColors_1.AppColors.purple100,text:AppColors_1.AppColors.brandPurple,border:AppColors_1.AppColors.purple200};case"thunk":return{label:"THUNK",renderIcon:(t,a=9)=><NetworkIcons_1.AtomIcon color={t}size={a}/>,bg:AppColors_1.AppColors.amber100,text:AppColors_1.AppColors.amber800Warm,border:AppColors_1.AppColors.amber200};case"ui":return{label:"UI",renderIcon:(t,a=9)=><NetworkIcons_1.ScreenIcon color={t}size={a}/>,bg:AppColors_1.AppColors.sky100,text:AppColors_1.AppColors.sky600,border:AppColors_1.AppColors.sky400};case"listener":return{label:"LISTENER",renderIcon:(t,a=9)=><NetworkIcons_1.ListenerIcon color={t}size={a}/>,bg:AppColors_1.AppColors.teal100,text:AppColors_1.AppColors.teal700,border:AppColors_1.AppColors.teal400};default:return{label:"DIRECT",renderIcon:(t,a=9)=><NetworkIcons_1.BoltIcon color={t}size={a}/>,bg:AppColors_1.AppColors.slate100,text:AppColors_1.AppColors.slate700,border:AppColors_1.AppColors.slate200}}},DEFAULT_PAGE_SIZE=50,LOAD_MORE_STEP=10,ReduxTab=react_1.default.memo(()=>{const{t:i}=(0,i18n_1.useTranslation)(),{reduxState:t,reduxLastActionMap:a,reduxSearch:r,setReduxSearch:n,setSelectedReduxSlice:b}=(0,InspectorContext_1.useInspector)(),x=(0,react_1.useRef)(null),[T,m]=(0,react_1.useState)(DEFAULT_PAGE_SIZE),[u,I]=(0,react_1.useState)("latest");react_1.default.useEffect(()=>{m(DEFAULT_PAGE_SIZE),x.current?.scrollToOffset({offset:0,animated:!1})},[r,u]);const R=(0,react_1.useMemo)(()=>(0,helpers_1.getSize)(t),[t]),v=(0,react_1.useMemo)(()=>(0,reduxLogger_1.getActionHistory)(),[a]),A=(0,react_1.useMemo)(()=>!t||typeof t!="object"?[]:Object.keys(t).map(l=>{const o=t[l],p=Array.isArray(o),w=o&&typeof o=="object";let y="Primitive",d=0;p?(d=o.length,y=`Array [${d}]`):w?(d=Object.keys(o).length,y=`Object {${d}}`):typeof o<"u"&&(d=1,y=typeof o);let f="live",c;w&&(o.loading===!0||o.isLoading===!0||o.status==="loading"||o.status==="pending"?(f="loading",c="Loading"):o.error||o.hasError||o.status==="error"||o.status==="failed"?(f="error",c=typeof o.error=="string"?o.error:"Error"):d===0&&(f="empty",c="Empty"));const s=a[l],B=s?.updatedAt||0,F=v.filter(C=>!C.affectedSlices||C.affectedSlices.length===0?!0:C.affectedSlices.includes(l)).length;let S;if(s){let C;if(s.payload!==void 0&&s.payload!==null)try{if(typeof s.payload=="object"){const V=Object.keys(s.payload);C=`{ ${V.slice(0,3).join(", ")}${V.length>3?"...":""} }`}else C=String(s.payload)}catch{}S={type:s.type,timestamp:s.timestamp,updatedAt:s.updatedAt,payloadPreview:C,originType:s.originType,callerFile:s.callerFile,callerLine:s.callerLine,callerCol:s.callerCol}}return{id:`slice-${l}`,name:l,keysCount:d,sizeStr:(0,helpers_1.getSize)(o),typeLabel:y,status:f,statusMessage:c,timelineCount:F,lastAction:S,updatedAt:B}}),[t,a,v]),g=(0,react_1.useMemo)(()=>{let e=A;if(r&&r.trim().length>0){const l=r.trim().toLowerCase().split(/\s+/).filter(Boolean);e=e.filter(o=>{const p=t?t[o.name]:null,w=[o.name||"",o.lastAction?.type||"",o.lastAction?.payloadPreview||"",o.lastAction?.originType||"",o.status||"",o.statusMessage||"",p?typeof p=="string"?p:JSON.stringify(p):""].join(" ").toLowerCase();return l.every(y=>w.includes(y))})}return[...e].sort((l,o)=>u==="latest"&&o.updatedAt!==l.updatedAt?o.updatedAt-l.updatedAt:l.name.localeCompare(o.name))},[A,r,u,t]),_=(0,react_1.useMemo)(()=>g.slice(0,T),[g,T]),h=(0,react_1.useMemo)(()=>{const e=Object.values(a);return e.length===0?null:e.reduce((l,o)=>l?(o.updatedAt||0)>(l.updatedAt||0)?o:l:o,null)},[a]),z=(0,react_1.useCallback)(({item:e,index:l})=>{const o=e.updatedAt>0&&Date.now()-e.updatedAt<5e3,p=e.status==="error"?AppColors_1.AppColors.errorColor:e.status==="loading"?AppColors_1.AppColors.warningIconGold:e.status==="empty"?AppColors_1.AppColors.grayTextWeak:AppColors_1.AppColors.greenColor,w=e.status==="error"?AppColors_1.AppColors.red100:e.status==="loading"?AppColors_1.AppColors.amber100:e.status==="empty"?AppColors_1.AppColors.grayBackground:AppColors_1.AppColors.emeraldBg,y=e.status==="error"?AppColors_1.AppColors.errorBorder:e.status==="loading"?AppColors_1.AppColors.amber200:e.status==="empty"?AppColors_1.AppColors.dividerColor:AppColors_1.AppColors.emeraldBorder,d=e.status==="error"?AppColors_1.AppColors.red600:e.status==="loading"?AppColors_1.AppColors.amber800Warm:e.status==="empty"?AppColors_1.AppColors.grayTextWeak:AppColors_1.AppColors.emerald700,f=e.lastAction?.callerFile?(0,helpers_1.getCleanCallerDisplay)(e.lastAction.callerFile):null;return<AnimatedEntrance_1.default index={l}distance={8}>
           <react_native_1.View style={reduxTabStyles.cardContainer}>
             <TouchableScale_1.default onPress={()=>{b(e.name)}}style={[reduxTabStyles.card,{borderLeftWidth:3.5,borderLeftColor:p,backgroundColor:e.status==="error"?AppColors_1.AppColors.errorCardBg:AppColors_1.AppColors.white},o&&reduxTabStyles.cardRecentlyUpdated]}>
               <react_native_1.View style={reduxTabStyles.cardBody}>
@@ -24,7 +24,7 @@
                   </react_native_1.View>
 
                   <react_native_1.View style={reduxTabStyles.cardHeaderRight}>
-                    <react_native_1.View style={[reduxTabStyles.statusPill,{backgroundColor:A,borderColor:y}]}>
+                    <react_native_1.View style={[reduxTabStyles.statusPill,{backgroundColor:w,borderColor:y}]}>
                       {e.status==="loading"?<NetworkIcons_1.LoadingSpinnerIcon color={AppColors_1.AppColors.amber800Warm}size={10}/>:e.status==="error"?<NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.red600}size={10}/>:e.status==="empty"?null:<react_native_1.View style={reduxTabStyles.liveDot}/>}
                       <react_native_1.Text style={[reduxTabStyles.statusPillText,{color:d}]}>
                         {e.status==="loading"?"Loading":e.status==="error"?e.statusMessage||"Error":e.status==="empty"?"Empty":"Live"}
@@ -96,7 +96,7 @@
       <react_native_1.View style={reduxTabStyles.overviewCard}>
         <react_native_1.View style={reduxTabStyles.statCol}>
           <react_native_1.Text style={reduxTabStyles.statHeading}>{i("redux.activeSlices","ACTIVE SLICES")}</react_native_1.Text>
-          <react_native_1.Text style={reduxTabStyles.statBigVal}>{w.length}</react_native_1.Text>
+          <react_native_1.Text style={reduxTabStyles.statBigVal}>{A.length}</react_native_1.Text>
         </react_native_1.View>
         <react_native_1.View style={reduxTabStyles.statDivider}/>
         <react_native_1.View style={reduxTabStyles.statCol}>
@@ -149,7 +149,7 @@
 
         <react_native_1.View style={reduxTabStyles.headerSubRow}>
           <react_native_1.Text style={reduxTabStyles.resultCount}>
-            Showing {g.length} of {w.length} state slices
+            Showing {g.length} of {A.length} state slices
           </react_native_1.Text>
           <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
             {u==="latest"?<NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple}size={11}/>:<NetworkIcons_1.TextAaIcon color={AppColors_1.AppColors.brandPurple}size={11}/>}
@@ -161,7 +161,7 @@
       </react_native_1.View>
 
       
-      <react_native_1.FlatList ref={x}data={_}keyExtractor={e=>e.id}renderItem={z}getItemLayout={(e,l)=>({length:126,offset:126*l,index:l})}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default isSearch={r.trim().length>0}searchQuery={r}onClearSearch={()=>n("")}customTitle={r.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={r.trim().length>0?`No Redux slices match "${r}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={g.length>0?<EndOfListFooter_1.default count={_.length}totalCount={g.length}label="slices"loadMoreStep={LOAD_MORE_STEP}hasMore={_.length<g.length}onLoadMore={()=>m(e=>e+LOAD_MORE_STEP)}/>:null}contentContainerStyle={[reduxTabStyles.listContent,g.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+      <react_native_1.FlatList ref={x}data={_}keyExtractor={e=>e.id}renderItem={z}getItemLayout={(e,l)=>({length:126,offset:126*l,index:l})}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}ListEmptyComponent={<EmptyState_1.default isSearch={r.trim().length>0}searchQuery={r}onClearSearch={()=>n("")}customTitle={r.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={r.trim().length>0?`No Redux slices match "${r}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={g.length>0?<EndOfListFooter_1.default count={_.length}totalCount={g.length}label="slices"loadMoreStep={LOAD_MORE_STEP}hasMore={_.length<g.length}onLoadMore={()=>m(e=>e+LOAD_MORE_STEP)}/>:null}contentContainerStyle={[reduxTabStyles.listContent,g.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
     </react_native_1.View>:<react_native_1.View style={styles_1.default.emptyContainer}>
         <react_native_1.View style={styles_1.default.emptyIconWrap}>
           <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple}size={32}/>