Print selected values in terminal

Author: josydeleon

packages/react-native-query-devtool/assets/copy.png

@@ -0,0 +1,23 @@
+import React from "react";
+import { Image, Pressable, StyleSheet } from "react-native";
+
+const CopyButton: React.FC<{ onPress?: () => void }> = ({ onPress }) => {
+  return (
+    <Pressable onPress={onPress}>
+      <Image
+        source={require("../../../assets/copy.png")}
+        style={styles.container}
+      />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 14,
+    height: 14,
+    marginRight: 5,
+  },
+});
+
+export default CopyButton;

packages/react-native-query-devtool/src/components/CopyButton/index.tsx

@@ -1,22 +1,92 @@
-import React from 'react';
+import React, { ReactNode, useState } from "react";
 
-import { Text, View } from 'react-native';
+import { Text, View } from "react-native";
 
-import JSONTree from 'react-native-json-tree';
+import JSONTree from "react-native-json-tree";
+import getNodeValue from "../../utils/getNodeValue";
+import CopyButton from "../CopyButton";
 
-import theme from './treeTheme';
-import JSONTreeSearcheableProps from './types';
+import theme from "./treeTheme";
+import JSONTreeSearcheableProps from "./types";
 
-import { styles } from './styles';
+import { styles } from "./styles";
+import Toast from "../Toast";
 
 const JSONTreeSearcheable: React.FC<JSONTreeSearcheableProps> = ({
   data,
-  searchTerm = '',
+  searchTerm = "",
 }) => {
+  const [showToast, setShowToast] = useState(false);
+
+  const handleShowToast = () => {
+    setShowToast(true);
+
+    setTimeout(() => {
+      setShowToast(false);
+    }, 2000);
+  };
+
+  /**
+   * Returns a custom Text with the Copy Icon for Nodes
+   * @param {string} type - The type of the node.
+   * @param {any} data - The data of the node.
+   * @param {ReactNode} itemType - The React element representing the type of the node {} or [].
+   * @param {string | number | undefined} itemString - The string representation of the item.
+   * @returns {ReactNode} Text with the Copy Icon
+   */
+  const getItemStringRenderer = (
+    type: any,
+    data: any,
+    itemType: ReactNode,
+    itemString: string | number | undefined
+  ) => {
+    return (
+      <View style={styles.valueContainer}>
+        <Text style={styles.itemString}>
+          {itemType}
+          <Text>{` ${itemString}`}</Text>
+        </Text>
+
+        {type === "Object" || type === "Array" || type === "Iterable" ? (
+          <CopyButton
+            onPress={() => {
+              console.log("📋", JSON.stringify(data));
+              handleShowToast();
+            }}
+          />
+        ) : null}
+      </View>
+    );
+  };
+
+  /**
+   * Returns a custom Text with the Copy Icon for label values (Primitives)
+   * @param {string[]} keyPath - The key path for values.
+   * @param {unknown} nodeType - The type of the node.
+   * @returns {ReactNode} element containing the rendered custom Text with the Copy Icon for values.
+   */
+  const labelRenderer = (keyPath: string[], nodeType?: unknown) => {
+    return (
+      <View style={styles.valueContainer}>
+        {nodeType !== "Object" &&
+          nodeType !== "Array" &&
+          nodeType !== "Iterable" && (
+            <CopyButton
+              onPress={() => {
+                console.log("📋", getNodeValue(data, keyPath));
+                handleShowToast();
+              }}
+            />
+          )}
+        <Text style={styles.textStyle}>{`${keyPath[0]}:`}</Text>
+      </View>
+    );
+  };
+
   const valueRenderer = (value: string) => {
     if (!searchTerm.trim()) return value;
 
-    const regex = new RegExp(searchTerm, 'gi');
+    const regex = new RegExp(searchTerm, "gi");
     const parts = value.toString().split(regex);
 
     return parts.map((part, index) => (
@@ -34,14 +104,18 @@ const JSONTreeSearcheable: React.FC<JSONTreeSearcheableProps> = ({
         theme={{
           ...theme,
           valueLabel: {
-            fontWeight: 'bold',
-            fontFamily: 'Courier New',
+            fontWeight: "bold",
+            fontFamily: "Courier New",
           },
         }}
+        keyPath={["data"]}
         invertTheme={false}
-        // labelRenderer={labelRenderer}
-        valueRenderer={valueRenderer}
+        getItemString={getItemStringRenderer}
+        labelRenderer={labelRenderer}
+        // valueRenderer={valueRenderer}
       />
+
+      {showToast && <Toast message="Value was printed in your terminal" />}
     </View>
   );
 };

packages/react-native-query-devtool/src/components/JSONTreeSearcheable/index.tsx

@@ -1,10 +1,25 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet } from "react-native";
 
 export const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#0b1521',
+    backgroundColor: "#0b1521",
   },
   yellowBackground: {
-    backgroundColor: 'yellow',
+    backgroundColor: "yellow",
+  },
+  valueContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 3,
+  },
+  itemString: {
+    color: "#75715e",
+    marginRight: 5,
+    fontSize: 13,
+  },
+  textStyle: {
+    color: "white",
+    fontWeight: "bold",
+    fontFamily: "Courier New",
   },
 });

packages/react-native-query-devtool/src/components/JSONTreeSearcheable/styles.ts

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import { Text, StyleSheet, Animated } from "react-native";
+
+const Toast: React.FC<{ message: string; duration?: number }> = ({
+  message,
+  duration = 5000,
+}) => {
+  const [fadeAnim] = useState(new Animated.Value(0));
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+      useNativeDriver: true,
+    }).start(() => {
+      timeoutId = setTimeout(() => {
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: true,
+        }).start();
+      }, duration);
+    });
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [fadeAnim, duration]);
+
+  return (
+    <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
+      <Text style={styles.message}>{message}</Text>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 20,
+    left: 20,
+    right: 20,
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
+    borderRadius: 5,
+    padding: 10,
+  },
+  message: {
+    textAlign: "center",
+    color: "white",
+    fontWeight: "bold",
+    fontFamily: "Courier New",
+  },
+});
+
+export default Toast;

packages/react-native-query-devtool/src/components/Toast/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Retrieves the value from a nested object or array based on the provided key path
+ * @param {any} data - The root object or array from which to retrieve the value
+ * @param {string[]} keyPath - An array representing the path to the desired value
+ * @returns {any} The value located at the specified key path, or undefined
+ */
+function getNodeValue(data: any, keyPath: string[]) {
+  let value = data;
+
+  // This deletes the last `data` item of the array
+  const reversedKeyPath = keyPath.slice(0, -1).reverse();
+
+  for (const key of reversedKeyPath) {
+    if (typeof value[key] === "object") {
+      value = value[key];
+    } else {
+      return value[key];
+    }
+  }
+
+  return value;
+}
+
+export default getNodeValue;