dynamic styles refactored

beyaz · Jan 13, 2024 · 813b2f5 · 813b2f5
1 parent 47394f1
commit 813b2f5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 56 deletions.
diff --git a/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx b/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx
@@ -2692,50 +2692,44 @@ function ProcessDynamicCssClasses(dynamicStyles)
         return;
     }
 
-    let hasChange = false;
-
+    // remove all related css of component
     for (var key in dynamicStyles)
     {
         if (dynamicStyles.hasOwnProperty(key))
         {
             const cssSelector = key;
-            const cssBody = dynamicStyles[key];
 
-            let shouldInsert = true;
+            var componentUniqueIdentifier = GetComponentUniqueIdentifierFromCssSelector(cssSelector);
 
-            for (var i = 0; i < DynamicStyles.length; i++)
+            // remove all related css of component
+            for (let i = 0; i < DynamicStyles.length; i++)
             {
-                if (DynamicStyles[i].cssSelector === cssSelector)
+                if (DynamicStyles[i].componentUniqueIdentifier === componentUniqueIdentifier)
                 {
-                    if (DynamicStyles[i].cssBody === cssBody)
-                    {
-                        shouldInsert = false;
-                        break;
-                    }
-
-                    hasChange = true;
-                    DynamicStyles[i].cssBody = cssBody;
-                    break;
+                    DynamicStyles.splice(i, 1);
+                    i--;
                 }
             }
-
-            if (shouldInsert)
-            {
-                hasChange = true;
-
-                DynamicStyles.push({
-                    cssSelector: cssSelector,
-                    cssBody: cssBody,
-                    componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector)
-                });
-            }
         }
     }
 
-    if (hasChange)
+    // Add new records
+    for (var key in dynamicStyles)
     {
-        ApplyDynamicStylesToDom();
+        if (dynamicStyles.hasOwnProperty(key))
+        {
+            const cssSelector = key;
+            const cssBody = dynamicStyles[key];
+
+            DynamicStyles.push({
+                cssSelector: cssSelector,
+                cssBody: cssBody,
+                componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector)
+            });
+        }
     }
+
+    ApplyDynamicStylesToDom();
 }
 
 function ApplyDynamicStylesToDom()

diff --git a/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx b/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx
@@ -2692,50 +2692,44 @@ function ProcessDynamicCssClasses(dynamicStyles)
         return;
     }
 
-    let hasChange = false;
-
+    // remove all related css of component
     for (var key in dynamicStyles)
     {
         if (dynamicStyles.hasOwnProperty(key))
         {
             const cssSelector = key;
-            const cssBody = dynamicStyles[key];
 
-            let shouldInsert = true;
+            var componentUniqueIdentifier = GetComponentUniqueIdentifierFromCssSelector(cssSelector);
 
-            for (var i = 0; i < DynamicStyles.length; i++)
+            // remove all related css of component
+            for (let i = 0; i < DynamicStyles.length; i++)
             {
-                if (DynamicStyles[i].cssSelector === cssSelector)
+                if (DynamicStyles[i].componentUniqueIdentifier === componentUniqueIdentifier)
                 {
-                    if (DynamicStyles[i].cssBody === cssBody)
-                    {
-                        shouldInsert = false;
-                        break;
-                    }
-
-                    hasChange = true;
-                    DynamicStyles[i].cssBody = cssBody;
-                    break;
+                    DynamicStyles.splice(i, 1);
+                    i--;
                 }
             }
-
-            if (shouldInsert)
-            {
-                hasChange = true;
-
-                DynamicStyles.push({
-                    cssSelector: cssSelector,
-                    cssBody: cssBody,
-                    componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector)
-                });
-            }
         }
     }
 
-    if (hasChange)
+    // Add new records
+    for (var key in dynamicStyles)
     {
-        ApplyDynamicStylesToDom();
+        if (dynamicStyles.hasOwnProperty(key))
+        {
+            const cssSelector = key;
+            const cssBody = dynamicStyles[key];
+
+            DynamicStyles.push({
+                cssSelector: cssSelector,
+                cssBody: cssBody,
+                componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector)
+            });
+        }
     }
+
+    ApplyDynamicStylesToDom();
 }
 
 function ApplyDynamicStylesToDom()