🆕 feat(MPagination): Added MiniVariant MiniVariantChange and MobileBr…

…eakpoint
masastack · Aug 1, 2024 · 3e222a6 · 3e222a6
1 parent f8f18fd
commit 3e222a6
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 16 deletions.
diff --git a/src/Masa.Blazor/Components/Pagination/MPagination.razor b/src/Masa.Blazor/Components/Pagination/MPagination.razor
@@ -8,18 +8,29 @@
  <ul class="@_modifierBuilder.Add(Circle).Add(Disabled).AddTheme(IsDark, IndependentTheme)">
  @GenPaginationIcon(PaginationIconType.First)
 
- @foreach (var item in GetItems())
+ @if (prevMiniVariant)
  {
- <li>
- @if (item.IsT0)
- {
- <span class="@_block.Element("more")">@item</span>
- }
- else
- {
- @GenPaginationItem(item)
- }
- </li>
+ <div class="m-pagination__mini">
+ <span class="m-pagination__current">@Value</span>
+ <span class="m-pagination__separator">/</span>
+ <span class="m-pagination__total">@Length</span>
+ </div>
+ }
+ else
+ {
+ @foreach (var item in GetItems())
+ {
+ <li>
+ @if (item.IsT0)
+ {
+ <span class="@_block.Element("more")">@item</span>
+ }
+ else
+ {
+ @GenPaginationItem(item)
+ }
+ </li>
+ }
  }
 
  @GenPaginationIcon(PaginationIconType.Second)

diff --git a/src/Masa.Blazor/Components/Pagination/MPagination.razor.cs b/src/Masa.Blazor/Components/Pagination/MPagination.razor.cs
@@ -47,6 +47,25 @@ public partial class MPagination : MasaComponentBase
 
  [CascadingParameter(Name = "IsDark")] public bool CascadingIsDark { get; set; }
 
+ [Parameter, MasaApiParameter(false, "v1.7.0")]
+ public bool MiniVariant
+ {
+ get => GetValue<bool>(false);
+ set => SetValue(value);
+ }
+
+ [Parameter, MasaApiParameter(ReleasedOn = "v1.7.0")]
+ public EventCallback<bool> MiniVariantChanged { get; set; }
+
+ [Parameter, MasaApiParameter(600, "v1.7.0")]
+ public OneOf<Breakpoints, double> MobileBreakpoint
+ {
+ get => GetValue<OneOf<Breakpoints, double>>(600);
+ set => SetValue(value);
+ }
+
+ private bool prevMiniVariant;
+
  public bool IsDark
  {
  get
@@ -79,17 +98,25 @@ public bool IsDark
  private bool IndependentTheme =>
  (IsDirtyParameter(nameof(Dark)) && Dark) || (IsDirtyParameter(nameof(Light)) && Light);
 
+ protected override void OnParametersSet()
+ {
+ base.OnParametersSet();
+
 #if NET8_0_OR_GREATER
- protected override void OnParametersSet()
+ if (MasaBlazor.IsSsr && !IndependentTheme)
  {
- base.OnParametersSet();
+ CascadingIsDark = MasaBlazor.Theme.Dark;
+ }
+#endif
 
- if (MasaBlazor.IsSsr && !IndependentTheme)
+ if (IsDirtyParameter(nameof(MiniVariant)))
+ {
+ if (MiniVariant != prevMiniVariant)
  {
- CascadingIsDark = MasaBlazor.Theme.Dark;
+ prevMiniVariant = MiniVariant;
  }
  }
-#endif
+ }
 
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
@@ -280,4 +307,53 @@ protected override async ValueTask DisposeAsyncCore()
  {
  await IntersectJSModule.UnobserveAsync(Ref);
  }
+
+ protected override void OnInitialized()
+ {
+ MasaBlazor.WindowSizeChanged -= MasaBlazor_WindowSizeChanged;
+ MasaBlazor.WindowSizeChanged += MasaBlazor_WindowSizeChanged;
+ }
+
+ private async void MasaBlazor_WindowSizeChanged(object? sender, BreakpointChangedEventArgs e)
+ {
+ if (IsDirtyParameter(nameof(MiniVariant)))
+ {
+ return;
+ }
+
+ var isM = CalMobileBreakpoint();
+ if (isM != prevMiniVariant)
+ {
+ prevMiniVariant = isM;
+ if (MiniVariantChanged.HasDelegate)
+ {
+ await MiniVariantChanged.InvokeAsync(prevMiniVariant);
+ }
+ StateHasChanged();
+ }
+ }
+
+ private bool CalMobileBreakpoint() => CalMobileBreakpoint(MasaBlazor, MobileBreakpoint);
+
+ private static bool CalMobileBreakpoint(MasaBlazor masaBlazor, OneOf<Breakpoints, double> mbpParam)
+ {
+ var (width, mobile, name, mobileBreakpoint) = masaBlazor.Breakpoint;
+
+ if (width == 0)
+ {
+ return false;
+ }
+
+ if (mobileBreakpoint.Equals(mbpParam))
+ {
+ return mobile;
+ }
+
+ if (mbpParam.IsT1)
+ {
+ return width <= mbpParam.AsT1;
+ }
+
+ return name <= mbpParam.AsT0;
+ }
 }