react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,151 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NpmUpdateToast = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-const InspectorContext_1 = require("./InspectorContext");
-const constants_1 = require("../../constants");
-const NetworkIcons_1 = require("../NetworkIcons");
-const helpers_1 = require("../../helpers");
-const toast_1 = require("../../helpers/toast");
-const AppFonts_1 = require("../../styles/AppFonts");
-const CloseSvg = ({ size = 13, color = '#94A3B8' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
-  </react_native_svg_1.default>);
-const CopySvg = ({ size = 11, color = '#94A3B8' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <react_native_svg_1.Path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <react_native_svg_1.Path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </react_native_svg_1.default>);
-const CheckSvg = ({ size = 11, color = '#10B981' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <react_native_svg_1.Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
-  </react_native_svg_1.default>);
-const ExternalLinkSvg = ({ size = 11, color = '#FFFFFF' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <react_native_svg_1.Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <react_native_svg_1.Path d="M15 3h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <react_native_svg_1.Path d="M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </react_native_svg_1.default>);
-const TOAST_TIMEOUT_MS = 7000;
-const NpmUpdateToast = () => {
-    const { updateAvailable, latestNpmVersion, showUpdateToast } = (0, InspectorContext_1.useInspector)();
-    const [dismissed, setDismissed] = (0, react_1.useState)(false);
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    const [copied, setCopied] = (0, react_1.useState)(false);
-    const translateYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(60)).current;
-    const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
-    const timerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (showUpdateToast && updateAvailable && latestNpmVersion && !dismissed) {
-            setVisible(true);
-            react_native_1.Animated.parallel([
-                react_native_1.Animated.spring(translateYAnim, {
-                    toValue: 0,
-                    friction: 8,
-                    tension: 40,
-                    useNativeDriver: true,
-                }),
-                react_native_1.Animated.timing(opacityAnim, {
-                    toValue: 1,
-                    duration: 250,
-                    useNativeDriver: true,
-                }),
-            ]).start();
-            progressAnim.setValue(1);
-            react_native_1.Animated.timing(progressAnim, {
-                toValue: 0,
-                duration: TOAST_TIMEOUT_MS,
-                useNativeDriver: false,
-            }).start();
-            timerRef.current = setTimeout(() => {
-                handleDismiss();
-            }, TOAST_TIMEOUT_MS);
-        }
-        return () => {
-            if (timerRef.current) {
-                clearTimeout(timerRef.current);
-            }
-        };
-    }, [showUpdateToast, updateAvailable, latestNpmVersion, dismissed]);
-    const handleDismiss = () => {
-        react_native_1.Animated.parallel([
-            react_native_1.Animated.timing(opacityAnim, {
-                toValue: 0,
-                duration: 180,
-                useNativeDriver: true,
-            }),
-            react_native_1.Animated.timing(translateYAnim, {
-                toValue: 60,
-                duration: 180,
-                useNativeDriver: true,
-            }),
-        ]).start(() => {
-            setVisible(false);
-            setDismissed(true);
-        });
-    };
-    const handleCopyCommand = () => {
-        (0, helpers_1.copyToClipboard)('npm install react-native-inapp-inspector@latest', 'Install Command');
-        setCopied(true);
-        (0, toast_1.showToast)('Copied npm install command!');
-        setTimeout(() => {
-            setCopied(false);
-        }, 2000);
-    };
-    const handleOpenNpm = () => {
-        react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
-        handleDismiss();
-    };
-    if (typeof __DEV__ === 'undefined' || !__DEV__ || !showUpdateToast || !visible || !updateAvailable || !latestNpmVersion)
-        return null;
-    const progressWidth = progressAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0%', '100%'],
-    });
-    return (<react_native_1.Animated.View style={[
-            styles.container,
-            {
-                opacity: opacityAnim,
-                transform: [{ translateY: translateYAnim }],
-            },
-        ]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,i,o){o===void 0&&(o=i);var n=Object.getOwnPropertyDescriptor(e,i);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(t,o,n)}):(function(t,e,i,o){o===void 0&&(o=i),t[o]=e[i]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(i){var o=[];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(o[o.length]=n);return o},t(e)};return function(e){if(e&&e.__esModule)return e;var i={};if(e!=null)for(var o=t(e),n=0;n<o.length;n++)o[n]!=="default"&&__createBinding(i,e,o[n]);return __setModuleDefault(i,e),i}})();Object.defineProperty(exports,"__esModule",{value:!0}),exports.NpmUpdateToast=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),InspectorContext_1=require("./InspectorContext"),constants_1=require("../../constants"),NetworkIcons_1=require("../NetworkIcons"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),AppFonts_1=require("../../styles/AppFonts"),CloseSvg=({size:t=13,color:e="#94A3B8"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12"stroke={e}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
+  </react_native_svg_1.default>,CopySvg=({size:t=11,color:e="#94A3B8"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <react_native_svg_1.Path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </react_native_svg_1.default>,CheckSvg=({size:t=11,color:e="#10B981"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <react_native_svg_1.Path d="M20 6L9 17l-5-5"stroke={e}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
+  </react_native_svg_1.default>,ExternalLinkSvg=({size:t=11,color:e="#FFFFFF"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <react_native_svg_1.Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M15 3h6v6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M10 14L21 3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </react_native_svg_1.default>,TOAST_TIMEOUT_MS=7e3,NpmUpdateToast=()=>{const{updateAvailable:t,latestNpmVersion:e,showUpdateToast:i}=(0,InspectorContext_1.useInspector)(),[o,n]=(0,react_1.useState)(!1),[h,u]=(0,react_1.useState)(!1),[r,p]=(0,react_1.useState)(!1),a=(0,react_1.useRef)(new react_native_1.Animated.Value(60)).current,s=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,l=(0,react_1.useRef)(new react_native_1.Animated.Value(1)).current,c=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>(i&&t&&e&&!o&&(u(!0),react_native_1.Animated.parallel([react_native_1.Animated.spring(a,{toValue:0,friction:8,tension:40,useNativeDriver:!0}),react_native_1.Animated.timing(s,{toValue:1,duration:250,useNativeDriver:!0})]).start(),l.setValue(1),react_native_1.Animated.timing(l,{toValue:0,duration:TOAST_TIMEOUT_MS,useNativeDriver:!1}).start(),c.current=setTimeout(()=>{d()},TOAST_TIMEOUT_MS)),()=>{c.current&&clearTimeout(c.current)}),[i,t,e,o]);const d=()=>{react_native_1.Animated.parallel([react_native_1.Animated.timing(s,{toValue:0,duration:180,useNativeDriver:!0}),react_native_1.Animated.timing(a,{toValue:60,duration:180,useNativeDriver:!0})]).start(()=>{u(!1),n(!0)})},f=()=>{(0,helpers_1.copyToClipboard)("npm install react-native-inapp-inspector@latest","Install Command"),p(!0),(0,toast_1.showToast)("Copied npm install command!"),setTimeout(()=>{p(!1)},2e3)},_=()=>{react_native_1.Linking.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),d()};if(typeof __DEV__>"u"||!__DEV__||!i||!h||!t||!e)return null;const v=l.interpolate({inputRange:[0,1],outputRange:["0%","100%"]});return<react_native_1.Animated.View style={[styles.container,{opacity:s,transform:[{translateY:a}]}]}>
       <react_native_1.View style={styles.contentRow}>
         
         <react_native_1.View style={styles.npmIconContainer}>
-          <NetworkIcons_1.NpmIcon size={15} color="#CB3837"/>
+          <NetworkIcons_1.NpmIcon size={15}color="#CB3837"/>
         </react_native_1.View>
 
         
@@ -153,177 +21,36 @@ const NpmUpdateToast = () => {
           <react_native_1.View style={styles.titleRow}>
             <react_native_1.Text style={styles.titleText}>Update Available</react_native_1.Text>
             <react_native_1.View style={styles.versionPill}>
-              <react_native_1.Text style={styles.versionPillText}>v{latestNpmVersion}</react_native_1.Text>
+              <react_native_1.Text style={styles.versionPillText}>v{e}</react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
-          <react_native_1.Text style={styles.subtitleText} numberOfLines={1}>
+          <react_native_1.Text style={styles.subtitleText}numberOfLines={1}>
             Installed: v{constants_1.LIB_VERSION} • New version is ready
           </react_native_1.Text>
         </react_native_1.View>
 
         
-        <react_native_1.TouchableOpacity style={styles.copyButton} onPress={handleCopyCommand} hitSlop={6} activeOpacity={0.75}>
-          {copied ? <CheckSvg size={11} color="#10B981"/> : <CopySvg size={11} color="#94A3B8"/>}
-          <react_native_1.Text style={[styles.copyButtonText, copied && { color: '#10B981' }]}>
-            {copied ? 'Copied' : 'Copy'}
+        <react_native_1.TouchableOpacity style={styles.copyButton}onPress={f}hitSlop={6}activeOpacity={.75}>
+          {r?<CheckSvg size={11}color="#10B981"/>:<CopySvg size={11}color="#94A3B8"/>}
+          <react_native_1.Text style={[styles.copyButtonText,r&&{color:"#10B981"}]}>
+            {r?"Copied":"Copy"}
           </react_native_1.Text>
         </react_native_1.TouchableOpacity>
 
         
-        <react_native_1.TouchableOpacity style={styles.actionButton} onPress={handleOpenNpm} activeOpacity={0.8}>
+        <react_native_1.TouchableOpacity style={styles.actionButton}onPress={_}activeOpacity={.8}>
           <react_native_1.Text style={styles.actionButtonText}>View</react_native_1.Text>
-          <ExternalLinkSvg size={10} color="#FFFFFF"/>
+          <ExternalLinkSvg size={10}color="#FFFFFF"/>
         </react_native_1.TouchableOpacity>
 
         
-        <react_native_1.TouchableOpacity style={styles.closeButton} onPress={handleDismiss} hitSlop={8} activeOpacity={0.7}>
-          <CloseSvg size={12} color="#94A3B8"/>
+        <react_native_1.TouchableOpacity style={styles.closeButton}onPress={d}hitSlop={8}activeOpacity={.7}>
+          <CloseSvg size={12}color="#94A3B8"/>
         </react_native_1.TouchableOpacity>
       </react_native_1.View>
 
       
       <react_native_1.View style={styles.progressBarTrack}>
-        <react_native_1.Animated.View style={[styles.progressBarFill, { width: progressWidth }]}/>
+        <react_native_1.Animated.View style={[styles.progressBarFill,{width:v}]}/>
       </react_native_1.View>
-    </react_native_1.Animated.View>);
-};
-exports.NpmUpdateToast = NpmUpdateToast;
-const fontStack = {
-    fontFamily: AppFonts_1.AppFonts.interRegular,
-};
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        position: 'absolute',
-        bottom: 24,
-        left: 14,
-        right: 14,
-        backgroundColor: '#0F172A',
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: '#334155',
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 12 },
-        shadowOpacity: 0.4,
-        shadowRadius: 24,
-        elevation: 24,
-        overflow: 'hidden',
-        zIndex: 99999,
-    },
-    contentRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 11,
-        paddingHorizontal: 12,
-        gap: 8,
-    },
-    npmIconContainer: {
-        width: 32,
-        height: 32,
-        borderRadius: 9,
-        backgroundColor: '#FFFFFF',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderWidth: 1,
-        borderColor: '#E2E8F0',
-        flexShrink: 0,
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.15,
-        shadowRadius: 2,
-        elevation: 2,
-    },
-    textContainer: {
-        flex: 1,
-        minWidth: 0,
-    },
-    titleRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-    },
-    titleText: {
-        fontSize: 12.5,
-        fontWeight: '700',
-        color: '#F8FAFC',
-        letterSpacing: -0.2,
-        ...fontStack,
-    },
-    versionPill: {
-        backgroundColor: '#7C3AED33',
-        paddingHorizontal: 5.5,
-        paddingVertical: 1.5,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: '#8B5CF680',
-    },
-    versionPillText: {
-        fontSize: 10,
-        fontWeight: '700',
-        color: '#C4B5FD',
-        ...fontStack,
-    },
-    subtitleText: {
-        fontSize: 10.5,
-        color: '#94A3B8',
-        marginTop: 1,
-        ...fontStack,
-    },
-    copyButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3.5,
-        backgroundColor: '#1E293B',
-        paddingVertical: 5.5,
-        paddingHorizontal: 8,
-        borderRadius: 7,
-        borderWidth: 1,
-        borderColor: '#334155',
-        flexShrink: 0,
-    },
-    copyButtonText: {
-        fontSize: 10.5,
-        fontWeight: '600',
-        color: '#94A3B8',
-        ...fontStack,
-    },
-    actionButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3.5,
-        backgroundColor: '#7C3AED',
-        paddingVertical: 5.5,
-        paddingHorizontal: 9,
-        borderRadius: 7,
-        flexShrink: 0,
-        shadowColor: '#7C3AED',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.35,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    actionButtonText: {
-        fontSize: 11,
-        fontWeight: '700',
-        color: '#FFFFFF',
-        ...fontStack,
-    },
-    closeButton: {
-        width: 22,
-        height: 22,
-        borderRadius: 11,
-        backgroundColor: '#1E293B',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexShrink: 0,
-    },
-    progressBarTrack: {
-        height: 2.5,
-        width: '100%',
-        backgroundColor: '#1E293B',
-    },
-    progressBarFill: {
-        height: '100%',
-        backgroundColor: '#8B5CF6',
-    },
-});
-exports.default = exports.NpmUpdateToast;
+    </react_native_1.Animated.View>};exports.NpmUpdateToast=NpmUpdateToast;const fontStack={fontFamily:AppFonts_1.AppFonts.interRegular},styles=react_native_1.StyleSheet.create({container:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:"#0F172A",borderRadius:16,borderWidth:1,borderColor:"#334155",shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:24,overflow:"hidden",zIndex:99999},contentRow:{flexDirection:"row",alignItems:"center",paddingVertical:11,paddingHorizontal:12,gap:8},npmIconContainer:{width:32,height:32,borderRadius:9,backgroundColor:"#FFFFFF",justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:"#E2E8F0",flexShrink:0,shadowColor:"#000000",shadowOffset:{width:0,height:1},shadowOpacity:.15,shadowRadius:2,elevation:2},textContainer:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},titleText:{fontSize:12.5,fontWeight:"700",color:"#F8FAFC",letterSpacing:-.2,...fontStack},versionPill:{backgroundColor:"#7C3AED33",paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1,borderColor:"#8B5CF680"},versionPillText:{fontSize:10,fontWeight:"700",color:"#C4B5FD",...fontStack},subtitleText:{fontSize:10.5,color:"#94A3B8",marginTop:1,...fontStack},copyButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:"#1E293B",paddingVertical:5.5,paddingHorizontal:8,borderRadius:7,borderWidth:1,borderColor:"#334155",flexShrink:0},copyButtonText:{fontSize:10.5,fontWeight:"600",color:"#94A3B8",...fontStack},actionButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:"#7C3AED",paddingVertical:5.5,paddingHorizontal:9,borderRadius:7,flexShrink:0,shadowColor:"#7C3AED",shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:4,elevation:3},actionButtonText:{fontSize:11,fontWeight:"700",color:"#FFFFFF",...fontStack},closeButton:{width:22,height:22,borderRadius:11,backgroundColor:"#1E293B",justifyContent:"center",alignItems:"center",flexShrink:0},progressBarTrack:{height:2.5,width:"100%",backgroundColor:"#1E293B"},progressBarFill:{height:"100%",backgroundColor:"#8B5CF6"}});exports.default=exports.NpmUpdateToast;