Skip to content

Commit

Permalink
⚡ refactor: improve the performance (#680)
Browse files Browse the repository at this point in the history
  • Loading branch information
@capdiem
capdiem committed Jan 8, 2024
1 parent 321cc56 commit b0f68f8
Show file tree
Hide file tree
Showing 6 changed files with 240 additions and 226 deletions.
167 changes: 133 additions & 34 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,141 @@

@{
var disableAppOper = Value.MetaData.Situation == ExpansionMenuSituation.Preview || Value.MetaData.Situation == ExpansionMenuSituation.Favorite;
var indeterminate = Value.State == ExpansionMenuState.Indeterminate;
var appSelected = Value.State == ExpansionMenuState.Selected;
}
<div class="app" style="@GetIsDisplayStyle(!Value.Hidden)">
<MHover Disabled="disableAppOper" Class="masa-text-highlight-1 mb-0 d-flex justify-space-between">
<div @attributes="@context.Attrs" class="d-flex">
<span class="masa-text-2-2 d-inline-block text-truncate">
@Value.Name
</span>
@if (!disableAppOper)
<div class="app"
style="@GetIsDisplayStyle(!Value.Hidden)">
<div class="d-flex align-center mx-2 expansion-app @(indeterminate || appSelected ? "active" : null)">
<span class="masa-text-2-2 d-inline-block t ext-truncate">
@Value.Name
</span>
@if (!disableAppOper)
{
<MSpacer />

var icon = appSelected ? "mdi-check" : (indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline");

<MIcon Small
Color="primary"
OnClick="@ItemOperClick"
Style="height: 16px"
Class="@($"expansion-nav__action mdi {icon}")">
</MIcon>
}
</div>
<div Class="mt-4">
@foreach (var navGroup in Value.Children)
{
<div class="nav m-list--dense" style="background:white; @GetIsDisplayStyle(!navGroup.Hidden)">
@RenderNestNav(navGroup)
</div>
}
</div>
</div>

@code {

private RenderFragment RenderNestNav(ExpansionMenu menu) => __builder =>
{
@RenderNav(menu)

if (menu.Children.Count != 0)
{
foreach (var child in menu.Children)
{
<MSpacer />

var indeterminate = Value.State == ExpansionMenuState.Indeterminate;
var appSelected = Value.State == ExpansionMenuState.Selected;
if (!context.Hover && indeterminate)
{
<MIcon Small Class="mr-1" Color="primary">mdi-minus-box</MIcon>
}
<div class="d-flex" style="@GetIsDisplayStyle(context.Hover)">
<span class="masa-text-3-1">@T("SelectAll")</span>
<MSimpleCheckbox Color="primary"
Ripple="false"
Value="@(indeterminate || appSelected)"
ValueChanged="@ItemOperClick"
Indeterminate=indeterminate
Class="masa-icon-size-20"
Style="flex: none;margin-right: -4px;" />
</div>
@RenderNestNav(child)
}
</div>
</MHover>
<div Class="mt-4">
@foreach (var nav in Value.Children)
}
};

private RenderFragment RenderNav(ExpansionMenu menu) => __builder =>
{
<div class="nav m-list--dense" style="background:white; @GetIsDisplayStyle(!nav.Hidden)">
<ExpansionNavWrapper Value="nav" OnItemClick="OnItemClick" OnItemOperClick="OnItemOperClick"></ExpansionNavWrapper>
var indeterminate = menu.State == ExpansionMenuState.Indeterminate;
var selected = menu.State == ExpansionMenuState.Selected;
var isFavorite = menu.State == ExpansionMenuState.Favorite;

var classBuilder = new StringBuilder();
classBuilder.Append("expansion-nav ");
if (menu.Type == ExpansionMenuType.Element)
{
classBuilder.Append("expansion-element ");
}

if (menu.MetaData.Situation == ExpansionMenuSituation.Preview)
{
classBuilder.Append("preview ");
}

if (indeterminate || selected || isFavorite)
{
classBuilder.Append("active ");
}

// if (menu.Disabled)
// {
// classBuilder.Append("disabled ");
// }
<div class="@classBuilder.ToString()"
style="@GetIsDisplayStyle(!menu.Hidden)">
@if (menu.Type == ExpansionMenuType.Nav)
{
<a class="m-list-item theme--light @(menu.Disabled ? "m-list-item--disabled" : "") @GetClass(menu)"
@onclick="@(() => OnItemClick.InvokeAsync(menu))">
<div class="d-flex align-center full-width">
<div style="font-weight: 500; font-size: 14px; @(menu.State == ExpansionMenuState.Selected ? "color: #323D6F;" : "")">
@DT(menu.Name)
</div>
<MSpacer />
@if (menu.MetaData.Situation == ExpansionMenuSituation.Authorization)
{
var icon = selected ? "mdi-check" : (indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline");

<MIcon Small
Color="primary"
Class="@($"expansion-nav__action mdi {icon}")">
</MIcon>
}
else if (menu.MetaData.Situation == ExpansionMenuSituation.Favorite)
{
<MIcon Small
Color="@(isFavorite ? "#FFB547" : "")"
Class="expansion-nav__action"
OnClick="@(() => OnItemOperClick.InvokeAsync(menu))"
OnClickStopPropagation>
mdi-star
</MIcon>
}
</div>
</a>
}
else if (menu.Type == ExpansionMenuType.Element)
{
<div class="m-list-item theme--light @(menu.Disabled ? "m-list-item--disabled" : "") @GetClass(menu)"
style="@GetIsDisplayStyle(menu.MetaData.Situation == ExpansionMenuSituation.Authorization)"
@onclick="@(() => OnItemClick.InvokeAsync(menu))">
<div class="d-flex align-center full-width">
<div style="font-weight: 500; font-size: 14px; @(menu.State == ExpansionMenuState.Selected ? "color: #323D6F;" : "")">
@DT(menu.Name)
</div>
<MSpacer />
@if (!menu.Disabled && menu.MetaData.Situation == ExpansionMenuSituation.Authorization)
{
<MIcon Small
Color="primary"
Class="@($"expansion-nav__action mdi {(selected ? "mdi-check" : "mdi-checkbox-blank-outline")}")">
</MIcon>
}
</div>
</div>
}

@if (menu.GetNavDeep() == 0 && menu.Children.Any(child => !child.Hidden))
{
<div class="mx-2" data-count="@menu.Children.Count(child => !child.Hidden)" style="border: 1px dashed #E4E8F3;"></div>
}
</div>
}
</div>
</div>
};

}
28 changes: 28 additions & 0 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,32 @@ private async Task ItemOperClick()
{
await OnItemOperClick.InvokeAsync(Value);
}

private static string GetClass(ExpansionMenu menu)
{
var css = new string[3];
css[0] = "clear-before-opacity";

switch (menu.GetNavDeep())
{
case 0:
css[1] = "neutral-text-regular-secondary font-14-bold";
css[2] = "nav-item";
break;
case 1:
css[1] = "neutral-text-secondary font-14";
css[2] = "sub-nav-item";
break;
case 2:
css[1] = "neutral-text-secondary font-14";
css[2] = "action-item";
break;
default:
css[1] = "neutral-text-secondary font-14";
css[2] = "action-item2";
break;
}

return string.Join(" ", css);
}
}
107 changes: 0 additions & 107 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor
View file

This file was deleted.

70 changes: 0 additions & 70 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionNavWrapper.razor.cs
View file

This file was deleted.

Loading

0 comments on commit b0f68f8

Please sign in to comment.