♻ refactor(Overlay): merge code from BlazorComponent and refactor (#1763

)
masastack · Feb 29, 2024 · 1e7226a · 1e7226a
1 parent bcaee4f
commit 1e7226a
Show file tree

Hide file tree

Showing 16 changed files with 1,308 additions and 802 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/components/overlays/Advanced.razor b/docs/Masa.Blazor.Docs/Examples/components/overlays/Advanced.razor
@@ -16,17 +16,16 @@
                      Color="orange"
                      BackgroundColor="orange"
                      Hover
-                     Class="mr-2"></MRating>
+                     Class="mr-2">
+            </MRating>
             <span class="primary--text text-subtitle-2">64 Reviews</span>
         </MCardTitle>
 
-        <FadeTransition>
-            <ShowTransitionElement Value="@context.Hover" Class="text-center">
-                <MOverlay Contained Value="@context.Hover"
-                          Color="#036358">
-                    <MButton>See more info</MButton>
-                </MOverlay>
-            </ShowTransitionElement>
-        </FadeTransition>
+        <MOverlay Contained
+                  Value="@context.Hover"
+                  Class="text-center"
+                  Color="#036358">
+            <MButton>See more info</MButton>
+        </MOverlay>
     </MCard>
 </MHover>
diff --git a/src/Masa.Blazor/Components/Dialog/MDialog.cs b/src/Masa.Blazor/Components/Dialog/MDialog.cs
diff --git a/src/Masa.Blazor/Components/Dialog/MDialog.razor b/src/Masa.Blazor/Components/Dialog/MDialog.razor
@@ -0,0 +1,45 @@
+@namespace Masa.Blazor
+@inherits BBootable
+
+<CascadingValue Value="IsDark" Name="IsDark">
+
+    @ComputedActivatorContent
+
+    <CascadingValue Value="this" IsFixed>
+        <div class="@CssProvider.GetClass()"
+             style="@CssProvider.GetStyle()"
+             id="@Id"
+             @ref="Ref"
+             role="dialog">
+            @if (IsBooted)
+            {
+                <div class="@CssProvider.GetClass("content")"
+                     style="@CssProvider.GetStyle("content")"
+                     @onkeydown="@Keydown"
+                     @ref="@ContentRef"
+                     @attributes="@ContentAttrs">
+
+                    <Transition Name="@Transition">
+                        <ShowTransitionElement Value="@IsActive"
+                                               Class="@CssProvider.GetClass("innerContent")"
+                                               Style="@CssProvider.GetStyle("innerContent")"
+                                               ReferenceCaptureAction="r => DialogRef = r">
+                            @ChildContent
+                        </ShowTransitionElement>
+                    </Transition>
+
+                </div>
+
+                if (ShowOverlay)
+                {
+                    <MOverlay ScrimClass="@OverlayScrimClass"
+                              Value="@IsActive"
+                              ZIndex="@(ZIndex - 1)"
+                              @ref="Overlay">
+                    </MOverlay>
+                }
+            }
+        </div>
+    </CascadingValue>
+
+</CascadingValue>