react-native-inapp-inspector 1.0.15 → 1.0.17

package/dist/commonjs/components/ReduxTreeView.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReduxActionTimeline = exports.ReduxTreeView = void 0;
 const react_1 = __importStar(require("react"));
@@ -40,6 +43,7 @@ const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const NetworkIcons_1 = require("./NetworkIcons");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
+const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
 // Custom icons
 const DatabaseIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M12 2C6.5 2 2 4.2 2 7v10c0 2.8 4.5 5 10 5s10-2.2 10-5V7c0-2.8-4.5-5-10-5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -52,6 +56,26 @@ const BoltIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) =>
 const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
+const animateTreeLayout = () => {
+    react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+};
+const AnimatedChevron = ({ color, expanded, size, style, }) => {
+    const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(expanded ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(progress, {
+            toValue: expanded ? 1 : 0,
+            duration: 180,
+            useNativeDriver: true,
+        }).start();
+    }, [expanded, progress]);
+    const rotate = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '90deg'],
+    });
+    return (<react_native_1.Animated.View style={[style, { transform: [{ rotate }] }]}>
+      <NetworkIcons_1.ChevronIcon color={color} size={size}/>
+    </react_native_1.Animated.View>);
+};
 const ReduxValueNode = ({ name, value, level, search }) => {
     const [expanded, setExpanded] = (0, react_1.useState)(level < 1);
     const isObject = typeof value === 'object' && value !== null;
@@ -75,7 +99,11 @@ const ReduxValueNode = ({ name, value, level, search }) => {
         return null;
     }
     if (!isObject) {
-        const valStr = value === null ? 'null' : value === undefined ? 'undefined' : String(value);
+        const valStr = value === null
+            ? 'null'
+            : value === undefined
+                ? 'undefined'
+                : String(value);
         // Pick different colors for primitives
         let valColor = '#0D9488'; // String
         if (value === null || value === undefined) {
@@ -99,13 +127,16 @@ const ReduxValueNode = ({ name, value, level, search }) => {
       </react_native_1.View>);
     }
     const keys = Object.keys(value);
-    const summaryText = isArray ? `Array [${keys.length}]` : `Object {${keys.length}}`;
+    const summaryText = isArray
+        ? `Array [${keys.length}]`
+        : `Object {${keys.length}}`;
     return (<react_native_1.View style={reduxValueStyles.treeNodeBlock}>
-      <react_native_1.Pressable onPress={() => setExpanded(!expanded)} style={reduxValueStyles.treeRow}>
+      <react_native_1.Pressable onPress={() => {
+            animateTreeLayout();
+            setExpanded(!expanded);
+        }} style={reduxValueStyles.treeRow}>
         <react_native_1.View style={reduxValueStyles.treeLeafConnector}/>
-        <react_native_1.View style={[reduxValueStyles.chevronWrap, { transform: [{ rotate: expanded ? '90deg' : '0deg' }] }]}>
-          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
-        </react_native_1.View>
+        <AnimatedChevron color={AppColors_1.AppColors.grayTextWeak} expanded={expanded} size={10} style={reduxValueStyles.chevronWrap}/>
         <react_native_1.Text style={reduxValueStyles.keyText} selectable={true}>
           {nameStr}
           <react_native_1.Text style={reduxValueStyles.colonText}>: </react_native_1.Text>
@@ -120,13 +151,24 @@ const ReduxValueNode = ({ name, value, level, search }) => {
 const ReduxTreeView = ({ state, lastActionMap, search, }) => {
     const [storeExpanded, setStoreExpanded] = (0, react_1.useState)(true);
     const [reducerExpanded, setReducerExpanded] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'android') {
+            react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
     if (!state || typeof state !== 'object') {
-        return (<react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 12, color: AppColors_1.AppColors.grayTextWeak, padding: 12 }}>
+        return (<react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 12,
+                color: AppColors_1.AppColors.grayTextWeak,
+                padding: 12,
+            }}>
         No state object to display.
       </react_native_1.Text>);
     }
     const reducers = Object.keys(state);
     const toggleReducer = (key) => {
+        animateTreeLayout();
         setReducerExpanded(prev => ({
             ...prev,
             [key]: !prev[key],
@@ -134,10 +176,11 @@ const ReduxTreeView = ({ state, lastActionMap, search, }) => {
     };
     return (<react_native_1.View style={styles.container}>
       {/* Root Node: Store */}
-      <react_native_1.Pressable onPress={() => setStoreExpanded(!storeExpanded)} style={styles.storeHeader}>
-        <react_native_1.View style={[styles.chevronWrap, { transform: [{ rotate: storeExpanded ? '90deg' : '0deg' }] }]}>
-          <NetworkIcons_1.ChevronIcon color="#FFFFFF" size={12}/>
-        </react_native_1.View>
+      <react_native_1.Pressable onPress={() => {
+            animateTreeLayout();
+            setStoreExpanded(!storeExpanded);
+        }} style={styles.storeHeader}>
+        <AnimatedChevron color="#FFFFFF" expanded={storeExpanded} size={12} style={styles.chevronWrap}/>
         <react_native_1.Text style={styles.storeTitle}>🏪 Redux Store</react_native_1.Text>
         <react_native_1.View style={styles.badge}>
           <react_native_1.Text style={styles.badgeText}>{reducers.length} Reducers</react_native_1.Text>
@@ -152,14 +195,15 @@ const ReduxTreeView = ({ state, lastActionMap, search, }) => {
                 const lastAction = lastActionMap[reducerKey];
                 return (<react_native_1.View key={reducerKey} style={styles.reducerContainer}>
                 {/* Visual Branch Line for Reducer */}
-                <react_native_1.View style={[styles.reducerVerticalLine, isLastReducer && { bottom: '50%' }]}/>
+                <react_native_1.View style={[
+                        styles.reducerVerticalLine,
+                        isLastReducer && { bottom: '50%' },
+                    ]}/>
 
                 {/* Reducer Header */}
                 <react_native_1.Pressable onPress={() => toggleReducer(reducerKey)} style={styles.reducerHeader}>
                   <react_native_1.View style={styles.reducerHorizontalLine}/>
-                  <react_native_1.View style={[styles.chevronWrap, { transform: [{ rotate: isExpanded ? '90deg' : '0deg' }] }]}>
-                    <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.purple} size={10}/>
-                  </react_native_1.View>
+                  <AnimatedChevron color={AppColors_1.AppColors.purple} expanded={isExpanded} size={10} style={styles.chevronWrap}/>
                   <react_native_1.View style={styles.iconWrap}>
                     <FolderIcon color={AppColors_1.AppColors.purple} size={11}/>
                   </react_native_1.View>
@@ -177,13 +221,24 @@ const ReduxTreeView = ({ state, lastActionMap, search, }) => {
                         <BoltIcon color="#DB2777" size={11}/>
                       </react_native_1.View>
                       <react_native_1.View style={{ flex: 1 }}>
-                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+                        <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            gap: 6,
+                        }}>
                           <react_native_1.Text style={styles.childLabel}>Last Action:</react_native_1.Text>
                           {lastAction ? (<react_native_1.View style={styles.actionTypeBadge}>
-                              <react_native_1.Text style={styles.actionTypeText}>{lastAction.type}</react_native_1.Text>
-                            </react_native_1.View>) : (<react_native_1.Text style={styles.noActionText}>None dispatched</react_native_1.Text>)}
+                              <react_native_1.Text style={styles.actionTypeText}>
+                                {lastAction.type}
+                              </react_native_1.Text>
+                            </react_native_1.View>) : (<react_native_1.Text style={styles.noActionText}>
+                              None dispatched
+                            </react_native_1.Text>)}
                         </react_native_1.View>
-                        {lastAction && (<react_native_1.Text style={styles.timestampText}>Dispatched: {lastAction.timestamp}</react_native_1.Text>)}
+                        {lastAction && (<react_native_1.Text style={styles.timestampText}>
+                            Dispatched: {lastAction.timestamp}
+                          </react_native_1.Text>)}
                         {lastAction && lastAction.payload !== null && (<react_native_1.View style={{ marginTop: 6 }}>
                             <ReduxValueNode name="payload" value={lastAction.payload} level={0} search={search}/>
                           </react_native_1.View>)}
@@ -213,6 +268,7 @@ exports.ReduxTreeView = ReduxTreeView;
 const ReduxActionTimeline = ({ history, onClear, search, }) => {
     const [expandedActionId, setExpandedActionId] = (0, react_1.useState)(null);
     const toggleExpand = (id) => {
+        animateTreeLayout();
         setExpandedActionId(prev => (prev === id ? null : id));
     };
     const filteredHistory = history.filter(action => {
@@ -230,7 +286,9 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
     });
     return (<react_native_1.View style={timelineStyles.container}>
       <react_native_1.View style={timelineStyles.headerRow}>
-        <react_native_1.Text style={timelineStyles.headerTitle}>⚡ Dispatched Actions ({filteredHistory.length})</react_native_1.Text>
+        <react_native_1.Text style={timelineStyles.headerTitle}>
+          ⚡ Dispatched Actions ({filteredHistory.length})
+        </react_native_1.Text>
         {history.length > 0 && (<react_native_1.Pressable onPress={onClear} style={timelineStyles.clearBtn}>
             <react_native_1.Text style={timelineStyles.clearBtnText}>Clear Log</react_native_1.Text>
           </react_native_1.Pressable>)}
@@ -246,9 +304,12 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
           {filteredHistory.map((item, index) => {
                 const isLast = index === filteredHistory.length - 1;
                 const isExpanded = expandedActionId === item.id;
-                return (<react_native_1.View key={item.id} style={timelineStyles.timelineItem}>
+                return (<AnimatedEntrance_1.default key={item.id} index={index} distance={8} style={timelineStyles.timelineItem}>
                 {/* Visual Line */}
-                <react_native_1.View style={[timelineStyles.verticalLine, isLast && { bottom: '50%' }]}/>
+                <react_native_1.View style={[
+                        timelineStyles.verticalLine,
+                        isLast && { bottom: '50%' },
+                    ]}/>
                 <react_native_1.View style={timelineStyles.circleIndicator}>
                   <react_native_1.View style={timelineStyles.circleInner}/>
                 </react_native_1.View>
@@ -256,13 +317,18 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
                 {/* Card */}
                 <react_native_1.Pressable onPress={() => toggleExpand(item.id)} style={[
                         timelineStyles.card,
-                        isExpanded && { borderColor: AppColors_1.AppColors.purple, backgroundColor: AppColors_1.AppColors.purpleShade50 },
+                        isExpanded && {
+                            borderColor: AppColors_1.AppColors.purple,
+                            backgroundColor: AppColors_1.AppColors.purpleShade50,
+                        },
                     ]}>
                   <react_native_1.View style={timelineStyles.cardHeader}>
                     <react_native_1.View style={timelineStyles.typeBadge}>
                       <react_native_1.Text style={timelineStyles.typeText}>{item.type}</react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={timelineStyles.timestamp}>{item.timestamp}</react_native_1.Text>
+                    <react_native_1.Text style={timelineStyles.timestamp}>
+                      {item.timestamp}
+                    </react_native_1.Text>
                   </react_native_1.View>
 
                   {item.affectedSlices.length > 0 && (<react_native_1.View style={timelineStyles.slicesRow}>
@@ -274,12 +340,15 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
 
                   {isExpanded && (<react_native_1.View style={timelineStyles.payloadContainer}>
                       <react_native_1.Text style={timelineStyles.payloadTitle}>Payload</react_native_1.Text>
-                      {item.payload !== null && typeof item.payload === 'object' ? (<ReduxValueNode name="action.payload" value={item.payload} level={0} search={search}/>) : (<react_native_1.Text style={timelineStyles.primitivePayload}>
-                          {item.payload === null ? 'null' : String(item.payload)}
+                      {item.payload !== null &&
+                            typeof item.payload === 'object' ? (<ReduxValueNode name="action.payload" value={item.payload} level={0} search={search}/>) : (<react_native_1.Text style={timelineStyles.primitivePayload}>
+                          {item.payload === null
+                                ? 'null'
+                                : String(item.payload)}
                         </react_native_1.Text>)}
                     </react_native_1.View>)}
                 </react_native_1.Pressable>
-              </react_native_1.View>);
+              </AnimatedEntrance_1.default>);
             })}
         </react_native_1.View>)}
     </react_native_1.View>);

package/dist/commonjs/components/TouchableScale.js

@@ -37,6 +37,22 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
     const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const animatePress = (pressed) => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.spring(scale, {
+                toValue: pressed ? 0.94 : 1,
+                friction: 6,
+                tension: 120,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(opacity, {
+                toValue: pressed ? 0.86 : 1,
+                duration: pressed ? 90 : 140,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    };
     const flattenedStyle = react_native_1.StyleSheet.flatten(style) || {};
     const layoutStyle = {
         flex: flattenedStyle.flex,
@@ -49,8 +65,8 @@ const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
         flexShrink: flattenedStyle.flexShrink,
         gap: flattenedStyle.gap,
     };
-    return (<react_native_1.Pressable disabled={disabled} style={style} onPressIn={() => react_native_1.Animated.spring(scale, { toValue: 0.94, useNativeDriver: true }).start()} onPressOut={() => react_native_1.Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start()} onPress={onPress} hitSlop={hitSlop}>
-      <react_native_1.Animated.View style={[{ transform: [{ scale }] }, layoutStyle]}>
+    return (<react_native_1.Pressable disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} hitSlop={hitSlop}>
+      <react_native_1.Animated.View style={[{ opacity, transform: [{ scale }] }, layoutStyle]}>
         {children}
       </react_native_1.Animated.View>
     </react_native_1.Pressable>);