@oliasoft-open-source/react-ui-library 5.2.2-beta-4 → 5.2.2-beta-5

package/dist/index.js

@@ -184615,46 +184615,99 @@ const VIEW_OPTIONS = [
   { value: SPLIT_VIEW, label: "Split View" },
   { value: UNIFIED_VIEW, label: "Unified View" }
 ];
+const getChangedKeys = (a2, b2, path2 = "") => {
+  const keys2 = /* @__PURE__ */ new Set([...Object.keys(a2 || {}), ...Object.keys(b2 || {})]);
+  const changes = [];
+  keys2.forEach((key2) => {
+    const valA = a2 == null ? void 0 : a2[key2];
+    const valB = b2 == null ? void 0 : b2[key2];
+    const fullPath = path2 ? `${path2}.${key2}` : key2;
+    if (typeof valA === "object" && typeof valB === "object") {
+      changes.push(...getChangedKeys(valA, valB, fullPath));
+    } else if (valA !== valB) {
+      changes.push(fullPath);
+    }
+  });
+  return changes;
+};
+const filterByChangedKeys = (data, changedKeys) => {
+  const filtered = {};
+  changedKeys.forEach((keyPath) => {
+    const parts = keyPath.split(".");
+    let current = filtered;
+    let source = data;
+    parts.forEach((part, idx) => {
+      if (idx === parts.length - 1) {
+        current[part] = source == null ? void 0 : source[part];
+      } else {
+        current[part] = current[part] || {};
+        current = current[part];
+        source = source == null ? void 0 : source[part];
+      }
+    });
+  });
+  return filtered;
+};
 const DiffViewer = ({
   oldJson,
   newJson,
   viewType = SPLIT_VIEW
 }) => {
   const [activeViewType, setActiveViewType] = useState(viewType);
+  const [showTrimmed, setShowTrimmed] = useState(true);
   useEffect(() => {
     setActiveViewType(viewType);
   }, [viewType]);
   const changeViewType = ({ target: { value } }) => {
     setActiveViewType(value);
   };
-  const oldJsonLines = oldJson.split("\n");
-  const newJsonLines = newJson.split("\n");
-  const added = Math.max(0, newJsonLines.length - oldJsonLines.length);
-  const removed = Math.max(0, oldJsonLines.length - newJsonLines.length);
+  const toggleTrimmed = () => setShowTrimmed((prev2) => !prev2);
+  const parsedOld = JSON.parse(oldJson || "{}");
+  const parsedNew = JSON.parse(newJson || "{}");
+  const changedKeys = getChangedKeys(parsedOld, parsedNew);
+  const trimmedOld = filterByChangedKeys(parsedOld, changedKeys);
+  const trimmedNew = filterByChangedKeys(parsedNew, changedKeys);
+  const added = Math.max(
+    0,
+    newJson.split("\n").length - oldJson.split("\n").length
+  );
+  const removed = Math.max(
+    0,
+    oldJson.split("\n").length - newJson.split("\n").length
+  );
   return /* @__PURE__ */ jsx(
     Card,
     {
       bordered: true,
-      heading: /* @__PURE__ */ jsxs(Flex, { gap: true, children: [
-        /* @__PURE__ */ jsx(Heading$2, { children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(Text$1, { success: true, children: [
-            "+",
-            added,
-            " "
-          ] }),
-          /* @__PURE__ */ jsxs(Text$1, { error: true, children: [
-            "-",
-            removed
-          ] })
-        ] }) }),
+      heading: /* @__PURE__ */ jsxs(Flex, { gap: true, justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: true, children: [
+          /* @__PURE__ */ jsx(Heading$2, { children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(Text$1, { success: true, children: [
+              "+",
+              added,
+              " "
+            ] }),
+            /* @__PURE__ */ jsxs(Text$1, { error: true, children: [
+              "-",
+              removed
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            RadioButton,
+            {
+              name: "viewType",
+              options: VIEW_OPTIONS,
+              value: activeViewType,
+              onChange: changeViewType,
+              inline: true
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          RadioButton,
+          Button$1,
           {
-            name: "viewType",
-            options: VIEW_OPTIONS,
-            value: activeViewType,
-            onChange: changeViewType,
-            inline: true
+            label: showTrimmed ? "Show Full JSON" : "Show Only Changes",
+            onClick: toggleTrimmed
           }
         )
       ] }),
@@ -184662,8 +184715,8 @@ const DiffViewer = ({
       children: /* @__PURE__ */ jsx(
         ReactJsonViewCompare,
         {
-          oldData: JSON.parse(oldJson),
-          newData: JSON.parse(newJson)
+          oldData: showTrimmed ? trimmedOld : parsedOld,
+          newData: showTrimmed ? trimmedNew : parsedNew
         }
       )
     }