WithStyle

beyaz · Jan 28, 2024 · 53a0336 · 53a0336
1 parent 4d1ddca
commit 53a0336
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 30 deletions.
diff --git a/ReactWithDotNet.WebSite/Components/ArrowUpDownIcon.cs b/ReactWithDotNet.WebSite/Components/ArrowUpDownIcon.cs
@@ -13,12 +13,12 @@ protected override Element render()
 
         if (IsArrowUp)
         {
-            return arrowDown.WithStyle([
+            return arrowDown+WithStyle([
                 Transform("rotate(-180deg)")
             ]);
         }
 
-        return arrowDown.WithStyle([
+        return arrowDown+WithStyle([
             Transform("rotate(0deg)")
         ]);
     }

diff --git a/ReactWithDotNet/Component.cs b/ReactWithDotNet/Component.cs
@@ -8,6 +8,8 @@ public abstract class ReactComponentBase : Element
     internal Func<Task<Element>> DesignerCustomizedRender;
 
     internal Style StyleForRootElement;
+
+    internal List<Style> classNameList;
 
     internal List<IModifier> Modifiers;
 

diff --git a/ReactWithDotNet/ElementSerializer.ToJsonMap.cs b/ReactWithDotNet/ElementSerializer.ToJsonMap.cs
@@ -321,7 +321,7 @@ public static async Task<IReadOnlyJsonMap> ToJsonMap(this Element element, Eleme
                         {
                             ModifyHelper.ProcessModifier(node.DotNetComponentRootElement, new StyleModifier(style => style.Import(reactPureComponent.StyleForRootElement)));
                         }
-
+                        
                         if (reactPureComponent.Modifiers is not null)
                         {
                             foreach (var modifier in reactPureComponent.Modifiers)
@@ -334,6 +334,18 @@ public static async Task<IReadOnlyJsonMap> ToJsonMap(this Element element, Eleme
                                 ModifyHelper.ProcessModifier(node.DotNetComponentRootElement, modifier);
                             }
                         }
+
+                        if (reactPureComponent.classNameList is not null)
+                        {
+                            foreach (var style in reactPureComponent.classNameList)
+                            {
+                                var response = ConvertStyleToCssClass(context, node, style, true, context.DynamicStyles.GetClassName);
+                                if (response.needToExport)
+                                {
+                                    ModifyHelper.ProcessModifier(node.DotNetComponentRootElement, ClassName(response.cssClassName));
+                                }
+                            }
+                        }
                     }
 
                     node.DotNetComponentRootNode = ConvertToNode(node.DotNetComponentRootElement);
@@ -474,7 +486,7 @@ public static async Task<IReadOnlyJsonMap> ToJsonMap(this Element element, Eleme
                             }
                         }
                     }
-
+                    
                     var getDerivedStateFromPropsMethodShouldInvoke = true;
                     if (getDerivedStateFromPropsMethodShouldInvoke)
                     {
@@ -514,6 +526,18 @@ public static async Task<IReadOnlyJsonMap> ToJsonMap(this Element element, Eleme
                                 ModifyHelper.ProcessModifier(node.DotNetComponentRootElement, modifier);
                             }
                         }
+
+                        if (reactStatefulComponent.classNameList is not null)
+                        {
+                            foreach (var style in reactStatefulComponent.classNameList)
+                            {
+                                var response = ConvertStyleToCssClass(context, node, style, true, context.DynamicStyles.GetClassName);
+                                if (response.needToExport)
+                                {
+                                    ModifyHelper.ProcessModifier(node.DotNetComponentRootElement, ClassName(response.cssClassName));
+                                }
+                            }
+                        }
                     }
 
                     reactStatefulComponent.ConvertReactEventsToTaskForEventBus();

diff --git a/ReactWithDotNet/HtmlElement.cs b/ReactWithDotNet/HtmlElement.cs
@@ -394,36 +394,42 @@ public static HtmlElementModifier Data(string dataName, long dataValue)
     ///     <br />
     ///     Example:
     ///     <code>
-    ///     arrowDown.WithStyle(new Style
+    ///     new ComponentX
     ///     {
-    ///        Transform("rotate(-180deg)")
-    ///     })
+    ///        WithStyle([
+    ///            Transition(nameof(Style.rotate), 400)
+    ///        ])
+    ///     }
     ///     </code>
     /// </summary>
-    public static TElement WithStyle<TElement>(this TElement element, Style cssBody) where TElement : HtmlElement
+    public static ElementModifier WithStyle(Style cssBody)
     {
-        (element.classNameList ??= []).Add(cssBody);
-
-        return element;
-    }
+        return new(modify);
+
+        void modify(Element element)
+        {
+            if (element is HtmlElement htmlElement)
+            {
+                (htmlElement.classNameList ??= []).Add(cssBody);
+
+                return;
+            }
+
+            if (element is PureComponent pureComponent)
+            {
+                (pureComponent.classNameList ??= []).Add(cssBody);
+
+                return;
+            }
+
+            if (element is ReactComponentBase component)
+            {
+                (component.classNameList ??= []).Add(cssBody);
+
+                return;
+            }
 
-    /// <summary>
-    ///     Automatically generates a css class then adds class name to element.
-    ///     <br />
-    ///     You can use transition css
-    ///     <br />
-    ///     Generated css class will be automatically remove when component destroyed.
-    ///     <br />
-    ///     Example:
-    ///     <code>
-    ///     arrowDown.WithStyle(new []
-    ///     {
-    ///        Transform("rotate(-180deg)")
-    ///     })
-    ///     </code>
-    /// </summary>
-    public static TElement WithStyle<TElement>(this TElement element, IEnumerable<StyleModifier> styleModifiers) where TElement : HtmlElement
-    {
-        return element.WithStyle(new(styleModifiers));
+            throw DeveloperException("WithStyle cannot be use with this type: " + element.GetType().FullName);
+        }
     }
 }
diff --git a/ReactWithDotNet/PureComponent.cs b/ReactWithDotNet/PureComponent.cs
@@ -14,6 +14,8 @@ public abstract class PureComponent : Element
     internal List<IModifier> Modifiers;
 
     internal Style StyleForRootElement;
+
+    internal List<Style> classNameList;
 
     [JsonIgnore]
     public Style style